Exercise # 1:

Objectives:

Develop Web Dynpro Application showing a view with an Image as UI element.

Tasks required to be performed for development:

1. Creation of package :

 Execute transaction code SE80

 Select Package from the list
 Enter a name (suggested name: ‘ZWD_PACKAGE’) to the package and click on
‘Yes’.
 Enter Short Description, Application Component and Software Component and click
on ‘Create Icon’
 Create a workbench request by clicking on the ‘Create Icon’.
 Enter Short Description and click on ‘Save’.
 Now a package is created with the name ‘ZWD_PACKAGE’ and all the objects which
would be created from now onwards till the end of the session could be assigned to
the same package.

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

 Select Web Component / Intf. from the list

 Enter a name (Suggested name: ‘ZWD_<your number>_EX1’)
 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 is entered and clicked on ‘√’
.Assign this object to the package.
 We get some of the defaults in the hierarchy as shown in the snapshot below:


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 are found under the ‘Favorites’.


4. Placing UI element on the view layout:

 Drag the UI element ‘Image’ and place it on the Layout.

 In the ‘Source’ properties of the Image control, the path where the mime object is
stored is given. Steps for selecting the source:
 Click on the ‘Mime Repository’ ,select the object you would like to assign to
Source,drag and drop it on the source as shown in the snapshot:


  Click on the repository browser and you are back to ‘Web Dynpro Component’
 Activate all the objects created by selecting the Web Dynpro Component and right
click on the ‘Activate’ option.

5. Embed view 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
as shown in the 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.

 Congratulations!!!!! You have successfully developed a simple Web Dynpro

Application.