Web Dynpro Introduction

Contents:
Introduction to the Web Dynpro architecture

Web Dynpro Introduction: Unit Objectives

After completing this unit, you will understand:

The basic concepts behind Web Dynpro

The basic architecture of a Web Dynpro Component

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 patternbased 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

Web Dynpro Tools

Web Dynpro Metadata

Web Dynpro Runtime

JAVA ABAP

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

Multi Channel Access

Meta-model Declarations vs. Custom Coding

Meta-data Web Dynpro Tools Generator

Run able App

Generated Code

Compiler

Custom Code

Meta-model Declarations
Guarantees common app. design Good for graphical tool support
Screen Layout and Nesting Navigation and Error Handling Data Flow

Custom Coding
Guarantees universality Good for data-driven, dynamic apps
Implementation of business rules Dynamic screen modifications Access to services (files etc.) Portal eventing ...

Componentization
...

Application Scenarios with Web Dynpro

J2EE Backend Server
EJB (e.a.)
RMI

Business Data

Web Service Provider

Web Service
SOAP

Business Data

ABAP Backend Business Backend Application Server Data

RFC enabled Function Modules
RFC

Deployed Web Deployed Web App Dynpro Dynpro App

JAVA Web Dynpro Runtime

ABAP Web Dynpro Runtime

Web Dynpro Web Dynpro App App

SAP NetWeaver Developer Studio

HTTP

Conversion of existing Dynpros ABAP Workbench

Web Dynpro Application

SAP Enterprise Portal

Web Dynpro Component

Main Web Dynpro Component parts Windows Views UI elements Layout Controller Context . Component Controllers Context .

Window View
View Controller Context

Component Controller

Context

View

View Controller Context

Web Dynpro Component

Context and Data Transport

Context Like a data container which holds the data The data transport between the controller can be established with mapping definition

Window View
View Controller Context
Root Node Node 1

Component Controller Context

Root Node Node 1

Node 2

View

View Controller Context

Root Node Node 3

Node 3

Label

Web Dynpro Component

Context Mapping
View Controller Component Controller

Context Root
FLIGHTS BOOKINGS

Context Root
FLIGHTS BOOKINGS

BOOKID
CUSTID CLASS PASSN CARRID CONNID FLDATE PRICE

Controller Usage Declaration

BOOKID
CUSTID CLASS PASSN CARRID CONNID FLDATE PRICE

Web Dynpro Component

Mapped node collection Mapping Relationship Node collection of mapping origin

Putting data on the screen: Data Binding

View controller context
View Root Node FLIGHTS BOOKINGS BOOKID CUSTID CLASS PASSN CARRID

Component controller context

Root Node FLIGHTS BOOKINGS BOOKID CUSTID CLASS PASSN CARRID CONNID FLDATE PRICE

View layout

CONNID FLDATE PRICE

Web Dynpro Component

Data Binding Context mapping

Navigation between views

Window
Customer Search Customer List

Out

In

Inbound plug

Outbound plug
Navigation link 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

View Assembly
Window
View IdentifyCustomer
ViewContainerUIElement ViewContainerUIElement

Customer Search

Empty

ViewContainerUIElement

Empty

The subset of views visible at any one time is known as a View Assembly. Navigation causes views within a ViewContainerUIElement to be replaced

View Assembly
Window
View IdentifyCustomer
ViewContainerUIElement ViewContainerUIElement

Customer Search

Empty

ViewContainerUIElement

Customer List

Empty

The subset of views visible at any one time is known as a View Assembly. Navigation causes views within a ViewContainerUIElement to be replaced

Web Dynpro Component Architecture I

Externally Visible Internally Visible
Contains Usage declarations Window

Window Controller
M

Plugs
M

Contains

Methods

View Layout

View Controller
M

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

Web Dynpro Component Architecture II

Externally Visible Internally Visible
Contains Usage declarations Window Component Controller Usage declarations

Window Controller
M

Plugs
M

Contains

Usage declarations

Model 1

Methods

View Layout

View Controller
M

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

Business Logic

(Models)

Web Dynpro Component Architecture III

Externally Visible Internally Visible
Contains Usage declarations Window Component Controller Usage declarations

Window Controller
M

Plugs
M

Contains

Usage declarations

Model 1

Methods

View Layout

View Controller
M

Custom Controller

Model 2

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

Business Logic

(Models)

Web Dynpro Component Architecture IV

Externally Visible Internally Visible
Contains Usage declarations Window Component Controller Usage declarations Component Interface Interface Interface viewview
M

Interface Controller

Window Controller
M

Components

Plugs
M

Contains

Usage declarations

Model 1

Methods

View Layout

View Controller
M

Custom Controller

Model 2

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

Business Logic

(Models)

Web Dynpro Application

An application is an entry point into a Web Dynpro component An application can be addressed via a URL

Component Interface

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.

Externally Visible Internally Visible

Interface Interface viewview

M

Interface Controller

Window

Window Controller
M

Component Controller

Components

Web Dynpro Introduction: Unit Summary

You should now be able to understand: The basic concept behind Web Dynpro The basic architecture of a Web Dynpro Component