Exercise # 2

Exercise # 2: Objectives: Develop Web Dynpro Application with more than one view and facilitating navigation from one view to the other. Tasks required to be performed for development:

1. Creation of package : 

Refer exercise # 1 for creation of package.

2. Creation of Web Dynpro component with a window:     

Select Web dynpro Component / Intf. from the list Enter a name (Suggested name: ‘ZWD__EX2’) A dialog box appears with the message, ‘The WD object does not exist .Create Object?’ .Click on ‘Yes’. The WD component description and the Window name are entered and clicked on ‘√’ .Assign this object to the package. We get some of the defaults in the hierarchy.

3. Creation of Web Dynpro view:    

Right click on the Web Dynpro Component ,select CreateView Enter View Name and Description We get number of tab sheets and in the layout of the view, place the UI Element which is found under the ‘Favorites’ which is explained in point # 4. Repeat the above 3 process and create another view in the similar way.

4. Placing UI element on the view layout:    

Drag the UI element ‘Button’ and place it on the Layout of both the views. In the ‘Text’ properties of the button control, Enter the ‘Button Description’ Click ‘Events ‘onAction’ property of the button, a dialog box is displayed where the action, description and the outbound plug is specified. When double clicked on the ‘onAction’ ,it takes you to the method list as shown below:





Repeat the same process with the button on the other view.

5. Embed both views in the window:  



Double click on the Window ‘MAIN_WINDOW’, to the right side, ‘MAIN_WINDOW’ appears. Right click on the ‘MAIN_WINDOW’ and click on ‘Embed view’. Select the ‘View to Be Embedded’ and ‘Component of View’ from the F4 provided. After the views are embedded, the navigation link is created between both the views. Once this is done, you will be able to find the links created as in the following snapshot.

6. Creation of Web Dynpro Application:  

Right click on the Web Dynpro component, select ‘Create’  ‘Web Dynpro Application’ Enter Description and click on ‘√’ and we get the screen as shown in the snapshot:



Save and execute the Web Dynpro Application by selecting the ‘Test’ option or ‘Execute Icon’ from the toolbar. The output on the first view:





The output on the next view when clicked on ‘Go to Next View’ button from the initial page :





Congratulations!!!!! You have successfully developed Web Dynpro Application with navigation.