Step 2: Designing the First View 

The layout of the first view is created in this step and a simple action is implemented. By clicking a button on the STARTVIEW, the user should be able to trigger navigation to the RESULTVIEW. To achieve this, the view requires an outbound plug. A suitable element must then be added to the layout of the view and connected to the outbound plug using a method call. An additional inbound plug ensures that navigation can be set up from the second to the first view.

The layout of the view also needs a field so that it can accept user input.

Procedure

       1.      Double-click on the name of your first view in the view node of the object list. This takes you automatically to the Layout tab page of your view. Make sure that the Workbench is in change mode.

       2.      Open the context menu of the ROOTUIELEMENTECONTAINER and choose Insert Element....

       3.      First, an element of the type label is to be inserted. Enter a suitable name for the element (such as "LABEL_1") and choose Label from the input help for the type line. Confirm the dialog box.

       4.      Open the context menu of the ROOTUIELEMENTECONTAINER again and choose Insert Element....

       5.      The next element is to be an input field, so enter a suitable name (such as "INPUT") and choose InputField from the list of element types. Confirm the dialog box.

       6.      Now select the element of the type Label in the element list below the ROOTUIELEMENTECONTAINER. The properties table for this element contains the line labelFor.

       7.      Open the input help for this line and choose the element of the type InputField, which you have just created. The element LABEL_1 is now bound to the input field.

       8.      Open the context menu of the ROOTUIELEMENTECONTAINER a third time, create a button with a suitable name (such as "BUTTON") in the same way, and save your work.

The required layout elements of the first view are now available; next you create the two plugs that are required.

       9.      Switch to the Outbound Plugs tab page and enter the name of the new plug (such as "OUT1") in the table. Save your changes.

   10.      Now switch to the Inbound Plugs tab page and enter the name of the new plug (such as "IN1") in the table. Save your work again.

Now that both the layout elements and the required plugs have been created, all that is missing is the link between the BUTTON button with the OUT1 outbound plug.

   11.      Switch back to the Layout tab page and select the BUTTON entry in the element hierarchy below the ROOTUIELEMENTECONTAINER. In the table below the hierarchy you have the option of maintaining the properties and linking the selected element.

   12.      First choose the text property and enter a suitable text (such as "Go!") in the Value row. This text will be displayed on the button later.

   13.      Below the Events header, choose the OnAction row. You must now create an action for this event, which calls the outbound plug of the view when you the Button button is chosen. Pressing the button on the far right-hand side of this row starts a create dialog for such an action. Enter a name for the new action (such as "GOTOOUT1") and then select the outbound plug via which the view should be exited when you press the Button button. As you have created only a dingle outbound plug for the view, only this one view is available for selection. Save your changes.

This automatically creates an ONACTIONGOTOOUT1 method for your new action, which is later called when the BUTTON button is pressed. Double-click the action you created in the table to be taken to an editor. The development environment has already generated the call of the outbound plug in the corresponding method, so you do not have to program it yourself here.

   14.      Save your changes.

Result

In this step, on the one hand you have assembled the simple layout of the first view of your application, and on the other hand you have ensured the navigability of the view by creating plugs. Furthermore, you have linked both of these to each other by linking the BUTTON interface element to a navigation call to an outbound plug of the view.

 WD_THIS is an instance of the current, local controller interface. It is specified by the Web Dynpro framework and does not have to be declared. For more information about Web Dynpro for ABAP, see WD_THIS and the Local Controller Interface in the programming manual.

 

The context of the view has not been considered up to now. It is therefore the subject of

Step 3: Context Mapping of the First View