Nicolas Frankel is an IT consultant with 10 years experience in Java / JEE environments. He likes his job so much he writes technical articles on his blog and reviews technical books in his spare time. He also tries to find other geeks like him in universities, as a part-time lecturer. Nicolas is a DZone MVB and is not an employee of DZone and has posted 228 posts at DZone. You can read more from them at their website. View Full User Profile

Navigation basics in Vaadin 7

07.08.2012
| 12737 views |
  • submit to reddit

Vaadin implements the Single-Page Interface, meaning screen content can change but URL stays the same, as opposed to standard web application page navigation. Switching screen content is described in Use views, not windows. Given SPI and before Vaadin 7 alpha 3, however, the only way to link a set of content with an URL was to use the UriFragmentUtility component. With alpha 3, however, there's no need of such a component: all you need is to use the Navigator API.

The Navigation API is composed of three main classes:

  • The View interface lies at the root of the API. A view is an component (that should generally be a Component) that is managed by a Navigator.
    public class ViewLayout extends VerticalLayout implements View {
    
        ...
        
        @Override
        public void navigateTo(String fragmentParameters) {}
    }
    Note that the navigateTo() method is just a hook: if you don't need to do anything, just leave it empty as in the above example.
    On the contrary, you could use the method to add a specific content on the view, depending on the fragment i.e. using the same view class but setting components based on the fragment.
  • Next comes the ViewDisplay interface. This type is just a placeholder for a view to be displayed on. Navigator provides two implemetations: SimpleViewDisplay is a component that can be part of any container, while ComponentContainerViewDisplay is used internally and is a wrapper around a component container. In the latter case, just provide the container and the navigator takes care of the plumbing.
  • Finally, the Navigator component is basically a map with views as values. Keys are strings that are used to both store the view in the navigator and to access it through a URL fragment.
    Panel panel = new Panel();
    
    Navigator navigator = new Navigator(panel);
    
    navigator.addView("aview", new ViewLayout());
    Note that if you provide content for your initial panel but dont make it accessible as a view, users won't be able to access it after the initial display.

From this point on, there are two ways to access a view:

  • Programmatically, through the navigateTo() method of the navigator
    navigator.navigateTo("aview");
  • By setting the URL to the Vaadin servlet's URL plus the view's name as the fragment. For example, if the Vaadin servlet is mapped to /*, just adding #aview to the context root will display the view. You can of course provide such an hyperlink for the user to click on.

From this point on, you can manage views. In the next article, we'll handle view events and view providers.

Code for this article can be browsed and forked on Github.

From http://morevaadin.com/content/navigation-basics-vaadin-7

Published at DZone with permission of Nicolas Frankel, author and DZone MVB. (source)

(Note: Opinions expressed in this article and its replies are the opinions of their respective authors and not those of DZone, Inc.)

Tags: