Navigation

Navigating in App

Plain Vaadin application has no normal web page navigation (single page)

Views managed by navigator:

  • get a distinct URI fragment
  • so view and state can be bookmarked and go back/forward in browser
  • Navigation setup
    • Navigator
      • manage some View (interface) and give it a URL for bookmark
    • Constructor:
      • Navigator(UI, ComponentContainer)
      • Navigator(UI, SingleComponentContainer)
      • Navigator(UI ui, ViewDisplay display)
      • Navigator(UI ui, NavigationStateManager stateManager, ViewDisplay display)
    • View
      • can be registered with a name identification;
        • registered with navigator with addView()
        • then navigateTo()
      • or provided with a view provider (dynamic)
    • Navigator manages navigation in a
      • ComponentContainer (most layouts), or
      • SingleComponentContainer (UI, Panel, Window)
    • Navigator automatically sets the URI fragment
    • ViewProvider (interface) - can be registered to Navigator (addProvider())
      • ClassBasedViewProvider - dynamically create new instances of a specified view class based on view name
      • StaticViewProvider - returns an existing view instance based on name (is actually used by addView(), i.e. the default)
    • VIewChangeListener - can be added to Navigator
  • Implementing View
    • enter() method is called when
      • navigateTo()
      • application opened with the URI fragment associated with the view
public class StartView extends VerticalLayout implements View {
    public StartView() {
        setSizeFull();
        Button button = new Button("Go to Main View",
                new Button.ClickListener() {
            @Override
            public void buttonClick(ClickEvent event) {
                navigator.navigateTo(MAINVIEW);
            }
        });
        addComponent(button);
        setComponentAlignment(button, Alignment.MIDDLE_CENTER);
    }
    @Override
    public void enter(ViewChangeEvent event) {
        Notification.show("Welcome to the Animal Farm");
    }
}
  • URI fragment path
    • part after "#", used for within-UI URLs
    • "#!" indicate a stateful AJAX page
    • after view name, follow with "/" then fragment parameters, passed to enter() method of View
    • see example