Designing a View Layout 

In this step, you will design the user interface that is used for input and for sending the e-mail message. You enhance the view layout of the EmailFormView view to include the relevant user interface elements, such as labels and input fields. Then you perform the data binding between the UI element properties and the model attributes. Finally, you bind the SendEmail action to the button for sending the e-mail.

Prerequisites

 

·         You have created the SendEmail action for the EmailFormView view.

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

Procedure

Creating a layout for the EmailFormView view

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

       1.      Open the EmailFormView view in the View Designer by clicking the Layout tab.

       2.      The ViewDesigner displays a predefined default text. Simultaneously, the Outline view displays a list of the UI elements included. If you select an element in the Outline view or on the Layout tab, its associated element properties are shown in the Properties view.

       3.      First adapt the individual properties of the two already existing UI elements, as required.

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	Web Dynpro e-mail service
LayoutData – hAlign	center
LayoutData – paddingBottom	large

 

       4.      Add a Group UI element named EmailFormGroup. To do this, go to the context menu and choose the entry Insert Child above the root element RootUIElementContainer of the Outline. Make the following settings:

Property	Value
For the Group UI element EmailFormGroup
Properties of Group – design	sapcolor
Properties of Group – layout	MatrixLayout
Properties of Group – scrollingMode	none
Properties of Group – width	70%
LayoutData – hAlign	center
For the Caption UI element  EmailFormGroup_Header
Properties of Caption – text	Mail

 

       5.      The email input form consists of several pairs of LabelField and InputField UI elements as well as a button for sending the email message. Add further UI elements, one after another, to the Group UI element named EmailFormGroup:

Property	Value
Label FromLabel of type Label
Properties of Label – text	From:
Input field FromInput of type InputField
Label ToLabel of type Label
Properties of Label – text	To:
Properties of Label – layoutdata	MatrixHeadData
Input field ToInput of type InputField
Label SubjectLabel of type Label
Properties of Label – text	Subject:
Properties of Label – layoutdata	MatrixHeadData
Input field SubjectInput of type InputField
Label MessageLabel of type Label
Properties of Label – text	Message:
Properties of Label – layoutdata	MatrixHeadData
Properties of Label – valign	top
Text editor  MessageText of type TextEdit
Properties of TextEdit – cols	60
Properties of TextEdit – rows	8
Button SendButton of type Button
LayoutData – colSpan	2
Properties of Label – layoutdata	MatrixHeadData
LayoutData – hAlign	center

 

Defining a Data Binding to the View Context

The connection from the user interface elements to the business data referenced in the view controller context can now be set up easily using Data Binding.

...

       1.      To do this, make the following data binding connections between the UI element properties and the corresponding model attributes.

You can start the wizard for data binding of a UI element property to a context attribute by choosing the  button at the right margin of the Value column in the Properties view.

 

Property	Value
Input field FromInput of type InputField
Properties of InputField – value	WebServiceEmail.fromAddress
Input field ToInput of type InputField
Properties of InputField – value	WebServiceEmail.toAddress
Input field SubjectInput of type InputField
Properties of InputField – value	WebServiceEmail.aSubject
Text editor  MessageText of type TextEdit
Properties of TextEdit – value	WebServiceEmail.msgBody

 

Binding an action to the onAction event of the UI element SendButton

...

So that the email message (entered on the client side) can be sent to the Web service (on the server side) using the view controller, a server round trip must be triggered by the SendEmail action.  To do this, you bind the onAction event of the Button UI element SendButton to the action you have created, SendEmail.

       1.      To do this, create the following binding:

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

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

Next step:

Adding the Implementation for the Web Service Connection