Routing

New features

• Router handles navigation between different views in the application without reloading the page. The path of the browser's location is updated using the HTML5 History API – the URI fragment (#) is not used for navigation.
• <a> elements with a routerLink triggers internal navigation instead of making the browser reload the page with the new URL.
• RouterConfigurator is used to update the RouterConfiguration used by the application's Router. The configurator class to use for the application is defined with the routerConfigurator parameter in the @VaadinServletConfiguration annotation or through web.xml.
• RouterConfiguration.setRoute(String, Class<? extends View>) is used to configure a route (i.e. a path) for a view class.
• View.onLocationChange(LocationChangeEvent) is invoked for the used view when it's shown to the user for a specific URL.
• A route can contain placeholders, e.g. "product/{id}". The actual URL value used for the placeholder is accessible from LocationChangeEvent, e.g. event.getPathParameter("id").
• A route can end with a wildcard, e.g. "blog/*". The actual URL value used for the wildcard is accessible using LocationChangeEvent.getPathWildcard().
• A view can be configured to be shown inside a "parent view" that implements HasChildView, using either RouterConfiguration.setParentView(Class, Class) or as a third parameter to RouterConfiguration.setRoute.
  • This allows defining a common layout containing e.g. a header or a menu that is used for the actual views in the application.
• VaadinServlet uses only one URL and reserves /VAADIN/ for internal use. Everything else can be used for views of the actual site.
• The page has a <base href> so that relative URLs work even after navigating to some other location within the site.
• @Title can be used on a View class to make <title> update automatically when the view is shown.
  • For more control, the view can override View.getTitle(LocationChangeEvent) or the router can configured to use a custom PageTitleGenerator.
• It is no longer mandatory to have your own UI class.
• Add context:// as a special Vaadin protocol that is always relative to the context path where the app is deployed.
• Documentation has been restructured as task-focused tutorials instead a wall of description text.
• Element usability improved
  • Added Element.indexOfChild(Element).
  • Added Element.getChildren().
  • Various getters changed to return java.util.stream.Stream.
  • Helper in ClassList to toggle a class name
  • ElementFactory with static helpers for common elements

Fixes

• Inserting an element into a different position in its own parent now works.
• Replacing an element with itself is a no-op.
• Attempting to create loops in the element tree (i.e. adding a parent to its child) immediately throws instead of causing client-side exceptions
• ClassList properly handles empty class names.
• Page.addJavaScript and Page.addStyleSheet ignores duplicates.
• Directories are not served as static resources
• Text nodes can actually be removed from the DOM

New tutorials

• Application structure
  • Hello World
  • Including Style Sheets
• Element API
  • Element Properties and Attributes
  • Listening to User Events
  • Retrieving User Input
  • Dynamic Styling
• Routing and Views
  • Defining View Routes and Navigating
  • View Hierarchy and Nested Views
  • Using View Parameters
  • Updating Page Title on Navigation
• Misc
  • Executing JavaScript
  • The History API

All changes