Part 1: Creating and Editing the "Search” View 

 

Once you have created a new Web Dynpro component for this exercise, you now need to add the first view to this component.

 Make sure that the Workbench is in change mode.

 

       1.      In the object list, select the top node, the component object entry. Use the right mouse button to open its context menu.

       2.      Choose Create ® View and in the following dialog, enter a name (such as “SEARCH”) for the new view. Confirm the dialog box. The Web Dynpro Explorer is now displayed in the editor area of the Workbench, and you have option of structuring the new view.

       3.      Use the context menu of the RootUIElementContainer to insert an element of type Group for the layout. In the element’s properties table, select the MatrixLayout layout.

       4.      Enter a height of 10 and a width of 40 in the properties table for this element.

       5.      For the element of type Group, an element of type Caption was automatically embedded which is intended to hold the group element’s header. Select the UI element Caption_1 in the element hierarchy of the view and then enter a suitable text in the properties table. Save the view.

This inserts the component into a new folder in the object list. The new view was stored in this folder.

       6.      In the element hierarchy of the view, select the element of type Group and open its context menu.

       7.      Insert two additional elements in the Group element: one of type Label and one of type Inputfield.

       8.      Select the element of type Label. In the element’s properties table, in the Layot Data line select the MatrixHeadData entry. Then enter a suitable text (“Please enter.....”) and declare the relationship to the Input Field element you just created (property: LabelFor).

       9.      Finally, create an element of type Button below the Group element, again using the context menu of the RootUIElementContainer. In the properties table, enter a text for this button (“Go!”) and save your view.

You now have to maintain a context for this view.

   10.      Switch to the Context tab page.

   11.      Select the Context root node of the context of the SEARCH view and open its context menu.

   12.      Choose Create ® Nodes.

   13.      Enter a name (such as “data”) for this node and choose the cardinality 1..1. Confirm the Create dialog.

   14.      Select the new node and open its context menu.

   15.      Using the Create using the Wizard context menu entry, create an attribute from the component of the SFLIGHT structure. Select the CARRID field from the structure.

   16.      Save the view and return to the Layout tab page.

   17.      Select the element of type Input Field. In the properties table of the element, click on the Binding button (far right) of the value line. An additional dialog box displays the hierarchical context of the SEARCH view. Select the CARRID you just created by double-clicking on it.

The value of the element of type Input Field is now bound to the context attribute CARRID.

You can display the view in the browser for initial testing purposes. Continue with

Part 2: Testing the First View