WEBDYNPRO# Webdynpro is used to develop web applications to access through internet.

All ABAP based applications are considered as SAP-GUI dependent applications. i.e. without SAP-GUI we cannot access reports module-pool etc. Features of Webdynpro: 1 Webdynpro applications are browser independent. 2 Webdynpro follows MVC architecture internally. Webdynpro project is collection of webdynpro components. Every component contains *Code, *Screen, *RFC, *Adobe Forms, *Graphs/Charts, etc. Component generally consists of five controllers: Component Controller Interface Controller Custom Controller View Controller Window Controller

Every Controller contains its own context & code. A context acts like a temporary storage location. A context comprise of node and attribute. Node contains collection of records, attributes contain single value at a time. Node is a similar to internal table in ABAP reports, Attributes are like variables declared by data statement. Controller is responsible for data transfer between business layer and presentation layer. In a view controllerwe have 'View' internally, which is known as screen in ABAP or Web Page. Here in view we have screen elements such as, - Input field, Output field, Table, Form, etc. Every view has a window. > MVC architecture: * A model consists of a connection with Business layer via RFC/BAPI. * A view represents the Presentation layer. * A controller is the application layer between model and view. > We can reuse one component inside another component by using Component-Usagers. Component usager contains all Reusable Components.

> Context Mapping: It is used to transfer data from one context-node to another context-node. > Context Binding: It is a relationship manager between 'view' and 'View Context'. > Context mapping and context binding is a bidirectional relationship. i.e. changes made under parent node gets reflected automatically in the child node and vise-versa. > Webdynpro is possible from SAP R/3 EXX6.0 version and other latest SAP releases [ e.g. SAP-CRM,SAP-BI..] > URL acts as an entry point to run a component inside a browser. > Global Controllers: Component Controller, Interface Controller and Custom Controller. View Controller is a local controller. > In a component we can create many windows and every window contain many views. > Webdynpro Features: 1. Webdynpro follows MVC architecture. Model : Business Logic : Select, Delete, Update, Modify & Insert. View : Presentation logic : Screen Coding. Architecture : Controller controls and communication between Model & View. In MVC architecture presentation layer is always separate from business layer. This leads to reusability. 2. Webdynpro can integrate with 'Adobe-Forms'. 3. Webdynpro can be integrated with graphic and charts using 'Business Graphic'. 4. Webdynpro can be integrated with 'Portal Integration'. 5. Webdynpro used for designing web-based, browser-based and internet based applications.

> List of screen elements supported in webdynpro. * A view internally contains a screen. Screen internally contains UI elements:

1 2 3 4

Screen Elements Button Input Field Text Field Table

5 Drop Down by Index 6 Drop Down by Key 7 Radio Button Group by Index 8 Radio Button Group by Key 9 Check Box Group 10 Link to URL 11 Link to Action 12 Road Map UI Element 13 Image 14 Business Graphics X axis (Category) Y axis (Category) 15 Text Edit 16 Page Header 17 Progress Indicator

Property Text : On Action Value : On Enter Text Data Source :On Sort On Lead Select : On Filter Text : On Select Select Key : On Select Text : On Select Select Key : On Select Text Text : Reference Text : On Acting Selected Step Source Services Source Description Value Value Title Percent Value

> Some other UI Elements: 1. Message Area 2. Horizontal Gutter 3. Invisible Element 4. Tray 5. Group 6. I-Frame 7. Tab-Strip 8. View Container > Layout Managers: 1. Flow Layout

2. Matrix Layout 3. Grid Layout 4. Row layout > Navigation between views: To jump from one view (Web page) to another view we need to create an Outbound plug in the source view and inbound plug in the destination view and a Navigation link between them.

> Common methods and interfaces related to Webdynpro: * Interfaces : -> IF_WD_CONTEXT_NODE -> IF_WD_CONTEXT_ELEMENT -> IF_WD_WINDOW_MANAGER -> IF_WD_MESSAGE_MANAGER -> IF_WD_COMPONENT_USAGE > IF_WD_CONTEXT_NODE: Methods : * MOVE_NEXT() * MOVE_PREVIOUS() * MOVE_LAST() * MOVE_FIRST() * MOVE_TO() * INVALIDATE() * CREATE_ELEMENT() * GET_ELEMENT() * BIND_ELEMENT() * IS_SELECTED() * SET_SELECTED()

* REMOVE_ELEMENT() * BIND_STRUCTURE() * BIND_TABLE() * GET_LEAD_SELECTION()

> IF_WD_CONTEXT_ELEMENT : Methods : * GET_ATTRIBUTE * SET_ATTRIBUTE > IF_WD_MESSAGE_MANAGER: Methods : * * * * * * CLEAR_MESSAGES > IF_WD_WINDOW_MANAGER: Methods : * CREATE_WINDOW * CREATE_EXTERNAL_WINDOW * CREATE_CONFIRM_POP_UP > IF_WD_CONTEXT_USAGE: Methods : * CREATE_COMPONENT * DELETE_COMPONENT * HASH_ACTIVE_CONTROLLER * GET_INTERFACE_CONTROLLER > Class Names : * CL_WD_INPUT_FIELD * CL_WD_BUTTON * CL_WD_IMAGE * CL_WD_PAGE_HEADER * CL_WD_TABLE *CL_WD_RADIOBUTTON_GROUP _BY_IDX * CL_WD_DROPDOWN_BY_IDX * CL_WD_TEXT_VIEW Methods : NEW-INPUT_FIELD NEW_BUTTON NEW_IMAGE NEW_PAGE_HEADER NEW_TABLE NEW_RADIOBUTTON_ GROUP _BY_IDX NEW_DROPDOWN_BY_IDX NEW_TEXT_VIEW

> The Webdynpro URL is -> FQDN : Fully Qualified Domain Name Example : http:// xyz.abc.com:8000/SAP/bc/webdynpro/Sap/mycompapp where: http xyz abc .com 8000 Sap mycompapp : WAS Protocol : Host Name : Domain Name : Extension : Port Number : Name Space : Application Name xyz.abc.com:8000 : WAS Hostname

SAP/bc/webdynpro : WAS Path

* WAS : Web Application Server > Image UI: The image to be uploaded should be available in MIMES folder. MIMES: Multipurpose Internet Mail Extensions. > View: View is visible to users. So, it is called 'Visual Entity'. > Service Call: * Service call is used to invoke BAPI's or RFC into Webdynpro Application. * We can implement all database operations as a part of RFC or a BAPI and it is considered as 'Model' in Webdynpro. * Model contains business logic (Database Operations) as a part of RFC or a BAPI. * A model is connected to a view by a controller in the MVA architecture of Webdynpro. > Service Call Architecture:

> With the help of context mapping data can be transformed from one context to another context. > The relationship between component controller context and view controller context is called view context mapping. > Purpose of Context Mapping: * context mapping is used to transfer data from one context to another context. > The relationship between view controller context and its view considers as context binding. > Action is in view controller and execute method is in component controller. In this scenario execute method of component controller is invoked from an action of view controller. This process is called 'Cross Controller Method Call'. > Representing data i graphical format: To request data in graphical format we need to use business graphics. Business graphics supports various types of charts: * Pie Chart * Column Chart * Line Chart

* Polar Chart For graphics coloring and rendering business graphics uses IGS server [Internet Graphics Server]. > Customizing Table UI element: Table UI element is a complex composite UI element because table can contain UI element internally. Table can contain other UI element using table cell editor. Every attribute in WD contains 2 methods: * GET_ATTRIBUTE & * SET_ATTRIBUTE To capture (read) the values from one attribute we need to use get_attribute method. Syntax: get_attribute( exporting name = 'ID' importing value = lv_id ). get_attribute( exporting name = 'PASSWORD' importing value = lv_pass ). To Update or modify te value in an attribute we need to use set_attribute method. Syntax: set_attribute( exporting name = 'ID' value = 'SAP' ). set_attribute( exporting name = 'PASSWORD' value = '12345' ). > To initialize the value in screen we use 'WDDOINIT' method. > Predefined objects of a View Controller: * WD_THIS * WD_CONTEXT * WD_COMP_CONTROLLER > Predefined objects of Component Controller * WD_THIS * WD_CONTEXT > WD_THIS: To access the attributes & methods of controller is accessed by this variable directly. ex. WD_THIS->USER_ID. > WD_CONETXT: The controller context part is accessible by this variable. ex. WD_THIS->GET_CHILD_NODE( '<node name>' ). > WD_COMP_CONTROLLER: This helps us to access component controller attributes & methods through view controller.

ex. WD_COMP_CONTROLLER->GET_VALUE( ). WD_COMP_CONTROLLER->NEW_ITEM.