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