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 SendEmailaction to the button for sending the e-mail.It is much easier to add an email input form if you use the Form-Template-Wizard.

Prerequisites

·         You have created the SendEmailaction for the EmailFormView view.

·         The structure of your project WebDynpro_EmailWSis 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 EmailFormViewview in the View Designer of the Web Dynpro tools.Afterwards, the view will look like this:

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

                            b.      The View Designer displays a existing 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.

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

 

                            d.      Add a Group UI element named EmailFormGroup. To do this, go to the context menu and choose the entry InsertChild above the root element RootUIElementContainerof 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

 

                            e.      The email input form consists of several pairs of Label and InputField UI elements as well as a button for sending the email message. This form can be added easily by using the Form-Template-Wizard for Web Dynpro tools in the view layout.

 

                            a.      In the view layout, select the UI element EmailFormGroup and then choose the entry Apply Template in the context menu.

                            b.      Choose the Form icon in the dialog box and then choose Next.

                            c.      Select the context node WebServiceEmail, as well as all context attributes contained in the node. The checkboxes Response and Result must not be checked:

                            d.      In the next step, change the order of the user interface elements (using the arrow keys) to fromAddress, toAddress, aSubject and msgBody.

                            e.      Select the editor TextEdit for the attribute msgBody and then press Finish.

                              f.      After that, change the text property for the individual Label-UI-elements to From, To, Subject and Message.

                            g.      Select the UI element msgBody_label and set its property LayoutData – vAlign to the value top.

                            h.      In the Group-UI element FormGroup, add a pushbutton und and carry out the stated settings.

Property	Value
Button SendButton of type Button
tooltip	Send Email
LayoutData - colSpan	2
Properties of Label – layoutdata	MatrixHeadData
LayoutData – hAlign	center

 

Data Binding to the View Context

Data binding between the UI elements in the email form and the corresponding context elements was already defined automatically during the previous step in the Form Template Wizard.

...

Binding Action to 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.

                            a.      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:

Creating Implementation for Web Service Connection