Layout Suggestion and Bookmarking Tab


I’m new to Vaadin so please bear with me even if this is a simple question. I have a requirement to write a web application, it will be used by 500-800 users and will have a total of 15-20 pages/views. The layout is pretty common with a header and menubar to the top, content in the center and then a footer at the bottom. In the content there should be a fixed space to the left and right and the main details in the middle(a HorizontalLayout with 3 items of 10%,80% and 10%?). Most pages will have a TabSheet for the content while others will have just a regular panel

I have 2 problems with this setup:

  1. how do I set it up so that users can bookmark both pages from the MenuBar and from a tab?
  2. In the center I’m using a HorizontalLayout with a VerticalLayout on the left(10%) and then a Panel(80%) and then another VerticalLayout(10%). Why is there a huge space in between the left VerticalLayout and the Panel?

For the Menu bar I’m using the NavigableMenuBar used in the Book examples, so I could bookmark menu items. The question is how to add tabs to the navigator so that we could go directly to a tab

Here is the code for the mainlayout with the spacing issue

 HorizontalLayout contentLayout = new HorizontalLayout();
 VerticalLayout leftMarginLayout = new VerticalLayout();
 VerticalLayout rightMarginLayout = new VerticalLayout();
 Panel viewDisplay = new Panel();
 contentLayout.setExpandRatio(leftMarginLayout, .1f);
 contentLayout.setExpandRatio(viewDisplay, 1.0f);

Is it possible to just get a response for the layout issue? I’m really desperate to fix this

Thank you

Regarding your layout issues, it sounds like you are having trouble defining expand ratios. By default, the empty space in a layout is divided equally between all the components in the layout. Let’s say you have a horizontal layout whose width is 380px. You put three components in the layout, the widths of the components are 50px, 100px and 80px. The total width of the components are 230px, which means that there is an extra 150px that is not consumed by the components. This means that the extra 150px will be divided equally between the three components, so there will be 50px of “empty space” to the right of each component (with default alignment).

Setting an expand ratio alters the way the free space is divided between the componts, so lets say you define an expand ratio of “1” to the two first components and the expand ratio “3” to the third component. This means that the extra 150px will be divided with a ratio of 1:1:3, in other words 30px, 30px and 90px. This means, that there would be 30px extra space to the right of the two first components and 90px empty space right to the third component. My bet is that your empty space is caused by the expand ratios. See the
book of vaadin
for more details about expand ratios.

Regarding your content area, if you just want to have margins to the left and to the right of the actual content, use verticalLayout.setMargin(new MarginInfo(false, true, false, true)) to have margins to the left and to the right. You can use CSS to adjust the size of the margins.

Regarding navigation, I recommend you use
the navigator.
If you want to be able to bookmark, that a specific tab is selected in the tabsheet, I recommend doing this by using view parameters (see the above link for details). So, for example, when you want to bookmark a tab, then make the URI fragment something like this: #!myview/tab1. Tab1 would now be the parameter for your selected tab. When you receive the enter-event to your view, check the parameter for a selected tab and then programatically change the selected tab in the tabsheet.

When you want to change the URI fragment parameters without causing an enter event, do it through the Page object. Page.getCurrent().setUriFragment("!myview/tab1", false);