web dynpro

Web Dynpro Overview

Peter McNultyProduct Management / Web Dynpro SAP Labs, LLC

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

Web Dynpro – Main Benefits

Web Dynpro Meta-Data

Web Dynpro Tools

Deliver an Enterprise Quality Web Development Environment

minimize coding, maximize designseparate layout and logicsupport arbitrary backends

Presenter

Presentation Notes

Web Dynpro’s main goal is to enable application developers to create powerful Web applications with a minimum of effort using descriptive tools in a structured design process. The key is to describe an application – any programming will only be a very minor part of application development. It must be easy for customers and partners to customize and enhance applications. They should be easy to maintain and enhance. The applications should run on a range of devices and on various types of network – this is important for collaboration scenarios. Customers must also be able to personalize them. One guiding principle in the Web Dynpro philosophy is: the fewer lines of hand-written code there are in the UI, the better. Web Dynpro pursues this goal in two ways. First, Web Dynpro establishes a declarative language for specifying qualities of a user interface without writing any code. From this abstract definition, Web Dynpro generates code for a ready-to-run program skeleton of the user interface, and it also derives meta-data that a generic engine can interpret at runtime. Hand-written code still has its place, but it is reduced to a minimum. Second, it provides technical features such as support for internationalization, flicker-free interaction and a clean separation of the business logic and the user interface. To ensure this separation Web Dynpro employs the Model-View-Controller (MVC) paradigm, first implemented in Smalltalk-80. From the meta data created during the design phase, Web Dynpro is able to generate code for runtimes like J2EE and ABAP, and will also support .NET runtime.


(Excerpt of) the Web Dynpro Meta-Model

Application

Component

1

*„starts“

View

Controller

0..1

1

„has“

*

*

Model*

„uses“

ControlLayout* **

1

„is bound to“*

Model Class

*

0..1„is mapped to“*

*

Context Attribute

Context Node

**

„is mapped to“ *

0..1

Embedded Component

1„is type“*1

„instantiates“

*

View Usage

View Area

1„is type“*

**

* Outbound Plugs

Inbound Plugs

*

*

*„navigates to“


Web Dynpro Tools

Presenter

Presentation Notes

Web Dynpro is a perspective of the NetWeaver Developer Studio , that itself relies on Eclipse.


Local File System

Overall Java Development Infrastructure

Design Time

Repository(DTR)

Component Build

Service(CBS)

SAP J2EE

Engine

Deploy

Java J2EE XML

Java Dictionary SQLJ

Web Dynpro

SAP Integration Framework

Eclipse Plugin Framework

Software Logistics (SL)




Web Dynpro Tools



Presenter

Presentation Notes





Web Dynpro Tools

Web Dynpro RuntimeJ2EE.NET ABAP



Achieve Independencerun on multiple platforms

Presenter

Presentation Notes



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 DynproConverter

Dynpros


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 Application

Backend Application

Business Objects/Data


ABAP Backend ServerABAP Backend Server

Internet Browser Internet

Browser

Web Dynpro Client

Web Dynpro Client

Backend Application

Backend Application



Web Service ProviderWeb Service Provider

Web ServiceWeb ServiceBusiness

Objects/Data Business

Objects/Data

J2EE Web Dynpro RuntimeJ2EE Web Dynpro Runtime

Web Dynpro Application


ABAP Web Dynpro RuntimeABAP Web Dynpro Runtime



RMI

SOAP

SAP Java

Connector

SOAP

RFC, BAPI




Web Dynpro Tools





Presenter

Presentation Notes





Web Dynpro Tools





Focus on user interface patterns

Presenter

Presentation Notes



Pattern-based UI Design

Three levels of UI patternsControlsatomic elements in the layout, constitute the look & feelComponentsreusable, task-oriented building blocksFloor plansscreen layout, interaction and semantics for a generic application

Consistent User Interfacesfaster learning, less trainingless specialized knowledge

Assembly-line development of UIsDeveloping a User Interface = Parametrizing a Business Processless development, less maintenance

Floor plans

Components

Controls

Presenter

Presentation Notes

Web Dynpro's development approach is based on reusable patterns that make applications look consistent, and easy to use. Patterns are designed by usability specialists according to the requirements of specific application types.


Example of Pattern-based UI Design

Presenter

Presentation Notes

This is an example of the look of an SAP user interface as designed by Web Dynpro. Please note that this is a current design draft, the application that is finally delivered by SAP may look different.


Pattern-based UI Development with Web Dynpro

Meta-data

Custom code

Component

Meta-data

Custom code

ComponentM.-d.C.c.

Comp.Meta-data

Custom code

Component

M.-d.C.c.

Comp.

Application

ConfigurationPattern

Application

Web Dynpro Pattern Layer

Web Dynpro Programming

Layer

Conf.

Pattern

Conf.

Patterns

Application

Configuration




Web Dynpro Tools






Presenter

Presentation Notes





Web Dynpro Tools






Improve User Experience through a "High Fidelity Web UI"

browser based, zero footprintscreen updates w/o page reloadsclient-side dynamicsperformance through cachingpersonalization508 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

Local Eventing

Presenter

Presentation Notes



SAP GUI for HTMLSAP GUI for Windows SAP GUI for Java

Metamorphosis of SAP's GUIs

high interactivityzero installation

high interactivity zero installation

t

Web AS 6.30

Web AS 6.40

Web AS 6.20

client-side rendering + 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 Dynpro Tools






Improve User Experience through a "High Fidelity Web UI"

browser based, zero footprintscreen updates w/o page reloadsclient-side dynamicsperformance through cachingpersonalization508 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

Local Eventing

Presenter

Presentation Notes



Web Dynpro Features in Web AS 6.30 Slide 1 of 5

Client-side framework (CSF) for an advanced user experienceComprehensive UI element library (exceeds HTMLB and CRM UI)Completely rendered client-sideZero 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 serverLoad-on-demand for tabular dataDelta-transfer

layout from server to client, application data back and forth

Most 508 accessibility featuresFully keyboard-enabled



Tools in SAP NetWeaver Developer StudioIntegrated as Web-Dynpro-specific perspective in EclipseGraphical View Designer and AppModeler

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

Design-time Repository for source code managementAccess to Java Runtime Data DictionaryDeployment via SDM

InternationalizationSupport for SAP translation text formatMessage pool editor

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



Comprehensive set of standard UI controlsAccording to Unified Rendering and Unified UI Element standards

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

Button Caption Chart (onSelect events!)

Checkbox [group] Dropdown list box Group

HTML Frame Image Input fieldLabel Link to action Link to URL

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

Road Map Scroll bar TableTab strip Text edit Text viewTool bar Tray Tree



Declarative screen managementNavigation graphsNested views and pop-up windows

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

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

meta-data for value selection from dictionary or defined dynamicallyAutomatic conversion / checks / error handling for basic typesComprehensive application error handling

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

“Reset to initial state” as API callContext element (= local variables) and data types



Component concept for encapsulation & reuseStand-alone component interfacesCreate multiple instances of embedded components dynamically

APIs for using server interfacesAccess to the System Landscape DirectorySetting the session time-outAccess to URL parameters

UME integrationincludes single sign-on (SSO2)

Portal integrationSupport for client-side portal eventingPick up themes and style sheets

Web Dynpro Programming Model

Web Dynpro Programming Model


Design Pattern for decoupling presentation and logic of an application

ControllerRequest

ViewResponse

Model

Handle EventsUpdate application dataDefine control flow

Handle EventsUpdate application dataDefine control flow

Defines application dataUsually connected to business functionality

Defines application dataUsually 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

Product Details



View ControlLayout* **


Views, layouts and navigation

Navigation links define possible view sequences

Customer List

Product List

Customer Search

Customer Details

Interaction Record

Interaction History

Each view has it‘s own layout

Product Details




View Usage

1“is type”*

* Outbound Plugs

Inbound Plugs

*

*

*„navigates to“


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

Empty

Empty

View sets and view areas

View sets are arrangements of view areas

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

Customer List

Product List

Customer Search

Customer Details

Product Details

Interaction Record

Interaction History

Navigation links define possible view sequences

Each view has it’s own layout




View Area

**

View Usage

1„is type“*

* Outbound Plugs

Inbound Plugs

*

*

*„navigates to“


Controller

Controller = Context (Local Data) + Custom Coding

Context

Access to other controllers is ruled by “usage”relations

Custom coding is required for things that can not be expressed in the meta-model

RootNodeMyFirstNode

...MyScndNode

FirstAttrScndAttrThrdAttr...

MyThrdNode...

...

Custom coding

Supply functions

Methods

Event handlers

user actions

registered events from other c.

framework

access to other controllers’

contexts

calls from other c.

raise events for other c.

calls to other c.’ methods

Each controller owns a hierarchically structured set of local data, called the controller’s context




Controller

*

Context Attribute

Context Node

**

View Usage

View Area

1„is type“*

**

* Outbound Plugs

Inbound Plugs

*

*

*„navigates to“


Views and Controllers

Web Dynpro Component

View

View

View

View

View Controller

View Controller

View Controller

View Controller

Custom Controller

Custom Controller

Custom Controller

usages

Views define what the user sees on the screen

View controllers handle events from the user

Custom controllers offer global services



View

Controller

Application

Component

1

*“starts”

0..1

1

“has”

*

* ControlLayout* **

*

Context Attribute

Context Node

**

View Usage

View Area

1“is type”*

**

* Outbound Plugs

Inbound Plugs

*

*

*“navigates to”


Controller

Controller = Context (Local Data) + Custom Coding

Context

user actions

Access to other controllers is ruled by “usage”relations

Custom coding

Custom coding is required for things that can not be expressed in the meta-model

RootNodeMyFirstNode

...MyScndNode

FirstAttrScndAttrThrdAttr...

MyThrdNode...

...

Supply functions

Methods

Event handlersregistered events

from other c.

framework

access to other controllers’

contexts

calls from other c.

raise events for other c.

calls to other c.’ methods

Each controller owns a hierarchically structured set of local data, called the controller’s context

bindings

mappings

to other controllers’ contexts

to UI elements

Bindings andmappings are for automatic data 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* **

*

Context Attribute

Context Node

**

View Usage

View Area

1“is type”*

**

* Outbound Plugs

Inbound Plugs

*

*

*“navigates to”


Model-View-Controller


View View Controller

Custom Controller

Custom Controller



Custom Controller


Model Interface

Model Interface

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

Backend Proxy

Backend Proxy

usages

Views define what the user sees on the screen

View controllers handle events from the user

Custom controllers offer global services

Models provide access to the interfaces in the backend



Application

Component

1

*“starts”

View

Controller

0..1

1

“has”

*

* ControlLayout* **

1

“is bound to”*

*

Context Attribute

Context Node

**

“is mapped to”0..1

View Usage

View Area

1“is type”*

**

* Outbound Plugs

Inbound Plugs

*

*

*“navigates to”

Model*

“uses”

Model Class

*

0..1“is mapped to”**



Window

Interface View

The Interface of a Component

A component’s interface view 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.

Interface View

Interface Controller

Component Controller

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”*

Model Class

*

0..1“is mapped to”*

*

Context Attribute

Context Node

**

“is mapped to” *

0..1

Embedded Component

1“is type”*1

“instantiates”

*

View Usage

View Area

1“is type”*

**

* Outbound Plugs

Inbound Plugs

*

*

*“navigates to”

web dynpro

Documents