Designing a View Layout

Prerequisites

You have embedded the view (that you created) in the view set.

Context

You use this procedure to design the layout of a view (user interface) in the Mobile Project. To do this, you must add UI elements to the view, and then assign appropriate properties to these elements.

Procedure

In the Laptop UIexplorer , double-click the view element.
Choose the Layout tab.

The Layout tab in the View Designer displays the view with a predefined default text. In addition, the Outline view displays the list of UI elements that already exist in the view.

Note

The IDE organizes all the UI elements under a root node and displays them in a predefined order in the layout. When you select an element in the Outline view or Layout tab, you can view its associated properties in the Properties tab at the bottom of the screen.

Choose the root element RootUIElementContainer in the Outline view and enter the properties, as specified in the following table:

Property	Description	User action and values
Layout	The design layout of the view	Select the required layout, for example, GridLayout. Note Each layout type has its specific properties.
cellPadding	The space between the edge of the grid and its cells	Enter a numeric value, for example, `5.`
colCount	The number of columns in the grid	Enter a numeric value, for example, `3.`

Choose the DefaultTextView in the Outline view and enter the properties, as specified in the following table:

Property	Description	User action and values
Design	Style of the header text in the view	Select the required style, for example, header2.
Text	Header text of the view	Change the existing title that is initially set to the name of the view. For example, `Welcome Page.`
col span	Number of columns in the cell	Enter a numeric value, for example, `3.`

To create a UI element:

Click the root element RootUIElementContainer with the secondary mouse button and choose Insert Child.

Enter the properties for the new UI element, as specified in the following table:

Property

Description

User action and values

UI Element

UI type of the element

Select the required UI Element, for example, Label.

Name of the element

Enter a name, for example, Label1.

Choose Finish.

The IDE adds the new UI element under RootUIElementContainer in the Outline view. You can now change other properties of the element, as required.