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

component EmployeeBaseDataEditor to the backend "model manager"

view EmployeeForm

control

view controller of EmployeeForm

component controller

model Human Ressources model class Employee model property "name" attribute

control "name" text field control property text

context context element employee/name

context context element employee/name

control property

context element

context element

model property

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

window

use

have

consist of

consist of

component controller

custom controller controller

view controller

model have

view outbound plug navigation link inbound plug plug

context

model class
have

bind

context element

control bind control property navigation

have

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

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
screen data Web-Dynprobased application
R

Backend application

business data

Web Dynpro client

Web Dynpro runtime

RMI

J2EE Application Server

Backend server (J2EE-based)

User
R
R

Web browser
HTTP

Web server

SAP Java Connector R

Backend server (ABAP-based)

Client

Presentation server
SOAP

Web Service provider

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