How to create a menu and an area for content?

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.

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

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

Thanks, it looks that it is what i need!

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

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

I read about navigator and though i was able to make a menu and to switch between views for some reason only menu is active, content view is unclickable 

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

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

 

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 =(.

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.
 

Tatu Lund: 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.

Thanks for advice! finally i soleved my problems with this menu and content layout thanks to your advice, and i can continue developing my project! But now i really need one more advice. I am developing a comment's section, you know something similar to this wall of questions l http://ask.fm/id218563402 .Should i just programmaticly add labels with reply and like buttons to a horisontal layout display comments from data base? Or may be there is a better way, like using grid may be. Or table...or may be some other component?

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