Web Dynpro (Stands for Web Dynamic Programming) for ABAP is a programming model for developing Web applications. It consists of a run time environment and a graphical development environment with special Web Dynpro tools that are integrated in the ABAP Workbench.
Basically Web Dynpro is used for developing user interfaces(UI) for Web applications.
Web Dynpro for ABAP
The Basic Features
1), Extensive platform independence of interfaces
2), High level of reusability
3), Clear separation of presentation and processing logic as well as data retrieval
4), High-performance processing
The Major advantages
1), The use of declarative and graphical tools significantly reduces the implementation effort
2), Web Dynpro supports a structured design process
3), Strict separation between layout and business data
4), Reuse and better maintainability by using components
5), The layout and navigation is easily changed using the Web Dynpro tools
6), Stateful applications are supported – that is, if the page is changed and the required data remains intact so that you can access it at any time throughout the entire application context.
Note that stateless applications are not possible.
1), Automatic data transport using data binding
2), Automatic input check
3), User interface accessibility is supported
4), Full integration in the reliable ABAP development environment
1), Portal Content Development
2), Web Applications Development
3), Mobile Applications Development
6), Programming Environment
7), Client Implementation
8), Web User Interfaces
Step by Step procedure
Step 1: Go to Object Navigator-Tcode se80(No special tcode for webdynpro).
Step 2: Select “WebDynpro Comp./Intf” from the list.
Step 3: Write new name for webdynpro.Eg:Zdemoweb.
Step 4: Right click-Create button.Add description. Type as “web dynpro component”. Give window name like “Main_Window”.
Assign it to the local object.
Step 5: Right click on the WebDynpro component “ZSAPTECHNICAL_DEMO” and create a view.Give View name as First_view(No space will be allowed). Give description also.Now you can see first_view window on the right side.Save the application.
Step 6: Double-click on the COMPONENTCONTROLLER. Check if the application is in change mode.
Also See : The different Types of ABAP Programes
Step 7: Now you have to create a node. On right side you will be able to see Context(will blue round symbol near to it).Right click on it. Create–> Node.Give name of the node. CLick on tick symbol.Now you can see a node under context.
Step 8: To create an attribute for the node,right click on node.Create–> Attribute.Give Attribute name as “Name” Type as”USR01-BNAME”.Save the application.
Step 9: Double-click on the view, FIRST_VIEW, created earlier. Choose the tab Layout.
- In this step, we would be designing the first screen of our application with the following elements:
- Label for the input field
- Input field
- Button (for Submit)
- Drag and drop the element “Label” onto the layout.
- After dragging and dropping ontothe layout, change the text of the “Label” to “Username” in the right side bottom of the window.
- Now drag and drop the “inputfield” onto the layout.
- Now click on the Label element created earlier and set the property of “LabelFor” to “INPUT_FIELD”.
- Finally, drag and drop the element “Button” on to the layout.
- In the properties window of the Button, do the following:
- Change the text to “Submit”
- Click on “Create” for the property “OnAction”.
- Enter the Action(here “Submit”) and the Outbound name(Submit).
- Press “OK” for the creation prompt of Outbound Plug.
- Click on “Context”tab. Drag and drop the Node on the right side to the context on the left side.
- Click on ‘YES’ for the prompt for the node to copied and mapped.
- Save the application.
- Click on Layout tab now.
- Double-click on the “Input_field” and in the properties:
- For the property “Value”, select the attribute “Name” by clicking on the binding button.
- Step 10: In this step, we would design the second screen of our application.
- Right-Click on the WebDynpro component and create another view, SECOND_VIEW.
- Create a label, “Entered Name” as mentioned in the earlier step.
- We would display the value entered on the first screen in an element called “text view”.
- Drag and drop the element “TextView” onto the layout.
- Click on “Context” tab and map the nodes as in our earlier step.
Step 11: Go to Tab “Inbound Plugs” and create an inbound plug as shown below:
- Description: Request
- Eventhandler: Handlerquest
- Go back to the layout now.
- Now double-click on the element
- “TextView” to open the properties. For the property “Text”, click on the binding button and select “Name”
Step 12: In this step, we would embed the above created views in the window created in the first step.
1), Double-click on the window “MAIN_WINDOW”.
2), Right-click on the window name and select “EMBED VIEW”.
3), Embed both the views created earlier. Do not select the view “EMPTYVIEW” which is created by default.
4), Expand the tree.
5), Now right-click on “SUBMIT” and select “Create Navigation”.
6), Select “SECOND_VIEW” for the dest.view.(Inbound Plug-REQUEST).
7), Now select the FIRST_VIEW and make it as default.
Save and activate the application (When activating, select all the six components related to this webdynpro application. If all six components are activated, only then your application executes)
Also See : What is mean by complete End-to-End Implementation
Recommended Reading For You
- The Steps to Upgrade SAP Support PackageHope sometimes we need to update our SAP Support Package for bug fixing or regular maintenance.If we check our current SAP Support Package Level from transaction SPAM --> Package […]
- What is Client on SAP System?A client is organizational and legal entity in the SAP system. All the business management data is protected here because other clients can not access them. The main objective of the […]
- What is Buffering Types in SAP?Buffering Types in SAP : NTAB buffer: The name table (nametab) contains the table and field definitions that are activated in the SAP System. An entry is made in the Repository buffer when […]
- Different Types of ABAP ProgramsDifferent Types of ABAP programs : ABAP, there are 7 different types of ABAP programs which includes executable, function module, module pool, subroutine, class, interface,
Types of ABAP […]
- ABAP Package Concept an OverviewABAP Package Concept, ABAP applications server’s one of the most important innovations is ABAP package concept, owing to the reason that it allows the development of software considered to […]