What is Web Dynpro for ABAP?

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

Applications

1), Portal Content Development

2), Web Applications Development

3), Mobile Applications Development

4), Architecture

5), Security

6), Programming Environment

7), Client Implementation

8), Web User Interfaces

9), Administration

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:

• PLUG:Request
• 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