Webdynpro

WEBDYNPRO ABAP

Webdynpro : A Beginner’s Prospective

The 1st Big Q is What is webdynpro?

Ans :

In simple words it’s a web screen.

Web Dynpro is a client-independent programming model which is being used for developing any sophisticated user interfaces in a system for any web based business applications which can be used in real business organization .

Prior to define the webdynpro architecture lets compare it with a traditional module pool. Though the comparision is not exact but it can be considered as a first step to understand the architecture.

Module Pool Program = WD Component

Module Pool Screens = WD Views

Module Pool Transaction(Tcode) = WD Application URL.

Using WebDynpro one can achieve

- Separate business and display logic ( Separating data generation from data consumption )

- Client neutral Application- Backend neutral application

Whats a Webdynpro Application consists of?

Ans.

1. Data structures ( nodes and attributes) to hold business data.2. User interface elements (Buttons , plugs)3. Views which are aggregations of UI elements4. Windows which are aggregations of views5. Plugs which act as navigation link between views in an window6. Events which performs a business action in response to user action7. Methods which brings back end data and performs business function8. Components which are the reusable unit of functionality

What is MVC design of WebDynpro?

Ans :

Model View Controller design separate the program into 2 parts logically

1. Program responsible for generating data

A beginner’s prospective by T2

WEBDYNPRO ABAP

2. Program responsible for consuming data

Model :

Model encapsulates interfaces to backend system. Model acts as a proxy which detaches the back end system as a result webdynpro application is independent of the backend system.

View :

It defines client independent business data.

Controller:

It formats the model data to be displayed in view and manages interaction of view and model.

Webdynpro Components:

asasasa

With this simple design lets know the various terms related to webdynpro application.


URL WEBDYNPRO APPLICATION

ACOMPONENT

WINDOW

DEFAULT VIEW

NEW VIEW

INTERFACE VIEW

PLUG

WEBDYNPRO ABAP

When some one creates a webdynpro application in se80 by default few elements are created with the webdynpro application component. Such as :

- Component controller- Component Interface

o interface controller o Interface view

- View- Window

Explanations of elemets:

1. COMPONENTElements related to UI (windws , views) + Webdynpro program

2. ViewLayout of UI elements (eg. A web browser)

3. WindowCombination of views.

4. Default View Navigation starts from default view. So while application development one view is made as default view from which the navigation should start.

5. Interface ViewEach windows are accessed by Interface view whose name is same as the window name.

6. Component ControllerProgramming part of component (Global Variables, Global Methods).

7. View ControllerProgramming part of view. Its not visible. The methods of view is considered as view controller.

8. Interface ControllerProgramming part of Interface. Through interface controller data , methods and event handlers can be exposed to other components.

9. Component ContextGlobal data that are stored in component.

10. View ContextData used in a view are stored here.

11. PlugsNavigation link. Inbound plug – To ViewOutbound Plug- From View

Few Terminologies


WEBDYNPRO ABAP

1. Context mapping : Coping attributes from controller

2. Data BindingConnecting user Input to context attribute

3. WD_CONTEXTAttribute that refers to controller contextSome of the methods that it can have are

GET_CHILD_NODE –refer to context node GET_ATTRIBUTE - Read context attribute BIND_ELEMETS – Fills value to context node

4. WD_THISRefer to local interface

5. WD_DOINITCalled automatically when a controller is initialized for the 1st time.

With this much knowledge lets have our 1st Application.

Scenario:

Create a Web Screen with a selection Parameter and two buttons. User has to enter a value and click the first button. Based on the entered value a table with Employee details from PA0002 with reference to the selected parameter should get displayed. User can select multiple rows from the table to view further Address details of the employee from PA0006 in a new Screen.

This will be done in 3 Stages.

STAGE 1.

Designing a Rough Application

1. Go to Transaction SE80.


WEBDYNPRO ABAP

2. Create a Webdynpro Componenet.

3. Give a description for the component


WEBDYNPRO ABAP

4. By default the following components get generated.


WEBDYNPRO ABAP

5. Go to Component controller and create global data by right clicking it and creating nodes.

Give a node name and table name in data structure field.

Notes:a. Cardinality: Minimum and maximum no of elements a node can hold at run time

0..1 - 0 or 1 elements permitted 0..n - 0 or more (eg. Internal table with work area) 1..1 - 1 and only 1(eg . workarea) 1..n - 1 or more(eg. Internal table without header line)

b. SelectionHow many instances of node can be selected on screen


WEBDYNPRO ABAP

0..1 - Maximum of 1 table row can be selected 0..n - Any no of rows can be selected

Here one thing has to be checked that the selection must be in reference to cardinality. If Cardinality is 0..1 ,means its possible that it may not have any records, So Selection can’t start with 1 here.

c. Initialization Lead SelectionIt is possible to select multiple elements at a time . but only one element can be processed at a time. This element is referred as lead selection element. (by default 1 st

element is assigned for lead selection)d. Singleton

It describes the relationship between a subnode and its parent node. Yes - there is only one single instance of the node at runtime . No - allow several instances at the same time.

e. Supply FunctionIt repopulates child nodes when lead selection of parent node changes. But code has to be written for this function explicitly.

6. Click on add attributes from structure so that one can choose required variables from a structure or a table in stead of creating each attributes separately.


WEBDYNPRO ABAP

Choose pernr, nachn, cname.


WEBDYNPRO ABAP

7. Similarly add another node with a dictionary structure of PA0006 and choose fields pernr, orto1,land1.

8. Now Create a view.

Give a description


WEBDYNPRO ABAP

And the resulting screen look like this

9. Go to context tab of the view and create a local variable (personnel number) as a attribute in the context . This will act as the i/p parameter.


WEBDYNPRO ABAP

10. Now drag and drop Emp_data node from component controller to view controller.

After dropping the node the view controller looks like this.


WEBDYNPRO ABAP

11. Now go to layout tab to design the display of the view.

Here a text will be written for a input field . User will enter the value . And to implement this user action an push botton will be created which can generate an event .

12. Save the whole application frequently. Now drag and drop caption on the free space and give a text in the property table.

13. Insert a i/p field by right clicking the root element container.


WEBDYNPRO ABAP

14. To add a attribute with the input field click on the binding button in the the value field of the property table and choose the Emp number attribute.

15. Now drag and drop a button and give it a name in text field of property tab.


WEBDYNPRO ABAP

16. Now click on the binding button for on action in property table.

Give a user action name. (give a plug name(optional)


WEBDYNPRO ABAP

Upon saving it a method gets generated whose name is in the format onaction_nodename.This can be viewed in the methods tab. And in Outbound plugs tab a plug also gets generated.

(Here if you want to pass some variables to some other view , that can be achieved by using Importing parameter declaration. Then the code for reading these parameters can be generated in the code wizard in the handler method of the calling view.)

17. Now activate the application and go to component. Here if someone want to use alv application, he has to implement the interfacesalv_wd_table with any name.


WEBDYNPRO ABAP

18. As I want to show employee data in a tabular format I have to take the cardinality for the node as 0:n . So at any moment one can go to the component controller and the properties. And upon saving , these changes get reflected to the view elements.

19 . Now to display the node as a tabular format create a table type UI element fromm root element container. And give it a name in the caption.


WEBDYNPRO ABAP

19. Now bind it with the node.

Choose context in the next screen


WEBDYNPRO ABAP

And choose node and elements.

It looks like this.


WEBDYNPRO ABAP

20. Now goto the OnAction method (either by double clicking the methdod name from property of button or from method tab) . As I have created a plug while creating the action method so default code lies there. Delete this code. This can be generated when required using the code wizard.

21. Lets us use the code wizard to read the input parameter. It will generated the code, we don’t have to write it by our own.


WEBDYNPRO ABAP

Now go to the code wizard and click it.(it’s the harry potter magic stick symbol on the top)

Choose read context. Pop up will get generated to choose context. Choose the Emp no attribute.


WEBDYNPRO ABAP

22. The code looks like it .


WEBDYNPRO ABAP

23. Now we have to insert our code to read data based on the node attribute.

24. Similarly read the other node EMP_DATA. Similar code will get generated.Now we have to bind the fetched data i.e internal table IT_EMP to the node. To do this choose pattern. Select ABAP objects pattern.


WEBDYNPRO ABAP

Then choose call method and give the node reference name. Check the generated code and you can see the node name there. Give the method as BIND_TABLE.


WEBDYNPRO ABAP

25. Following code gets generated.

Assign the internal table name.


WEBDYNPRO ABAP

26. Activate Everything and go back to Windows.

Drag and drop the view into it and set it as default view.


WEBDYNPRO ABAP

27. Though the application is not completed yet, but at this stage one can check the application.Now create webdynpro application.


WEBDYNPRO ABAP

Save it

28. Now test it.

29. A new browser opens and a web application opens.


WEBDYNPRO ABAP

30. Though it looks ok. But there is an intentional error kept to give you a feel of error dump analysis.When an employee number is entered and enter button is clicked.


WEBDYNPRO ABAP

An exception occurs,

31. This exception “access via Null object reference not possible” normally occurs when a node is read without instantiating it. Now lets see in which line it occurred.Go to ST22 and check the error log there.


WEBDYNPRO ABAP

Look at line 646.

32. Here the node is read before instantiating it. So comment the lines

33. Now upon executing


WEBDYNPRO ABAP

Output looks like this


WEBDYNPRO ABAP

Stage 2 : Enhance the rough design

34. Employee Number is used as input parameter for application. But For a Employee number only one record will be fetched from PA0002 in the main view. So Lets change this parameter to Nationality , So that multiple records will get generated in the main view . One can change the node and attributes at any moment of time .(Upon activating it the changes get reflected in all places)


WEBDYNPRO ABAP

The View controller should look like this.


WEBDYNPRO ABAP

35. Now change the text in the view layout to nationality from Personnel number.

Then bind the input field with the Nationality attribute from the property tab


WEBDYNPRO ABAP

36. Now go to On action for method for the button , delete the code generated by wizard for Pernr and read the nationality attribute using code wizard.


WEBDYNPRO ABAP


WEBDYNPRO ABAP

37. Replace pernr with nationality in the selection querry

38. Now upon executing the application the O/P is as follows.


WEBDYNPRO ABAP

39. Now lets insert a logo to our main screen as follows

Mime object is for logos, pictures. Select a picture from ur system.


WEBDYNPRO ABAP

After selecting the mime object gets added under the component


WEBDYNPRO ABAP

40. Now add a UI element for logo in the root element container of the view as follows.

Click value in source property and choose the imported mime object.

41. Resulting view looks like this.

Lets re arrange it.


WEBDYNPRO ABAP

Insert UI element Horizontal gutter to separate these eelements.

Drag the logo to top

Set the length width height of logo in the property table.


WEBDYNPRO ABAP

Test the changes in between.

You can rearrange further for the better look and feel.


WEBDYNPRO ABAP

42. Add another button to go to next view.

Create a On Action Method for the button

43. Now create another view


WEBDYNPRO ABAP

44. In the New View layout create an element as View container UI element.

Add a button to go back to previous view.

You can provide a caption/logo to have a good look.


WEBDYNPRO ABAP

Add an action with the button.

45. The followings are some of the important steps.Plugging Concepts. Create Inbound and out bound plugs for the new view as follows


WEBDYNPRO ABAP

Similarly create plugs for the main view also.

46. Now drag and drop the Views in to the window.The window should look like this.

47. Now drag and drop Output plug from new view to input plug of main viewAnd Output plug from main view to input plug of new view. The resulting window looks like this.


WEBDYNPRO ABAP


WEBDYNPRO ABAP

48. Now Fire the plug in the corresponding Action methods for the plugs in the view . (in the method tab)


WEBDYNPRO ABAP

49. Upon testing the application look like this.


WEBDYNPRO ABAP

Upon clicking the address button next view gets triggered.


WEBDYNPRO ABAP

Designing for final output

50. Now drag and drop both the nodes from component controller to view controller.

51. Now go to interface controller usage in the left.

Drag drop the Address node in to data.


WEBDYNPRO ABAP

52. Now go to the Window and Embed the new view in to it for alv display.

For view to be embed choose EMP_ALV that we have created earlier.


WEBDYNPRO ABAP

The window should look like this.


WEBDYNPRO ABAP

53. Previously for the emp data node lead selection was marked as enable as a result only one element get selected by default. And also selection followed 0:1 as a result max one row can get selected. So lets change this properties of the node in the component controller context to choose multiple records at the same time.

54. Now Either in the Handler method of Doinit method of the new view perform following things- Use Code wizard to read Employee data node

- Following code get generated.- ** Read Employee Node

data: Node_Emp_Data type ref to If_Wd_Context_Node, Elem_Emp_Data type ref to If_Wd_Context_Element,


WEBDYNPRO ABAP

Stru_Emp_Data type If_Address_View=>Element_Emp_Data .* navigate from <CONTEXT> to <EMP_DATA> via lead selection Node_Emp_Data = wd_Context->get_Child_Node( Name = IF_ADDRESS_VIEW=>wdctx_Emp_Data ).

* @TODO handle not set lead selection if ( Node_Emp_Data is initial ). endif.

* get element via lead selection Elem_Emp_Data = Node_Emp_Data->get_Element( ).

* @TODO handle not set lead selection if ( Elem_Emp_Data is initial ). endif.

* alternative access via index* Elem_Emp_Data = Node_Emp_Data->get_Element( Index = 1 ).* @TODO handle non existant child* if ( Elem_Emp_Data is initial ).* endif.

* get all declared attributes Elem_Emp_Data->get_Static_Attributes( importing Static_Attributes = Stru_Emp_Data )

-

Call method Get Selected Elements from PatternCode look like this.

** To get selected rowsDATA : lt_emp type wdr_context_element_set.data : ls_emp TYPE REF TO if_wd_context_element.

CALL METHOD NODE_EMP_DATA->GET_SELECTED_ELEMENTS* EXPORTING* INCLUDING_LEAD_SELECTION = ABAP_FALSE RECEIVING SET = lt_emp .

Declare an internal table to hold employee data and Call get static attributes method.* Types Declaration for Employee DetailsTYPES: BEGIN OF ty_emp, pernr type persno,


WEBDYNPRO ABAP

nachn type pad_nachn, cname type pad_cname, end of ty_emp.** Internal table Declaration for Employee DetailsDATA : lt_empl type table of ty_emp, ls_empl type ty_emp. loop at lt_emp into ls_emp. ls_emp->get_Static_Attributes( importing Static_Attributes = ls_empl ). append ls_empl to lt_empl. endloop.

Declare an internal table for employee address. And select entries from PA0006. types : begin of ty_str, pernr type persno, ort01 type PAD_ORT01, land1 type land1, end of ty_str.

data : lt_tab type table of ty_str.

select pernr ort01 land1 from pa0006 into table lt_tab for all entries in lt_empl where pernr = lt_empl-pernr.

data: Node_Emp_Add type ref to If_Wd_Context_Node, Elem_Emp_Add type ref to If_Wd_Context_Element, Stru_Emp_Add type If_Address_View=>Element_Emp_Add .* navigate from <CONTEXT> to <EMP_ADD> via lead selection

Node_Emp_Add = wd_Context->get_Child_Node( Name = IF_ADDRESS_VIEW=>wdctx_Emp_Add ).

** get element via lead selection* Elem_Emp_Add = Node_Emp_Add->get_Element( ).*** get all declared attributes* Elem_Emp_Add->get_Static_Attributes(* importing* Static_Attributes = Stru_Emp_Add ).


WEBDYNPRO ABAP

Bind the address internal table with the Address node using Bind table method using pattern.CALL METHOD NODE_EMP_ADD->BIND_TABLE EXPORTING NEW_ITEMS = lt_tab* SET_INITIAL_ELEMENTS = ABAP_TRUE* INDEX = .

55. Upon Testing the result look like this.


WEBDYNPRO ABAP

Additional Enhancement56. In the 1st view the blank Emp data table can be made invisible when there are no entry in it.

For this we have to add an attribute in the view context of type WDUI_VISIBILITY and set this as visibility value in the property for the table element in the view layout. Then in the DOINIT method set this attribute to 01 to make this invisible. Then in event handler method after fetching value from PA0002 make this variable as 02 (Visible).Next set of screen sequences explain this.


WEBDYNPRO ABAP


Webdynpro

Documents

Transcript of Webdynpro