• Defining the Layout

• Adding widgets

• Setting the properties

• Changing the grid

When working with the ULC visual parts, you will work with three different kinds of parts:

• Box parts are used to define the overall layout. They define a grid of cells.
• Cell parts contain a single widget part and define how the widget is positioned inside its bounds. Cell parts are automatically created and deleted as needed. You only interact with them to change their settings.
• Widget parts represent Buttons, TextFields, Sliders, etc.

Note: when dealing with ULC visual parts, the cells keep track of the alignment of their widgets and not the widget's themselves.

When you create a ULC container part like a ULCShell, a Notebook page, or a GroupBox part it contains a single Cell. To define layout your first step is to insert a box part which defines the grid.

The ULC parts category provides three Box part variations:

• Box: the general grid layout. Initially, a box part has two rows and two columns.

• Vertical Box: a grid layout with a single column of two cells.

• Horizontal Box: a grid layout with a single row of two cells.

The layout of your part is then defined by either nesting box parts or by spanning the cells of a box part. Refer to the Managing Layout chapterfor a description of how to use Boxes to define layouts.

In a nested box and cells structure you need to be able to distinguish boxes from cells. To make this distinction more explicit the bounds of a box are indicated by a solid blue line and bounds of a cell by a dashed line.

Widgets are added by dropping them into cells. A cell can contain a single widget. Once dropped into a cell the widget is immediately resized according to the cell's alignment. When you add a widget to an already filled cell you replace its existing contents.

To reserve some fixed amount of white space in a layout drop a Filler part into a cell. A Filler has properties to define the minimum amount of white space it should take in both directions.

Box, Cell, and Widget parts have different properties which you set in their setting views.

You open the box settings view as usual by selecting 'Open Settings' from the pop-up menu of the box or by the part's default action. If you have a small margin it is easier to use the 'Open Box Settings' menu of the cell's pop-up menu. A Box part has the following properties:

• columns: the number of columns
• rows: the number of rows
• horizontalGap: the horizontal gap between the cells
• verticalGap: the vertical gap between the cells
• margin: the margin around the cells.

All cells have two properties to define the alignmentof their contained widget: horizontalAlignment: the horizontal alignment of the contained widget: Expand, Center, Left, Right.
verticalAlignment: the vertical alignment of the contained widget: Expand, Top, Bottom, Center.

You can change the alignment property of a cell in the following ways:

1. From the Cell's settings view.

2. From the Align submenu of the Cell's pop-up menu. To change the alignment of multiple cells, select them and use the Align submenu to change them.

Cells contained in a Grid Layout part have additional spanning properties which you can use to define cells which span over other cells.

• horizontalSpan: specifies the number of cells this cell spans horizontally.
• verticalSpan: specifies the number of cells this cell spans vertically.

The following figure shows how the parts and properties are presented in the Composition Editor.

The figure above shows a box which defines as three by three grid. There is both a cell which spans vertically and a cell which spans horizontally.

The arrows in an empty cell indicate how it will align its contents. An arrow is shown at every attachment point. For example, the top left cell has the alignment set to expand in both dimensions. If there is no attachment point then the cell will center the widget in the corresponding dimension.

In addition to changing the spanning with the spanning properties you can change it by direct manipulation with the blue grid handles. The grid handles are shown in the figure below. You can drag the grid handles either horizontally or vertically to span a cell.

You can change the dimensions of the initially defined grid in one of the following ways:

1. Change the number of rows and columns in the settings view of the Box part.

2. Add an individual row or column relative to a cell. You first select the cell part. The cell's pop-up menu provides a Row and Column submenu to add a row or column before or after the selected cell.

3. Delete a row or column. Select the cell in the row or column that you want to delete. Execute delete from the Row or Column submenu.