Sven Ruppert

App-Layout Add-on for Flow, created by Johannes Goebel


In the previous part of the series, we looked at the App Layout by Vaadin. For simple web applications, this is a good choice. However, if we have requirements that go beyond the positioning of a menu bar, there are a few more feature-rich add-ons from the Vaadin Directory. Today we will take a closer look at the add-on by Johannes Goebel.


If you are looking for Vaadin add-ons, the search should start in the official Vaadin Directory. Here you will find all kinds of add-ons to the most different questions and requirements.

To get access via Maven to the add-ons hosted there, you have to specify the specific Vaadin repository in pom.xml.


After Maven has the new coordinates and has scanned the repository, you have the information in the IDE to use for example the AddOn discussed here or to declare it once in the pom.xml.


I refer here to the specified version. Since the add-on is under active development, it is worth checking to see if there is already another update.

The Layout

Last time we included the menu items at the top of the layout. This time we will position it at the edge of the left side, oriented from top to bottom. The basic framework that will be used here is based on the App-Layout component by Johannes Goebel.

In the previous part, we created a class named MainLayout. In this class, we have placed the definitions of the layout. If everything has been implemented neatly, then this class can be edited to use the new layout. The class MainLayout inherits this time from the class AppLayoutRouterLayout<LeftLayouts.LeftResponsiveHybrid>. As in the previous version, in the base classes, the one specific to each layout is implemented. The initialization takes place this time within the constructor.

The approach in this layout is again based on Flow’s RouterLayout concept. If you would like to read a little bit about the basic principles, I refer you to Documentation in the Learning Center.

In this case, the framework is generated by specialized builders and, after successful configuration, passed to the base implementation using the method init(AppLayout appLayout).

The primary builder is in class AppLayoutBuilder and the method get(..) returns an instance. The parameter of the AppLayoutBuilder.get -method determines the fundamental behavior of the layout. At the moment there are:

  • LEFT












  • TOP


Based on the name you can already see that there are two main groups. One group has the menu on the left, and the other group has the menu items at the top.

In this example, I use the behavior named LEFT_RESPONSIVE_HYBRID

 public MainLayout() {
   Image img = new Image(
     new StreamResource(LOGO_PNG,
                        () -> MainLayout.class.getResourceAsStream("/" + LOGO_PNG)),
     "Vaadin Logo"

   //app layout specific

   AppLayout appLayout = AppLayoutBuilder

The remaining methods of the builder are quite self-explanatory.
A unique point is still there if you want to put a logo.
If you use the method with the signature that accepts an instance of the class Image, you have to set the attribute *Height* to the value defined by *var(-app-layout-menu-button-height)*.
 == The Menu
The definition of a menu is not yet recognizable here and has previously been hidden by the method call *appMenu()*.
 [source, java]
 private Component appMenu() {
   return LeftAppMenuBuilder
       .add(getTranslation(ITM_DASHBOARD), DASHBOARD.create(), DashboardView.class)
       .add(getTranslation(ITM_PROFILE), USER.create(), ProfileView.class)
       .add(getTranslation(ITM_TRENDS), TRENDING_UP.create(), TrendsView.class)
       .add(new LeftClickableItem(getTranslation(ITM_LOGOUT), SIGN_OUT.create(), e -> {
         UI ui = UI.getCurrent();
         VaadinSession session = ui.getSession();
         session.setAttribute(SecurityService.User.class, null);

Again, there is a corresponding builder for the menu on the left. The class name is LeftAppMenuBuilder. Here is the first use in which we want to create a semantic equivalent to the example from the last blog only the method add relevant. Two versions of the method are used. The first version creates navigation targets that can be created from the same elements as the last time: an icon with a description translated by I18N and a navigation destination. The latter is done by specifying the class that has a route type annotation. The second version gets passed an instance of class LeftClickableItem. The necessary information differs only in the last parameter. Instead of a navigation target, an action is defined here that is to be executed. Here it is a log out of the logged in user and thus ending the session. To use the layout you have to assign the attribute layout with the class MainLayout to the involved views in the @Route Annotation.


The app layout used here has more features that have not been mentioned here. It’s worth exploring the examples of the project, which are very detailed. I would also like to emphasize that this is a responsive layout, which works quite well with the various end devices such as desktop, tablet or mobile phone. The example for this part can be found on GitHub at the following URL.

Vaadin is an open-source framework offering the fastest way to build web apps on Java backends

Comments (1)