Flex Layout Container

Official Content

Flex Layout container aims to offer more ways to lay out controls in a container even if the control size is unknown. Because of this, it offers more efficient ways to achieve responsive user interfaces than existing table containers.

Why being flex is important: The canonical sample

There are many simple cases where you don't know the control size because the size depends on the content of the control. The canonical sample is when you have for example several Textblocks to show in a row. The Width of the Textblocks depends on the captions of the controls, so depending on those captions all the text blocks can fit the screen width or not.

This case is impossible to model using tables because you don't know if you will show 2,3,4 or more text blocks in a row, so you can not specify the number of columns of the table. This is the perfect sample to use a Flex Layout, then the text blocks will be shown in one, two or more rows depending on the size of each text block.

For example when you have some data like an address but using several attributes and you want to render something like:

Garcia Morales 1235 Zip 11300

You can drag and drop the attributes &Address, &Number, &ZipNumber, without giving width to each attribute because actually, you don't know the length of each data.

Note that using the Abstract layout each control in the table has a predefined width (given in percentage values), although it could be changed using your own Theme Classes. Through the Flex Table, it's the control size inside the cell which governs the column width. 
Additionally, using a Flex Table you are not forced to a maximum of n (e.g. 12) columns in a row.

Check the browsers support for this feature.

How to use it?

Flex control is available from the toolbox in the same way as Canvas and Tables containers. 

image_201781314122_1_png

Flex Grid is a value for Control Type property (in Smart Devices) or Custom Render property (in Web). For Web, it's available for FreeStyleGrid controls only.

Notes

  • It does not exist "safe area" concept when designing apps using flex containers. For such reason, it is recommendable to use Expand Bounds property with 'None' value.

Availability

Available since GeneXus 15 upgrade 12

Flex Layout Properties

The Flex Table container became a standard for web interfaces, an also for smart devices. In GeneXus you have it in all platforms: Web and Smart Devices (Android, iOS). 

Was this page helpful?
What Is This?
Your feedback about this content is important. Let us know what you think.