Designing a View Layout

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

Prerequisites

You have created the necessary actions, Go and Back.

The structure of your Welcome project is currently displayed in the Web Dynpro Explorer.

Procedure

Designing a layout for the StartView

.

       1.      If you have not already done so, launch the View Designer by double-clicking the StartView node in the project structure.

The Layout tab in the View Designer shows the StartView with a predefined default text. 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 an 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 that is at the bottom of your screen. 

       2.      Choose the root element RootUIElementContainer in the Outline view and give it the following properties:

Property

Value

layout

GridLayout

cellPadding

5

colCount

3

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). Alternatively, you can access the predefined values using the arrow button and confirm the value chosen using Enter.

       3.      Choose the DefaultTextView that has been generated and give it the following properties:

Property

Value

design

header2

text

Welcome to your first Web Dynpro application.

colSpan

3

       4.      In the Outline view, select the root element RootUIElementContainer and choose Insert Child from the context menu.

       5.      Enter the Id label, choose the type Label; then choose Finish.

       6.      Create two other UI elements: name (with the type InputField); a Button with the Id go.

       7.      Assign the following property values to these new elements:

Property

Value

For the label label

text

Your name

labelFor

name

paddingTop

large

For the input field name

tooltip

Enter your name here

value

<Leave this property blank. You will enter the value in the next step>

For the button go

tooltip

Go to the next view

Event > onAction

Go

The View Designer displays the following layout for the StartView

Designing a layout for the ResultView

...

       1.      Now open the ResultView in the View Designer.

       2.      Choose the root element RootUIElementContainer in the Outline view and give it the following properties:

Property

Value

layout

GridLayout

cellPadding

5

colCount

2

       3.      Choose the DefaultTextView that has been generated and give it the following properties:

Property

Value

Design

header2

Text

Delete the generated default value and leave this property blank. You will find out how to populate this value using the data binding and will declare the value retrospectively in the next step.

colSpan

2

       4.      In the Outline view, select the root element RootUIElementContainer and choose Insert Child from the context menu.

       5.      Enter the name message, choose the type TextView; then choose Finish.

       6.      Create a button with the name back.

       7.      Assign the following property values:

Property

Value

For the TextView message

Text

Your application is running successfully.

paddingTop

large

For the button back

Tooltip

Go back to the first view

Event > onAction

Back

The View Designer displays the following layout for the ResultView:

       8.      Save the new metadata by choosing the icon  (Save All Metadata) from the toolbar.

Result

You have now developed the basic parts of your application successfully. Now you simply need to make sure that the value from the input field in the StartView is used when the welcome text is generated dynamically in the ResultView. However, you do not need implement a data transport explicitly. The Web Dynpro concept allows you to implement this in a user-friendly way, using data binding to a context.

Next step:

Defining Data Binding for UI Elements