Layout containers enable the developers to easily structure responsive forms. Servoy provides by default a Bootstrap 12-grid layouts package, but component developers can also add their own layouts.
WebLayouts are similar to WebComponents in the sense that they can be dragged on forms, with the difference that they are not AngularJS directives and do not provide any business logic. Their html markup is generated, so an html file is not needed either.
A Web Layout Container is comprised of a spec file and a json file:
It is worth to mention that the 'tagType' property is a bit more special. It is a top level property which specifies the default value for the tagType, but it can also be a model property. In this case, it shows in the properties view and the user is able to change its value.
The json config file is for the default properties (class="row") which are not changeable by the servoy developer (if the model area of the spec file doesn't specify them) but also for making composite layouts, so you can drop full structures at once.
For instance, the "row with 3 columns" layout is defined as follows:
In the following example, it is specified that the 'column' layout can contain any layout from the current package and any component except the one named or with layoutName "container".
We can also disallow adding any component with "excludes": ["component"]. However, if we want to allow all components but a specific one, then we need to use the "contains" property instead of "excludes", in which we enumerate all possible components that this layout accepts.
Missing "contains" and "excludes"
If both contains and excludes properties are missing from the layout spec file, then that layout will allow components as children.
More Examples on "contains" and "excludes" properties
The possible values of the "contains" property are illustrated in the table bellow, it can either contain everything "*" or it can be an array containing layout names or the string "component":
|Contains Values||Explanation||Example 12grid package||The Add menu|
|*||may contain any layouts from the current package and any components from any packages||"contains": ["*"]|
|may contain layout with name <layout_name> or with the layoutName property <layout_name> from the current package||"contains": ["container"]|
|component||may contain any components from any package||"contains": ["component"]|
|enummeration of <layoutName> and optionally component||may contain the enummerated layouts from the current package and components from any packages||"contains": ["row","container","component"]|
If a specific layout can contain everything except a few other layouts or it cannot contain components, then it is better to use the excludes property instead of contains:
|Excludes values||Explanation||Example 12grid package||The Add menu|
|<layoutName>||may contain any layouts from the current package and any components except the layout with name <layout_name> or with the layoutName property <layout_name>|
|component||may only contain layouts from the current package, excludes all components||"excludes":["component"]|
|enummeration of <layoutName> and optionally component||may contain all layouts from the current package except the ones enummerated; if components is specified, then the current layout cannot contain any components||"excludes": ["row","container","component"]|
Only one of the contains and excludes properties should be present in a layout specification.
If excludes is present, then contains will be ignored.
The designStyleClass property is used to express how the layout container is displayed in the Exploded view. The Exploded view makes the structure of layout containers more visible in the designer.
In the image below we have 3 rows: the first one is empty, the second one contains one column and the third contains 3 columns.
Let's take for instance the 12 grid Row layout container.
Therefore, when a responsive form is open in the Form editor and the Exploded view button is pressed, all rows have the rowDesign styleclass because we have specified it as the designStyleClass for layout containers of type 12 grid row.
The design style classes of all the layout containers in the package, should be defined in a css file on the package level.
The MANIFEST.MF of the layouts package should contain the paths to the CSS-DesignLibs.
To make the 12 grid row display like this in the Exploded View,
we need to add the following css rules to the 12grid_design.css:
The "tab" title contains the container type and the list of styleClasses defined for that particular layout container. The value of the svy-title attribute is automatically inserted in the DOM of the form editor for each instance of the layout container.
In the image above the blue border and the menu with possible actions are added because the row was selected in the editor. These is default style for any selected container, the designer of the layouts package does not need to define anything.
For a more complex structure, the user can configure how many levels of containers wants to display to have a better overview especially for very complex forms:
By default we show completely 3 levels of layout containers. The content of the first 3 levels of containers is shown, for the 4th level we notice there is a special icon with the number 3. This means that row has 3 children which are not visible in the current editor zoom level.
If the user wants to see the content of the row on the 4th level, they can increase the zoom level in the editor or zoom directly into the row container by pressing the "3 icon" (which becomes zoom on hover).
The designer of the layout package can add some rules in the design css by using .maxLevelDesign in conjunction with the design style class for that particular container (in our case .maxLevelDesign.rowDesign).
This is to avoid the containers to show too small and the tab title too large when in max zoom level. The rest of the styling for max level design is default css in the editor.