WebDynpro Overview

8/20/2019 WebDynpro Overview

1/16

Andreas Fahle

SAP Web Dynpro: Overview

Seminar System Modeling

01.06.2005


2/16

HPI, Seminar System Modeling - SS2005 / 2

Agenda

IntroductionWhat is Web Dynpro?

Objectives and approaches

Basic concepts

ExampleViews, Controllers, and Models

Components and Applications

Contexts

Meta-model

Development process

Declarative vs. procedural programming

Common steps

Execution

Summary


3/16


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-basedPart of NetWeaver Developer Studio


4/16




5/16



History: Why the name „Web Dynpro“?Dynpro = „Dynamic program“

Dynpro is SAP‘s legacy technology for interactive UIs (R/2, R/3)

programming in ABAP

Dynpro‘s are rendered in SAP GUI applicationWeb Dynpro is to combine

„high interactivity“ (= dynamic GUI) and

„zero installation“ (= ubiquitous GUI, e.g. web browser)


6/16


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


7/16


Basic concepts – Example

This is a simple example:

simple data types,one view,

no further controllers beyond component and view controller.

componentEmployeeBaseDataEditor

model

Human Ressources

model classEmployee

view controllerof EmployeeForm

context

componentcontroller

viewEmployeeForm

control"name" text field

control propertytext

control property

control

context elementemployee/name

context

context elementemployee/name

context element context element

model property"name" attribute

model property

to thebackend

"model manager"


8/16


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 handlingController

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 isquestionable, although claimed by SAP.

Views don‘t get updates directly from the model.


9/16


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.


10/16


Basic concepts – Contexts

A context represents a hierarchical data „model“(i.e. application metadata).

Each controller has a context.Typically, ...

... a view controller‘s context keeps the„model“ of the data to be presented incontrols; these metadata are bound tocontrol properties,

... a component or custom controller‘s

context keeps the „model“ of all datarequired in the component; these metadataare bound to a model.

Context elements may be mapped across

contexts.Data changes are synchronized betweencontrols and models, according to contextmappings.


11/16


Basic concepts – Meta-model

navigationlink

view

plug

inbound

plug

outboundplug

control

controller

viewcontroller

componentcontroller

customcontroller

context

component

contextelement

map

modelclass

model

application

start

use consist ofconsist of

bindbind

window

navigation

screen layout

have

have

modelproperty

controlproperty

havehave


12/16


Development process – Declarative vs. Procedural

Declarative programming of

layout and navigation

application data anddata binding

Procedural programming of

event handlers

additional methods

Web Dynpro Tools

developer

Editor

Generator

Web DynproMetadata

Java Code

R

//@@begin javadoc:onActionBack(ServerEvent)

/** Declared validating event handler. */

//@@end

public void onActionBack( IWDCustomEvent wdEvent )

{

//@@begin onActionBack(ServerEvent)

wdThis.wdFirePlugToStartView();

//@@end

}


13/16


graph/decl

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 navigationCreate and connect navigation plugs (code is gen‘d)

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

declarative

graphical

procedural

procedural

declarative

graphical

declarative

graph/decl

graph/decl


14/16


Execution

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

Client Presentation server

Backend server(J2EE-based)

Web browser

Web Dynproclient

Web server

Web Dynproruntime

Web-Dynpro-based application

J2EEApplication Server

Backendapplication

R

HTTP

businessdata

R

RMI

Backend server(ABAP-based)

R

SAP Java

Connector

R

SOAP

Web Service provider

screen data

R

R

User

R


15/16


Summary

Web Dynpro is a powerful UI Framework for SAP NetWeaver.

Most of the programming can be done in a graphical and/or declarativemanner.

Web Dynpro is open for new backend types, frontend types, as well asfurther programming languages.

Component-orientation supports re-use.Data are mapped and synchronized between UI controls and thebackend via models and contexts.

All activity (i.e. roundtrips) is initiated from the client.


16/16


References

Kessler, K., Tillert, P., Dobrikov, P.: Java-Programmierung mit demSAP 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.

Knöpfel, A.: Konzepte der Beschreibung interaktiver Systeme.

Universitätsverlag Potsdam, Potsdam 2005.

Documents

WebDynpro Overview