Important Notice - Forums is archived
To simplify things and help our users to be more productive, we have archived the current forum and focus our efforts on helping developers on Stack Overflow. You can post new questions on Stack Overflow or join our Discord channel.

Vaadin lets you build secure, UX-first PWAs entirely in Java.
Free ebook & tutorial.
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
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.