SAP Web Dynpro: Overview

Seminar System Modeling

01.06.2005

Andreas Fahle

Agenda
Introduction
What is Web Dynpro?
Objectives and approaches
Basic concepts
Example
Views, Controllers, and Models
Components and Applications
Contexts
Meta-model
Development process
Declarative vs. procedural programming
Common steps
Execution
Summary

HPI, Seminar System Modeling - SS2005 / 2

Introduction What is Web Dynpro? (1)

WD is a UI framework for SAP NetWeaver.
WD supports programming in Java, ABAP, and .NET.
Focus on Java version here
WD comes with powerful design tools.
Eclipse-based
Part of NetWeaver Developer Studio

HPI, Seminar System Modeling - SS2005 / 3

Introduction What is Web Dynpro? (2)

HPI, Seminar System Modeling - SS2005 / 4

Introduction What is Web Dynpro? (3)

History: Why the name Web Dynpro?
Dynpro = Dynamic program
Dynpro is SAPs legacy technology for interactive UIs (R/2, R/3)
programming in ABAP

Dynpros are rendered in SAP GUI application

Web Dynpro is to combine
high interactivity (= dynamic GUI) and
zero installation (= ubiquitous GUI, e.g. web browser)

HPI, Seminar System Modeling - SS2005 / 5

Introduction Objectives and approaches

minimize coding, maximize design
tools allow graphical/declarative programming, code is generated
separate layout and logics
view vs. controller, plus data binding and navigation plugs
support arbitrary backends
JavaBeans, ABAP, and Web Services are supported
run on multiple platforms
Java, ABAP, and .NET are supported
high fidelity web UI
browser-based WD client, including
modern web browsers (IE 5.5, Mozilla 1.7)
mobile devices (PocketPC, Blackberry)
Web Dynpro Client for Windows (SAPGUI-Nachfolger)

different rendering modes (server-side vs. client-side)

accessibility
internationalization
HPI, Seminar System Modeling - SS2005 / 6

Basic concepts Example

view
EmployeeForm

control

to the
backend

component
EmployeeBaseDataEditor

"model manager"

view controller
of EmployeeForm

component
controller

control
"name" text field

context

context

model class
Employee

control property
text

context element
employee/name

context element
employee/name

model property
"name" attribute

control property

context element

context element

model property

model
Human Ressources

This is a simple example:

simple data types,
one view,
no further controllers beyond component and view controller.

HPI, Seminar System Modeling - SS2005 / 7

Basic concepts Views, Controllers, and Models

View
description of a visible screen area
contains and lays out controls (aka widgets)
defines actions (i.e. relevant input on controls by the user), which
trigger event handling
Controller
performs event handling
each component has a component controller
each view has a view controller
custom controllers may be added for further structuring
Model
represents the data in the backend
Note: Manifestation of the Model-View-Controller pattern is
questionable, although claimed by SAP.
Views dont get updates directly from the model.
HPI, Seminar System Modeling - SS2005 / 8

Basic concepts Components and Applications

Component
reusable UI program package
mostly contains views, often uses models
communicates with other components via component interfaces
Application
something runnable (from client application, i.e. web browser)
identified by URL
Running an application means
starting a component,
navigating to an initial view in an initial window.

HPI, Seminar System Modeling - SS2005 / 9

Basic concepts Contexts

A context represents a hierarchical data model
(i.e. application metadata).
Each controller has a context.
Typically, ...
... a view controllers context keeps the
model of the data to be presented in
controls; these metadata are bound to
control properties,
... a component or custom controllers
context keeps the model of all data
required in the component; these metadata
are bound to a model.
Context elements may be mapped across
contexts.
Data changes are synchronized between
controls and models, according to context
mappings.
HPI, Seminar System Modeling - SS2005 / 10

Basic concepts Meta-model

screen layout
application

start

component

have

use

component
controller

window

consist of

custom
controller

consist of

view
controller

controller
model

view
outbound
plug

have

navigation
link

context
inbound
plug
plug
model
class
have

bind

context
element

model
property
HPI, Seminar System Modeling - SS2005 / 11 map

control
bind

have

control
property
navigation

Development process Declarative vs. Procedural

Web Dynpro Tools
Editor

developer
Generator

Web Dynpro
Metadata

Java Code

Declarative programming of
layout and navigation
application data and
data binding
Procedural programming of
event handlers
additional methods

//@@begin javadoc:onActionBack(ServerEvent)
/** Declared validating event handler. */
//@@end
public void onActionBack(<...> IWDCustomEvent wdEvent )
{
//@@begin onActionBack(ServerEvent)
wdThis.wdFirePlugToStartView();
//@@end
}

HPI, Seminar System Modeling - SS2005 / 12

Development process Common steps

Start
Create component (code is generated)
Design views
Create view (code is generated)
Place controls on view (metadata are generated)
Add control properties (metadata are updated)
Design screen layout
Apply screen layout to views (metadata are generated)
Design navigation
Create and connect navigation plugs (code is gend)
Write event handlers
Design data flow
Populate and map contexts (metadata are generated)
Use models (metadata are generated)
Add additional features
Add controllers, write event handlers and methods
HPI, Seminar System Modeling - SS2005 / 13

declarative

declarative
graphical
declarative

graphical

graph/decl
procedural

graph/decl
graph/decl

procedural

Execution
Web-Dynprobased application

screen data

Web Dynpro
client

Web Dynpro
runtime

RMI

Backend
application

J2EE
Application Server

business
data

Backend server
(J2EE-based)

User
R
R

Web browser

Web server
HTTP

Client

SAP Java
Connector
R

Backend server
(ABAP-based)

Web Service provider

Presentation server
SOAP

Web-Dynpro-based application runs on presentation server.

Web Dynpro client knows only about screen data (e.g. HTML widgets),
not about data binding and contexts.
Use of widgets (i.e. entering text) may cause events, which trigger a
roundtrip:
message from client to server, and context update
possibly further activity by controllers at the server
message from server to client, and screen update
HPI, Seminar System Modeling - SS2005 / 14

Summary
Web Dynpro is a powerful UI Framework for SAP NetWeaver.
Most of the programming can be done in a graphical and/or declarative
manner.
Web Dynpro is open for new backend types, frontend types, as well as
further programming languages.
Component-orientation supports re-use.
Data are mapped and synchronized between UI controls and the
backend via models and contexts.
All activity (i.e. roundtrips) is initiated from the client.

HPI, Seminar System Modeling - SS2005 / 15

References
Kessler, K., Tillert, P., Dobrikov, P.: Java-Programmierung mit dem
SAP Web Application Server. Galileo Press, Bonn 2005.
McNulty, P.: Web Dynpro Overview. SAP AG, 2002.
Tillert, P., Wilson, A.: Web Dynpro Introduction/Concepts. SAP AG,
2003.
SAP Library Development Manual, Web Dynpro.
SAP Library Architecture Manual, Web Dynpro Architecture.
SAP Online Help, Creating Your First Web Dynpro Application.
Knpfel, A.: Konzepte der Beschreibung interaktiver Systeme.
Universittsverlag Potsdam, Potsdam 2005.

HPI, Seminar System Modeling - SS2005 / 16