Documentation

(vaadin)

Responsive Layout Mode

This is an old revision of the document!


Our VaadinApp application frame has built-in responsive support. It changes padding/margin/font size and menu position dynamically - based on the current browser or device size.

If you want to know the current mode, simply check the launcher parameter Application.config.layoutMode. The value will be a string with following possible values: Mini, Small, Full. There is also an enum in WebMenu with the name LayoutMode.

The mini mode is used on smartphones because it shows the application menu as small bar at the top of the browser. You can show or hide the menu items with a button.

The small mode hides the text and only shows icons if available. If no icon is available, a shortened text will be shown instead of the full text.

The full mode ist the standard mode for desktop browsers.

If you want to change your UI if the mode has changed, simply use a resource listener:

launcher.eventResourceChanged(IWebConfiguration.PARAM_LAYOUTMODE).addListener(
    new IUIResourceListener()
    {
        @Override
        public void resourceChanged(ResourceEvent pEvent)
        {
            //update UI
        }
    });

The VaadinApp also adds extra stylesheets to the menu and screen area.

<div class="v-verticallayout v-layout v-vertical v-widget useroptions v-verticallayout-useroptions small 
            v-verticallayout-small shutter_p1_cc1 v-verticallayout-shutter_p1_cc1 v-has-width" 
     id="Shutter_P1_CC1" style="width: 100%;">

This style information could help you to create a unique user experience.

Simply check the style information in different layout modes, with developer tools of your browser.

This website uses cookies for visitor traffic analysis. By using the website, you agree with storing the cookies on your computer.More information