When designing an application, we want to ensure that our users will be able to get to the information quickly and comfortably no matter whether they are opening it on their desktop monitor, tablet or a mobile phone. The application design needs to be compatible with different screen resolutions and devises. For that reason, we use an Adaptive Layout component for our Lumira applications. This component is a responsive container. It consists of sub-containers called Blocks. This way the layout is split into fragments with content. Each fragment could be rearranged to fit our user interface (UI) for different scenarios.
To control these scenarios, the Adaptive Layout component provides a set of Viewport properties:
The Value is the minimum requirement for the screen’s width (in pixels). As a result, the device will use the widest Viewport for which it has met the minimum width value. In our example, everything wider than 1920px will be displayed using an Extra Large Viewport and similarly, everything under 640px will be displayed using a Small Viewport.
Every Viewport can be considered as a separate use case:
The main container is divided into 12 columns. Using a Horizontal Spacing Property will allow us to set the space between the columns. Each Block can have Colspan from 1 and up to 12 columns. When there is not enough space, the next block will be placed on a new row. In order to set the space between the rows, we use the Vertical Spacing Property.
Let’s look at the display properties. The Colspan value in each individual Block could be different for every Viewport. In other words, the width of the Block is a dynamic variable. If we talk about the Layout, we can see that the only layout property of the Block that can be set is the Height. Unfortunately, there is no scripting function you can use to set the value of the layout height.
When we´ve finished setting up our Blocks, the application will know automatically how to allocate them. For example, if we have 3 Blocks and the first 2 have each a Colspan of 6 (total 12), the third one will be placed below regardless of its Colspan. But if the total Colspan of the first 2 Blocks is, let’s say, 8 and the Colspan of the 3rd is 4 or below, all 3 Blocks will be placed on the same row.
Another interesting example is when the 1st Block is significantly higher than the others and the Colspan of each Block is equal to 6. In this case, the application will try to fit all components in as less space as possible. It will position them in 2 columns instead of 3 rows.
After this review of the Adaptive Layout component we could conclude that even with this flexible structure and resizable Blocks, the width is fixed depending on the display size, the colspan values, and the viewport value. At the same time, the height is something that we can control, although it’s a static value. We can still stack as many containers, on top of each other as we want and, yet we will have the optimal size for our components. To achieve this unlimited space, Lumira Designer provides us with the Scroll Container.
The properties of this component are like regular Panel Container plus properties for Behavior:
These properties allow us to turn on and off, individually, the horizontal and the vertical scroll bars.
The combination of Adaptive Layout with Scroll container allows the application to visualize a lot of components in one flexible and resizable structure.
Let’s remember, that when we have too much content on a single page, the user might get confused. The work with the application will be hard. It could lead to conflict between the layouts of different functionalities.
The better way would be to cluster and to encapsulate the content. Also, give quick access to the different clusters. For this purpose, we could simply use the Tabstrip container. A container with a special header in which we could select a Tab. The Tab is a sub-container that follows the layout of the Tabstrip. We can create, delete, enable and disable Tabs. Every Tab has a name, that we can set, and an index (the first index is 0). The Tabstrip has a property for the default selected Tab index and it can be adjusted.
A very interesting property of the Tabstrip is the “On Select” event. This allows the application to execute custom code On Select. Combining this with the native functions getSelectedTab() and getSelectedTabIndex(), we could execute different code, depending on the selected tab. For example:
if (TABSTRIP_1.getSelectedTabIndex() == 0){ APP_HEADER.setVisible(false); } else if (TABSTRIP_1.getSelectedTab() == "TAB_2"){ APP_FOOTER.setVisible(false); } else { APP_HEADER.setVisible(true); APP_FOOTER.setVisible(true); }
So far it was explained how Adaptive Layout can be created. How to extend its possibilities with Scroll Container and how to cluster the content, using Tabstrip. And now, we are going to talk about another component that is adaptive and can cluster our content – the Grid Layout.
At first, the Grid Layout looks like normal Panel container. But the Grid could be split into many sub-containers, called Cells. Unlike the Adaptive Layout, for the Grid, we create the Cells all together. We define the number of columns and rows in the grid. Then we can define what portion of the Grid width, every column takes. Respectively what portion of the Grid height, the row takes.
The main difference of the Grid Layout is that unlike the Adaptive Layout, the component has a flexible height. This 100% flexibility makes the Grid Layout perfect for framing the whole application. The displacement between the components is scaling with them. The height and width of all components are synchronized. Then why use the Adaptive Layout?
The width of the Blocks in the Adaptive Layout is flexible. But this flexibility is based on a dynamic set of preset static values. This means the Adaptive Layout could guarantee a minimum width – the perfect solution for size-sensitive content (like charts and graphs). For every other case, like placing a set of buttons, images, text, etc.… The Grid Layout is the easier and lighter solution.
Next time we are going to spend more time talking, about the Grid Layout container and also examine topics like nested Grids.
Comments