Web Dynpro Introduction

Contents:
 Introduction

 SAP AG 2003, Title of Presentation, Speaker Name / 1

 Web Dynpro Introduction: Unit Objectives

After completing this unit, you will be able to:

 Understand the basic idea behind Web Dynpro.
 Explain basic features of Web Dynpro.
 Understand basic concepts of Web Dynpro.

 SAP AG 2003, Title of Presentation, Speaker Name / 2

 Overview: Topic Objectives

After completing this topic, you will be able to:

 Understand the basic idea behind Web Dynpro.

 SAP AG 2003, Title of Presentation, Speaker Name / 3

 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
 Code is generated from the meta-model declarations
 Integrated in SAP NetWeaver Developer Workbench

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, Title of Presentation, Speaker Name / 4

 Web Dynpro Main Benefits

Deliver an Enterprise Quality Web Dynpro Web Dynpro

Web Development Environment Tools Meta-Data
 minimize coding, maximize design
 separate layout and logic
 support arbitrary backends
 support reuse of components Web Dynpro Runtime
 configuration of UI patterns .NET J2EE ABAP
 support web services and data-binding

Achieve Independence
 run on multiple platforms

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
 508 accessibility support Multi Channel Access
 flicker-free screen, minimal refreshs
 SAP AG 2003, Title of Presentation, Speaker Name / 5
 Meta-model Declarations vs. Custom Coding

Meta-data

Deployable App
Generated

Compiler
Web Code
Dynpro Generator
Tools Custom
Code

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  Implementation of business rules

 Navigation and Error Handling  Dynamic screen modifications
 Data Flow  Access to services (files etc.)
 Componentization  Portal eventing
 ...  ...

 SAP AG 2003, Title of Presentation, Speaker Name / 6

 Application Scenarios with Web Dynpro

J2EE Web Service ABAP

Backend Business Provider Business Backend Business
Backend Application
Server Data Data Server Data
Web Business
EJB (e.a.)
Service API (BAPI)
RMI SOAP
RFC

Web Dynpro J2EE ABAP Web Dynpro

Web Dynpro App Web Dynpro Web Dynpro Web Dynpro App
App App
Runtime Runtime

Conversion
SAP of existing
NetWeaver dynpros
Developer XML
Studio ABAP Workbench
Web Dynpro
Application

SAP Enterprise Portal

 SAP AG 2003, Title of Presentation, Speaker Name / 7

 Pattern-based UI Design

Three levels of UI patterns

 Controls Controls
atomic elements in the layout,
constitute the look & feel
 Components
reusable, task-oriented building
blocks Components
 Floor plans
screen layout, interaction and
semantics for a generic
application

Consistent User Interfaces Floor plans

 faster learning, less training
 less specialized knowledge

 SAP AG 2003, Title of Presentation, Speaker Name / 8

 Overview: Topic Summary

You should now be able to:

 Understand the basic idea behind Web Dynpro.

 SAP AG 2003, Title of Presentation, Speaker Name / 9

 Features: Topic Objectives

After completing this topic, you will be able to:

 Explain basic Features of Web Dynpro.

 SAP AG 2003, Title of Presentation, Speaker Name / 10

 Web Dynpro Features

Client-side framework (CSF) for an SAP Web AS J2EE Engine

advanced user experience
 Comprehensive UI element library (exceeds Web Dynpro Runtime
HTMLB and CRM UI) Web Dynpro
 Zero footprint Web Dynpro App Web Dynpro
 JavaScript library < 100 KBytes App App
(compressed)
 Runs in Internet Explorer 5.5 (or higher)
 Integration of external components (e.g., XML

Microsoft Office, Adobe Forms)

HTML Rendering Caches for

Performance-optimized protocol layout, data
between client and server DOM Local and binding
 Load-on-demand for tabular data Updates Eventing information
 Delta-transfer
 layout from server to client, application Web Dynpro Client-side framework
data back and forth
Smart Browser (IE 5.5+, NN 7)
Most 508 accessibility features
 Fully keyboard-enabled
 SAP AG 2003, Title of Presentation, Speaker Name / 11
 Web Dynpro Features (2)

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 Adaptive RFC
 Arbitrary models via XMI import (e.g., EJB)
. . .

 SAP AG 2003, Title of Presentation, Speaker Name / 12

 Web Dynpro Features (3)

Comprehensive set of standard UI controls

 According to Unified Rendering and Unified UI Element standards
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

Table cells containing nested controls

 Buttons, drop-down list, links, images, checkboxes, radio buttons
 In-place editing (with automatic undo support!)

 SAP AG 2003, Title of Presentation, Speaker Name / 13

 Web Dynpro Features (4)

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’)
 Metadata 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
 Context element ( local variables) and data types

 SAP AG 2003, Title of Presentation, Speaker Name / 14

 Web Dynpro Features (5)

Component concept for encapsulation and 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

 SAP AG 2003, Title of Presentation, Speaker Name / 15

 Features: Topic Summary

You should now be able to:

 Explain basic Features of Web Dynpro.

 SAP AG 2003, Title of Presentation, Speaker Name / 16

 Basic Concepts: Topic Objectives

After completing this topic, you will be able to:

 Understand the basic concepts of Web Dynpro.

 SAP AG 2003, Title of Presentation, Speaker Name / 17

 Model View Controller (MVC) Approach


Design pattern for decoupling presentation and logic of an application

 Handle Events
 Update application data
Request  Define control flow
Controller

Model
 Defines application data
 Usually connected to
business functionality

Response
View
 Visualization of the
application data

 SAP AG 2003, Title of Presentation, Speaker Name / 18

 Views, and Layouts

Product
Details

Each view
has its own
layout

 SAP AG 2003, Title of Presentation, Speaker Name / 19

 Views, Layouts, and Navigation

Customer
Search
Interaction
Record
Customer Product
Details Details

Interaction
History
Customer Product
List List

Each view Navigation links

has its own define possible
layout view sequences
with plugs (out-
bound and in-
bound)
 SAP AG 2003, Title of Presentation, Speaker Name / 20
 View Sets and View Areas

View Set „Identify Customer“ View Set „Case Detail“

Empty
Customer
Search
Interaction
Record
Customer Product
Details Details

Interaction
History
Customer Product Empty
List List

Each view Navigation links A view area can View sets are
has its own define possible display multiple views, arrangements
layout view sequences but only one at a time of view areas

 SAP AG 2003, Title of Presentation, Speaker Name / 21

 Web Dynpro Controller

Controller
access to other Custom Context
controller contexts coding
RootNode
user actions MyFirstNode
Event ...
framework
handlers MyScndNode
registered events
from other controller FirstAttr
ScndAttr
calls from other controller ThrdAttr
raise events for Methods ...
other controllers MyThrdNode
...
calls to other ...
controller methods

Controller = Context (Local Data) + Custom Coding

Access to other Custom coding is Each controller owns a

controllers is required for things that hierarchically structured
ruled by “usage” can not be expressed set of local data, called
relations in the meta-model the controller’s context
 SAP AG 2003, Title of Presentation, Speaker Name / 22
 Views and Controllers

Web Dynpro Component

View
View Component
Controller
Controller
View
View
Controller Custom
Controller
View
View
Controller usages

View Custom
View Controller
Controller

Views define View Custom

what the controllers controllers
user sees handle events offer global
on the screen from the user services

 SAP AG 2003, Title of Presentation, Speaker Name / 23

 Data Binding and Context Mapping

Controller
Custom Context
coding
RootNode
MyFirstNode bindings
Event ... to UI
handlers MyScndNode elements
FirstAttr
ScndAttr
ThrdAttr mappings
Methods ...
MyThrdNode to other
... controllers’
...
contexts

Access to Custom coding Each controller owns Bindings and

other con- is required for a hierarchically mappings are
trollers is ruled things that can not structured set of for automatic
by “usage” be expressed local data, called the data exchange
relations in the meta-model controller’s context

 SAP AG 2003, Title of Presentation, Speaker Name / 24

 Data Binding and Context Mapping (2)

bind MasterViewContext
in g Opportunities CustomContext
MasterView Goals
ma
ppi Sales
ng ...
...
Products Opportunities
Category Goals
Product ID ...
Quantity Products
... Category
Valuation Product ID
... Quantity
ItemView ...
ItemViewContext Valuation
Products ...
Category ...
Product ID
Quantity
...

Automatic data transport through binding and mapping

The controls in each Some controls Context nodes Mappings will
view can be bound (e.g., TableView) can be mapped propagate data
to the context of the can be bound to to similar nodes and selection state
view controller multiple nodes in other contexts back and forth

 SAP AG 2003, Title of Presentation, Speaker Name / 25

 Web Dynpro Models

Web Dynpro Component

View
View Custom
Controller
Controller Model Backend
Interface Proxy
View
View
Controller Custom
Controller
View Model Backend
View Interface Proxy
Controller usages

View Custom
View Controller
Controller

Model View Controller

Views define View Custom Models provide Proxys connect
what the controllers controllers access to the to the back-end
user sees handle events offer global interfaces in system (mySAP,
on the screen from the user services the back end Web Services, ...)

 SAP AG 2003, Title of Presentation, Speaker Name / 26

 The Interface of a Component

(external)
usages
Interface
Interface Interface
View
View Controller
Web Dynpro Component created
component Controller by default

(internal) custom
Window
Window usages development
View
View h
View rap Controller
n G Controller
atio Controller
vi g
Na

A component’s interface A component’s interface A component can

controller can be used by view can be used like a normal define multiple
the embedding component view in the embedding interface views with
for mappings, eventing, etc. component’s navigation graph different navigations

 SAP AG 2003, Title of Presentation, Speaker Name / 27

 Embedded Web Dynpro Components

Web Dynpro Application Web Dynpro Application Web Dynpro Application

Web Dynpro Component 1 (Root) Reuse

Reuse
Component 2 Component 44
Component

Component
Component 33 Component 5


Web Dynpro components allow structuring complex Web applications
and development of reusable, interacting entities

=> Save costs and developer resources by using and
providing reusable components

 SAP AG 2003, Title of Presentation, Speaker Name / 28

 Web Dynpro Application

Application
http://....

Interface Interface
Interface
View
View Controller
Web Dynpro Component
Component Controller

(internal)
Window usages
Window
View
View
h Controller
View rap
o nG Controller
i gati Controller
v
Na

 SAP AG 2003, Title of Presentation, Speaker Name / 29

 Basic Terminology

Root

Dictionary

src

Web Dynpro

Web Dynpro
Explorer

 SAP AG 2003, Title of Presentation, Speaker Name / 30

 Basic Terminology (2)

Application

Models

Component
Interfaces

Components

Views

Windows

 SAP AG 2003, Title of Presentation, Speaker Name / 31

 Basic Terminology (3)

View
Controller

Component
Controller

Custom
Controller

Component
Interface
Controller

Context

 SAP AG 2003, Title of Presentation, Speaker Name / 32

 Features: Topic Summary

You should now be able to:

 Understand the basic concepts of Web Dynpro.

 SAP AG 2003, Title of Presentation, Speaker Name / 33

 Web Dynpro Dynamic Programming: Unit Summary

You should now be able to:

 Understand the basic idea behind Web Dynpro.
 Explain basic Features of Web Dynpro.
 Understand basic concepts of Web Dynpro.

 SAP AG 2003, Title of Presentation, Speaker Name / 34