INTRODUCTION TO SAP WEB DYNPRO

Web Dynpro is SAP’s standard UI technology for developing business applications with Web-based user interfaces.the web Dynpro is consists of a runtime environment and graphical development environment and tools that are integrated into the ABAP workbench.SAP Web Dynpro is based on original MVC design for decoupling presentation and application logic.Windows, Views, UI elements, Layouts, and Controllers form the basic components of a Web Dynpro application.Data binding is the means by which data is automatically transported from a view controller’s context to a UI element in its layout.Specific iViews should be created in order to run a Web Dynpro ABAP application within SAP enterprise portal.All WDA components, applications, and parts of the component are integrated parts of the standard correction and transport system (CTS).The standard ABAP lifecycle concepts fully apply to all Web Dynpro-based applications.

Objectives goals:

• Explain the significance of Web Dynpro along with the Web Dynpro architecture.
• Describe the advantages of Web Dynpro.
• List and describe the basic and important components of Web Dynpro.
• Develop a simple Web Dynpro application program by making use of the Web Dynpro components, User Interface, and context programming.

Advantages of the Web Dynpro application include:

• Minimum coding maximum design
• Separate layout and logic
• Support Web services and data binding
• Support reuse of components
• Run on multiple platforms

The different types of Controllers include:

• Component Controller,
• Custom Controller,
• Configuration Controller,
• View Controller
• Windows Controller

Application Scenarios with Web Dynpro

Web Dynpro Application

Web Dynpro for ABAP

• SAP standard UI technology for developing Web applications in the ABAP environment
• Consists of a runtime environment and a graphical development environment
• Supports ABAP, and JAVA
• Support reuse of components
• Involves little coding and lot of design
• Web Dynpro framework is based on Model View Controller (MVC) architecture

Advantages

• Strict separation between the layout and business data.
• Re-use and better maintainability through reusability.
• Automatic input checks.
• Automatic data transport, using data binding.
• WYSIWYG (What You See Is What You Get) view editor.

Web Dynpro Component Architecture

Model

• Forms the interface to the back end of the system
• Enables Web Dynpro application access to data

View

• Representation of data in the browser

Controller

• Formats the model data to be displayed in the view
• Process entries made by the user

Web Dynpro Component Architecture

MVC web Dynpro Component Architecture

in MVC the view is not a physical page on the disk when the incoming request comes from web Dynpro controller action mapped the request to the desired view, it can be used to get data from a client or set server side data to the client.

view components

• View Layout
• Context View
• Actions
• Methods
• Properties
• Attributes

View Layout

View Hook methods

 WDDOINIT
 Component Controller and View Controller and Initialization method of controller

WDDOPOSTPROCESSING
Component Controller and Prepare output

WDDOBEFORENAVIGATION
Component Controller and Error handling before navigation through application

WDDOAPPLICATIONSTATECHANGE
Component Controller and Handling for suspending and resuming an application

WDDOBEFOREACTION
View Controller and Method for validation of user input

WDDOMODIFYVIEW
View Controller and Method for modifying the view before rendering (refresh)

WDDOEXIT
Component Controller and View Controller and Cleanup method of controller

View Properties

Component Controller

A component controller is responsible for data transfer across two views in two different components. For this, we need to define the component usage first and then bind the context nodes in the method-WD_USAGE_INITIALIZE of the Component Controller impl class.

Create Attribute

In component controller when you click on context tab we will see the context node by right clicking on that context node we can create attributes.

Create Attribute

Create Node

same like attribute we can follow the same steps to create Node.

Create Node

Selection Types:

• 1. . .1 Exactly one context element is instantiated
• 0. . .1 Maximum one context element is instantiated
• 0. . .n Zero or more context elements are instantiated
• 1. . .n One or more context elements are instantiated

Create using the wizard

you can create Node and Attributes using wizard also, in order to do so you need to click on create using the wizard and then attributes from components of the structure.

Create using the Wizard

Create using the Wizard

Window

An entity into which we embed all the views that will be used to construct the screen for the end user

by using Inbound plugs and Outbound plugs, we define the navigation between views or windows.

Windows

Application

After developing a Web Dynpro component, we need to provide the users with access to its functionality to run the application, we can use the Execute button or we can copy and paste the URL into the browser.

Application