Vaadin Basic Layout Questions

I am about to start my first Vaadin Project and after playing around with different layouts and combinations of it I am still not sure what the best approach for my basic layout is. I know this is not particularly Vaadin related but here it goes:

1, I would like to achieve something like the Demo Dashboard, a header section on the top, a menu section on the left with links/buttons and a content section (please see attachment)

2, When clicking buttons in the menu section the header and menu section should remain and only the content section should show the appropriate content

Any recommendations/best practises how to do that?
14035.jpg

Hi john doe,

I think there are three good ways.
At first you need a basic wrapper to handle your click events and change the content section.

The easiest way to solve your layout issue you can create a VerticalLayout and insert the header part and a second part. The second part is a HorizontalLayout with two components, the menu and the content. You can give the header and menu fixed widths and let expand your content part.

If you need to be more flexible you can create either a CssLayout or a CustomLayout.

I personally prefer the VerticalLayout/HorizontalLayout combination because you don’t have to bother something outside your Java universe.

Thank you.
I now tried the Layout combination und used setExpandRatio to achieve some sort of sizing.
How can I give the menu a fixed width since I can only set the width for the whole layout? I want something like “use 20% width for the first component and the rest for the second…”

Another question:
I know that the Vaadin Dashboard Demo is way to complex for a beginner but how can I achieve nice backgrounds and buttons like them? Are they using background images and images instead of buttons?

I figured out the background stuff but still struggeling with the buttons.
I’d like to have a transparent button with an icon and tried this:

but1.setStyleName(“menubutton”);

.menubutton{
background-image: url(‘img/home.png’); /* path to icon /
background-color: transparent; /
make the button transparent /
background-repeat: no-repeat; /
make the background image appear only once /
background-position: 10px 10px; /
equivalent to ‘top left’ /
border: none; /
assuming we don’t want any borders /
cursor: pointer; /
make the cursor like hovering over an element /
height: 64px; /
make this the size of your image /
padding-left: 16px; /
make text start to the right of the image /
vertical-align: middle; /
align the text vertically centered */
}

First I couldn’t see the icon at all, after adjusting the height I realized that the icon becomes visible but is still covered half way by the Java style button.
How can I only show the icon with a text below for example?

thanks

I now figured out how to do that:

[code]
.v-button{
background-image: url(‘img/home.png’); /* 16px x 16px /
background-color: transparent; /
make the button transparent /
background-repeat: no-repeat; /
make the background image appear only once /
background-position: 5px 0px; /
equivalent to ‘top left’ /
border: none; /
assuming we don’t want any borders /
cursor: pointer; /
make the cursor like hovering over an element /
height: 48px; /
make this the size of your image /
padding-top: 48px; /
make text start to the right of the image */
vertical-align: middle; /*align the text vertically centered */

}
.v-button-wrap{
background: transparent;
border: none;

}
.v-button-caption{
color: white;
}
[/code]The button actually consists out of 3 areas, the v-button which is the image area, the v-button-wrap which is the area around the text and the v-button-caption which is the actual text.

It now looks like the picture attached.

The problem now is that I dont want this CSS rules to apply system wide. If I add a style to my button (or layout)

but1.setStyleName("left"); and put it infront of my CSS rules its no longer working.

.left .v-button{ ... How can I restict these rules to a single button or layout?
I also have the problem that my button is getting messed up as soon as I click it.

14108.jpg

I now solved the problem:

but1.setStyleName("menu_but_home"); .v-button-menu_but_home { @include menu_but_home; } .v-button-menu_but_home .v-button-wrap{ background: transparent; } .v-button-menu_but_home .v-button-caption{ color: white; } .v-button-menu_but_home:focus { @include menu_but_home; } .v-button-menu_but_home:focus .v-button-wrap { background: transparent; } .v-button-menu_but_home:focus .v-button-caption{ color: white; } I don’t really understand why have to overwrite focus at this point, active is not working at all.

I have one more problem regarding zoom behaviour.
When zooming in with the browser all my individual elements get zoomed except my layout.

I used expandRatio to set the width for my horizontal layout.

[code]
HorizontalLayout mainHor = new HorizontalLayout();
mainHor.setSizeFull();
setContent(mainHor);

    VerticalLayout left = new VerticalLayout();
    left.setSizeFull();
    
    VerticalLayout right = new VerticalLayout();
    right.setSizeFull();
    
    mainHor.addComponent(left);
    mainHor.addComponent(right);
    mainHor.setExpandRatio(left, 1);
    mainHor.setExpandRatio(right, 10);

[/code]Is there any better way doing that regarding zoom?