Web Dynpro
Transcript of 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
© SAP AG 2002, Title of Presentation, Speaker Name / 3
(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“
© SAP AG 2002, Title of Presentation, Speaker Name / 4
Web Dynpro Tools
© SAP AG 2002, Title of Presentation, Speaker Name / 5
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)
© SAP AG 2002, Title of Presentation, Speaker Name / 6
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
© SAP AG 2002, Title of Presentation, Speaker Name / 7
Web Dynpro – Main Benefits
Web Dynpro Meta-Data
Web Dynpro Tools
Web Dynpro RuntimeJ2EE.NET ABAP
Deliver an Enterprise Quality Web Development Environment
minimize coding, maximize designseparate layout and logicsupport arbitrary backends
Achieve Independencerun on multiple platforms
© SAP AG 2002, Title of Presentation, Speaker Name / 8
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 Dynpro Meta-Data
Web DynproConverter
Dynpros
Web Dynpro Meta-Data
Java ABAP
© SAP AG 2002, Title of Presentation, Speaker Name / 9
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
Business Objects/Data
ABAP Backend ServerABAP Backend Server
Internet Browser Internet
Browser
Web Dynpro Client
Web Dynpro Client
Backend Application
Backend Application
Business Objects/Data
Business Objects/Data
Web Service ProviderWeb Service Provider
Web ServiceWeb ServiceBusiness
Objects/Data Business
Objects/Data
J2EE Web Dynpro RuntimeJ2EE Web Dynpro Runtime
Web Dynpro Application
Web Dynpro Application
ABAP Web Dynpro RuntimeABAP Web Dynpro Runtime
Web Dynpro Application
Web Dynpro Application
RMI
SOAP
SAP Java
Connector
SOAP
RFC, BAPI
© SAP AG 2002, Title of Presentation, Speaker Name / 10
Web Dynpro – Main Benefits
Web Dynpro Meta-Data
Web Dynpro Tools
Web Dynpro RuntimeJ2EE.NET ABAP
Deliver an Enterprise Quality Web Development Environment
minimize coding, maximize designseparate layout and logicsupport arbitrary backends
Achieve Independencerun on multiple platforms
© SAP AG 2002, Title of Presentation, Speaker Name / 11
Web Dynpro – Main Benefits
Web Dynpro Meta-Data
Web Dynpro Tools
Web Dynpro RuntimeJ2EE.NET ABAP
Deliver an Enterprise Quality Web Development Environment
minimize coding, maximize designseparate layout and logicsupport arbitrary backends
Achieve Independencerun on multiple platforms
Focus on user interface patterns
© SAP AG 2002, Title of Presentation, Speaker Name / 12
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
© SAP AG 2002, Title of Presentation, Speaker Name / 13
Example of Pattern-based UI Design
© SAP AG 2002, Title of Presentation, Speaker Name / 14
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
© SAP AG 2002, Title of Presentation, Speaker Name / 15
Web Dynpro – Main Benefits
Web Dynpro Meta-Data
Web Dynpro Tools
Web Dynpro RuntimeJ2EE.NET ABAP
Deliver an Enterprise Quality Web Development Environment
minimize coding, maximize designseparate layout and logicsupport arbitrary backends
Achieve Independencerun on multiple platforms
Focus on user interface patterns
© SAP AG 2002, Title of Presentation, Speaker Name / 16
Web Dynpro – Main Benefits
Web Dynpro Meta-Data
Web Dynpro Tools
Web Dynpro RuntimeJ2EE.NET ABAP
Deliver an Enterprise Quality Web Development Environment
minimize coding, maximize designseparate layout and logicsupport arbitrary backends
Achieve Independencerun on multiple platforms
Focus on user interface patterns
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
© SAP AG 2002, Title of Presentation, Speaker Name / 17
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.)
© SAP AG 2002, Title of Presentation, Speaker Name / 18
Web Dynpro – Main Benefits
Web Dynpro Meta-Data
Web Dynpro Tools
Web Dynpro RuntimeJ2EE.NET ABAP
Deliver an Enterprise Quality Web Development Environment
minimize coding, maximize designseparate layout and logicsupport arbitrary backends
Achieve Independencerun on multiple platforms
Focus on user interface patterns
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
© SAP AG 2002, Title of Presentation, Speaker Name / 19
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
© SAP AG 2002, Title of Presentation, Speaker Name / 20
Web Dynpro Features in Web AS 6.30 Slide 2 of 5
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)
© SAP AG 2002, Title of Presentation, Speaker Name / 21
Web Dynpro Features in Web AS 6.30 Slide 3 of 5
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
© SAP AG 2002, Title of Presentation, Speaker Name / 22
Web Dynpro Features in Web AS 6.30 Slide 4 of 5
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
© SAP AG 2002, Title of Presentation, Speaker Name / 23
Web Dynpro Features in Web AS 6.30 Slide 5 of 5
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
© SAP AG 2002, Title of Presentation, Speaker Name / 25
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)
© SAP AG 2002, Title of Presentation, Speaker Name / 26
Views, layouts and navigation
Each view has it’s own layout
Product Details
© SAP AG 2002, Title of Presentation, Speaker Name / 27
(Excerpt of) the Web Dynpro Meta-Model
View ControlLayout* **
© SAP AG 2002, Title of Presentation, Speaker Name / 28
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
© SAP AG 2002, Title of Presentation, Speaker Name / 29
(Excerpt of) the Web Dynpro Meta-Model
View ControlLayout* **
View Usage
1“is type”*
* Outbound Plugs
Inbound Plugs
*
*
*„navigates to“
© SAP AG 2002, Title of Presentation, Speaker Name / 30
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
© SAP AG 2002, Title of Presentation, Speaker Name / 31
(Excerpt of) the Web Dynpro Meta-Model
View ControlLayout* **
View Area
**
View Usage
1„is type“*
* Outbound Plugs
Inbound Plugs
*
*
*„navigates to“
© SAP AG 2002, Title of Presentation, Speaker Name / 32
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
© SAP AG 2002, Title of Presentation, Speaker Name / 33
(Excerpt of) the Web Dynpro Meta-Model
View ControlLayout* **
Controller
*
Context Attribute
Context Node
**
View Usage
View Area
1„is type“*
**
* Outbound Plugs
Inbound Plugs
*
*
*„navigates to“
© SAP AG 2002, Title of Presentation, Speaker Name / 34
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
© SAP AG 2002, Title of Presentation, Speaker Name / 35
(Excerpt of) the Web Dynpro Meta-Model
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”
© SAP AG 2002, Title of Presentation, Speaker Name / 36
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
© SAP AG 2002, Title of Presentation, Speaker Name / 37
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
© SAP AG 2002, Title of Presentation, Speaker Name / 38
“is mapped to”0..1
1
“is bound to”*
(Excerpt of) the Web Dynpro Meta-Model
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”
© SAP AG 2002, Title of Presentation, Speaker Name / 39
Model-View-Controller
Web Dynpro Component
View View Controller
Custom Controller
Custom Controller
View View Controller
View View Controller
Custom Controller
View View 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
© SAP AG 2002, Title of Presentation, Speaker Name / 40
(Excerpt of) the Web Dynpro Meta-Model
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”**
© SAP AG 2002, Title of Presentation, Speaker Name / 41
Web Dynpro Component
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
© SAP AG 2002, Title of Presentation, Speaker Name / 42
(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”