Anda di halaman 1dari 15

SAP TechEd 03 Las Vegas

UI Development with
Web Dynpro
Dr. Peter Tillert
Product Manager Java Server
SAP AG

Learning Objectives

As a result of this workshop, you will


be able to:
Understand what Web Dynpro is and which are the

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

SAP AG 2003, TechED Basel 2003, UI102_EMEA, Peter Tillert, 2

2003 SAP Labs, LLC

Session ID, Speaker

SAP TechEd 03 Las Vegas

What is Web Dynpro ?

A Programming Model for User Interfaces


A Set of Tools for User Interface Design
A Runtime Environment for Applications
A Technology for Software Modularization

SAP AG 2003, TechED Basel 2003, UI102_EMEA, Peter Tillert, 3

Agenda
A first look at the Web Dynpro Meta-Model

Layout, Nesting, and Navigation


Data flow: Mapping and Binding

The Web Dynpro Tools

Code Generation
Graphical Tools

The Web Dynpro Runtime

Architecture
Frontend technology

Modularity and reuse

Embedding components
Pattern-base User Interfaces

Summary

SAP AG 2003, TechED Basel 2003, UI102_EMEA, Peter Tillert, 4

2003 SAP Labs, LLC

Session ID, Speaker

SAP TechEd 03 Las Vegas

(Excerpt of) the Web Dynpro Meta-Model

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

SAP AG 2003, TechED Basel 2003, UI102_EMEA, Peter Tillert, 5

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

SAP AG 2003, TechED Basel 2003, UI102_EMEA, Peter Tillert, 6

2003 SAP Labs, LLC

Session ID, Speaker

SAP TechEd 03 Las Vegas

Model-View-Controller in Web Dynpro

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, ...)

SAP AG 2003, TechED Basel 2003, UI102_EMEA, Peter Tillert, 7

Automatic data transport through binding & mapping

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
...

The controls in each


view can be bound
to the context of the
view controller

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

SAP AG 2003, TechED Basel 2003, UI102_EMEA, Peter Tillert, 8

2003 SAP Labs, LLC

Session ID, Speaker

SAP TechEd 03 Las Vegas

Views, layouts and navigation


Note: Through MVC, one can change the
view layer without affecting the rest !
E.g.: specific views for certain frontend devices
(Web Dynpro supports Pocket PC)
Product
Details

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, ...

SAP AG 2003, TechED Basel 2003, UI102_EMEA, Peter Tillert, 9

Views, layouts and navigation

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

Views can have


(outbound and
inbound) plugs

Navigation links
define possible
view sequences

SAP AG 2003, TechED Basel 2003, UI102_EMEA, Peter Tillert, 10

2003 SAP Labs, LLC

Session ID, Speaker

SAP TechEd 03 Las Vegas

View sets and view areas

View Set Identify Customer

View Set Case Detail


Empty

Customer
Search
Product
Details

Customer
Details

Customer
List

Interaction
Record

Product
List

A view area can


display multiple views,
but only one at a time

Interaction
History

Empty

View sets are


arrangements
of view areas

In every view area


there is exactly
one default view

SAP AG 2003, TechED Basel 2003, UI102_EMEA, Peter Tillert, 11

Agenda
A first look at the Web Dynpro Meta-Model

Layout, Nesting, and Navigation


Data flow: Mapping and Binding

The Web Dynpro Tools

Code Generation
Graphical Tools

The Web Dynpro Runtime

Architecture
Frontend technology

Modularity and reuse

Embedding components
Pattern-base User Interfaces

Summary

SAP AG 2003, TechED Basel 2003, UI102_EMEA, Peter Tillert, 12

2003 SAP Labs, LLC

Session ID, Speaker

SAP TechEd 03 Las Vegas

Meta-model Declarations vs. Custom Coding

Generated
Code

Generator

Custom
Code

Compiler

Web
Dynpro
Tools

Deployable App

Meta-data

Meta-model Declarations

Custom Coding

Guarantees common app design

Guarantees universality

Good for graphical tool support

Good for data-driven, dynamic apps

Screen Layout and Nesting


Navigation and Error Handling
Data Flow
Componentization
...

Implementation of business rules


Dynamic screen modifications
Access to services (files etc.)
Portal eventing
...

SAP AG 2003, TechED Basel 2003, UI102_EMEA, Peter Tillert, 13

Web Dynpro Tools - SAP NetWeaver Developer Studio

SAP AG 2003, TechED Basel 2003, UI102_EMEA, Peter Tillert, 14

2003 SAP Labs, LLC

Session ID, Speaker

SAP TechEd 03 Las Vegas

Web Dynpro Tools: Mappings between Controllers

SAP AG 2003, TechED Basel 2003, UI102_EMEA, Peter Tillert, 15

Overall Java Development Infrastructure


Software Logistics
(SL)
Component
Build
Service
(CBS)

Java

J2EE

XML

Java
Dictionary

SQLJ

Web
Dynpro

Deploy

SAP
J2EE
Engine

Design
Time
Repository
(DTR)

SAP Integration Framework


Eclipse Plugin Framework

Local File System

SAP AG 2003, TechED Basel 2003, UI102_EMEA, Peter Tillert, 16

2003 SAP Labs, LLC

Session ID, Speaker

SAP TechEd 03 Las Vegas

Agenda
A first look at the Web Dynpro Meta-Model

Layout, Nesting, and Navigation


Data flow: Mapping and Binding

The Web Dynpro Tools

Code Generation
Graphical Tools

The Web Dynpro Runtime


Architecture
Frontend technology

Modularity and reuse

Embedding components
Pattern-base User Interfaces

Summary

SAP AG 2003, TechED Basel 2003, UI102_EMEA, Peter Tillert, 17

Web Dynpro across different platforms


J2EE
J2EE
Backend
Backend
Server
Server

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

New user interfaces at


SAP are developed in
Web Dynpro for Java

Web Dynpro Client

Internet
Internet Browser
Browser

Conversion
Conversion of
of
existing
existing dynpros
dynpros

Web Dynpro for ABAP


is there to leverage
existing investment

SAP AG 2003, TechED Basel 2003, UI102_EMEA, Peter Tillert, 18

2003 SAP Labs, LLC

Session ID, Speaker

SAP TechEd 03 Las Vegas

Web Dynpro Client technology


Improved User Experience
in a "High Fidelity Web UI"

Browser based, zero footprint

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

Screen updates w/o page reloads

Server-side rendering !

Client-side dynamics
Performance through caching
Personalization
508 accessibility compliance

Keyboard access

HTML Rendering

Standardized, automatic services


based on dictionary information

XML

Input help (e.g. date picker)


Automatic conversions
Error handling

Portal integration

DOM
Updates

Local
Eventing

Caches for
layout, data
and binding
information

Web Dynpro Client-side framework


Smart
Smart Browser
Browser (IE
(IE 5.5+,
5.5+, NN
NN 7)
7)

Client-side eventing

SAP AG 2003, TechED Basel 2003, UI102_EMEA, Peter Tillert, 19

Agenda
A first look at the Web Dynpro Meta-Model

Layout, Nesting, and Navigation


Data flow: Mapping and Binding

The Web Dynpro Tools

Code Generation
Graphical Tools

The Web Dynpro Runtime

Architecture
Frontend technology

Modularity and reuse

Embedding components
Pattern-base User Interfaces

Summary

SAP AG 2003, TechED Basel 2003, UI102_EMEA, Peter Tillert, 20

2003 SAP Labs, LLC

Session ID, Speaker

10

SAP TechEd 03 Las Vegas

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

SAP AG 2003, TechED Basel 2003, UI102_EMEA, Peter Tillert, 21

Component interface

(Outer) Component
(Inner)
Component

View
Controller

View
Controller

Custom
Controller

Custom
Custom
Controller Controller
Interface
Controller

Interface
Controller

The interface of a component


can offer methods, events, or
context for mappings etc. to
the component that embeds it

Purposes of components:
- Give structure to the application
- Support distributed development projects
- Provide reuse pattern-based UIs

SAP AG 2003, TechED Basel 2003, UI102_EMEA, Peter Tillert, 22

2003 SAP Labs, LLC

Session ID, Speaker

11

SAP TechEd 03 Las Vegas

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

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

SAP AG 2003, TechED Basel 2003, UI102_EMEA, Peter Tillert, 23

Example of Pattern-based UI Design

SAP AG 2003, TechED Basel 2003, UI102_EMEA, Peter Tillert, 24

2003 SAP Labs, LLC

Session ID, Speaker

12

SAP TechEd 03 Las Vegas

Pattern-based UI Development with Web Dynpro

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

SAP AG 2003, TechED Basel 2003, UI102_EMEA, Peter Tillert, 25

Summary: What is Web Dynpro ?

A Programming Model for User Interfaces

Platform-independent (Java, ABAP, ...)


Defines a standard structure for user interface applications

Derived from the MVC (model-view-controller) design pattern

A Set of Tools for User Interface Design

Focus on graphical modeling

Integrated in SAP NetWeaver Developer Workbench

Code is generated from the meta-model declarations

A Runtime Environment for Applications

Framework running on J2EE server offers common services


Client-side technology for browser-based user interfaces

XML-based protocol makes alternative clients possible

A Technology for Software Modularization

Components help structure projects and support pattern-based UIs

SAP AG 2003, TechED Basel 2003, UI102_EMEA, Peter Tillert, 26

2003 SAP Labs, LLC

Session ID, Speaker

13

SAP TechEd 03 Las Vegas

Questions?

Q&A

SAP AG 2003, TechED Basel 2003, UI102_EMEA, Peter Tillert, 27

Feedback

Please complete your session evaluation and


drop it in the box on your way out.

Thank You !
The SAP TechEd 03 Basel Team

SAP AG 2003, TechED Basel 2003, UI102_EMEA, Peter Tillert, 28

2003 SAP Labs, LLC

Session ID, Speaker

14

SAP TechEd 03 Las Vegas

Copyright 2003 SAP AG. All Rights Reserved

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.

ORACLE is a registered trademark of ORACLE Corporation.

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.

JAVA is a registered trademark of Sun Microsystems, Inc.

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.

SAP AG 2003, TechED Basel 2003, UI102_EMEA, Peter Tillert, 29

SAP TechEd `03 EMEA


Online

WATCH THE
REPLAYS,
DOWNLOAD THE
SLIDES, AND READ
THE TRANSCRIPTS.
www.sap.com/community

SAP AG 2002, TechED_02 Bremen, Slot #, Speaker Name / 30

2003 SAP Labs, LLC

Session ID, Speaker

15

Anda mungkin juga menyukai