Designing a View Layout

Use

You can now start creating the layout for your user interface. You will add UI elements to the two views and then assign the appropriate element attributes.

Procedure

Designing a layout for the WelcomeCompView

If you have not already done so, launch the View Designer by double-clicking the WelcomeCompView in the graphical tool or the corresponding node in project structure.
Choose the Layout tab.

The Layout tab in the View Designer shows the WelcomeCompView with a predefined default text "Hello World !". Simultaneously, the Outline view displays a list of the UI elements included. All the UI elements are arranged under a root node and are represented in order in the tree in the layout. If you select a UI element in the Outline view or on the Layout tab, its associated element properties are shown in the Properties view - provided you have previously selected the Properties tab.

Choose the root element RootElement in the Outline view and assign the following properties:

Property	Value
layout	GridLayout
cellPadding	5
colCount	3
stretchedHorizontally	false
stretchedVertically	false

Note

In some cases, you cannot change all the values for element properties by editing them directly in the associated Value column. The values are often predefined and can be selected from a dropdown box (to the right of the Value column).

Choose the DefaultTextView that was initially generated and give it the following properties:

Property	Value
design	header2
text	Welcome to your first Web Dynpro application!
colSpan	3

In the Outline view, select the root element RootElement and choose Apply Template from the context menu.
Choose Form and then Next .
In the next step select the checkbox for the username attribute and choose Next again.

Now a list (in this case just for the username attribute) is displayed, where you can adapt the Editors for the different attributes. Leave all proposals unchanged and confirm with Finish .

For the context attribute username an InputField and a Label is created, placed inside a TransparentContainer . The value property of the InputField is now bound to the context attribute username.
Select the TransparentContainer and assign the value 2 to the colCount property.
Select the label UI element and enter Enter your name here to the text property.
Select the RootElement and choose Insert Child from the context menu, followed by Button and Finish in the next screen.
Select the Button and assign the Go action to the onAction event. Additionally you can change the text property to Go .

The View Designer displays the following layout for the WelcomeCompView

Designing a layout for the ResultView

Now open the ResultView in the View Designer .
In the Outline view, select the DefaultTextView and change the text property to Hello .
Select Insert Child from the RootElement 's context menu and insert a TextView . Add a new TextView UI element .
Select this TextView and bind the text property to the context attribute username.

The View Designer displays the following layout for the ResultView: