Flex Layout Container - Draft

Unofficial 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.

How to use it?

It is neccessary to create an empty file, named "flex.flag" in the Genexus install directory, and restart GeneXus.

Then, it is available from the toolbox in the same way of Canvas and Tables containers. 

image_201781314122_1_png

Flex Layout Properties

The Flexbox layout properties became a standard for web interfaces, our Flex Layout container bring the power of this kind of layout controls to all platforms: web and Android and iOS. Flex Container's properties:

  • FlexDirection property controls the direction in which children are laid out.
  • JustifyContent property describes how to align children within the main axis of a container.
  • FlexWrap property describes what happens when children overflow the size of the container along the main axis. 
    • When FlexWrap = Wrap 
      • Appears AlignContent property to control how multiple lines of content are aligned.
  • AlignItems property It similar to JustifyContent property but instead of applying to the main axis it applies to the cross axis.

Children of Flex Containers properties:

When some control is included as a child in a Flex Container some additional properties can be set on the control.

  • Flex Grow Property controls how much this child will grow if positive free space is available in the container.
  • Flex Shrink Property controls how much this child will shrink if negative free space is distributed.
  • Align Self Property controls the alignment along the cross axis. (Allow the to override the AlignItems property)
  • Width Property determines the width in dips or percentage of the control
    • Percentage unit is only valid when the FlexDirection = Rows or ReverseRows
  • Height Property determines the height in dips or percentage of the control
    • Percentage unit is only valid when the FlexDirection = Columns or ReverseColumns
  • Min Width & Min Height
    • These properties impose minimum values in dips for Width & Heigth. Control won't shrink less than the value specified.
  • Max Width & Max Height
    • These properties impose maximum values in dips for Width & Heigth. Control won't grow more than the value specified.

Availability

As of August 2017, this feature is in an experimental phase in GeneXus 16 (Tero), for Android and Web.