01 0 Web Dynpro Introduction

SAP AG 2005, Title of Presentation / Speaker Name / 1

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 Quality Web 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 Experience through 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 Runtime

JAVA 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

...

Web DynproTools

GeneratedCode

Generator

Meta-data Co

mp

iler

Ru

n ab

le Ap

p

CustomCode


Application Scenarios with Web Dynpro

JAVA Web Dynpro

Runtime

JAVA Web Dynpro

Runtime

Deployed Web Dynpro App

Deployed Web Dynpro AppDeployed Web

Dynpro AppDeployed Web

Dynpro App

SAP Enterprise PortalSAP Enterprise Portal

Web Dynpro Application


HTTPSAP

NetWeaver Developer

Studio

SAP NetWeaver Developer

Studio

ABAP Web DynproRuntime

ABAP Web DynproRuntime

Web DynproApp

Web DynproAppWeb Dynpro

AppWeb Dynpro

App

ABAP WorkbenchABAP Workbench

Conversion of existing Dynpros

Conversion of existing Dynpros

J2EE Backend Server

J2EE Backend Server

Backend ApplicationBackend Application

ABAP Backend Server

ABAP Backend Server

Web Service ProviderWeb Service Provider

Web Service

Web Service

RMI SOAP RFC

BusinessData

BusinessData

BusinessData

RFC enabled Function 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

View Controller

View

Web Dynpro Component

Main Web Dynpro Component parts

Windows Views

UI elements Layout Controller Context ….

Component Controllers Context ….

Component Controller

View Controller

View

Context Context

Context



Window

View ControllerView

Context and Data Transport

Label

Component Controller

View ControllerView

Context

Node 1Root Node

Context

Root Node

Node 1

Node 3

Node 2

Context

Node 3Root Node

Context Like a data

container which holds the data

The data transport between the controller can be established with mapping definition


Context Mapping


View Controller Component Controller

Mapping Relationship

Mapped node collection Node collection of mapping 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



View

Putting data on the screen: Data Binding

Component controller context

View controller context

Context mapping Data 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 exit and 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

Customer List

CustomerSearch

Out In


Window

View Assembly

View IdentifyCustomer

EmptyCustomerSearch

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

Navigation causes views within a ViewContainerUIElement to be replaced

Empty

ViewContainerUIElement ViewContainerUIElement

ViewContainerUIElement


View Assembly

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

Navigation causes views within a ViewContainerUIElement to be replaced

Window

View IdentifyCustomer

Empty

CustomerList

Empty

ViewContainerUIElement ViewContainerUIElement

ViewContainerUIElement

CustomerSearch


Web Dynpro Component Architecture I

Contains

ExternallyVisible

InternallyVisible


Contains

Usagedeclarations

Window Window

Controller

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


Contains

Usagedeclarations

Window Window

Controller

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


Custom Controller

Contains

Usagedeclarations

Window Window

Controller

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


Components

Custom Controller

Contains

Usagedeclarations

Component Interface

InterfaceController

Interface view

Window Window

Controller

ViewLayout

ViewController

M

M

M

M

M

M

Plugs

Methods

Context

Interface view



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

Window Window

Controller

M

M

M

Interface view

Automatically created with an inbound plug of type startup called default.

An application is a URL associated with this special 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

Date post:	06-Mar-2015
Category:	Documents
Upload:	jinna-sandeep
View:	42 times
Download:	4 times

01 0 Web Dynpro Introduction

Documents