Skip to content

Latest commit

 

History

History
71 lines (53 loc) · 3.2 KB

tutorial-routing.asciidoc

File metadata and controls

71 lines (53 loc) · 3.2 KB
Raw

Defining View Routes

The Routing API allows you to define a mapping between URLs and Views and handles navigation between Views without page reloads. Routes are specified on a service (servlet) level, i.e. the configuration is shared between all users. You can define your own RouterConfigurator class which provides the configuration using the @VaadinServletConfiguration annotation.

@WebServlet(urlPatterns = "/*", name = "MyServlet", asyncSupported = true)
@VaadinServletConfiguration(routerConfigurator = MyRouterConfigurator.class, productionMode = false)
public static class MyServlet extends VaadinServlet {
}

Your RouterConfigurator class needs to override one method, where the actual configuration takes place. You cannot modify the configuration outside this method or store the configuration instance for later use. This is make sure that the configuration is thread safe.

@Override
public void configure(ModifiableRouterConfiguration configuration) {
  configuration.setRoute("", HomeView.class);
  configuration.setRoute("company", CompanyView.class);
}

This will set up routing so that HomeView is used when the base URL (servlet path) is opened, e.g. http://mysite.com/ and CompanyView is used when /company is opened, e.g. using http://mysite.com/company.

Note
 Do not start routes with a / as the URLs are relative to the servlet path.

All views must implement the View interface and override one method: getElement(). This method must return the root element of the view and cannot be changed while the view is visible. The HomeView class could thus look like:

public class HomeView implements View {

    private Element element;

    public HomeView() {
        element = ElementFactory.createDiv("This is the home view");
    }

    @Override
    public Element getElement() {
        return element;
    }
}

Navigating Between Views

To navigate between views you can use standard <a href="company"> type links but these will cause a page reload. By adding a routerlink attribute to the link, you tell the framework that it should handle navigation without reloads, e.g. <a routerlink href="company">Go to the company page</a>. This way navigation only triggers a server visit to fetch the contents of the new view.

Using Java you can create router links using the helper method ElementFactory.createRouterLink(String href, String textContent).

To trigger navigation from the server side, use UI.navigateTo(String), where the string parameter is the location to navigate to, e.g. to navigate to the company view when clicking a button:

Element button = ElementFactory.createButton("Navigate to company");
button.addEventListener("click", e-> {
    UI.getCurrent().navigateTo("company");
});
Note
 Router links will work even if the session has expired so you should prefer to use those instead of handling navigation server side.

See also: