You are on page 1of 42

Learning Objectives

As a result of this workshop, you will be able to:


Appreciate the importance of WD4A
Describe the declarative programming approach used to create
Web Dynpro applications
Understand the benefits resulting from the metadata approach
List the most important elements that are part of a Web Dynpro
application
Be able to create basic Web Dynpro applications in ABAP

2007 Intelligroup, Inc.

Confidential and
08/05/15

Web Based Applications - Evolution


In the past,great efforts went into the architecture and design of the
development of web based applications.Before even the first line of
business process logic could be implemented,various characteristics of
internet communication had to be considered such as:
HTTP :
Communication protocol for the internet.It is based on
request/response model.
User friendliness :
HTML provides static text and only limited options for
presenting user interface elements or receiving user input

2007 Intelligroup, Inc.

Confidential and
08/05/15

Web Based Applications Evolution cont


Cost-efficiency:
The developers of web based applications need to consider
such factors as internationalization,navigation options and
interaction that entails often hundreds of pages.
Integration and Security aspects :
Numerous systems in a heterogeneous system landscape
must be smoothly integrated.In many cases,this involves back
end systems of an enterprise so that security aspects are
adhered to in order to protect the enterprise data.

2007 Intelligroup, Inc.

Confidential and
08/05/15

SAP Developments in the area of UI Technologies


2010
2005
2000
1995
1990
1985
1980
1975
1970
1965
Mainframe
ClientWeb-Based Web-Based Web Dynpro
(SAP R/2) Server (SAP
ITS
BSP
R/3)

2007 Intelligroup, Inc.

Confidential and
08/05/15

A technology that is best suited for


developing ABAP-based web
applications
High Speed,low cost and standardized
UIs
The answer is
------------------------------------------>

Web Dynpro For

ABAP

What is Web Dynpro ?


A Programming Model for User Interfaces
Defines a standard structure for user interface applications
Derived from the MVC (model-view-controller) design pattern
A Set of Tools for User Interface Design
Focus on graphical modelling
Code is generated from meta-model declarations
Integrated in SAP NetWeaver Developer Studio and the ABAP Workbench
A Runtime Environment for Applications
Framework running on SAP Web AS server offers common services
A Technology for Software Modularization
Components help structure applications and support pattern-based UIs

2007 Intelligroup, Inc.

Confidential and
08/05/15

Meta-model Declarations and Custom Coding

Generator

Meta-model Declarations
Guarantees common app. design
Good for graphical tool support
Screen Layout and Nesting
Navigation and Error Handling

Compiler

Web
Dynpro
Tools

Generated
Code
Custom
Code

Run able App

Meta-data

Custom Coding
Guarantees universality
Good for data-driven, dynamic apps
Implementation of business rules
Dynamic screen modifications

Data Flow

Access to services (files etc.)

Componentization

Portal eventing

...

...
8

2007 Intelligroup, Inc.

Confidential and
08/05/15

Application Scenarios With Web Dynpro


SAP Enterprise Portal
Web Dynpro iView

Web Dynpro
Web DynproApp
App

SAP
NetWeaver
Developer
Studio
J2EE
Server

J2EE
Web Dynpro
Runtime

Web Dynpro iView

MUSE Client

ABAP
Web Dynpro
Web Dynpro Web DynproApp
App
Runtime
ABAP
Workbench

RFC, WS

RMI

EJB (e.a.)

Business
Data

ABAP
Server

Business
API (BAPI,
Business
Backend Application
Web Services)
Data

2007 Intelligroup, Inc.

Confidential and
08/05/15

Web Dynpro Main Benefits


Deliver an Enterprise Quality
Web Development Environment
Enforce clear separation between UI logic
and business logic
Little coding, lots of design
Declarative UI development

Web Dynpro
Tools

Web Dynpro
Metadata

Web Dynpro Runtime


JAVA

ABAP

Achieve Independence
run on multiple platforms
Improve User Experience
through a "High Fidelity Web UI"
browser based, zero footprint
screen updates w/o page reloads
client-side dynamics
performance through caching
508 accessibility support
10

2007 Intelligroup, Inc.

Confidential and
08/05/15

Motivation of Web Dynpro


The Web Dynpro Programming Model
Views and UI elements
Controllers and Context
Navigation and Plugs
Supply Functions
Summary

Motivation Web Dynpro


Web Dynpro
UI definition independent of
client technology
as much abstract declaration
as possible
Different rendering engines
for different (future) UI
technologies without adapting
application coding

Smart
Client

Web
Browser

http://.....
HTML, JS

http://.....
XML, delta

other?

???
???

Rendering Rendering Rendering


Engine
Engine
Engine

Meta Data
<xml>
<wd:xxx>
</xml>

Web Dynpro

2007 Intelligroup, Inc.

12

Confidential and
08/05/15

Motivation of Web Dynpro


The Web Dynpro Programming Model
Views and UI elements
Controllers and Context
Navigation and Plugs
Supply Functions
Summary

Web Dynpro Development


Development completely integrated
into ABAP Workbench
Graphical View Layout design
Declarative UI development
ABAP editor with forward
navigation
ABAP dictionary data types directly
available
Simple remote debugging
Functionality and services of
the ABAP environment directly
usable
ABAP lifecycle management
Transport
Translation
Enhancements
14

2007 Intelligroup, Inc.

Confidential and
08/05/15

Model View Controller (MVC)


Original MVC design for decoupling presentation and
application logic

Binds the user and business


interaction layers together. All
intermediate processing is
performed here.

Request
Response

Controller

Model

Generates the application


data without caring how it
will be displayed.

Business Interaction Layer


User Interaction Layer
Visualizes the application
data without caring how it
was generated.

Binding Layer

View
15

2007 Intelligroup, Inc.

Confidential and
08/05/15

Web Dynpro Component Architecture


SAP Web Dynpro uses principles of MVC paradigm
Controller handle the
user input and steers
the application

Component Interface
Interface
Controller

Interface
Interface
viewview
M

Views define the layout


Window

Window
Controller

M
Contains

Usage
declarations

View
Layout

View
Controller
M

Custom
Controller

Usage declarations

Model holds and


provide the business
logic

Component
Controller
Components

Model 1

Model 2

Business Logic

W e b

D y n p r o

C o m p o n e n t

(Models)

16

2007 Intelligroup, Inc.

Confidential and
08/05/15

Web Dynpro Components


Web Dynpro Component contains
Windows
Component
Views
UI elements
Layout

Component
Controller

Window
View

View
Controller

View

View
Controller

Controllers
Context Data
Eventing
Methods
Attributes
Component Interface
Interface Contr.
Interface View
17

2007 Intelligroup, Inc.

Confidential and
08/05/15

Motivation of Web Dynpro


The Web Dynpro Programming Model
Views and UI elements
Controllers and Context
Navigation and Plugs
Supply Functions
Summary

View, Windows and UI Elements


View
Is embedded into window
Defines the visible layout via
predefined UI elements
Dont contain any HTML or
scripting

Window
View

UI elements
Are the smallest UI building blocks
(button, input field,)
Available as provided UI element
libraries
Have properties which steer
their behavior
Can be nested with Container UI
elements
Are positioned in hierarchical
structure
19

2007 Intelligroup, Inc.

Confidential and
08/05/15

Defining View Layout


UI
element
libraries

UI
element
tree of
view

Properties
of
selected
UI
element

View
layout
20

2007 Intelligroup, Inc.

Confidential and
08/05/15

UI Element Categories
Various categories of UI elements are supported
Gantt, Network
e.g. Button,
InputField, Label

InteractiveForm
BusinessGraphics,
GeoMap

e.g. DateNavigator,
Table, Tree

BI Application Frame

OfficeControl
e.g.
TransparentContaine
r, Tray

MessageArea

Each UI element object is represented as an abstract class that is independent


of any client presentation layer.
21

2007 Intelligroup, Inc.

Confidential and
08/05/15

DEMO
22

2007 Intelligroup, Inc.

Confidential and
08/05/15

Motivation of Web Dynpro


The Web Dynpro Programming Model
Views and UI elements
Controllers and Context
Navigation and Plugs
Supply Functions
Summary

Controller and Context


Controller
Contains the logic of the UI layer
Implements event handlers
Reads and writes context node
content
Each view has its own view
controller

View Controller
Context
Root Node
Node N1
LH

Attribute CARR

Paris Attribute DEP_AIRP

Node N2

Context
Hierarchy of nodes and attributes
Contains the data of the UI
Nodes and attributes can be
bound to UI elements
Framework cares about updating
the values

method WD_DO_INIT
node = wd_context->get_child_node(N1).
node->set_attribute( name = DEP_AIRP
value = Paris).
Method onAction_GOTO_NEXT
node = wd_context->get_child_node(N1).
node->get_attribute( name = CARR
value = carrier ).

24

2007 Intelligroup, Inc.

Confidential and
08/05/15

View Controller and View Context


Window
View

View Controller
Context
Root Node
Node N1
LH

Attribute CARR

Paris

Attribute DEP_AIRP

Node N2

Controller
contains
methods...
...and events
for user
interactions

method WD_DO_INIT
node = wd_context->get_child_node(N1).
node->set_attribute( name = DEP_AIRP
value = Paris).
Method onAction_GOTO_NEXT
node = wd_context->get_child_node(N1).
node->get_attribute( name = CARR
value = carrier ).

25

2007 Intelligroup, Inc.

Confidential and
08/05/15

Context Node Elements


View

View Controller
Context
Root Node
Node 1

AA

Node 1 (Cardinality 0...n)

Airline
ABID

AC

Airline ID

Amer. Airline
Air B.
NameAir C. Airline Name

www URL
www

www URL

Node 2

Elements of
a context
node
method WD_DO_INIT
* carriers: internal table
...
node->bind_elements( carriers ).

26

2007 Intelligroup, Inc.

Confidential and
08/05/15

DEMO

27

2007 Intelligroup, Inc.

Confidential and
08/05/15

Component Controller and Context Mapping


Component Controller
Controller which is the
backbone of the component
Has its own Context
Contains the logic for
interaction with the model
(ABAP class, function modules,
BAPIs, Web Services)
Context Mapping
Nodes of Component
Controller context can be
mapped to nodes of other
contexts
Framework cares about data
transport (references)

Component Controller
Component Controller
Context
Root Node
Node 1

Node 2
Node 3

Method show_flights
flights = BO->get
node1 = wd_context->
node1->bind_elements(
flights ).

Model
Class,
ABAP
Objects
API,
BAPIs,
Other WD
Component,

2007 Intelligroup, Inc.

28

Confidential and
08/05/15

Context Mapping Between Views


Component

User enters
data

Window
View

Mapping of
Component
context data

View Controller
Context
Root Node
Node 1
LH

Controller

Component Controller
Context
Root Node
Node 1
LH
Node 2

View Controller
Node 3

View
View

View Controller

Label
Context
Label
Root
Node
Label

Root Node

Contexth

Node 1

Press
Attribut1
Attribut2

Node 2

Node 1
LH
Node 2

29

2007 Intelligroup, Inc.

Confidential and
08/05/15

Component Controller
Component

Mapping of
context data

Component Controller
Context

Window
View

Component Controller

View Controller
Context

Root Node
Node 1

Root Node
Node 1
Node 2
Node 3

Model Class,

Component
controller connects
to business logic
and gets/sets data

Method show_flights
flights = BO->get
node1 = wd_context->
node1->bind_elements(
flights ).

ABAP
Objects API,
BAPIs,
Other WD
Component,

2007 Intelligroup, Inc.

30

Confidential and
08/05/15

DEMO

31

2007 Intelligroup, Inc.

Confidential and
08/05/15

Motivation of Web Dynpro


The Web Dynpro Programming Model
Views and UI elements
Controllers and Context
Navigation and Plugs
Supply Functions
Summary

Navigation Between Views


Window
Customer
Search

Customer
List

Out

In

Inbound plug
Outbound plug
Navigation link
To define the navigation between two views, you need to create exit
and entry points for each view using outbound and inbound plugs.
Only then you can specify the navigation flow using navigation links
33

2007 Intelligroup, Inc.

Confidential and
08/05/15

Plugs and Navigation


Window

Outbound
Plug
View Controller

View

OUT

OUT

SEARCH_FLIGHTS

IN

Inbound Plug

View

Create
Action

View Controller
IN

OUT

IN

34

2007 Intelligroup, Inc.

Confidential and
08/05/15

DEMO

35

2007 Intelligroup, Inc.

Confidential and
08/05/15

Motivation of Web Dynpro


The Web Dynpro Programming Model
Views and UI elements
Controllers and Context
Navigation and Plugs
Supply Functions
Summary

Context Node at Design Time


Declaration of Context Nodes
Create metadata which defines
the structure of the context
Two dimensional hierarchy like
files and folders
But each node can be a collection
Min and max number of elements
in a node is
steered by Cardinality
(0..1)

Context
Root Node
FLIGHTS (0...n)
SQ

Airline ID

203

Flight Nr

051003

Date

BOOKINGS (0n)

(1..1)

Booking Nr

(0..n)

Customer

(1..n)

AGENCY (11)

37

2007 Intelligroup, Inc.

Confidential and
08/05/15

Complex Data in Context Node


Context at runtime
Nodes with cardinality (0..n)
can contain several elements
at runtime
Each element can have its own
set of sub nodes at runtime
which are again collections of
elements

Example: Flights with bookings


Bookings for a selected flight
should be displayed in second
table on the same view
Each flight has its own set of
bookings

View Controller
Context
Root Node
FLIGHTS (0...n)
SQ

SR
LH

UA

Airline ID

203

Swiss
4030

0407

Flight Nr

051003

www
051223

052709

Date

BOOKINGS
Booking Nr
Customer

38

2007 Intelligroup, Inc.

Confidential and
08/05/15

Supply Function of Context Node


Supply Function
Is triggered if lead
selection of parent
element changes
Is implemented as method
of controller
Has access to parent
element
Typically used when
substructure of context
nodes with several
elements has to be filled.
Flights Bookings,
Customers Orders,

39

2007 Intelligroup, Inc.

Confidential and
08/05/15

DEMO

40

2007 Intelligroup, Inc.

Confidential and
08/05/15

Summary

Web Dynpro is SAPs UI strategy


Declarative, MVC based UI programming
model
UI definition independent of rendering
technology
Web Dynpro for ABAP available with SAP
NetWeaver 2004s
Programming model similar to Web
Dynpro for Java
Completely Integrated into the SAP
NetWeaver Application Server ABAP

41

2007 Intelligroup, Inc.

Confidential and
08/05/15

THANK YOU FOR YOUR ATTENTION !

QUESTIONS

SUGGESTIONS

DISCUSSION

42

2007 Intelligroup, Inc.

Confidential and
08/05/15