Enhanced Navigation in Vaadin with NavigationBuilder

Developing your navigation needs in default Vaadin is ok, but I thought it could be enhanced a bit. Hence the idea of creating a new addon, NavigationBuilder.

The Idea Behind the Addon

In fact there where multiple reasons why I wanted to create some additional navigation functionality. Chaining calls to build navigation actions seemed just right. With such an approach you can achieve incredibly readable code, when properly formatted.

Besides the readability and the need to create navigation calls in a unified way, I thought that navigation actions often provide good events to trigger your own custom code. An event-handling implementation seemed suitable.

The general purpose was to make it all easier and more accessible. I also wanted to bundle refresh, back and next actions in the implementation, as they are simply navigation calls.

Builder Approach

It seemed fairly logical to apply a builder-pattern in the library. Let’s crack on with a quick example.

NavigationUtils.navigate()
                .to("www.google.com")
                .inNewTab()
                .withListener(event1 -> 
                 LOGGER.trace("Navigating to external url in a new tab."))
                .go();

With the above formatting, the chained calls are easy to read. The opening method NavigationUtils.navigate(); provides us with the Builder object from which we’ll always start. In the example above we specify an external destination url and we tell the builder that we’ll want to open the link in a new tab. After that, we attached a listener that executed our own custom code (in this case a simple log output line). Calling .go(); will build our navigation action and perform it right away. Straight forward, right?

In fact, many calls are optional and can simply be left out. The action can also be stored in a variable for later execution. That would look something like the next example.

NavigateExecutor navigation = NavigationUtils.navigate()
                .to("http://thibaulthelsmoortel.be")
                .build();
navigation.perform();

This way you can prepare all the required actions beforehand and just perform them whenever needed.

Reduced Boilerplate

At the moment of writing boilerplate code can be slightly reduced. The NavigationUtil class contains a few methods with very common navigation needs pre-configured.

Here are a few examples of how you could use those pre-built actions.

NavigationUtils.createReloadNavigation().withListener(l -> System.out.println("Page reloaded!")).go(); // Adding a listener to the pre-configured navigation.
NavigationUtils.createBackNavigation().go(); // Go back one page in the browser history
NavigationUtils.createNextNavigation().go(); // Go one page forward in the browser history

In fact, that pretty much sums it all up for now. If you have additional ideas for expanding the project, feel free to share them. I will respond to questions and feedback in comments.

If you are experiencing issues, please file them on GitHub. They will all be looked at.

The addon’s version at the time of writing is 1.1.2. Note that the addon will get updated every so often, so be aware of changes.

Interested in other Vaadin stuff? You might as well read my latest Vaadin related article about loading animations.

Author: Thibault Helsmoortel

Belgian IT enthusiast with a wide range of interests. Enjoys table tennis and meeting friends at the local bar.

Leave a Reply