Responsive Layout for CUBA Platform

Based on Responsive Layout Vaadin Add-on: https://github.com/JarekToro/responsive-layout

The add-on can be added to your project in one of the ways described below. Installation from the Marketplace is the simplest way. The last version of the add-on compatible with the used version of the platform will be installed. Also, you can install the add-on by coordinates choosing the required version of the add-on from the table.

In case you want to install the add-on by manual editing or by building from sources see the complete add-ons installation guide in CUBA Platform documentation.

1. Open your application in CUBA Studio. Check the latest version of CUBA Studio on the CUBA Platform site.
2. Go to CUBA -> Marketplace in the main menu.

3. Find the SW-responsive add-on there.

4. Click Install and apply the changes. The add-on corresponding to the used platform version will be installed.

1. Open your application in CUBA Studio. Check the latest version of CUBA Studio on the CUBA Platform site.
2. Go to CUBA -> Marketplace in the main menu.
3. Click the icon in the upper-right corner.

4. Paste the add-on coordinates in the corresponding field as follows:

org.strangeway.responsive:sw-responsive-global:<add-on version>

where <add-on version> is compatible with the used version of the CUBA platform.

5. Click Install and apply the changes. The add-on will be installed to your project.

Let's say you want to implement responsive dashboard in a screen.

First of all, add xmlns http://strangeway.org/xsd/responsive/sw-responsive.xsd reference to the screen XML:

<?xml version="1.0" encoding="UTF-8" standalone="no"?> <window xmlns="http://schemas.haulmont.com/cuba/window.xsd" caption="msg://caption" xmlns:swr="http://strangeway.org/xsd/responsive/sw-responsive.xsd" class="com.company.demo.web.screens.Dashboard" messagesPack="com.company.demo.web.screens"> <layout> </layout> </window>

The main UI component of the app component is ResponsiveLayout. Let's define one:

<swr:responsiveLayout width="100%"> </swr:responsiveLayout>

ResponsiveLauyout may contain only row components. We will have 2 rows in this example:

<swr:responsiveLayout width="100%"> <swr:row> </swr:row> <swr:row> </swr:row> </swr:responsiveLayout>

Each row may contain one or more columns:

<swr:responsiveLayout width="100%"> <swr:row> <swr:column> </swr:column> <swr:column> </swr:column> <swr:column> </swr:column> <swr:column> </swr:column> </swr:row> <swr:row> <swr:column> </swr:column> </swr:row> </swr:responsiveLayout>

Column elements define layout constraints for different resolutions:

<swr:column> <swr:content> <groupBox caption="Area" height="150px" width="100%"> <label stylename="big-number" align="MIDDLE_CENTER" value="541.382 km^2"/> </groupBox> </swr:content> <swr:display xs="12" sm="6" md="6" lg="3"/> </swr:column>

Here we set 12 columns width for XS resolution (mobile) and only 3 columns width for large resolutions (desktop).

Row elements have additional options, such as minHeight, maxHeight, shrink, grow, etc:

<swr:row stylename="map-row" margin="false" minHeight="50vh" grow="true"> <swr:column height="100%"> <swr:content> <browserFrame width="100%" height="100%"> <url url="https://en.wikipedia.org/wiki/Samara#/media/File:Outline_Map_of_Samara_Oblast.svg"/> </browserFrame> </swr:content> <swr:display xs="12" sm="12" md="12" lg="12"/> </swr:column> </swr:row>

Finally, we could create simple responsive dashboard:

See demo project: https://github.com/strangeway-org/sw-responsive-demo

See also the original docs on Grid System from Vaadin Add-on: https://github.com/JarekToro/responsive-layout/wiki/The-Grid-System