2006_08_24_au_014

7/31/2019 2006_08_24_AU_014

http://slidepdf.com/reader/full/20060824au014 1/29

Web Dynpro for ABAP

7/31/2019 2006_08_24_AU_014


© SAP AG 2005, SAP TechEd ’05 / CD155 / 2

Learn ing Objec t ives

As a resu l t o f t h is sess ion, you w i l l :

Know why Web Dynpro is SAP’s preferred UI model

Understand the Web Dynpro programming model

Be able to create basic Web Dynpro applications in ABAP

7/31/2019 2006_08_24_AU_014


Motivation of Web Dynpro

The Web Dynpro Programming Model

Views and UI elements

Controllers and Context

Navigation and Plugs

Supply Functions

Summary

7/31/2019 2006_08_24_AU_014

http://slidepdf.com/reader/full/20060824au014 4/29© SAP AG 2005, SAP TechEd ’05 / CD155 / 4

What i s Web Dynpro ?

A Program m ing Mode l fo r User In t e r faces

Defines a standard structure for user interface applications

Derived from the MVC (“model-view-controller”) design pattern

A Set o f Too ls fo r User In ter fac e Design

Focus on graphical modelling

Code is generated from meta-model declarations

Integrated in SAP NetWeaver Developer Studio and the ABAPWorkbench

A Runt im e Env i ronm ent fo r Appl ic a t ions

Framework running on SAP Web AS server offers common services

A Tec hno logy for So f tw are Modu la r iza t ion Components help structure applications and support pattern-based

UIs

7/31/2019 2006_08_24_AU_014


Web Dynpro Main Bene f it s

Del iver an Ent erpr ise Qual i t yWeb Developm ent Env i ronm ent

minimize coding, maximize design

separate layout and logic

support arbitrary backend systems

support reuse of components

configuration of UI patterns

support Web services and data-binding

Achieve Independenc e run on multiple platforms

Im prove User Ex per ienc e t hrough a"H igh Fidel i t y Web UI"

browser based, zero footprint

screen updates w/o page reloads

client-side dynamics

performance through caching

508 accessibility support

Web DynproMetadata

Web DynproTools

Web Dynpro Runtime

JAVA ABAP

7/31/2019 2006_08_24_AU_014


Mot ivat ion Web Dynpro

Web Dynpro

RenderingEngine

RenderingEngine

RenderingEngine

WebBrowser

SmartClient

other?

Web Dynpr o

UI definitionindependent ofclient technology

as much abstract

declaration aspossible

Different renderingengines for different(future) UI

technologies withoutadapting applicationcoding

??????

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

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

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

7/31/2019 2006_08_24_AU_014







Supply Functions

Summary

7/31/2019 2006_08_24_AU_014


Appl ic at ion Sc enar ios Wi t h Web Dynpro

J2EEWeb Dynpro

Runtime

Web DynproAppWeb Dynpro

App

SAP Enterprise Portal

SAPNetWeaverDeveloper

Studio

ABAPWeb DynproRuntime

Web DynproAppWeb Dynpro

App

ABAP

Workbench

J2EEServer Backend

Application

ABAPServer

RMI

RFC, WS

BusinessData

BusinessData

BusinessAPI (BAPI,

Web Services)

EJB (e.a.)

Web Dynpro iView Web Dynpro iView

7/31/2019 2006_08_24_AU_014


Web Dynpro Deve lopment

Developm ent com ple te lyin tegra t ed in t o ABAPWorkbench

Graphical View Layout design

Declarative UI development

ABAP editor with forwardnavigation

ABAP dictionary data typesdirectly available

Simple remote debugging

Functionality and services ofthe ABAP environmentdirectly usable

ABAP l i fec yc lemanagement

Transport

Translation

Enhancements

7/31/2019 2006_08_24_AU_014


Met a-Model Dec larat ions And Cust om Coding

WebDynproTools

GeneratedCode

Generator

Meta-data C om pi l

er

R un a b l e

A p p

Custom

Code

Met a-m odel Dec lara t ions

Guarantees common app. design

Good for graphical tool support

Screen Layout and Nesting

Navigation and Error Handling

Data Flow

Componentization

...

Cust om Coding

Guarantees universality

Good for data-driven, dynamic apps

Implementation of business rules

Dynamic screen modifications

Access to services (files etc.)

Portal eventing

...

7/31/2019 2006_08_24_AU_014



Model View Cont ro l ler (MVC)

Orig ina l MVC des ign for dec oup l ing present a t ion and

app l ica t ion log ic

Request

Response

User Interaction Layer

Business Interaction Layer

Binding Layer

Visualizes the application

data without caring how itwas generated.

Generates the applicationdata without caring how itwill be displayed.

Binds the user and businessinteraction layers together. Allintermediate processing isperformed here.

Model

View

Contro l ler

W b D C A hi

7/31/2019 2006_08_24_AU_014



Business Logic

(Models)

ComponentController

Model 1

Model 2

Contains Usagedeclarations

U s a g e

d e c l a r a t i o n s

W e b D y n p r o C o m p o n e n t

Components

CustomController

Component Interface

InterfaceController

Interface view

Window WindowController

ViewLayout

View

Controller

M

M

M

M

M

Interface view

Web Dynpro Com ponent Arc h i t ec t ure

SAP Web Dynpro uses pr inc ip les o f MVC parad igm

Controller handlethe user input andsteers the application

Views define the layout

Model holds andprovide the business

logic

W b D C t

7/31/2019 2006_08_24_AU_014



Web Dynpro Componen ts

Web Dynpro Componen t

con ta ins

Windows

Views

UI elements

Layout

Controllers

Context Data

Eventing Methods

Attributes

Component Interface

Interface Contr.

Interface View Label

Component

Controller

Component

Window

ViewControllerView

ViewController

View

7/31/2019 2006_08_24_AU_014







Supply Functions

Summary

Vie Windo s And UI Element s

7/31/2019 2006_08_24_AU_014



View , Window s And UI Element s

View

Is embedded into window

Defines the visible layout viapredefined UI elements

Don’t contain any HTML or

Window

View

scripting

UI e lement s

Are the smallest UI building

blocks (button, input field,…) Available as provided UI

element libraries

Have properties which steer

their behaviour Can be nested with Container

UI elements

Are positioned in hierarchical

structure

Def in ing View Layout

7/31/2019 2006_08_24_AU_014



Def in ing View Layout

UI elementlibraries

UI elementlibraries

Properties of

selected UIelement

Properties of

selected UIelement

UIelementtree ofview

UIelementtree ofview

Viewlayout

Viewlayout

UI Elem ent Cat egor ies

7/31/2019 2006_08_24_AU_014



UI Elem ent Cat egor ies

Var ious c a t egor ies o f UI e lement s a re support ed

Gantt, Networke.g. Button, InputField,Label

e.g. DateNavigator,Table, Tree

e.g.TransparentContainer,

Tray

InteractiveForm

BusinessGraphics,GeoMap

BI Application Frame

OfficeControl

MessageArea

Eac h UI e lement ob jec t i s represent ed as an abst rac t

c lass t ha t i s independent o f any c l ien t p resenta t ion layer .

7/31/2019 2006_08_24_AU_014







Supply Functions

Summary

Cont ro l le r And Cont ex t

7/31/2019 2006_08_24_AU_014



Cont ro l le r And Cont ex t

Contro l le r

Contains the logic of the UIlayer

Implements event handlers

Reads and writes contextnode content

Each view has its own viewcontroller

Contex t Hierarchy of nodes and

attributes

Contains the data of the UI

Nodes and attributes can bebound to UI elements

Framework cares aboutupdating the values

View Controller

Context

Node N1

Node N2

Attribute CARR

Attribute DEP_AIRP

Root Node

method WD_DO_INITnode = 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 ).

LH

Paris

View Cont ro l le r And View Contex t

7/31/2019 2006_08_24_AU_014



View Cont ro l le r And V iew Contex t

Window

View View Controller

Context

Node N1

Node N2

Attribute CARR

Attribute DEP_AIRP

Root Node

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 ).

LH

Paris

Controller

containsmethods...

...and events

for userinteractions

Contex t Node Element s

7/31/2019 2006_08_24_AU_014



View Controller

View Context

Node 2

Root NodeNode 1 (Cardinality 0...n)

Airline ID

Airline Name

URL

method WD_DO_INIT

* carriers: internal table

...

node->bind_elements( carriers ).

AC

Air C.

www

AB

Air B.

www

AA

Amer.

www

Elements of acontext nodeElements of acontext node

Contex t Node Element s

Com ponent Cont ro l le r And Cont ex t Mapping

7/31/2019 2006_08_24_AU_014



Com ponent Cont ro l le r And Cont ex t Mapping

Com ponent Cont ro l le r

Controller which is thebackbone of the component

Has its own Context

Contains the logic forinteraction with the model(ABAP class, functionmodules, BAPIs, WebServices)

Component ControllerComponent ControllerContext

Root Node

Node 1

Node 3

Node 2

Method show_flights

flights = BO->get…node1 = wd_context->…

node1->bind_elements(

flights ).

ModelClass,

ABAPObjectsAPI,

BAPIs,

OtherWDCompo-nent,

…

Cont ex t Mapp ing

Nodes of ComponentController context can be

mapped to nodes of othercontexts

Framework cares about datatransport (references)


7/31/2019 2006_08_24_AU_014



Component ControllerComponent

Window

View Controller

Context

Node 1

View

Component ControllerContext

Root Node

Node 1

Node 3

Node 2

Mapping ofcontext data

Root Node

Method show_flights

flights = BO->get…

node1 = wd_context->…node1->bind_elements(

flights ).

Componentcontroller connectsto business logic

and gets/sets data

Model Class,

ABAPObjects API,

BAPIs,

Other WDComponent,

…


Contex t Mapp ing Bet w een View s

7/31/2019 2006_08_24_AU_014



Component ControllerComponent

View Controller

View

Label

Press

Context

Root Node

Node 1

Node 2

Attribut1

Attribut2

Window

View Controller

Context

Node 1

View

View Controller

Label

View

ContexthRoot Node

Node 1

Node 2

Component ControllerContext

Root Node

Node 1

Node 3

Node 2

Mapping ofcontext data

LH LH

LH

User enters

data

Root Node

Label

Co te t app g et ee e s

7/31/2019 2006_08_24_AU_014







Supply Functions

Summary

Navigat ion Be tw een V iew s

7/31/2019 2006_08_24_AU_014



g

Window

CustomerList

CustomerSearch

Out In

Inbound plug

Outbound plug

Navigation link

To define the navigation between two views, you need to create exitand entry points for each view using outbound and inbound plugs.

Only then you can specify the navigation flow using navigation links

Plugs And Navigat ion

7/31/2019 2006_08_24_AU_014



g g

Window

View ControllerView

View Controller

Outbound PlugOutbound Plug

View

SEARCH_FLIGHTS

Inbound PlugInbound Plug

CreateAction

CreateAction

OUT

IN

OUT

IN

IN

OUT

Summary

7/31/2019 2006_08_24_AU_014



Web Dynpro is SAP’s UI strategy

Declarative, MVC based UI programming model

UI definition independent of rendering technology

Web Dynpro for ABAP available with SAP NetWeaver2004s

Programming model similar to Web Dynpro for Java

Completely Integrated into the SAP NetWeaverApplication Server ABAP

Quest ions?

7/31/2019 2006_08_24_AU_014



Q& A

2006_08_24_au_014

Documents