Designing a View Layout  

Use

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.

For the list of UI elements supported by the SAP NetWeaver Mobile Client, see SAP Note 868578.

Prerequisites

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

Procedure

...

       1.      In the Laptop UI explorer, double-click the view element.

       2.      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.

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. 

       3.      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. 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.

You can edit the values of element properties as follows:

·         If there are no predefined values, then you can edit them directly in the associated Value column.

·         If there are predefined values, then you can select the required value from the dropdown list box (to the right of the Value column). Alternatively, you can click the value field and use Down-Arrow to navigate to the required value, and then choose Enter to confirm.

       4.      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.

       5.      To create a UI element:

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

                            b.      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.
Id	Name of the element	Enter a name, for example, Label1.

       6.      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.