Building responsive websites with Java and Vaadin Flow

Responsive web design is an approach to building web applications that dynamically change the size or orientation of the visible elements for ideal viewing on viewports of various sizes. At various breakpoints (developer-defined numerical values of viewpoint dimensions), one may notice menus collapse, and images resize or even be replaced by text. While traditional CSS techniques can be applied to Vaadin applications, Vaadin Flow offers a few effective and straightforward approaches to achieving responsive design.

Layouts

One way to understand the Vaadin platform is to begin with its UI web components. Just as in modern web development, where HTML elements are the building blocks of the user interface, Vaadin web components are the equivalent for a Vaadin application. Organizing these components is accomplished with the use of Layouts. The two main Vaadin layout components are Vertical Layout and Horizontal Layout.

Vertical Layout and Horizontal Layout

Vertical Layout and Horizontal Layout are components in the Vaadin platform that arrange components either top to bottom or left to right. Both components come with the ability to position elements relative to unused space in a manner similar to flexbox — center, end, stretch, etc.

One responsive attribute that Flow offers applies to expanding. Through the use of the setFlexGrow() method on the layout component, the browser is instructed on how to handle child components when there is excess space in the container. In this way, the developer can design mobile-first, for instance, and accommodate mid-size, large, and extra-large viewport sizes by having the components or even columns expand horizontally, avoiding the awkward visual of bunched up components on one side or other of the screen.

@Route("/")
public class MainLayoutView extends VerticalLayout {
    private H2 viewTitle;
    public MainLayoutView() {
        var navbar =new HorizontalLayout(
                new Button("Button 1"),
                new Button("Button 2"),
                new Button("Button 3")
        );
        add (
                viewTitle = new H2("Layout Example"),
                navbar,
                new TextField("Title"),
                new TextField("Name"),
                new TextField("Em")
        );
    }
}

Form Layout

Form Layout is a Vaadin component that arranges child components in columns depending on the width of the screen. Accordingly, it can be considered a responsive component out of the box.

All that is required from the developer is to instantiate a FormLayout instance and pass any child components as arguments to the constructor. Alternatively, components can be added to an existing layout as well. This assumes that those child components have been defined as shown below.

@Route("form")
public class FormView extends FormLayout {
    public FormView() {
        Button button1 = new Button("Up", VaadinIcon.ARROW_UP.create());
        Button button2 = new Button("Down", VaadinIcon.ARROW_DOWN.create());
        Button button3 = new Button("Left", VaadinIcon.ARROW_LEFT.create());
        Button button4 = new Button("Right", VaadinIcon.ARROW_RIGHT.create());
        FormLayout formLayout = new FormLayout(button1, button2, button3, button4);
        add(formLayout);

App Layout

The design pattern of a clear header, navbar, and content is a common occurrence with many websites. Vaadin helps in this area by offering App Layout, a web component that generates a navbar (header), drawer (menu), and content area to which additional components can be added.

To further assist the developer, App Layout is responsive by default, adapting to various screen sizes and devices. The containers resize, and the menu collapses on smaller screens, keeping the view accessible and visually appealing. In the screenshots below, you can see the side drawer collapse and the text in the navbar wrap in the smaller viewport.

@Route("applayout")
public class AppLayoutView extends AppLayout {
    public AppLayoutView() {
        setPrimarySection(Section.DRAWER);
        H1 appName = new H1("App Layout View Example");
        Tab profileTab = new Tab("Profile");
        Tab teamTab = new Tab("Team");
        Tabs menuTabs = new Tabs(profileTab, teamTab);
        menuTabs.addSelectedChangeListener(event -> {
            Notification.show("Selected: " + event.getSelectedTab().getLabel());
        });
        addToNavbar(appName);
        addToDrawer(menuTabs);
    }
}

Additional approaches to responsive design

The Vaadin platform offers a few other techniques for facilitating responsive design. One is the Responsive class. Part of the Flow Component Charts package, Responsive provides the opportunity to set rules that apply to different screen or chart sizes with its setRules() method.

Another option is the Display class. Similar to media queries, Display (LumoUtility.Display.Breakpoint) provides a set of classes with styles to be used at certain viewport sizes. These classes are defined below.

Flexible wrapping is also available with Vaadin. Through the CssLayout component, you can facilitate components automatically wrapping around when they would otherwise spill over outside the container. The conditions are that the components you intend to wrap must have undefined or fixed width. Otherwise, you can implement the Responsive class with its makeResponsive() method, so as to take advantage of the full maximum width available and be adaptable to different screen sizes defined in your CSS media queries. In short, add the CssLayout and make it responsive.

CssLayout cssLayout = new CssLayout();
Responsive.makeResponsive(cssLayout);
// media queries defined in stylesheets per usual

Traditional CSS

Vaadin Flow serves static resources, including CSS files, from the frontend directory in your project. You can include global CSS files in this directory and reference them in your Java code. Vaadin Flow also provides the @CssImport annotation, which enables developers to link CSS files to their Java components or layouts directly. In this way, even though Flow is an “all-Java” framework, developers maintain the ability to utilize their traditional CSS knowledge and tools to achieve more granular control of their site’s responsive behavior.

Wrapping up

Clone our repository to explore the code examples featured in this blog. You’ll find we added a CombinedView, which displays the ideas above in a single view. For a comprehensive guide on implementing these practices, our Vaadin documentation is your go-to resource. Start enhancing your site’s responsiveness today.