How to center horizontally a content in Vaadin

Hi

I'm a Java JSF web developer and new to Vaadin. I started to develop an application in Vaadin to learn it.
So, I have a simple page with fixed size (horizontalLayout for now) with some griids and butons and  I want to have it centered horizontally, if the screen is bigger. I tried with gridLayout (3,3) with my content in the middle, but did not work as expected. 
So, what is the easiest way (or the right way) to center a page or content in Vaadin.

And, second. What is the main difference between Layouts and Panel?

Thanks for your help.
Aleksander

If you have horizontalLayout or verticalLayout and component or set of components, which you want in the middle of the window you should set the component alignment from the parent layout component. So let us assume your parent layout component (the horizontalLayout) is "layout" the following should do the trick.

layout.setComponentAlignment(myComponent, Alignment.MIDDLE_CENTER);

Component "myComponent" will be placed now in the middle. If you have set of component, make myComponent a layout component with certain width and height and place you components there.
 

Hi Aleksander,

you can fix your problem by using setExpandRation:

parentLayout.addComponents(component1, component2, component3);
  parentLayout.setExpandRatio(component1, 0.36f);
  parentLayout.setExpandRatio(component2, 0.27f);
  parentLayout.setExpandRatio(component3, 0.36f);

Basic questions are almost always explained in the wiki.

https://vaadin.com/book/-/page/layout.orderedlayout.html

Hi
well, I solved my "little" problem, but now I have another one(s).
I really don't want to bother with trivial cuestions, but VAADIN is a bit diferent from JSF or swing programming and takes some time to adopt to it. I'm developing my first program in VAADIN. Also, often the examples of how to do something in VAADIN are not clear enough or complete.
How to use my sass theme I still don't get it.

I thought the valo is default theme, but seems not to be, because when I include @Theme("valo") annotation
it changed the design of my page completely, the grids desapered and so on.
I work with VAADIN 7.5.1.

I use netbeans 8.0.2
I want to include my theme. I created cnstema in web-inf/VAADIN/themes/cnstema.scc
I put in it:
@import "../reindeer/legacy-styles.css";

.v-app {
    background: yellow;
}

and
@Theme("cnstema") in the main class and VAADIN can't find my theme.

Tomcat says:
serveStaticResourcesInVAADIN Requested resource [/VAADIN/themes/cnstema/styles.css] not found from filesystem or through class loader. Add widgetset and/or theme JAR to your classpath or add files to WebContent/VAADIN folder.

VAADIN at generating the page throws this:
http://localhost:8080/CapitanNemoStock/VAADIN/themes/cnstema/styles.css?v=7.5.1 loadTheme @ vaadinBootstrap.js?v=7.5.1:34window.vaadin.window.vaadin.initApplication.bootstrapApp @ vaadinBootstrap.js?v=7.5.1:212window.vaadin.window.vaadin.initApplication @ vaadinBootstrap.js?v=7.5.1:237(anonymous function) @ (index):21

So, I really don't know what I'm doing wrong.
Thanks.
Aleksander
 

Hi Aleksander,

You have to compile the theme first. I don't know how it's done in Netbeans, but there's plenty of information on that.
Please open a new topic for each issue, you will get help quicker.
 

Hi,

Sorry, I don´t understand.FIrst, which theme i have to compile first? reindeer or my theme? 
And second, I have to compile from .scss to css, I suppose? But I don't understand, why?
my theme exist only as css file, and also reindeer theme as legacy-styles.css.

So, I'm confused.

Aleksander

I guess you should rename and move web-inf/VAADIN/themes/cnstema.css to web-inf/VAADIN/themes/cnstema/styles.css, should work that way.

No, this was my mistake. The path was(is) correct. Now I have in my file styless.scss

@import "../reindeer/reindeer.scss";

.cnstema {
  @include reindeer;
}
cnstema.v-app {
    background: yellow;
}

I understand now that this need to be compiled. But now I want to know how to include reindeer theme
into my styles.css theme without sass.

I couldn´t make it work java -cp '../../../WEB-INF/lib/*' com.vaadin.sass.SassCompiler styles.scss styles.css
I put between '...' the complete path 'E:\....' anyway the main class could not be found.
 

I managed sass compiler to work -:), but now i have another issues:
VAADIN "made me" compile every scss file from reindeer and base theme. I wonder if this is really necessary?

So, I copied to VAADIN/themes all the files sass compiler required and then this error occurr.
Error: Undefined operation: "none times -1".on line 409 of E:/Proyects/CapitanNemoStock/web/WEB-INF/VAADIN/themes/base/grid/grid.scss, in `base-grid'

.#{$primaryStyleName}-editor-footer {
    display: table;
    height: $v-grid-row-height;
    border-top: $v-grid-cell-horizontal-border;
    margin-top: nth($v-grid-cell-horizontal-border, 1) * -1; // line 409
    background: $v-grid-row-background-color; 
    padding: 0 5px;

    + .#{$primaryStyleName}-editor-cells > div {  // editor marks here an error "Unexpected Token" !!!
      border-bottom: none;
      border-top: $v-grid-cell-horizontal-border;
    }

    &:first-child {
      border-top: none;
      margin-top: 0;
      border-bottom: $v-grid-cell-horizontal-border;
      margin-bottom: nth($v-grid-cell-horizontal-border, 1) * -1;
    }
  }

I still would like to know how to use my theme including one of the VAADIN directly.
Thanks.

Aleksander