How to create a menu and an area for content?

Vaadin 6 / 7 / 8
1

Hi, a am a newbie to vaadin, i am creating my pet project using vaadin. I spent some time on research but i wasn’t able to find an answer. I think my app will use single screen(view) for simplicity. I need one main menu in my app, and also i need an area wich will show a content based on what menu item user clicked. For example user clickis on profile and sees his profile, user clicks on messages and instead of profile he sees his messages instead of profile. What approach should i use to achieve this? Should i create several layouts in different html files and then assign a reference to some basic layout to them based on user clicks? Or may be there is some standard approach in vaadin to achieve this.

2

I recommend to read this chapter about Navigator concept from our book web page.

https://vaadin.com/docs/-/part/framework/advanced/advanced-navigator.html

3

Thanks, it looks that it is what i need!

4

I read about navigator but how can i display both my main menu and content layout?
@Override
protected void init(VaadinRequest vaadinRequest) {
menuView = new MenuViewImpl();
contentView = new ContentViewImpl();
navigator = new Navigator(this, contentView.content);
navigator.addView(“”, UserProfileViewImpl.class);
navigator.addView(“MenuView”, MenuViewImpl.class);
navigator.addView(“UserProfileView”, UserProfileViewImpl.class);
navigator.addView(“PrivateMessagesView”, PrivateMessagesViewImpl.class);

    menuView.profile.addClickListener(new Button.ClickListener() {
        @Override
        public void buttonClick(Button.ClickEvent clickEvent) {
            navigator.navigateTo("UserProfileView");
        }
    });
    menuView.chat.addClickListener(new Button.ClickListener() {
        @Override
        public void buttonClick(Button.ClickEvent clickEvent) {
            navigator.navigateTo("PrivateMessagesView");
        }
    });
    setContent(menuView);

for now i see only a menu, i wanted to see both menu and content area. But if i call setContent multiple times it seems that it works only one time (last). Addin component also doesn’t work because it seems that one component is always unclickable =(.

5

I would leave menu outside navigation. I.e. have mainlayout with sub layout for menu and another one for changing content and add the navigator only to the chaning content layout. This way navigation happens only in that layout and menu stays there. I assume you are trying to do something like that.

6

Again thank you for your advice, you helped a lot.