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

我的目标是让右边的内容区已在左侧菜单中的用户界面和它旁边。菜单应始终可见，滚动内容区域不应滚动菜单。在内容区域视图中应该是可切换的，并根据菜单中选择的内容进行更改。布局与菜单+一些静态和切换内容

但是这里的，使这个棘手的对我的一部分：我也想在保持相同的，无论什么查看菜单中选择用户这方面的一些“静态”的内容。基本上我想要在内容区域顶部显示一些文本，并且在内容区域下面也显示一些文本（但是，只有当用户向下滚动内容区域时，才会始终显示此内容）。这里有一张照片，也许有助于了解我想实现：

下面是相关的代码。基本上我有一个HorizontalLayout包含菜单和内容部分。内容部分是一个VerticalLayout，我试图堆积内容。这段代码目前的问题是内容部分不可滚动，如果有内容不适合用户的窗口，它就会被忽略并且无法访问。请注意，我正在查找的最终解决方案还必须具有可正常工作的菜单，这意味着即使用户滚动了内容区域，菜单也应保持可见并且完好无损。

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

实际的“根”布局创建代码。请注意，仅使用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); 
}

来源

2016-08-25 damnputer

在你的情况我不会用导航组件，但处理导航你的自我。然后，您只需更换contentArea的内容 –

开沟导航组件似乎对此问题没有任何影响。 – damnputer

您是否添加了代码来替换contentArea的内容？ –

这是通过将组件包装在面板组件右边的菜单旁边来解决的。

来源

2016-08-29 17:35:36 damnputer

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

回答

相关问题