Professional Documents
Culture Documents
with Screenshots
1 Introduction
SAP WebDynPro, a programming model for user interfaces is a platform independent that can
be written in both Java & ABAP. Derived from the MVC (model view controller ) pattern, this
structure is used for user interface applications for graphical modeling of the code generated
from the meta model declarations. In the Java platform, it is developed using the standard UI
design interface NWDS while in ABAP, it uses the ABAP workbench ( SE80 ). It is suited to
design the UIs using the declarative approach for software modularization.
In WD for ABAP mostly the same structure is used with the generated code & the custom
code processed for load generation to finally render the runnable application.
The Web services can be used using the standard SOAP protocol to business data in the
dynpro page.
The SAP Java connector (JCo) can be used to call methods of an EJB residing on the
SAP J2EE engine.
Model objects are yet NOT supported by SAP WD ABAP. It is recommended to have
reusable entities which will encapsulate the business logic to create the ABAP classes
containing the source code. The development of faceless WD components are also
supported which is later accessed by other WD components.
5 Benefits of WD
The main goal of WD is to provide applications using minimal development efforts
and devoting maximum effort on the design time.
By using a a declarative approach and meta model declarations, the language
independent UIs can be developed with the least effort. Though the provision of hand
written code exists, the structure is designed to manipulate the business data.
WD for ABAP supports Internalization, flicker free screen and a clean separation of UIs
and business logic. It also supports value help, dynamic programming, SAP List Viewer
and seamless integration with the SAP Portal.
You should now get the following screen. A component controller, component interface
and window is created by default.
Step 9) Goto START View. Select the Layout tab. Right click on
ROOTUIELEMENTCONTAINER.
Step 10) Create an UI element of type TextView. Enter the Text for the element.
Step 11) Repeat step 9 & 10 for creating other UI elements as follows :
( Reason: The error means that whenever u define an UI element u need to do data
binding with the view context which we have not done as of now.
To avoid this error u can remove the inputfield element now and add later. )
Step 12) Now select Result View. Repeat steps 9 & 10 to create the following UI elements
Save
You should get a screen as under for the RESULT View
Save.
Step 15) Create an Attribute
SAVE
Click on YES.
You should get this screen
SAVE
Step 18) Define NAVIGATIONAL Links Inbound & Outbound
From START View Define an Outbound Plug
Step 19) Result View Define Inbound Plug & Outbound Plug
SAVE
Step 21) DATA BINDING
Open START View
Step 22) Double click on INP_NAME. Goto EDIT mode. Select the context
SAVE
Step 24) Select the RESULTS View. Select the input field and bind it to a context as
before.
Step 25) Now define the action for the BACK button.
Select the Outbound Plug of the START View. Right click Create Navigational Link
Step 27) Repeat the same process for the Outbound Plug of the RESULT View
SAVE
Step 28) Now create the WD Application
Save.
You should get a screen as under
Double click on the Application Name. You will get the URL.
Activate ALL objects.
To run the application, copy the URL and paste it in the browser.
OUTPUT
START View