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	Enter your name here
labelFor	name
paddingTop	large
For the input field name
tooltip	Your name
value	<Leave this property blank. You will enter the value in the next step>
For the button go
text	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
text	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