菜单布局+一些静态和可切换的内容

Question

我的 objective 是有一个 UI，它的左侧有一个菜单，右侧是内容区域。菜单应该始终可见，滚动内容区域不应滚动菜单。在内容区域中，视图应该是可切换的，并根据在菜单中选择的内容进行更改。

然而，这是让我感到棘手的部分：我还希望该区域中的某些 "static" 内容无论用户在菜单中选择何种视图都保持不变。基本上我想要一些文本显示在内容区域的顶部以及内容区域下面的一些文本（但是这不应该一直可见，只有当用户向下滚动内容区域时）。这是一张图片，可能有助于理解我想要实现的目标：

这是相关代码。基本上我有一个包含菜单和内容部分的 HorizontalLayout。内容部分是一个 VerticalLayout，我试图在其中堆积内容。此代码当前的问题是内容部分不可滚动，如果有不适合用户 window 的内容，它就会被排除在外并且无法访问。请注意，我正在寻找的最终解决方案还必须有一个正常工作的菜单，这意味着即使用户滚动内容区域，菜单也应该保持可见和完整。

@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;
}

实际的 "root" 布局创建代码。请注意，仅使用 setSizeUndefined() 并不是解决方案。它确实使内容区域可滚动，但破坏了菜单。

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);
}

Answer 1

这已通过将菜单右侧的组件包装在面板组件中解决。

菜单布局+一些静态和可切换的内容

Layout with menu + some static & switchable content

java

vaadin

vaadin7

vaadin-valo-theme