Webdynpro

WEBDYNPRO ABAP
Webdynpro : A Beginners Prospective The 1st Big Q is What is webdynpro? Ans : In simple words its 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. 2. 3. 4. 5. 6. 7. 8. Data structures ( nodes and attributes) to hold business data. User interface elements (Buttons , plugs) Views which are aggregations of UI elements Windows which are aggregations of views Plugs which act as navigation link between views in an window Events which performs a business action in response to user action Methods which brings back end data and performs business function 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 beginners prospective by T2 Page 1
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:
URL
WEBDYNPRO APPLICATION
INTERFACE VIEW asasasa
DEFAULT VIEW PLUG WINDOW NEW VIEW
With this simple design lets know the various terms related to webdynpro application.
ACOMPONENT
A beginners prospective by T2
Page 2
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. COMPONENT Elements related to UI (windws , views) + Webdynpro program 2. View Layout of UI elements (eg. A web browser) 3. Window Combination 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 View Each windows are accessed by Interface view whose name is same as the window name. 6. Component Controller Programming part of component (Global Variables, Global Methods). 7. View Controller Programming part of view. Its not visible. The methods of view is considered as view controller. 8. Interface Controller Programming part of Interface. Through interface controller data , methods and event handlers can be exposed to other components. 9. Component Context Global data that are stored in component. 10. View Context Data used in a view are stored here. 11. Plugs Navigation link. Inbound plug To View Outbound Plug- From View
Few Terminologies A beginners prospective by T2 Page 3
WEBDYNPRO ABAP
1. Context mapping : Coping attributes from controller 2. Data Binding Connecting user Input to context attribute 3. WD_CONTEXT Attribute that refers to controller context Some 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_THIS Refer to local interface 5. WD_DOINIT Called 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.
Page 4
WEBDYNPRO ABAP
2. Create a Webdynpro Componenet.
3. Give a description for the component
Page 5
WEBDYNPRO ABAP
4. By default the following components get generated.
Page 6
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. Selection How many instances of node can be selected on screen A beginners prospective by T2 Page 7
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 cant start with 1 here. c. Initialization Lead Selection It 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 Function It 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.
Page 8
WEBDYNPRO ABAP
Choose pernr, nachn, cname.
Page 9
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
Page 10
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.
Page 11
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.
Page 12
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.
Page 13
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. A beginners prospective by T2 Page 14
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)
Page 15
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.
Page 16
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.
Page 17
WEBDYNPRO ABAP
19. Now bind it with the node.
Choose context in the next screen
Page 18
WEBDYNPRO ABAP
And choose node and elements.
It looks like this.
Page 19
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 dont have to write it by our own. A beginners prospective by T2 Page 20
WEBDYNPRO ABAP
Now go to the code wizard and click it.(its 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.
Page 21
WEBDYNPRO ABAP
22. The code looks like it .
Page 22
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.
Page 23
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.
Page 24
WEBDYNPRO ABAP
25. Following code gets generated.
Assign the internal table name.
Page 25
WEBDYNPRO ABAP
26. Activate Everything and go back to Windows.
Drag and drop the view into it and set it as default view.
Page 26
WEBDYNPRO ABAP
27. Though the application is not completed yet, but at this stage one can check the application. Now create webdynpro application.
Page 27
WEBDYNPRO ABAP
Save it
28. Now test it.
29. A new browser opens and a web application opens.
Page 28
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.
Page 29
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. A beginners prospective by T2 Page 30
WEBDYNPRO ABAP
Look at line 646. 32. Here the node is read before instantiating it. So comment the lines
33. Now upon executing
Page 31
WEBDYNPRO ABAP
Output looks like this
Page 32
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)
Page 33
WEBDYNPRO ABAP
The View controller should look like this.
Page 34
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
Page 35
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.
Page 36
WEBDYNPRO ABAP
Page 37
WEBDYNPRO ABAP
37. Replace pernr with nationality in the selection querry
38. Now upon executing the application the O/P is as follows.
Page 38
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.
Page 39
WEBDYNPRO ABAP
After selecting the mime object gets added under the component
Page 40
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.
Page 41
WEBDYNPRO ABAP
41. Resulting view looks like this.
Lets re arrange it. Insert UI element Horizontal gutter to separate these eelements.
Page 42
WEBDYNPRO ABAP
Drag the logo to top
Set the length width height of logo in the property table.
Page 43
WEBDYNPRO ABAP
Test the changes in between.
You can rearrange further for the better look and feel.
Page 44
WEBDYNPRO ABAP
42. Add another button to go to next view.
Create a On Action Method for the button 43. Now create another view
Page 45
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.
Page 46
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
Page 47
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.
Page 48
WEBDYNPRO ABAP
47. Now drag and drop Output plug from new view to input plug of main view And Output plug from main view to input plug of new view. The resulting window looks like this.
Page 49
WEBDYNPRO ABAP
48. Now Fire the plug in the corresponding Action methods for the plugs in the view . (in the method tab)
Page 50
WEBDYNPRO ABAP
49. Upon testing the application look like this.
Page 51
WEBDYNPRO ABAP
Upon clicking the address button next view gets triggered.
Page 52
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.
Page 53
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.
Page 54
WEBDYNPRO ABAP
The window should look like this.
Page 55
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 e, Elem_Emp_Data ment,
type ref to If_Wd_Context_Nod type ref to If_Wd_Context_Ele
Page 56
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 Pattern Code look like this.
** To get selected rows DATA : 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 Details TYPES: BEGIN OF ty_emp, pernr type persno,
Page 57
WEBDYNPRO ABAP
nachn type pad_nachn, cname type pad_cname, end of ty_emp. ** Internal table Declaration for Employee Details DATA : 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_V iew=>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 ).
).
Page 58
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.
Page 59
WEBDYNPRO ABAP
Additional Enhancement 56. 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.
Page 60
WEBDYNPRO ABAP
Page 61
WEBDYNPRO ABAP
Page 62
WEBDYNPRO ABAP
Page 63
WEBDYNPRO ABAP
Page 64
WEBDYNPRO ABAP
Page 65
WEBDYNPRO ABAP
Page 66

Webdynpro

Încărcat de

Informații document

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

Webdynpro

Încărcat de

Drepturi de autor:

Formate disponibile

WEBDYNPRO ABAP

INTERFACE VIEW asasasa

DEFAULT VIEW PLUG WINDOW NEW VIEW

Few Terminologies A beginners prospective by T2 Page 3

This will be done in 3 Stages. STAGE 1. Designing a Rough Application

2. Create a Webdynpro Componenet.

3. Give a description for the component

4. By default the following components get generated.

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

Choose pernr, nachn, cname.

8. Now Create a view.

And the resulting screen look like this

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

19. Now bind it with the node.

Choose context in the next screen

And choose node and elements.

It looks like this.

22. The code looks like it .

25. Following code gets generated.

Assign the internal table name.

26. Activate Everything and go back to Windows.

28. Now test it.

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

33. Now upon executing

Output looks like this

The View controller should look like this.

37. Replace pernr with nationality in the selection querry

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

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

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

41. Resulting view looks like this.

Drag the logo to top

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

Test the changes in between.

42. Add another button to go to next view.

Add a button to go back to previous view.

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

Add an action with the button.

49. Upon testing the application look like this.

Upon clicking the address button next view gets triggered.

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

Drag drop the Address node in to data.

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

The window should look like this.

type ref to If_Wd_Context_Nod type ref to If_Wd_Context_Ele

55. Upon Testing the result look like this.

S-ar putea să vă placă și