Introduction to Responsive Web Design

Introduction

Responsive Web Design (RWD) is the name given to the set of technologies that allow developing web applications whose interface is adapted to the device used. In particular, it is essential that the interface can be adapted to the various screen sizes available.
 
ResponsiveWebDesign
Responsive Web Design

 
GeneXus has incorporated the possibility to generate applications with these features in version Evolution 3. To do so, several changes were made, including a new abstract editor to define the screens' Web Form and the possibility to generate conditional themes: themes with rules that determine how each class should look depending (among other things) on the size of the screen.
 
To learn more about these concepts, reading the GeneXus documentation on this topic is recommended. In the following sections contain an overview of the changes made to K2BTools to support this new type of Web Forms.
 

Screen Size Classification

Users may access a web application using a variety of devices. These devices are classified according to their screen size into four categories: Extra Small, Small, Medium, and Large. The runtime layout of the screen's components is determined by the category of the user's device screen.
 
The categories are defined as follows:
Category Screen Size Typical Use
Extra Small Width < 768px

SmartPhones

Small 768px <= Width < 992px Tablets
Medium 992px <= Width < 1200px Desktop
Large 1200px <= Width Desktop

New Properties

In the specification of patterns and the Web Panel Designer, several properties have been added that allow the developer to define how the generated interfaces have to be adapted to the size of the device used by the end user.

“Responsive Sizes” Properties

In some cases, when setting the behavior of an interface for smaller devices, the layout of the components on screen has to be changed. 

To do so, GeneXus has incorporated the concept of “Responsive Table”. They are special tables whose Layout can be changed according to the device size. To define these Layouts, the tables contain properties called “Responsive Sizes”. To learn more about how Responsive Tables work, click here

In K2BTools we've created properties similar to the previous ones in all the nodes containing plain attribute sections. The corresponding nodes are as follows: Attributes, Column, Columns, Filters, Group, Line Separator, and Tab.

These properties allow changing the final layout of the elements contained in the corresponding node for each one of the sizes available. The elements' default value is automatically calculated by K2BTools so that:

  1. In “Large”, “Medium”, and “Small” sizes, the layout will be equivalent to that generated with previous versions of K2BTools (considering the “NoSkip” properties).
  2. In the “Extra Small” size layout,  all the elements will be organized in a single column (1 element per row).

Example

There is an instance of TrnForm with the following structure:

ResponsiveSizesTrnFormExampleStructure
K2BTrnForm Instance


The layout generated (for the first section) will be as follows:

ResponsiveSizesTrnFormExampleDesktop ResponsiveSizesTrnFormExampleCellphone
Desktop view Cell phone view


Note:
This isn't the only way to change the position of the components generated by K2BTools. To determine the position of generic components (filters area, grid, paging, etc.), the layout object can be used as described in the section called Responsive Layout Objects.

"Show in X" Properties

These properties allow the developer to determine if certain components are visible or not in each screen size. Actions, Attributes and Variables contain these properties.

"Label Size" Properties

This property allows the developer to specify the proportion of the space allocated to a certain field that should be used to display the field's caption.