Responsive layoutMode

Information about development with Vaadin UI.

Responsive layoutMode

Postby Development@SIB » Thu Jan 15, 2015 6:31 pm

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:
Syntax: [ Download ] [ Hide ]
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, like small.
Syntax: [ Download ] [ Hide ]
<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.
User avatar
Development@SIB
 
Posts: 310
Joined: Mon Sep 28, 2009 1:54 pm

Return to Documentation