Download - 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
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“
*
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“
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
DesignTime
Repository
(DTR)
ComponentBuild
Service
(CBS)SAPJ2EE
Engine
Deploy
Java J2EE XML
JavaDictionary SQLJ
WebDynpro
SAP Integration Framework
Eclipse Plugin Framework
Software Logistics (SL)
SAP AG 2002, Title of Presentation, Speaker Name / 6
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
SAP AG 2002, Title of Presentation, Speaker Name / 7
Web Dynpro – Main Benefits
Web DynproMeta-Data
Web DynproTools
Web Dynpro Runtime
J2EE.NET ABAP
Deliver an Enterprise Quality Web Development Environment
minimize coding, maximize design separate layout and logic support arbitrary backends
Achieve Independence run 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 DynproMeta-Data
Web DynproConverter
Dynpros
Web DynproMeta-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 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
Web Dynpro Application
ABAP Web Dynpro RuntimeABAP Web Dynpro Runtime
Web Dynpro Application
Web Dynpro Application
RMI
SOAP
SAPJava
Connector
SOAP
RFC, BAPI
SAP AG 2002, Title of Presentation, Speaker Name / 10
Web Dynpro – Main Benefits
Web DynproMeta-Data
Web DynproTools
Web Dynpro Runtime
J2EE.NET ABAP
Deliver an Enterprise Quality Web Development Environment
minimize coding, maximize design separate layout and logic support arbitrary backends
Achieve Independence run on multiple platforms
SAP AG 2002, Title of Presentation, Speaker Name / 11
Web Dynpro – Main Benefits
Web DynproMeta-Data
Web DynproTools
Web Dynpro Runtime
J2EE.NET ABAP
Deliver an Enterprise Quality Web Development Environment
minimize coding, maximize design separate layout and logic support arbitrary backends
Achieve Independence run 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 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
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
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
SAP AG 2002, Title of Presentation, Speaker Name / 15
Web Dynpro – Main Benefits
Web DynproMeta-Data
Web DynproTools
Web Dynpro Runtime
J2EE.NET ABAP
Deliver an Enterprise Quality Web Development Environment
minimize coding, maximize design separate layout and logic support arbitrary backends
Achieve Independence run on multiple platforms
Focus on user interface patterns
SAP AG 2002, Title of Presentation, Speaker Name / 16
Web Dynpro – Main Benefits
Web DynproMeta-Data
Web DynproTools
Web Dynpro Runtime
J2EE.NET ABAP
Deliver an Enterprise Quality Web Development Environment
minimize coding, maximize design separate layout and logic support arbitrary backends
Achieve Independence run on multiple platforms
Focus on user interface patterns
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 AG 2002, Title of Presentation, Speaker Name / 17
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.)
SAP AG 2002, Title of Presentation, Speaker Name / 18
Web Dynpro – Main Benefits
Web DynproMeta-Data
Web DynproTools
Web Dynpro Runtime
J2EE.NET ABAP
Deliver an Enterprise Quality Web Development Environment
minimize coding, maximize design separate layout and logic support arbitrary backends
Achieve Independence run on multiple platforms
Focus on user interface patterns
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 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 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
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 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)
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 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
SAP AG 2002, Title of Presentation, Speaker Name / 22
Web Dynpro Features in Web AS 6.30 Slide 4 of 5
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
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 & 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
SAP AG 2002, Title of Presentation, Speaker Name / 25
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)
SAP AG 2002, Title of Presentation, Speaker Name / 26
Views, layouts and navigation
Each view has it’s own layout
ProductDetails
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 linksdefine possible view sequences
Customer List
Product List
CustomerSearch
CustomerDetails
InteractionRecord
InteractionHistory
Each view has it‘s own layout
ProductDetails
SAP AG 2002, Title of Presentation, Speaker Name / 29
(Excerpt of) the Web Dynpro Meta-Model
View ControlLayout
* **
ViewUsage
1
“is type”*
* OutboundPlugs
InboundPlugs
*
*
*„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 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
SAP AG 2002, Title of Presentation, Speaker Name / 31
(Excerpt of) the Web Dynpro Meta-Model
View ControlLayout
* **
ViewArea
*
*
ViewUsage
1
„is type“*
* OutboundPlugs
InboundPlugs
*
*
*„navigates to“
SAP AG 2002, Title of Presentation, Speaker Name / 32
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
SAP AG 2002, Title of Presentation, Speaker Name / 33
(Excerpt of) the Web Dynpro Meta-Model
View ControlLayout
* **
Controller
*
ContextAttribute
ContextNode
**
ViewUsage
ViewArea
1
„is type“*
*
*
* OutboundPlugs
InboundPlugs
*
*
*„navigates to“
SAP AG 2002, Title of Presentation, Speaker Name / 34
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
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
* **
*
ContextAttribute
ContextNode
**
ViewUsage
ViewArea
1
“is type”*
*
*
* OutboundPlugs
InboundPlugs
*
*
*“navigates to”
SAP AG 2002, Title of Presentation, Speaker Name / 36
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
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
* **
*
ContextAttribute
ContextNode
**
ViewUsage
ViewArea
1
“is type”*
*
*
* OutboundPlugs
InboundPlugs
*
*
*“navigates to”
SAP AG 2002, Title of Presentation, Speaker Name / 39
Model-View-Controller
Web Dynpro Component
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
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”
*
*
ContextAttribute
ContextNode
**
“is mapped to”
0..1
ViewUsage
ViewArea
1
“is type”*
*
*
* OutboundPlugs
InboundPlugs
*
*
*“navigates to”
Model*
“uses”
ModelClass
*
0..1
“is mapped to”**
SAP AG 2002, Title of Presentation, Speaker Name / 41
Web Dynpro Component
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
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”
*
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”