An update to Vaadin, CDI and readable URIs

With version 8.3 of the Vaadin UI framework along with the official CDI addon for Vaadin, come a number of changes for CDI usage. Some enhancements were made for the CDI navigator and it is now possible to have nice readable and bookmarkable Urls in your vaadin application. I summed up the latest changes for CDI and navigator usage in this post.

In the post Use the Vaadin CDI Navigator to support bookmarks and browser navigation buttons I gave an example of how to use CDI and the CDINavigator for vaadin applications. I updated the sample project for this post with the latest features and created the branch:

https://bitbucket.org/mekaso/vaadin-cdi-mvp/branch/vaadin8.3cdi3

Here are the changes I needed to get the application running and use the latest vaadin features:

In the UI class you can inject a CDINavigator that is initialized in the init method (line 12). After this initialization you can @Inject the navigator in all your CDI capable classes.

The @PushStateNavigation annotation will create some readable URIs for our application when using the CDINavigator.

@CDIUI("")
@Title("A Vaadin MVP / CDI application")
@PushStateNavigation
public class MasterDetailUI extends UI {
  private static final long serialVersionUID = 1L;

  @Inject
  private CDINavigator navigator;
  
  @Override
  public void init(VaadinRequest request) {
    this.navigator.init(this, this);
  }
}

The view classes can be annotated with @CDIView. All classes that are annotated like this, will be registered to the CDINavigator automatically.

After selecting a person in a table, you can edit the user details on another view. When clicking the edit button, the navigator navigates to the details view and shows the selected person details by passing a person identifier to the details view (line 10).

@CDIView(value = "vaadin-cdi-mvp/")
public class MasterView extends CustomComponent implements View {
  @Inject
  private CDINavigator navigator;
...
  private void addViewBehaviour() {
    ...
    this.layout.getEditButton().addClickListener(event -> {
      Person selectedPerson = personGrid.getSelectedItems().stream().findFirst().get();
      this.navigator.navigateTo(Views.Detail.getRoute() + "/" + selectedPerson.getId());
    });
  }
}

This results in readable and perfectly bookmarkable URIs.

You can easily get the identifier of the selected person from the ViewChangeEvent.

@Override
public void enter(ViewChangeEvent event) {
  ...
  String personId = event.getParameters();
  this.editPersonEventLauncher.fire(new EditPersonEvent(personId));
}

That’s it. The readable and bookmarkable Urls are a big plus for real life projects and an important enhancement for the vaadin framework. At the moment I am writing this post there still seems to be a bug in the CDINavigator as I needed to add the context root of the servlet (“vaadin-cdi-mvp”) to every view name. Maybe this will change with a later version of the CDI addon for vaadin.