Search code examples
javavaadinvaadin7vaadin-valo-theme

Layout with menu + some static & switchable content

My objective is to have a UI that has a menu in left side and beside it on the right the content area. The menu should be visible all the time and scrolling the content area should not scroll the menu. In the content area view should be switchable and change based on what was selected in the menu.

However here's the part that makes this tricky for me: i also want some "static" content in that area that stays the same no matter what view the user selected in the menu. Basically i want some text displayed in top of the content area and also something under the content area (however this should not be visible all the time, only if user scrolls down the content area). Here's a picture that maybe helps to understand what i'm trying to achieve:

enter image description here

Here's the relevant code. Basically i have a HorizontalLayout that contains the menu and content section. Content section is a VerticalLayout where i'm trying to pile up the content. The current problem with this code is that the content section is not scrollable, if there's content that doesn't fit user's window it's just left out and is inaccessible. Note that the final solution i'm looking for must also have a menu that works correctly, meaning the menu should stay visible and intact even though user scrolls the content area.

@Theme("valo")
public class ValoThemeUI extends UI {
ValoMenuLayout root = new ValoMenuLayout();
ComponentContainer viewDisplay = root.getContentContainer();
CssLayout menu = new CssLayout();
CssLayout menuItemsLayout = new CssLayout();

private Navigator navigator;
private LinkedHashMap<String, String> menuItems = new LinkedHashMap<String, String>();

@Override
protected void init(VaadinRequest request) {
    setContent(root);
    root.setWidth("100%");
    root.addMenu(buildMenu());
    addStyleName(ValoTheme.UI_WITH_MENU);
    navigator = new Navigator(this, viewDisplay);
    navigator.addView("textfields", TextFields.class);

}

CssLayout buildMenu() {
    // Add items
    menuItemsLayout.setPrimaryStyleName("valo-menuitems");
    menu.addComponent(menuItemsLayout);

    Button b = new Button("Text Fields", new ClickListener() {
        @Override
        public void buttonClick(ClickEvent event) {
        }
    });
    b.setPrimaryStyleName(ValoTheme.MENU_ITEM);
    menuItemsLayout.addComponent(b);
    return menu;
}

The actual "root" layout creation code. Note that simply using setSizeUndefined() is not a solution. It does make the content area scrollable, but breaks the menu.

public class ValoMenuLayout extends HorizontalLayout {

CssLayout contentArea = new CssLayout();

CssLayout menuArea = new CssLayout();

public ValoMenuLayout() {
    setSizeFull();  //if this is setSizeUndefined it breaks the menu.

    VerticalLayout ver = new VerticalLayout();

    menuArea.setPrimaryStyleName(ValoTheme.MENU_ROOT);

    contentArea.setPrimaryStyleName("valo-content");
    contentArea.addStyleName("v-scrollable");
    contentArea.setSizeFull();

    ver.addComponent(new Label("yyyyyyyyyyyyyyyyy"));
    ver.addComponent(contentArea);
    ver.addComponent(new Label("xxxxxxxxxxxxx"));
    addComponents(menuArea, ver);
    setExpandRatio(ver, 1);
}

public ComponentContainer getContentContainer() {
    return contentArea;
}

public void addMenu(Component menu) {
    menu.addStyleName(ValoTheme.MENU_PART);
    menuArea.addComponent(menu);
}
Solution

  • This was solved by wrapping up the components on the right side beside the menu in a Panel component.