2016-08-25 1 views
0

私の目的は、左側にメニューがあり、右側にコンテンツエリアがあるようにすることです。メニューは常に表示され、コンテンツ領域をスクロールしてメニューをスクロールしないでください。コンテンツ領域ビューでは、メニューで選択した内容に基づいて切り替えて変更する必要があります。メニュー+静的で切り替え可能ないくつかのコンテンツのレイアウト

しかし、これは私には難しい部分です:私はまた、ユーザーがメニューで選択したビューに関係なく、同じ領域にある "静的な"コンテンツを必要とします。基本的に私はいくつかのテキストがコンテンツエリアの上に表示され、コンテンツエリアの下にも表示されることを望みます(ただし、ユーザーがコンテンツエリアを下にスクロールした場合のみ、常に表示する必要はありません)。

enter image description here

ここに関連するコードがあります:ここでは多分私が達成しようとしているかを理解するのに役立ちます絵です。基本的に私は、メニューとコンテンツセクションを含むHorizo​​ntalLayoutを持っています。コンテンツセクションは、コンテンツを積み重ねようとしている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()を使うことは解決策ではないことに注意してください。コンテンツ領域をスクロール可能にしますが、メニューを分割します。

+0

あなたのケースでは、Navigatorコンポーネントは使用しませんが、自分のナビゲーションを処理します。 contentAreaのコンテンツを置き換えるだけです –

+0

Navigatorコンポーネントを削除することは、この問題には何の影響も与えません。 – damnputer

+0

contentAreaのコンテンツを置き換えるコードを追加しましたか? –

答えて

0

これは、Panelコンポーネントのメニューの横の右側にコンポーネントをラップすることで解決しました。

関連する問題