web dynpro overview

Web Dynpro Overview

Peter McNultyProduct Management / Web DynproSAP Labs, LLC

SAP AG 2002, Title of Presentation, Speaker Name / 2

Web Dynpro – Main Benefits

Web DynproMeta-Data

Web DynproTools

Deliver an Enterprise Quality Web Development Environment

minimize coding, maximize design separate layout and logic support arbitrary backends


(Excerpt of) the Web Dynpro Meta-Model

Application

Component

1

*„starts“

View

Controller

0..1

1

„has“

*

*

Model*

„uses“

ControlLayout

* **

1

„is bound to“

*

ModelClass

*

0..1

„is mapped to“*

*

ContextAttribute

ContextNode

**

„is mapped to“ *

0..1

EmbeddedComponent

1

„is type“*1

„instantiates“

*

ViewUsage

ViewArea

1

„is type“*

*

*

* OutboundPlugs

InboundPlugs

*

*

*„navigates to“


Web Dynpro Tools


Local File System

Overall Java Development Infrastructure

DesignTime

Repository

(DTR)

ComponentBuild

Service

(CBS)SAPJ2EE

Engine

Deploy

Java J2EE XML

JavaDictionary SQLJ

WebDynpro

SAP Integration Framework

Eclipse Plugin Framework

Software Logistics (SL)



Web DynproMeta-Data

Web DynproTools





Web DynproMeta-Data

Web DynproTools

Web Dynpro Runtime

J2EE.NET ABAP



Achieve Independence run on multiple platforms


Web Dynpro on ABAP and on Java (and on ...)

Web DynproTools

Web DynproTools

Web Dynpro for Java

Web Dynpro for ABAP

Web DynproRuntime

Web DynproRuntime

Web DynproMeta-Data

Web DynproConverter

Dynpros

Web DynproMeta-Data

Java ABAP


Web Dynpro across different platforms

New user interfaces at SAP are developed in Web Dynpro for Java

Web Dynpro for ABAP is there to leverage existing investment

J2EE Backend ServerJ2EE Backend Server

Backend ApplicationBackend

ApplicationBusiness

Objects/DataBusiness

Objects/Data

ABAP Backend ServerABAP Backend Server

InternetBrowserInternet

Browser

Web Dynpro Client

Web Dynpro Client

Backend ApplicationBackend

ApplicationBusiness

Objects/DataBusiness

Objects/Data

Web Service ProviderWeb Service Provider

Web ServiceWeb Service

Business Objects/Data

Business Objects/Data

J2EE Web Dynpro RuntimeJ2EE Web Dynpro Runtime

Web Dynpro Application


ABAP Web Dynpro RuntimeABAP Web Dynpro Runtime



RMI

SOAP

SAPJava

Connector

SOAP

RFC, BAPI



Web DynproMeta-Data

Web DynproTools

Web Dynpro Runtime

J2EE.NET ABAP






Web DynproMeta-Data

Web DynproTools

Web Dynpro Runtime

J2EE.NET ABAP




Focus on user interface patterns


Pattern-based UI Design

Three levels of UI patterns Controls

atomic elements in the layout, constitute the look & feel

Componentsreusable, task-oriented building blocks

Floor plansscreen layout, interaction and semantics for a generic application

Consistent User Interfaces faster learning, less training less specialized knowledge

Assembly-line development of UIs Developing a User Interface =

Parametrizing a Business Process less development, less maintenance

Floor plans

Components

Controls


Example of Pattern-based UI Design


Pattern-based UI Development with Web Dynpro

Meta-data

Custom code

Component

Meta-data

Custom code

Component

M.-d.

C.c.

Comp.Meta-data

Custom code

Component

M.-d.

C.c.

Comp.

Application

Configuration

Pattern

Application

Web Dynpro Pattern Layer

Web Dynpro Programming

Layer

Conf.

Pattern

Conf.

Patterns

Application

Configuration



Web DynproMeta-Data

Web DynproTools

Web Dynpro Runtime

J2EE.NET ABAP







Web DynproMeta-Data

Web DynproTools

Web Dynpro Runtime

J2EE.NET ABAP





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 personalization 508 accessibility compliance

Smart Browser (IE 5.5+, NN 7)

Web Dynpro Client-side framework

HTML Rendering

DOM Updates

Caches for layout, data and binding information

LocalEventing


SAP GUI for HTMLSAP GUI for WindowsSAP GUI for Java

Metamorphosis of SAP's GUIs

high interactivityzero installation

high interactivity zero installation

t

Web AS6.30

Web AS 6.40

Web AS

6.20

client-siderendering+ active

components(e.g. office)

client-side rendering(dynamic HTML)

Internet Explorer 5.5+Netscape Navigator 7.0+

server-side rendering(static *ML)

Web Dynprospecialized

user interfaces(e.g. data

mining,CAD, etc.)



Web DynproMeta-Data

Web DynproTools

Web Dynpro Runtime

J2EE.NET ABAP





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 personalization 508 accessibility compliance

Smart Browser (IE 5.5+, NN 7)

Web Dynpro Client-side framework

HTML Rendering

DOM Updates

Caches for layout, data and binding information

LocalEventing


Web Dynpro Features in Web AS 6.30 Slide 1 of 5

Client-side framework (CSF) for an advanced user experience Comprehensive UI element library (exceeds HTMLB and CRM UI) Completely rendered client-side Zero footprint

JavaScript library < 100 KBytes (compressed) Runs in Internet Explorer 5.5+ (or higher)

Integration of external components (e.g. Microsoft Office)

Performance-optimized protocol between client and server Load-on-demand for tabular data Delta-transfer

layout from server to client, application data back and forth

Most 508 accessibility features Fully keyboard-enabled



Tools in SAP NetWeaver Developer Studio Integrated as Web-Dynpro-specific perspective in Eclipse Graphical View Designer and AppModeler

WYSIWYG, drag & drop, ... Integration with SAP Java Infrastructure

Design-time Repository for source code management Access to Java Runtime Data Dictionary Deployment via SDM

Internationalization Support for SAP translation text format Message pool editor

Model Interfaces BAPIs via Java Connector <cool> service layer (typed or untyped) arbitrary models via XMI import (e.g. EJB)



Comprehensive set of standard UI controls According to Unified Rendering and Unified UI Element standards

Table cells containing nested controls buttons, dropdowns, links, images, checkboxes, radio-buttons in-place editing (with automatic undo support!)

Button Caption Chart (onSelect events!)

Checkbox [group] Dropdown list box Group

HTML Frame Image Input field

Label Link to action Link to URL

Menu (only in tray) Progress Indicator Radio button [group]

Road Map Scroll bar Table

Tab strip Text edit Text view

Tool bar Tray Tree



Declarative screen management Navigation graphs Nested views and pop-up windows

Layout managers (Grid, flow, matrix, row) with arbitrary nesting

Generic UI Services based on meta-data Extended Value Selector (‘F4’)

meta-data for value selection from dictionary or defined dynamically

Automatic conversion / checks / error handling for basic types Comprehensive application error handling

Dynamic creation / modification of meta-model elements Views and layout elements

“Reset to initial state” as API call

Context element (= local variables) and data types



Component concept for encapsulation & reuse Stand-alone component interfaces Create multiple instances of embedded components dynamically

APIs for using server interfaces Access to the System Landscape Directory Setting the session time-out Access to URL parameters

UME integration includes single sign-on (SSO2)

Portal integration Support for client-side portal eventing Pick up themes and style sheets

Web DynproProgramming Model

Web Dynpro Programming Model


Design Pattern for decoupling presentation and logic of an application

ControllerRequest

ViewResponse

Model

Handle Events Update application data Define control flow

Handle Events Update application data Define control flow

Defines application data Usually connected to

business functionality

Defines application data Usually connected to

business functionality

Visualization of the application data

Visualization of the application data

Model View Controller (MVC)


Views, layouts and navigation

Each view has it’s own layout

ProductDetails



View ControlLayout

* **


Views, layouts and navigation

Navigation linksdefine possible view sequences

Customer List

Product List

CustomerSearch

CustomerDetails

InteractionRecord

InteractionHistory

Each view has it‘s own layout

ProductDetails



View ControlLayout

* **

ViewUsage

1

“is type”*

* OutboundPlugs

InboundPlugs

*

*

*„navigates to“


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

Empty

Empty

View sets and view areas

View sets are arrangementsof view areas

A view area can display multiple views, but only one at a time

Customer List

Product List

CustomerSearch

CustomerDetails

ProductDetails

InteractionRecord

InteractionHistory

Navigation linksdefine possible view sequences

Each view has it’s own layout



View ControlLayout

* **

ViewArea

*

*

ViewUsage

1

„is type“*

* OutboundPlugs

InboundPlugs

*

*

*„navigates to“


Controller

Controller = Context (Local Data) + Custom Coding

Context

Access to othercontrollers is ruled by “usage”relations

Custom coding isrequired for things thatcan not be expressed in the meta-model

RootNodeMyFirstNode

...MyScndNode

FirstAttrScndAttrThrdAttr...

MyThrdNode...

...

Custom coding

Supplyfunctions

Methods

Event handlers

user actions

registered events from other c.

framework

access to other controllers’

contexts

calls from other c.

raise eventsfor other c.

calls to otherc.’ methods

Each controller owns ahierarchically structuredset of local data, called the controller’s context



View ControlLayout

* **

Controller

*

ContextAttribute

ContextNode

**

ViewUsage

ViewArea

1

„is type“*

*

*

* OutboundPlugs

InboundPlugs

*

*

*„navigates to“


Views and Controllers

Web Dynpro Component

View

View

View

View

ViewController

ViewController

ViewController

ViewController

CustomController

CustomController

CustomController

usages

Views definewhat the user seeson the screen

Viewcontrollershandle eventsfrom the user

Customcontrollersoffer globalservices



View

Controller

Application

Component

1

*“starts”

0..1

1

“has”

*

*

ControlLayout

* **

*

ContextAttribute

ContextNode

**

ViewUsage

ViewArea

1

“is type”*

*

*

* OutboundPlugs

InboundPlugs

*

*

*“navigates to”


Controller

Controller = Context (Local Data) + Custom Coding

Context

user actions

Access to othercontrollers is ruled by “usage”relations

Custom coding

Custom coding isrequired for things thatcan not be expressed in the meta-model

RootNodeMyFirstNode

...MyScndNode

FirstAttrScndAttrThrdAttr...

MyThrdNode...

...

Supplyfunctions

Methods

Event handlersregistered events

from other c.

framework

access to other controllers’

contexts

calls from other c.

raise eventsfor other c.

calls to otherc.’ methods

Each controller owns ahierarchically structuredset of local data, called the controller’s context

bindings

mappings

to other controllers’contexts

to UIelements

Bindings andmappings are for automaticdata exchange


Automatic data transport through binding & mapping

ItemView

MasterView OpportunitiesGoals

...Products

CategoryProduct IDQuantity...

Valuation...

MasterViewContext

ProductsCategoryProduct IDQuantity...

ItemViewContext

bindingSales

...Opportunities

Goals...

ProductsCategoryProduct IDQuantity...

Valuation...

...

CustomContextmapping

The controls in each view can be boundto the context of theview controller

Some controls(e.g. TableView)can be bound tomultiple nodes

Context nodescan be mappedto similar nodesin other contexts

Mappings willpropagate data and selection stateback and forth


“is mapped to”

0..1

1

“is bound to”

*


View

Controller

Application

Component

1

*“starts”

0..1

1

“has”

*

*

ControlLayout

* **

*

ContextAttribute

ContextNode

**

ViewUsage

ViewArea

1

“is type”*

*

*

* OutboundPlugs

InboundPlugs

*

*

*“navigates to”


Model-View-Controller


ViewView

Controller

CustomController

CustomController

ViewView

Controller

ViewView

Controller

CustomController

ViewView

Controller

ModelInterface

ModelInterface

Proxys connectto the backend system (RFC, <cool>, Web Services, ...)

BackendProxy

BackendProxy

usages

Views definewhat the user seeson the screen

Viewcontrollershandle eventsfrom the user

Customcontrollersoffer globalservices

Models provide access to theinterfaces in the backend



Application

Component

1

*“starts”

View

Controller

0..1

1

“has”

*

*

ControlLayout

* **

1

“is bound to”

*

*

ContextAttribute

ContextNode

**

“is mapped to”

0..1

ViewUsage

ViewArea

1

“is type”*

*

*

* OutboundPlugs

InboundPlugs

*

*

*“navigates to”

Model*

“uses”

ModelClass

*

0..1

“is mapped to”**



Window

InterfaceView

The Interface of a Component

A component’s interfaceview can be used like a normal view in the embedding component’s navigation graph

A component’s interface controller can be used by the embedding component for mappings, eventing, etc.

InterfaceView

InterfaceController

ComponentController

created by default

custom development

(external)usages

Window

ControllerController

Controller

ViewView

View

Navigation Graph

(internal)usages

A component can define multipleinterface views withdifferent navigations



Application

Component

1

*“starts”

View

Controller

0..1

1

“has”

*

*

Model*

“uses”

ControlLayout

* **

1

“is bound to”

*

ModelClass

*

0..1

“is mapped to”*

*

ContextAttribute

ContextNode

**

“is mapped to” *

0..1

EmbeddedComponent

1

“is type”*1

“instantiates”

*

ViewUsage

ViewArea

1

“is type”*

*

*

* OutboundPlugs

InboundPlugs

*

*

*“navigates to”

web dynpro overview

Documents

java web dynpro

web dynpro tools sap

abap sap ag

title of presentation

high fidelity web ui

multiple platforms sap

j2ee abap

based ui design sap