Page Comparison

...

4. Layouts and layout elements

TODO

Layouts are containers designed to help arrange component positions in view. Its definition is the same as normal component definition:

<component type="layoutType" name="componentName" basicOptions>

       // HERE YOU PUT LAYOUT CONTENT

       // HERE YOU PUT LAYOUT ADDITIONAL OPTIONS

</component>

...

• layoutType - is name of layout
• componentName - is an identifier of layout
• basicOptions - are options for layout as key="value"
• layout content - are normal inner component definitions

• additional options - layout addtional options in form

  Code Block
  <option type="optionType" value="optionValue" />

...

Grid layout arranges its components in grid-like structure. It is most common used layout in system.

• h6

  options

basic options

• columns - [integer] required attribute that defines number of columns in elements grid
• rows - [integer] required attribute that defines number of rows in elements grid
• fixedRowHeight - [true | false] optional attribute that defines if every row in grid has the same height. Default value is 'true'.
• hasBorders - [true | false] If 'false' - there is no vertical lines between elements grid columns. Default value is 'true'.

additional options
none

...

• content

Content of grid layout is defined as set of cells. Each cell is defined as:

<layoutElement column="columnNumber" row="rowNumber" width="cellWidth" height="cellHeight">

       // HERE YOU PUT CELL CONTENT

</layoutElement>

Where:

• columnNumber - number of cell column
• rowNumber - number of cell row
• cellWidth - [optional] width of cell (in columns). Default is "1".
• cellHeight - [optional] height of cell (in rows). Default is "1".

Cell content is a normal xml components definition.

4.1.4. borderLayout

Border layout creates border around its content components. Optionally it puts label in top-left corner of created border.

basic options
none

additional options

• label - [string] optional parameter that defines label in border

4.1.5. smallTabLayout

This layout agregates inner components in tabs.

basic options
none

additional options
none

• content

Content of small tab layout is defined as set of tabs. Each tab is defined as:

<tabElement name="tabName">

       // HERE YOU PUT TAB CONTENT

</tabElement>

Where:

• tabName - name of tab

Tab content is a normal xml components definition.

4.2. layout elements

4.2.1. separatorLine

Separator line is a simple horizontal line. Its definition matches pattern:

<component type="separatorLine" name="lineName" />

Where:

• lineName - name of line