Navigation with fixed MenuBar

Vaadin 6 / 7 / 8
1

Hi, i’m migrating an application from Vaadin 6 and i’m having some problems with the new navigation API. What i need to acomplish is similar to the navigation example in the new sampler, but the code is not complete. The example in the book of vaadin is complete but it doesn’t suit my needs.

So, the question is how do i keep my MenuBar on top, navigating through the views in a panel beneath? Because when i do navigateTo(someView) when an item is selected it places the new view instead of the menu.

Thanks in advance, and excuse my english.

2

Instead of changing the entire view you can replace the layout in your panel. You do that in the enter method of the view. This works for browser history and bookmarks.

example

	MenuBar.Command mycommand = new MenuBar.Command() {

public void menuSelected(MenuItem selectedItem) {

			UI.getCurrent().getNavigator()
					.navigateTo(MAINVIEW + "/" + selectedItem.getText());

}}

public void enter(ViewChangeEvent event) {
String param = event.getParameters();

	if ((param) != null) {

		if (param.equals("yourmenutext1")) {

yourPanel.setContent(content1); }

		else if (param.equals("yourmenutext2")) {

yourPanel.setContent(content2); }
}
// and so on
}

If there had been other selections inside the Panel you would have added them in the corresponding event listener to the uri like this:

currentPage.setUriFragment(“!” + MAINVIEW + “/” + stringWhateverState,
false);

false doesnt navigate where you already are but only sets fragment… and you have to put in the “!” by yourself, what i think vaadin should do but doesnt at the moment.

In the enter method you could then react to these additional parameters and switch to the state the user had bookmarked, for instance a selected tab in a tabsheet, a pressed button and so on.

Otherwise, if you still want to use one view for every state, you would have to build the menu in every such state and have the enter methods for every view, this would only be much more code with pretty much the same result regarding user experience.

3

Hi,
Thoma’s solution seems a bit complicated. It will be much easier to just tell the Navigator which ComponentContainer it should update when navigating. Something like this:


VerticalLayout rootLayout = new VerticalLayout();
MenuBar header = new MenuBar();
CssLayout contentLayout = new ContentLayout();

rootLayout.addComponents(header, contentLayout);

Navigator navigator = new Navigator(this, contentLayout);

You can then just call navigator.navigateTo(…) in your MenuBar commands.

4

Hi Marcus, I may miss something, but where is the difference to what I wrote?

5

Well you didn’t show your code in your post, but from the description I assume you have initialized your Navigator like so:

new Navigator(this, this)

The second
this
 refers to the component container that the Navigator will place the View content into. In my example I created a second layout underneath the MenuBar and initialized the Navigator to only replace the contents of that layout, not the entire UI.

If you have already done that, I may have misunderstood your question.

6

Ah ok, its just that I thought it might be easier not to have a separate view (and therefore separate enter method where to restore the state when bokkmarked) for every basic state.

7

Sorry, i had a problem with my forum user. I changed my email in profile and couldn’t login with either the old or the new mail address so i had to register a new user.

Thanks for the responses, i get the idea but i think i’m missing something. That layout with the menubar as header and another layout as content area should be added to my main view? If so, how do i navigate to that first view from my UI? with another navigator?

8

Hi, this post interest me. However, doing that way, suggest me a question. Assuming that we have a login view for the first step when a user arrive to the application, what happens with the menu bar on top? Will have the visitor access to the menu before authenticated?

9

I’m just designing something like that. Unless you provide a menu for unauthenticated users anyway, you want to hide the menu component when the user is not authenticated (eg. header.setVisible(false)).

10

@SuppressWarnings(“serial”)
public class contatovUI extends UI {

@WebServlet(value = “/*”, asyncSupported = true)
@VaadinServletConfiguration(productionMode = false, ui = contatovUI.class)
public static class Servlet extends VaadinServlet { }

@Override
protected void init(VaadinRequest request) {
setLocale(new Locale(“pt”, “BR”));

final VerticalLayout vlayout = new VerticalLayout();
final Label selection = new Label(“-”);

vlayout.setMargin(true);
setContent(vlayout);

MenuBar.Command mycommand = new MenuBar.Command() {
public void menuSelected(MenuItem selectedItem) {
selection.setValue(“Ordered a " +
selectedItem.getText() +
" from menu.”);
}
};

MenuBar menu = new MenuBar();
MenuItem mcadastro = menu.addItem(“Cadastro”, null, null);
MenuItem mutilitario = menu.addItem(“Utilitário”, null, null);
MenuItem mhelp = menu.addItem(“Help”, null, null);

mcadastro.addItem(“Municipios”, null, mycommand);
mcadastro.addItem(“Ocupações”, null, mycommand);
mcadastro.addItem(“Contatos”, null, mycommand);
mcadastro.addSeparator();
mcadastro.addItem(“Quit”, null, mycommand);

mhelp.addItem(“Sobre”, null, mycommand);

vlayout.addComponent(menu);
vlayout.addComponent(selection);
}