Layouts and layout elements

Owned by Michal Nawalany (Unlicensed)
Last updated: Nov 06, 2013 by Łukasz Poniewierski
2 min read

4. Layouts and layout elements

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>

Where:

  • 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

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

4.1. layouts

4.1.1. flowLayout

Flow layout puts its content one below another in top-down order.

basic options
none

additional options
none

4.1.2. verticalLayout

Vertical layout is currently the same as flow layout.

4.1.3. gridLayout

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

  • 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