Designing the Layout of the Form View 

In the following step, you design the layout of the user interface used for the Eventing example application. You enhance the view layout of the Form view by a simple form used to enter an event parameter value, then you perform the data binding and bind the action SendButtonPressed to the button you want to use for sending an event.

Prerequisites

	You have created the SendButtonPressed action for the Form view.
	You have built the view context for the Form view.
	The structure of your project WebDynpro_Eventing is currently displayed in the Web Dynpro Explorer.

 

Procedure

The following describes how to design the layout of the Form view in the View Designer of the Web Dynpro tools. Afterwards, the view will look like this:

...

       1.      Open the Form view in the View Designer by choosing the Layout tab page. The View Designer displays a existing default text.

       2.      First, adapt the individual properties of the two existing UI elements:

Property	Value
For the root element RootUIElementContainer
Properties of TransparentContainer – layout	GridLayout
For the TextView element named  DefaultTextView
Properties of TextView – design	header1
Properties of TextView – text	Internal Web Dynpro Component
LayoutData – hAlign	center
LayoutData – paddingBottom	large

 

       3.      Add a Group UI element named FormGroup. To do this, go to the context menu and choose the entry InsertChildabove the root element RootUIElementContainer of the Outline. Make the following settings:

Property	Value
For the Group UI element FormGroup
Properties of Group – design	sapcolor
Properties of Group - layout	MatrixLayout
Properties of Group – width	70%
Properties of Group – scrollingMode	none
LayoutData – hAlign	center
For the Caption UI element  FormGroup_Header
Properties of Caption - text	Form

 

       4.      The input form for entering the event parameter consists of nothing but a label, the corresponding InputField and a button for triggering a server roundtrip, which triggers the event defined in the component interface controller. One by one, add other UI elements to the FormGroup Group UI element and perform the data binding of the input field to the Text value attribute.

Property	Value
Label ParameterLabel of type Label
Properties of Label – text	Event Parameter Value:
Input field ParameterInput of type InputField
Properties of InputField – value	Text You can start the wizard for data binding of a UI element property to a value attribute by pressing the  button at the right margin of the Value column in the Properties view.
Button SendButton of type Button
Properties of Button – text	Can remain empty because this text will be retrieved from the declared action event to which the button is bound.

 

Binding an Action to the onAction Event of the UI Element SendButton

Finally, you must bind the SendButtonPressed action that you created to the event onAction of the button UI element SendButton in order to trigger a server roundtrip for sending the entered e-mail message to the Web service.

       5.      To do this, make the following binding:

 

...

...

Property	Value
For the SendButton pushbutton of type Button
Event – onAction	SendButtonPressed

You bind the action to a UI element event using the selection list in the right column in the Properties view.

       6.      Save the new metadata by choosing  (Save All Metadata) in the toolbar.

 

 Now continue with Implementing Form View Controller and Interface Controller.