UI Development with
Web Dynpro
Dr. Peter Tillert
Product Manager Java Server
SAP AG
Learning Objectives
elements it consists of
Get an impression of what its like to work with
Web Dynpro when building business applications
Consider the benefits of Web Dynpro for the development
of user interfaces in your own projects
Agenda
A first look at the Web Dynpro Meta-Model
Code Generation
Graphical Tools
Architecture
Frontend technology
Embedding components
Pattern-base User Interfaces
Summary
Model
0..1
uses
is mapped to is mapped to
0..1
Context
Node
* *
1
instantiates
Context
Attribute
1
is type
Layout
View
Outbound
Plugs
Control
Embedded
Component
is bound to
0..1
has
Controller
Component
starts
Model
Class
Application
is type
Inbound
Plugs
View
Usage
View
Area
navigates to
Model-View-Controller (MVC)
MVC is the standard design pattern for decoupling presentation
and logic of an application
Request
Controller
Handlesincoming
incomingevents
events
Handles
Manipulates
the
model
Manipulates the model
Definescontrol
controlflow,
flow,e.g.
e.g.
Defines
determines
the
next
view
determines the next view
Defines
Definesthe
theaccess
accessto
to
application
applicationdata
data
Encapsulates
Encapsulatesbusiness
business
functionality
functionality
Model
Response
View
Displays
Displaysthe
theapplication
applicationdata
data
Defines
the
users
Defines the users
possibilities
possibilitiesto
tointeract
interact
View
View
Controller
View
View
Controller
View
View
Controller
View
View
Controller
Views define
what the
user sees
on the screen
Global
Controller
Model Backend
Interface Proxy
Global
Controller
Model Backend
Interface Proxy
usages
Global
Controller
View
controllers
handle events
from the user
Global
controllers
offer public
services
Models provide
access to the
interfaces in
the backend
Proxys connect
to the backend
system (RFC / JCo,
Web Services, ...)
MasterView
bind
ing
ItemView
MasterView Context
Opportunities
Goals
...
Products
Category
Product ID
Quantity
...
Valuation
...
ma
pp
Global Context
ing
ItemView Context
Products
Category
Product ID
Quantity
...
Some controls
(e.g. TableView)
can be bound to
multiple nodes
Context nodes
can be mapped
to similar nodes
in other contexts
Sales
...
Opportunities
Goals
...
Products
Category
Product ID
Quantity
...
Valuation
...
...
Mappings will
propagate data
and selection state
back and forth
A view defines
the layout for a
part of the screen
The layout is an
arrangement of standard controls,
e.g. fields, labels, buttons, charts, ...
Customer
Search
Customer
List
A view defines
the layout for a
part of the screen
Interaction
Record
Product
Details
Customer
Details
Interaction
History
Product
List
Navigation links
define possible
view sequences
Customer
Search
Product
Details
Customer
Details
Customer
List
Interaction
Record
Product
List
Interaction
History
Empty
Agenda
A first look at the Web Dynpro Meta-Model
Code Generation
Graphical Tools
Architecture
Frontend technology
Embedding components
Pattern-base User Interfaces
Summary
Generated
Code
Generator
Custom
Code
Compiler
Web
Dynpro
Tools
Deployable App
Meta-data
Meta-model Declarations
Custom Coding
Guarantees universality
Java
J2EE
XML
Java
Dictionary
SQLJ
Web
Dynpro
Deploy
SAP
J2EE
Engine
Design
Time
Repository
(DTR)
Agenda
A first look at the Web Dynpro Meta-Model
Code Generation
Graphical Tools
Embedding components
Pattern-base User Interfaces
Summary
Business
Data
Web
Web Service
Service
Provider
Provider
Business
Data
Web
Service
EJB
RMI
ABAP
ABAP
Backend
BackendBusiness
Backend
Server
ServerApplication Data
Business
API (BAPI)
SOAP
RFC
Web Dynpro
Web DynproApp
App
ABAP
ABAP
Web
Web Dynpro
Dynpro
Runtime
Runtime
J2EE
J2EE
Web
Web Dynpro
Dynpro
Runtime
Runtime
Web Dynpro
Web DynproApp
App
XML
SAP NetWeaver
Developer Studio
Internet
Internet Browser
Browser
Conversion
Conversion of
of
existing
existing dynpros
dynpros
SAP
SAP Web
Web AS
AS J2EE
J2EE Engine
Engine
Web
Web Dynpro
Dynpro Runtime
Runtime
Web Dynpro
App
Web Dynpro
Web Dynpro
App
App
Implemented in JavaScript
Server-side rendering !
Client-side dynamics
Performance through caching
Personalization
508 accessibility compliance
Keyboard access
HTML Rendering
XML
Portal integration
DOM
Updates
Local
Eventing
Caches for
layout, data
and binding
information
Client-side eventing
Agenda
A first look at the Web Dynpro Meta-Model
Code Generation
Graphical Tools
Architecture
Frontend technology
Embedding components
Pattern-base User Interfaces
Summary
10
Components
Application
Application
(Outer) Component
Component
View
View
Controller
View
View
Controller
View
View
Controller
Views and
controllers are
assembled into
components
Global
Controller
Component
Global
Controller
Component
Component
Global
Controller
Component
An application
is nothing but an
entry point into
a component
Components
can embed
each other
hierarchically
Component interface
(Outer) Component
(Inner)
Component
View
Controller
View
Controller
Custom
Controller
Custom
Custom
Controller Controller
Interface
Controller
Interface
Controller
Purposes of components:
- Give structure to the application
- Support distributed development projects
- Provide reuse pattern-based UIs
11
Pattern-based UI Design
Three levels of UI patterns
Controls
atomic elements in the layout,
constitute the look & feel
Components
reusable, task-oriented building
blocks
Floor plans
screen layout, interaction and
semantics for a generic application
Controls
Components
Floor plans
12
Application
Application
Application
Pattern
Web Dynpro
Pattern
Layer
Configuration
Pattern
Patterns
Conf.
Configuration
Conf.
Component
Component
Meta-data
Custom code
Meta-data
Comp.
Comp.
Custom code
M.-d.
M.-d.
C.c.
C.c.
Component
Meta-data
Web Dynpro
Programming
Layer
Custom code
13
Questions?
Q&A
Feedback
Thank You !
The SAP TechEd 03 Basel Team
14
No part of this publication may be reproduced or transmitted in any form or for any purpose without the express
permission of SAP AG. The information contained herein may be changed without prior notice.
Some software products marketed by SAP AG and its distributors contain proprietary software components of other
software vendors.
Microsoft, WINDOWS, NT, EXCEL, Word, PowerPoint and SQL Server are registered trademarks of
Microsoft Corporation.
IBM, DB2, DB2 Universal Database, OS/2, Parallel Sysplex, MVS/ESA, AIX, S/390, AS/400, OS/390,
OS/400, iSeries, pSeries, xSeries, zSeries, z/OS, AFP, Intelligent Miner, WebSphere, Netfinity, Tivoli, Informix
and Informix Dynamic ServerTM are trademarks of IBM Corporation in USA and/or other countries.
UNIX, X/Open, OSF/1, and Motif are registered trademarks of the Open Group.
Citrix, the Citrix logo, ICA, Program Neighborhood, MetaFrame, WinFrame, VideoFrame, MultiWin and
other Citrix product names referenced herein are trademarks of Citrix Systems, Inc.
HTML, DHTML, XML, XHTML are trademarks or registered trademarks of W3C, World Wide Web Consortium,
Massachusetts Institute of Technology.
JAVASCRIPT is a registered trademark of Sun Microsystems, Inc., used under license for technology invented
and implemented by Netscape.
MarketSet and Enterprise Buyer are jointly owned trademarks of SAP AG and Commerce One.
SAP, R/3, mySAP, mySAP.com, xApps, xApp, SAP NetWeaver and other SAP products and services mentioned
herein as well as their respective logos are trademarks or registered trademarks of SAP AG in Germany and in
several other countries all over the world. All other product and service names mentioned are the trademarks of
their respective companies.
WATCH THE
REPLAYS,
DOWNLOAD THE
SLIDES, AND READ
THE TRANSCRIPTS.
www.sap.com/community
15