Create_first_WDA

摘自SAP官网，实现了一遍，并整理成markdown笔记，例子超级基础，非常适合入门。
（http://help.sap.com/saphelp_nw70/helpdata/en/43/70d83e8cb23d67e10000000a114084/content.htm?frameset=/en/7b/67eaa71bdf2645be6e811eee980a04/frameset.htm&current_toc=/en/fc/501b42b5815133e10000000a155106/plain.htm&node_id=21）

附上markdown笔记地址，需要自取：http://pan.baidu.com/s/1b9FCq6 密码：5ock

Step 1: Creating and Editing a Component

In this step you first create a new component. To do this, call the Object Navigator and choose Web-Dynpro-Comp./Intf in the object list. Enter a new name for the component (such as “MYCOMPONENT”) on the search screen and click on Display. Leave the Web Dynpro component type selected, confirm the following Create dialog and then save the new component as a local object. Choose a different name for your component if an object already exists for the name that you selected.

The newly created component was automatically equipped with a few elements, so for example the component controller was created as well as an initial window. The context of the component controller will be visible for all views of this component, although it is currently empty.

procedure

1. Now double-click on the ComponentControllerobject of your new component. The Context tab page of the controller is automatically displayed, and you now have the option of defining a context. Make sure that the Workbench is in change mode.
2. Open the context menu of the Context root node and choose Create → Nodes.
3. Enter a name for the new node (such as “NODE1“) and confirm the dialog without worrying about the other criteria.
   The new node automatically appears below the root node, and you can now create an attribute for this node.
4. To do this, open the context menu of the new Context node and choose Create → Attribute.
5. Enter a name for the attribute (such as “MYNAME”) and in the same window, specify the type of the attribute with STRING.
6. Confirm the dialog again without worrying about the other criteria. Save your work.
   At the end of the first step, you should have created the two required views.
7. Open the context menu of your component and choose Create → View.
8. Give the first view a name (such as “STARTVIEW”) and confirm the window.
   As soon as you have saved your work, the Views node is inserted in the hierarchy of the object list below the component, and the STARTVIEW you have just created is stored there.
9. Open the context menu of the Views node and choose Create to add a second view.
10. Enter a name for the second view (such as “RESULTVIEW”) and confirm the creation process again. Then choose Save again.

result

The component you have created has a component controller, in whose context the MYNAME attribute was stored. This attribute is visible for each view of this component and can be changed by all controllers of the component. The component now also contains two views. Continue with

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.

Step 3: Context Mapping of the First View

In step 1 you created the NODE1 node with the MYNAME attribute in the context of the component controller. In this step, this context should first be made accessible to the first view.

Procedure

1. Switch to the Context tab page. The context of the STARTVIEW that is still empty is displayed on the left-hand side of the page. The context of the component controller that you have just edited to define mapping is available on the right-hand side.
2. Open the context menu of the root node of the view context and create a new node.
3. Enter a name for this node (such as “VIEW1”), confirm the window and save your work.
4. Now open the context menu of the new VIEW1 node and choose Define Mapping.
   A new window now lists all nodes of the component controller context that are available; in our example, this is only the NODE1 node.
5. Select the NODE1 node by double-clicking on it. Confirm the dialog box that follows once you have read it.

Result

 If you now open the VIEW1 node of the view context and the NODE1 node of the context of the component controller, you can see that the MYNAME attribute is now available in both hierarchies. The two contexts are now linked to each other.
 As soon as the value of the MYNAME attribute changes in the view context, for example because of user input, the new value of the attribute will also be available in the context of the component controller. The same applies conversely: if the value changes in the context of the component controller (for example, if a mapping was defined by an entry in a different view for its context nodes), the attribute is also assigned a new value immediately also in the context of the current view.

Step 4: Binding the Attribute

Once the context of the view has been mapped to the context of the component controller, an interface element of the first view can now be bound to attribute MYNAME.

Procedure

1. Switch to the Layout tab page and ensure that the Workbench is in change mode.
2. Select the INPUT element in the hierarchy below the RootUIElementeContainer.
3. Find the value entry in the properties table and click on the corresponding button in the Binding column on the right-hand side of the table.
4. The context hierarchy of the view is now displayed in a separate window. Double-click on the MYNAME attribute (in this case, the only attribute) to select it.
   The Value column of the table now contains the MYNAME attribute.
5. Save your changes.

Result

The UI element ENTRY is now bound to the attribute MYNAME of the view context. The attribute can now be assigned a value by user input. Since mapping was defined between the context of the view and the context of the component controller, the value of the attribute is changed accordingly. It can be made accessible from here to a second view by defining mapping similarly between its view context and the context of the component controller.

Step 5: Designing the Second View

The second view is structured in a similar way to the first view. Only the INPUT element is replaced by an element of type TextView. All the same, the procedure below explains the individual steps again.

Procedure

1. Double-click on the name of your second view in the view node of the object list. The Layout tab page of your view is displayed automatically again. Make sure that the Workbench is in change mode.
2. Open the context menu of the RootUIElementContainer and choose Insert Element….
3. The first element should display a text, so enter a suitable name (such as “TEXTOUTPUT”) and choose TextView from the list of element types Confirm the dialog box.
4. Open the context menu of the ROOTUIELEMENTECONTAINER again and create a button with a suitable name (such as “BUTTON2”) in the same way.
   The required layout elements of the second view are now available; next you create the two plugs that are required.
5. Switch to the Outbound Plugs tab page and enter the name of the new plug (such as “OUT1”) in the table.
6. Now switch to the Inbound Plugs tab page and enter the name of the new plug (such as “IN2”) in the table. Save your changes.
   Now that both the layout elements and the required plugs have been created, all that is missing is the link between the BUTTON2 button and the OUT2 outbound plug.
7. Switch back to the Layout tab page and select the BUTTON2 entry in the element hierarchy below the ROOTUIELEMENTECONTAINER. In the table below the hierarchy, once again you have the option of maintaining the properties and linking the selected element.
8. First choose the text property and enter a suitable text (in this case “Back!”, for example) in the Value row.
9. Below the Events header, choose the OnAction row. You have to create another action for the OnAction event here, which calls the outbound plug of the view when the BUTTON2 button is clicked. Enter a name for the action in the dialog box (for example, GOTOOUT2), select the only available outbound plug, and confirm your entries.
10. Save your changes.

Result

In this step, you have created the layout of the second view of your application, and you have ensured the navigability of the view by creating plugs. Furthermore, you have linked both of these to each other by linking the BUTTON2 interface element to a navigation call to the outbound plug OUT2 of the view.

Step 6: Maintaining the Context of the Second

Just like in step 3, the context of the component controller is now made accessible to the context of the second view. A new node is created again in the view context and mapping is defined between this new node and the NODE1 node of the component controller context. The attribute of the view context is then bound to the TEXTOUTPUT layout element, just like in step 4.

Procedure

1. Switch to the Context tab page and ensure that the Workbench is in change mode.
2. Open the context menu of the root node of the view context and create a new node.
3. Enter a name for this node (such as “VIEW2”), confirm the dialog and save your work.
4. Now open the context menu of the new VIEW2 node and choose Define Mapping.
5. From the context of the component controller, select the NODE1 node by double-clicking on it.
   In this way, the MYNAME attribute is ready in the context of the second view to be bound to a layout element.

6. Switch to the Layout tab page.
7. Select the TEXTOUTPUT element in the hierarchy below the RootUIElementeContainer.
8. Find the text entry in the properties table and click again on the corresponding button in the Binding column on the right-hand side of the table.
9. Select the MYNAME attribute again by double-clicking on it.
10. Save your changes.

Result

Your component now contains two views, whose contexts are bound to each other using the context of the component controller. As a result, the work on the layout or the contexts of your component is finished.

Step 7: Embedding the Views in a Window

Each view is a self-contained unit and does not contain any information about navigation to other views. To de able to define such a navigation, and to make the views accessible for users, they have to be embedded in a window.

An empty name with the same name as the component itself is generated when a component is created. You now have to embed the two views.

Procedure

1. Open the Windows node in the object list hierarchy on the right-hand side of the Workbench.
2. Double-click on the MYCOMPONENT window there, which was created automatically.
   The structure of your window is now displayed in the Editor on the right-hand side. It is still empty since you have not yet embedded any views.
3. In the structure of the window, open the context menu for the MYCOMPONENT node and choose Embed View. Make sure that the Workbench is in change mode.
   In the following window, specify the name of the view that should be embedded. The input help for the corresponding field displays all views for the current component.
4. Select the STARTVIEW by double-clicking on it and confirm the window.
5. Repeat the process to embed the second view in the window.
6. In the structure of the window, open the context menu for the STARTVIEW node and choose Set as Default.
7. Save your changes.

Result

The MYCOMPONENT window now contains the two views, which can be bound to each other. The STARTVIEW was set as the default view, which means that it is always called first when the window is called.

Step 8: Defining the Navigation

When you designed the two views, you created an inbound and an outbound plug for your views. You have already bound the button actions to the relevant outbound plug.

You must now determine to which inbound plug an outbound plug binds itself when it is called. This navigation is also declared in the view hierarchy of the respective window. You are still in the view of the structure of your MYCOMPONENT window.

Procedure

1. Open the STARTVIEW node in the structure of your window.
   Below this node you will find two additional nodes, one for each plug in this view.
2. Open the context menu of the OUT1 outbound plug and choose Create Navigation Link.
   In the following window, specify the required target view (you can use the input help for all the views that are available in this window).
3. Select the RESULTVIEW by double-clicking on it and confirm the dialog.
   After you have selected the target view, the only inbound plug IN2 that is available for this view was automatically selected for the navigation. If a view has several inbound plugs, you will have to make another decision again here.
4. Save your changes.
   The navigation you have just created appears in the structure of the window as an additional subnode below the node of the OUT1 outbound plug of the STARTVIEW.
   Now open the RESULTVIEW node and repeat the whole operation to create a navigation link from the OUT2 outbound plug of the second view to the IN1 inbound plug of the first view.

Result

All necessary actions for creating the views and their navigation are complete.

Step 9: Creating and Testing a Web Dynpro Application

In this last step you have to create a Web Dynpro application so that the window can be called using a URL. A Web Dynpro application is linked uniquely to a URL with which it can be started in the browser. The Web Dynpro application does not contain any information about the inner structure of the window behind it.

For every window of a component, a uniquely assigned interface with the same name is generated when it is created: the interface view. The window is linked with the Web Dynpro application using this interface view.

Procedure

1. Open the context menu for your Web Dynpro component in the object list hierarchy and choose Create → Web Dynpro Application.
2. Give your application an appropriate name (such as “myApplication”) and confirm the dialog.
   A list of the properties of your new application is displayed on the right-hand side. MYCOMPONENT was automatically entered in the Interface View line, since no more windows with corresponding interface views are available for selection.
3. Save your changes.
4. Activate all parts of your component by choosing the corresponding entry in the context menu of the myComponent component.
5. Then open the context menu of the Web Dynpro application you have just created and choose Test.
   The Workbench ensures that a browser is started and that the URL that was generated for your application is called. You may need to log on to your system again using the browser.
   An interface element is displayed in the top-left corner of your browser, and there is a button to the right of it. Once you have entered a text and clicked on the button, you will be taken to your second view. The text that you entered appears there together with the button for backwards navigation.

Result

The simple Web Dynpro application with the equally simple context example is complete. You can now extend it as you like and try out the varied design options that the Web Dynpro framework offers.