Multiple Layouts for Smart Devices

In different mobile devices and even in the same device I may want to use different designs. For example:

  • In a Tablet I may want to use one design and in a Phone I may want to use another design.
  • In an Android device I may want to use one design and a different design when using iOS, even though they have the same screen size.
  • In the same device I may want to use one design in Portrait mode and another one in Landscape mode.
  • In the same device I may want to use one design if I’m editing an entity and another one if I’m viewing it.

Multiple Layouts

GeneXus allows to have more than one design for the panel layouts, making them different for each platform, size, version and orientation combination. When creating an object, a default layout is created to be used for Any Platform, Any Size, Any Version and Any Orientation.

multiplelayouts1

Using the "Add Layout" button, new designs can be created.

MultipleLayouts- GeneXus 15

In this step, it is needed to choose which type of layout is being created, selecting the platform, size, version and orientation. Available combinations are :

Platform Size Version (Since xev2u4) Orientation
logoany Any Platform Any Size
Phone
Tablet 7"
Tablet 10"
The minor OS version Supported Any Orientation
Portrait
Landscape
logoandroid Android Any Size
Phone
Tablet 7"
Tablet 10"
The minor OS version Supported Any Orientation
Portrait
Landscape
logoios iOS Any Size
iPad
iPhone
The minor OS version Supported Any Orientation
Portrait
Landscape


Also, the new layout design can be initialized with the design of a previously created layout

multiplelayouts3

Selecting the "click here" option, the new layout design is created with the selected type and based on the selected template. Then, when working on the panel layouts design, each created layout can be selected in the bottom left corner of the screen to be edited.

MultipleLayouts4 GeneXus 15

Layouts by Mode

In the layouts of Details of Work With for Smart Devices objects, in addition to platform, size and orientation, we can define different layouts designs depending on the Mode (View and Edit)

MultipleLayouts2 GeneXus 15

 

See Also