Макет с меню + некоторый статический и переключаемый контент

Question

Моя цель - иметь пользовательский интерфейс, в котором есть меню слева, а рядом с ним - область содержимого. Меню должно быть видимым все время, и прокрутка области содержимого не должна прокручивать меню. В области области содержимого следует переключать и изменять в зависимости от того, что было выбрано в меню.

Однако вот часть, которая делает это сложным для меня: я также хочу, чтобы какое-то «статическое» содержимое в этой области оставалось неизменным независимо от того, какой вид пользователь выбрал в меню. В основном, я хочу, чтобы какой-то текст отображался в верхней части области содержимого, а также что-то под областью содержимого (однако это не должно отображаться постоянно, только если пользователь прокручивает область содержимого). Вот картина, которая, возможно, поможет понять, что я пытаюсь достичь:

Вот соответствующий код. В основном у меня есть 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); 
} 

Answer 1

Это было решено путем упаковки компонентов с правой стороны рядом с меню в компоненте панели.