Introduction to the Web Dynpro architecture

Contents:

Web Dynpro Introduction

After completing this unit, you will understand:

The basic concepts behind Web Dynpro

The basic architecture of a Web Dynpro Component

Web Dynpro Introduction: Unit Objectives

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

Web Dynpro Main Benefits

Deliver an Enterprise QualityWeb Development Environment 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 Independence run on multiple platforms

Improve User Experiencethrough a "High Fidelity 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 RuntimeJAVA ABAP

Multi Channel Access

Meta-model Declarations vs. Custom Coding

Meta-model Declarations

Guarantees common app. design

Good for graphical tool support Screen Layout and Nesting Navigation and Error Handling

Data Flow

Componentization

...

Custom Coding

Guarantees universality

Good for data-driven, dynamic apps Implementation of business rules

Dynamic screen modifications

Access to services (files etc.)

Portal eventing

...

WebDynproTools

GeneratedCode

Generator

Meta-data Com

piler

Run able App

CustomCode

Application Scenarios with Web Dynpro

JAVAWeb Dynpro

Runtime

JAVAWeb Dynpro

Runtime

Deployed WebDynpro App

Deployed WebDynpro AppDeployed Web

Dynpro AppDeployed Web

Dynpro App

SAP Enterprise PortalSAP Enterprise Portal

Web DynproApplication

Web DynproApplication

HTTPSAP

NetWeaverDeveloper

Studio

SAPNetWeaverDeveloper

Studio

ABAPWeb DynproRuntime

ABAPWeb DynproRuntime

Web DynproApp

Web DynproAppWeb Dynpro

AppWeb Dynpro

App

ABAP WorkbenchABAP Workbench

Conversionof existingDynpros

Conversionof existingDynpros

J2EEBackendServer

J2EEBackendServer Backend ApplicationBackend Application

ABAPBackendServer

ABAPBackendServer

Web ServiceProviderWeb ServiceProvider

WebService

WebService

RMI SOAP RFC

BusinessData

BusinessData

BusinessData

RFC enabledFunction Modules

EJB (e.a.)EJB (e.a.)

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

Window

ViewController

View

Web Dynpro Component

Main Web DynproComponent parts Windows Views

UI elements Layout Controller Context….

Component Controllers Context…. Label

ComponentController

ViewController

View

Context Context

Context

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

Window

View ControllerView

Context and Data Transport

Label

ComponentController

View ControllerViewContext

Node 1Root Node

ContextRoot Node

Node 1

Node 3

Node 2

Context

Node 3Root Node

Context Like a data

containerwhich holdsthe data

The datatransportbetween thecontroller canbe establishedwith mappingdefinition

Context Mapping

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

View Controller Component Controller

MappingRelationship

Mapped node collection Node collection ofmapping origin

ControllerUsage

Declaration

Context Root

FLIGHTS

BOOKINGS

BOOKID

CUSTID

CLASS

PASSN

PRICE

CARRID

CONNID

FLDATE

Context Root

FLIGHTS

BOOKINGS

BOOKID

CUSTID

CLASS

PASSN

PRICE

CARRID

CONNID

FLDATE

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

View

Putting data on the screen: Data Binding

Component controllercontext

View controllercontext

Context mappingData Binding

View layout

Root Node

FLIGHTS

BOOKINGS

BOOKID

CUSTID

CLASS

PASSN

PRICE

CARRID

CONNID

FLDATE

Root Node

FLIGHTS

BOOKINGS

BOOKID

CUSTID

CLASS

PASSN

PRICE

CARRID

CONNID

FLDATE

Window

Navigation between views

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

Outbound plug

Navigation link

Inbound plug

CustomerList

CustomerSearch

Out In

Window

Windows, View Sets and View Areas

View Set “Identify Customer“ View Set “Case Detail“

Empty

EmptyCustomerList

ProductList

CustomerSearch

CustomerDetails

ProductDetails

InteractionRecord

InteractionHistory

A window is the set of all possible views that can make up a visible screen A window can have zero or more view sets embedded within it.

A view set is subdivided into several view areas each of which can possiblydisplay one or more views.

A view area can only display one view at a time.

Window

View Assembly

View Set “Identify Customer“

EmptyCustomerSearch

The subset of views visible at any one time is known as a “View Assembly”.

Navigation causes either specific views within a view area to be replaced, or cancause entire view sets within the window to be replaced.

Empty

Window

View Assembly

View Set “Identify Customer“

EmptyCustomerSearch

The subset of views visible at any one time is known as a “View Assembly”.

Navigation causes either specific views within a view area to be replaced, or cancause entire view sets within the window to be replaced.

EmptyCustomerList

Web Dynpro Component Architecture I

Contains

ExternallyVisible

InternallyVisible

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

Contains

Usagedeclarations

WindowWindowController

ViewLayout

ViewController

M

M

M

Plugs

Methods

Context

Web Dynpro Component Architecture II

Business Logic(Models)

ComponentController

Model 1

Contains

ExternallyVisible

InternallyVisible

Usagedeclarations

Usa

ge d

ecla

ratio

ns

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

Contains

Usagedeclarations

WindowWindowController

ViewLayout

ViewController

M

M

M

M

Plugs

Methods

Context

Web Dynpro Component Architecture III

Business Logic(Models)

ComponentController

Model 1

Model 2

Contains

ExternallyVisible

InternallyVisible

Usagedeclarations

Usa

ge d

ecla

ratio

ns

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

CustomController

Contains

Usagedeclarations

WindowWindowController

ViewLayout

ViewController

M

M

M

M

M

Plugs

Methods

Context

Web Dynpro Component Architecture IV

Business Logic(Models)

ComponentController

Model 1

Model 2

Contains

ExternallyVisible

InternallyVisible

Usagedeclarations

Usa

ge d

ecla

ratio

ns

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

Components

CustomController

Contains

Usagedeclarations

Component InterfaceInterfaceController

Interface view

WindowWindowController

ViewLayout

ViewController

M

M

M

M

M

M

Plugs

Methods

Context

Interface view

Web Dynpro Application

An application is an entry point into a Web Dynpro component

An application can be addressed via a URL

ComponentController

ExternallyVisible

InternallyVisible

Components

Component Interface

InterfaceController

Interface view

WindowWindowController

M

M

M

Interface view

Automatically created with an inbound plug oftype startup called default.

An application is a URL associated with thisspecial inbound plug in the interface view.

You should now be able to understand:

The basic concept behind Web Dynpro

The basic architecture of a Web Dynpro Component

Web Dynpro Introduction: Unit Summary