Layouts and layout elements

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

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