Show TOC

Designing a View LayoutLocate this document in the navigation structure

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.

Note

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

Procedure


  1. In the Laptop UIexplorer , 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.

    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.

  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.

    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.

    Note

    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:

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

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