A BRIEF INTRODUCTION TO

WEB DYNPRO
 Web Dynpro is the SAP NetWeaver programming
model for user interfaces (UIs).

 Web Dynpro Java is represented inside SAP

NetWeaver Composition Environment 7.2 in a
new version

 It has lot of new UI elements.

 Web Dynpro now supports EJB 3.0 using the EJB

model.
 WHAT IS WEB DYNPRO ?
 Web Dynpro is to say that it is a toolset for building
business applications.

 SAP delivers three variants of Web Dynpro:

 Web Dynpro for ABAP

 Web Dynpro for Java  

 Web Dynpro for Visual Composer

 
PURPOSE :
 SAP designed Web Dynpro in order to create a development toolset that would be
suitable for the delivery of high quality, robust business applications that can be
accessed using a variety of client software products such as standard browsers, Pocket
PCs, Nokia Communicators.

 Web Dynpro for Visual Composer is somewhat different from the other two variants in
that you do not have access to modify any coding. Visual Composer is used as the
graphical programming tool to create a Web Dynpro implementation of your business
application. However at runtime, the application definition is translated from the design
time configuration into an executable Web Dynpro application, thus the coding is not
accessible for design time modification.

The following prerequisites are mandatory for understanding web dynpro .

 The concepts of Object Orientation

 Java programming
 M-V-C Structure
BASIC DESIGN
In creating this simple application, you will be introduced to the
following fundamental design concepts in Web Dynpro:
 Component based development .
 Context Mapping – How to share data between different controllers within
one component .
 Defining a Web Dynpro user interface .
 Data Binding – How to visualize information held within a controller .
 How to navigate from one Web Dynpro screen to another  .
 How to invoke the functionality of a Web Dynpro component from a
browser

 These concepts are foundational to all further Web Dynpro development,

and must be firmly under-stood before moving on to the development of
more complex applications.
 From a Web Dynpro perspective, development is contained within units known as
“Development Components”.

 Development components are grouped together into larger units known as

“Software Components”.

 A Development Component is simply a metadata wrapper used to encapsulate a

group of related units of software. Within a DC there is information that describes
the following:

-> How the software should be compiled (if at all)

-> The promotion path through the system landscape

-> The public interface of any contained units of software that should be
visible outside the scope of the DC (known as “Public Parts”)

 The dependencies this DC may have on the public parts of other DCs.
1) Creating a DC of type Web Dynpro
 Before we create our Web Dynpro application, we must first create a DC of type
Web Dynpro.
 Web Dynpro component has two interfaces:
-> visual interfaces .
-> programmatic interfaces.
 Having opened the NetWeaver Developer Studio, select the Web Dynpro
perspective by following the menu path
 Window -> Open Perspective -> Other -> Web Dynpro.  
 Now select File -> New -> Web Dynpro Development Component.
The
 next screen you will see asks for the name of the software component to which your
development component will belong. Below “local developments” is the name of a dummy
development track, within which there is a dummy software component called “my
components”. Press next to continue. On the following screen, you need to enter the
information about the new DC.
 

Select Web Dynpro Software Component

2) Creating a Web Dynpro Component
 A development component of type web dynpro is simply a metadata container used
for the transport and compilation of software.

 A web dynpro component is your fundamental unit of software development and

reuse.
 

 Drag and drop

component Click on
this tool and then
click anywhere on
the blank canvas area
to the right.
Now the pop-up window will appear. Enter the name FirComp and press Next
and then Finish completing the creation of your Web Dynpro component
 Now, on your Development Component canvas you should see a single Web Dynpro
Component called FirComp.
 A Web Dynpro Component should be written in such a way that it represents an
atomic unit of business processing.
Component has 2 interfaces. light blue on the left represents the component’s visual
interface, and the yellow on the right represents the component’s programmatic interface
THE STRUCTURE OF A WEB DYNPRO COMPONENT

THE GRAPHICAL WEB DYNPRO COMPONENT EDITOR

COMPONENT CONTROLLER
 The Component Controller is a programmatic Java class that is the
central point of control for the entire component. As the name implies, this
controller is the component itself. The lifespan of the entire Web Dynpro component
is exactly equal to the lifespan of this controller.

 A component controller acts as the middle-man between a model and a

view controller. The component controller interacts with the model and
obtains data from the backend system. This data may then require pre-
processing of some sort before it is ready for presentation.

 This processing is performed by the component controller and once complete, the
data is placed into an area of memory known as the “context”.

 Each controller within a Web Dynpro component has its own memory area or
“context”, and view controllers can access the information held in the component
controller’s context by means of a techniques called “context mapping”.

 With respect to a model, the component controller acts as a data consumer. However,
with respect to a view controller, the component controller acts as a data generator.
Interface Controller
 We can define methods in the interface controller that are then implemented by the
component controller.  
 In addition to being able to define methods in the Interface Controller, you can also
define events and data structures (the correct Web Dynpro term for these data
structures is Context Nodes).

Custom Controllers
 These controllers are created at design time and can be used to encapsulate any
functionality that needs to be shared by multiple controllers within the
component.
 At runtime, custom controllers are always singletons with respect to the component
controller

View Controllers
 The view controller is the only controller within a Web Dynpro component that can
place information directly on the screen.
 A Web Dynpro component can have zero or more View Controllers.
 A view controller is never responsible for generating the data it displays.
Window Controller
 Window Controller handles the processing for an aggregation of views, a view controller handles the
processing for an aggregation of UI elements
 Window Controller as being hierarchically superior to the view controllers.
 view controllers would never be visible on the screen because they have not been embedded into the
Component’s visual interface
Window Interface Controller
 a Window Controller implements the component’s visual interface defined in the Interface View
Controller.
 The Interface View seen within the Interface View Controller is implemented by the Web
Dynpro Framework and exists only at runtime. The Web Dynpro developer has no direct control over
this object. This is achieved through a technique known as “Context Mapping”
  The Objects within a Web Dynpro DC

 
3)CREATING THE COMPONENT CONTROLLER’S CONTEXT
 Select a node and then select manual creation of a context node and place its
name and then click finish . after click ok .
 RIGHT CLICK ON THE CANDIDATEINFO CONTEXT NODE AND SELECT
NEW -> ATTRIBUTE.
  CREATING ATTRIBUTES FOR THE CANDIDATEINFO CONTEXT NODE.
THE FINISHED CONTEXT STRUCTURE

changing the node’s collection cardinality

now change the collection
cardinality value from the default 0..n
to 1..1. this tells the web dynpro
framework that at runtime, this context
node will contain one, and only
one element. this is like saying
that a database table can contain
only one row.
4)Preparing the View Controllers

A default view controller was created

along with the component .
 A second view controller is going
to be needed to act as the second
screen in our application. Therefore, right
click on the “views” node in the web
dynpro explorer and select create view.

Now click on the “create data

link” tool on the left side of this
editor window and drag A line from
fircompview to the component
controller.
 The purpose of this action is to
declare that the view controller will
act as a data consumer from the
component controller.
As soon as you let go of the mouse button, a pop-up window will appear that
allows you to perform something called context mapping. Click on the
candidateinfo node on the right and drag it across to the left and drop it
on the context root node
 The mapping relationship between the
view and component controllers

THE COMPLETED MAPPING RELATIONSHIPS

5)Declaring the UI elements

Double click on the fircompview in the

component editor, and you will open the view
controller editor. Right click on the rootelement
and select “apply template”. The below window
comes
Select which context attributes will supply data to the
form fields
After the above steps the view is
like this.

The UI elements proposed for the form fields

6)Making the screen interactive

Select the Actions tab at the

bottom of the view editor, and
then press the New button in the
top right corner.
Select on the screen then we may recognize actions in bottom after pressing +
button this window appears. For each button we have to provide an onAction .
7)Navigating from one screen to another
Now click on the “Embed
existing View” tool on the left
and then click on the empty
space some where to the right
of FirComView.
A pop-up window will appear
you a list of all the views in
the component, and which
ones have already been
embedded into the window.
Select FirCom1View and
press Finish.
Two-way navigation between the views in a
window
Click on this tool and first drag a
line from FirCompView to
FirComp2View.This will create
three things for you:
An outbound navigation plug in
FirCompView
An inbound navigation plug in
FirCom2View
A navigation link starting from the
outbound plug of FirCompView and
finishing at the inbound plug of
FirComp2View.

8) Invoking navigation from the view controllers

In general, as soon as any outbound plug is created, the NWDS automatically
generates a method for you called wdFirePlug${pout } () where ${pout } is the name
of the outbound plug.

All you need to do to cause navigation to happen is call this method, and the Web
Dynpro Framework handles the rest for you.

Process after clicking any button:

The user clicks on the button UI element

The button UI element raises a client side event called onAction

The client side event causes a round trip to the server

 9)Making your Web Dynpro component executable

 Create a new application from Application menu.

 Create a new application from an existing component.

10)Deploy and run your application
 
THE FIRST SCREEN WILL SHOW FOUR INPUT FIELDS READY TO ACCEPT YOUR INFORMATION.
 
Once you have entered username, qualification, DOB, Country press submit,
and the second screen will echo the information you have just entered.

THE SECONDSCREEN ECHOES THE INFORMATION YOU ENTERED

THANKS

Presented by

K.S.L.Neelima