Вы находитесь на странице: 1из 82

Developing User Interfaces with Web Dynpro for ABAP

Developing User Interfaces with Web Dynpro for ABAP Thomas Jung, SAP NetWeaver Solution Management

Thomas Jung, SAP NetWeaver Solution Management

Developing User Interfaces with Web Dynpro for ABAP Thomas Jung, SAP NetWeaver Solution Management

Disclaimer

Disclaimer

This presentation outlines our general product direction and should not be relied on in making a purchase decision. This presentation is not subject to your license agreement or any other agreement with SAP. SAP has no obligation to pursue any course of business outlined in this presentation or to develop or release any functionality mentioned in this presentation. This presentation and SAP's strategy and possible future developments are subject to change and may be changed by SAP at any time for any reason without notice. This document is provided without a warranty of any kind, either express or implied, including but not limited to, the implied warranties of merchantability, fitness for a particular purpose, or non-infringement. SAP assumes no responsibility for errors or omissions in this document, except if such damages were caused by SAP intentionally or grossly negligent.

Agenda 1. Web Dynpro Motivation 2. Web Dynpro ABAP Programming Model 2.1. Views and UI
Agenda 1. Web Dynpro Motivation 2. Web Dynpro ABAP Programming Model 2.1. Views and UI

Agenda

1. Web Dynpro Motivation

2. Web Dynpro ABAP Programming Model

2.1. Views and UI Elements

2.2. Controllers and Context

2.3. Component Usage and Navigation

3. Web Dynpro Integration Capabilities

3.1.

Integration into SAP NetWeaver Portal

3.2.

Adobe Interactive Forms

3.3.

Adobe Flash Islands

4. Summary

3.2. Adobe Interactive Forms 3.3. Adobe Flash Islands 4. Summary © SAP AG 2009. All rights

Objectives of Web Dynpro

Objectives of Web Dynpro

Model-based UI development

Enforce clear separation between UI logic and business logic

Little coding, lots of design

Declarative UI development

Future Proof UI Declaration

Browser, Web Dynpro Client, Mobile Device,…

Client technology independent UI definition

Central implementation of user interface standards

Accessibility support

Adobe Forms integration

Centrally provided UI elements

Internationalization support

Supports major platforms

Java (as of SAP NetWeaver '04), ABAP (as of SAP NetWeaver 7.0)

 Java (as of SAP NetWeaver '04), ABAP (as of SAP NetWeaver 7.0) © SAP AG

Motivation Web Dynpro

Web Smart other? Browser Client
Web
Smart
other?
Browser
Client
Motivation Web Dynpro Web Smart other? Browser Client http:// HTML, JS http:// XBCML, delta ??? ???

http://

HTML, JS

Dynpro Web Smart other? Browser Client http:// HTML, JS http:// XBCML, delta ??? ??? Rendering Rendering

http:// XBCML, delta

??? ???
???
???

Rendering

Rendering

Rendering

Engine

Engine

Engine

Rendering Rendering Engine Engine Engine Meta Data <xml> <wd:xxx>

Meta Data

<xml>

<wd:xxx>

</xml>

Web Dynpro

Web Dynpro

UI definition independent of client technology

As much abstract declaration as possible

Different rendering engines for different

(future) UI technologies without adapting

application coding

for different (future) UI technologies without adapting application coding © SAP AG 2009. All rights reserved.

Application Scenarios With Web Dynpro

Application Scenarios With Web Dynpro
SAP NetWeaver Portal Web Dynpro iView Web Dynpro iView
SAP NetWeaver Portal
Web Dynpro iView
Web Dynpro iView

NetWeaver Business Client

ABAP Web Dynpro Runtime Web Dynpro Web Dynpro App App ABAP Workbench ABAP Business Server
ABAP
Web Dynpro
Runtime
Web Dynpro
Web Dynpro App
App
ABAP
Workbench
ABAP
Business
Server
API (BAPI,
Backend
Business
Web
Services)
Application
Data
Web Dynpro J2EE Web Dynpro App App Web Dynpro Runtime
Web Dynpro
J2EE
Web Dynpro App
App
Web Dynpro
Runtime
Web Dynpro J2EE Web Dynpro App App Web Dynpro Runtime RMI SAP NetWeaver Developer Studio RFC,

RMI

SAP NetWeaver Developer Studio
SAP
NetWeaver
Developer
Studio
RFC, WS
RFC, WS
J2EE Server EJB (e.a.) Business Data
J2EE
Server
EJB (e.a.)
Business
Data

Web Dynpro Development in ABAP

Web Dynpro Development in ABAP

Development completely integrated into ABAP Workbench

Graphical View Layout design

Declarative UI development

ABAP editor with forward navigation

ABAP dictionary data types directly available

Simple remote debugging

Functionality and services of the ABAP environment directly usable

ABAP lifecycle management

Transport

Translation

Enhancements

ABAP lifecycle management  Transport  Translation  Enhancements © SAP AG 2009. All rights reserved.
DEMO – WB in Workbench

One SAP Product Family with Harmonized User Experience Web Dynpro HTML

One SAP Product Family with Harmonized User Experience – Web Dynpro HTML © SAP AG 2009.
One SAP Product Family with Harmonized User Experience – Web Dynpro HTML © SAP AG 2009.

One SAP Product Family with Harmonized User Experience Web Dynpro SmartClient

Product Family with Harmonized User Experience – Web Dynpro SmartClient © SAP AG 2009. All rights
Product Family with Harmonized User Experience – Web Dynpro SmartClient © SAP AG 2009. All rights

One SAP Product Family with Harmonized User Experience Web Dynpro Flex

One SAP Product Family with Harmonized User Experience – Web Dynpro Flex
One SAP Product Family with Harmonized User Experience – Web Dynpro Flex © SAP AG 2009.
DEMO – NWBC / Flex Client

Web Dynpro AJAX Client Succeeds HTML Client

Web Dynpro AJAX Client Succeeds HTML Client
Web Dynpro AJAX Client
Web Dynpro AJAX Client

Drag&Drop, Suggestion, Page Rearrangement

Use of XMLHTTPRequestObject

Validation of Simple Data Types

Extensive Keyboard Support hot keys, access keys, function keys

In-place editing, fluid animations

Enhanced client/server communication

supporting on-demand JavaScript

New Web Dynpro UI theme SAP Tradeshow Plus

New Lightspeed rendering engine with support for inline CSS, JavaScript load on demand and other performance enhancements

inline CSS, JavaScript load on demand and other performance enhancements © SAP AG 2009. All rights
inline CSS, JavaScript load on demand and other performance enhancements © SAP AG 2009. All rights

Lightspeed Rendering (7.01)

Lightspeed Rendering (7.01)

Performance improvements by new “Lightspeed” rendering

Only stylesheet data and client scripting is loaded that really is required for the

current screen

Reduction of client side rendering time leading to overall performance improvements

More stable rendering framework

Some changes in look and feel of existing applications (e.g. no paginator for tables

any longer)

Prerequisite for Signature design (WDTHEMEROOT=sap_tradeshow_plus)

New UI elements require Lightspeed

Switched on by default

 New UI elements require Lightspeed  Switched on by default © SAP AG 2009. All
DEMO – Lightspeed

UI Design in Web Dynpro Advantages and Limitations

UI Design in Web Dynpro – Advantages and Limitations

Dozens of UI elements provided, like buttons, checkboxes, trees, or roadmaps, with specific properties and events

- Adding custom properties/events to existing elements or adding custom UI elements is not possible

Layout managers like Flow Layout or Matrix Layout for an easy arrangement of UI elements

- No pixel perfect layout, no direct manipulation of

HTML/JavaScript

User interaction like F4 help or drag & drop

- Often roundtrips required, no RIA behavior

Perfect for most business requirements , but maybe not for all.

Islands as supplements for Web Dynpro

, but maybe not for all.  Islands as supplements for Web Dynpro © SAP AG
, but maybe not for all.  Islands as supplements for Web Dynpro © SAP AG

What Is an Island for Web Dynpro?

What Is an Island for Web Dynpro?

Regular programming model known for Web Dynpro

Web Dynpro Data interchange possible Island (displayed in plugin player)
Web Dynpro
Data
interchange
possible
Island (displayed in plugin player)
Dynpro Data interchange possible Island (displayed in plugin player) © SAP AG 2009. All rights reserved.
Dynpro Data interchange possible Island (displayed in plugin player) © SAP AG 2009. All rights reserved.

Which Island Technologies Are Available?

Which Island Technologies Are Available?

Adobe Flash Islands

Based on Adobe Flex components

Available since NetWeaver 7.11 (ABAP and Java)

Available since NetWeaver 7.01 (ABAP only)

Controlled UI technology at SAP

Microsoft Silverlight Islands

Based on Microsoft .NET components

NetWeaver 7.02 / 7.2 (ABAP & Java)

Microsoft ActiveX Islands

SAP internal use only!

Available since NetWeaver 7.01 (ABAP only)

Web Widgets (HTML Islands)

Planned: NetWeaver 7.2 (Java only)

only) Web Widgets (HTML Islands)  Planned: NetWeaver 7.2 (Java only) © SAP AG 2009. All

Examples- Cover Flow Product Selector

Examples- Cover Flow Product Selector
Examples- Cover Flow Product Selector © SAP AG 2009. All rights reserved. / Page 19
Examples- Cover Flow Product Selector © SAP AG 2009. All rights reserved. / Page 19

Examples- Google Maps

Examples- Google Maps © SAP AG 2009. All rights reserved. / Page 20
Examples- Google Maps © SAP AG 2009. All rights reserved. / Page 20

Examples- Interactive Organization Chart

Examples- Interactive Organization Chart
Examples- Interactive Organization Chart © SAP AG 2009. All rights reserved. / Page 21
Examples- Interactive Organization Chart © SAP AG 2009. All rights reserved. / Page 21

New in NW 7.02/7.20

Microsoft Silverlight Islands

New in NW 7.02/7.20 Microsoft Silverlight Islands

Works nearly identical to Adobe Flash Islands except using the Microsoft Silverlight Framework

SAP supplies a runtime library (WDSilverlightIslandLibrary.dll) in the

/SAP/PUBLIC/BC/UR/nw7/

SilverlightIslands/ MIME Folder

in the /SAP/PUBLIC/BC/UR/nw7/ SilverlightIslands/ MIME Folder © SAP AG 2009. All rights reserved. / Page 22
in the /SAP/PUBLIC/BC/UR/nw7/ SilverlightIslands/ MIME Folder © SAP AG 2009. All rights reserved. / Page 22
DEMO – Islands

Floorplan Manager

Easy and highly productive configuration of applications

Floorplan Manager Easy and highly productive configuration of applications

The Floorplan Manager is the preferred and mandatory tool for the creation

of new Web Dynpro ABAP applications in the SAP Business Suite

 Consistency across Web Dynpro ABAP applications  Easy configuration of predefined building blocks 
 Consistency across Web Dynpro ABAP
applications
 Easy configuration of predefined building
blocks
 Compliance with
all SAP User Interface guidelines
 APIs provided for standard functionality
like event handling and dynamic behavior
 Modification free
customers adaptations of Web Dynpro
applications
 Full integration in standard SAP Lifecycle
Management
 Available for customers: NW 7.0 EHP 1

© SAP AG 2009. All rights reserved. / Page 24

SAP Lifecycle Management  Available for customers: NW 7.0 EHP 1 © SAP AG 2009. All

OIF (Object Instance Floorplan)

OIF (Object Instance Floorplan)
OIF (Object Instance Floorplan) Identification Region Message Region Contextual Navigation Region (Top) View Container

Identification

Region

Message Region

Contextual Navigation Region (Top)

View Container

Contextual Navigation Region (Bottom)

OIF (Object Instance Floorplan)

OIF (Object Instance Floorplan)

Floorplan

- provided by FPM

- only configuration

- dynamic behavior is possible

- no coding necessary

Content Area

Content View

- developed by application

- WD Abap coding

Content Area Content View - developed by application - WD Abap coding © SAP AG 2009.
DEMO – Floorplan Manager
Agenda 1. Web Dynpro Motivation 2. Web Dynpro ABAP Programming Model 2.1. Views and UI
Agenda 1. Web Dynpro Motivation 2. Web Dynpro ABAP Programming Model 2.1. Views and UI

Agenda

Agenda 1. Web Dynpro Motivation 2. Web Dynpro ABAP Programming Model 2.1. Views and UI Elements

1.

Web Dynpro Motivation

2.

Web Dynpro ABAP Programming Model

2.1. Views and UI Elements

2.2. Controllers and Context

2.3. Component Usage and Navigation

3.

Web Dynpro Integration Capabilities

3.1.

Integration into SAP NetWeaver Portal

3.2.

Adobe Interactive Forms

3.3.

Adobe Flash Islands

4.

Summary

Meta-Model Declarations and Custom Coding

Meta-Model Declarations and Custom Coding
Run able App Compiler Meta-data Generated Web Code Dynpro Generator Tools Custom Code
Run able App
Compiler
Meta-data
Generated
Web
Code
Dynpro
Generator
Tools
Custom
Code

Meta-model Declarations

Guarantees common app. design

Good for graphical tool support

Screen Layout and Nesting

Navigation and Error Handling

Data Flow

Componentization

Custom Coding

Guarantees universality

Good for data-driven, dynamic apps

Implementation of business rules

Dynamic screen modifications

Access to services (files etc.)

Portal eventing

Model View Controller (MVC)

Model View Controller (MVC)

Original MVC design for decoupling presentation and

application logic

Generates the application data without caring how it will be displayed.
Generates the application
data without caring how it
will be displayed.

Model

Binds the user and business interaction layers together. All intermediate processing is performed here.

Business Interaction Layer

Request

is performed here. Business Interaction Layer Request Response Controller Binding Layer User Interaction Layer

Response

Controller

Binding Layer

User Interaction Layer

View

Visualizes the application data without caring how it was generated.
Visualizes the application
data without caring how it
was generated.

Web Dynpro Component Architecture

Web Dynpro Component Architecture

SAP Web Dynpro uses principles of MVC paradigm

Controller handle the user input and steer the application

Views define the layout

Model hold and

provide the business

logic

Component Interface

Interface Interface Interface view view Controller M Component Controller Window M Window Controller M Contains
Interface
Interface Interface view view
Controller
M
Component
Controller
Window
M
Window
Controller
M
Contains
Usage
declarations
View
M
View
Custom
Controller
Layout
Controller
M
W
e
b
D
y
n
p
r
o
C
o
m
p
o
n
e
n
t
Components Usage declarations
Components
Usage declarations

Model 1

Business Logic

(Models)

Model 2
Model 2

Web Dynpro Components

Web Dynpro Components

Web Dynpro Component contains

Windows

Views

UI elements

Layout

Controllers

Context Data

Eventing

Methods

Attributes

Component Interface

Interface Contr.

Interface View

Component Component Controller Window View View Controller View View Controller
Component
Component
Controller
Window
View
View
Controller
View
View
Controller
Agenda 1. Web Dynpro Motivation 2. Web Dynpro ABAP Programming Model 2.1. Views and UI
Agenda 1. Web Dynpro Motivation 2. Web Dynpro ABAP Programming Model 2.1. Views and UI

Agenda

1. Web Dynpro Motivation

2. Web Dynpro ABAP Programming Model

2.1.

Views and UI Elements

2.2.

Controllers and Context

2.3.

Component Usage and Navigation

3. Web Dynpro Integration Capabilities

3.1.

Integration into SAP NetWeaver Portal

3.2.

Adobe Interactive Forms

3.3.

Adobe Flash Islands

4. Summary

3.2. Adobe Interactive Forms 3.3. Adobe Flash Islands 4. Summary © SAP AG 2009. All rights

Views and UI Elements

Views and UI Elements

View

Is embedded into window

Defines the visible layout via predefined UI elements

Does not contain any HTML or scripting

UI elements

Are the smallest UI building blocks (button, input field,…)

Available as provided UI

Have properties which steer

Can be nested with Container UI elements

Are positioned in hierarchical structure

element libraries

their behavior

Window View
Window
View

Defining View Layout

Defining View Layout UI element UI element tree of libraries view Properties of selected UI element
UI element UI element tree of libraries view Properties of selected UI element View layout
UI
element
UI element
tree of
libraries
view
Properties of
selected UI
element
View
layout

UI Element Categories

UI Element Categories

Various categories of UI elements are supported

Categories Various categories of UI elements are supported Each UI element object is represented as an
Categories Various categories of UI elements are supported Each UI element object is represented as an
Categories Various categories of UI elements are supported Each UI element object is represented as an
Categories Various categories of UI elements are supported Each UI element object is represented as an
Categories Various categories of UI elements are supported Each UI element object is represented as an

Each UI element object is represented as an abstract class that is independent of any client presentation layer.

DEMO – Hello World
Agenda 1. Web Dynpro Motivation 2. Web Dynpro ABAP Programming Model 2.1. Views and UI
Agenda 1. Web Dynpro Motivation 2. Web Dynpro ABAP Programming Model 2.1. Views and UI

Agenda

1. Web Dynpro Motivation

2. Web Dynpro ABAP Programming Model

2.1.

Views and UI Elements

2.2.

Controllers and Context

2.3.

Component Usage and Navigation

3. Web Dynpro Integration Capabilities

3.1.

Integration into SAP NetWeaver Portal

3.2.

Adobe Interactive Forms

3.3.

Adobe Flash Islands

4. Summary

3.2. Adobe Interactive Forms 3.3. Adobe Flash Islands 4. Summary © SAP AG 2009. All rights

Controller and Context

Controller and Context

Controller

Contains the logic of the UI layer

Implements event handlers

Reads and writes context node content

Each view has its own view controller

Context

Hierarchy of nodes and attributes

Contains the data of the UI

Nodes and attributes can be bound to UI elements

Framework takes care of updating the values

View Controller Context Root Node Node N1 LH Attribute CARR Paris Attribute DEP_AIRP Node N2
View Controller
Context
Root Node
Node N1
LH
Attribute CARR
Paris
Attribute DEP_AIRP
Node N2
method WD_DO_INIT
node = wd_context->get_child_node(‘N1’).
node->set_attribute( name = ‘DEP_AIRP’
value = ‘Paris’).
Method onAction_GOTO_NEXT
node = wd_context->get_child_node(‘N1’).
node->get_attribute( name = ‘CARR’
value = carrier ).

View Controller and View Context

View Controller and View Context

Window

View

T*
T*

Controller contains methods and events for user interactions

View Controller

Context Node BP

T*

PART_NAME

PARTNER_ID

Node N2

Method onAction_GOTO_NEXT node = wd_context->get_child_node(‘BP’).

Method onAction_GOTO_NEXT node = wd_context- >get_child_node(‘BP’).

node->get_attribute( name = ‘PART_NAME’ value = part_name ).

Context Node Elements

Context Node Elements

View

Context Node Elements View View Controller Context Node BP 011 012 PARTNER_ID Node 1 (Cardinality 0

View Controller

Context Node Elements View View Controller Context Node BP 011 012 PARTNER_ID Node 1 (Cardinality 0

Context

Node BP

011

012

PARTNER_ID

Node 1 (Cardinality 0

013 PARTNER_ID

TECU.

PARTNER_NAME

Asia

Laur

DE

COUNTRY JP

Node 2

FR

PARTNER_NAME

COUNTRY

n)

Elements of a context node

method WD_DO_INIT * BusPartners: internal table

node->bind_elements( partners ).

DEMO – Simple View & Table

Component Controller and Context Mapping

Component Controller and Context Mapping

Component Controller

Controller which is the backbone of the component

Has its own Context

Contains the logic for interaction with the

model (ABAP class, function modules, BAPIs, Web Services)

Context Mapping

Nodes of Component Controller context can be mapped to nodes of other contexts

Framework takes care of data transport (references)

Component Controller Component Controller Context Root Node Node 1 Node 2 Node 3 Method show_flights
Component Controller
Component Controller
Context
Root Node
Node 1
Node 2
Node 3
Method show_flights
flights = BO->get…
node1 = wd_context->…
node1->bind_elements(
flights ).

Model

Class,

ABAP

Objects

API,

BAPIs,

Other WD

Compo-

nent,

Component Controller

Component Controller

Component

Mapping of

context data

Window

View

Controller Component Mapping of context data Window View View Controller Context Node 1 Component controller connects

View Controller

Context

Node 1

Component controller connects

to business logic

and gets/sets data

Component Controller

Component Controller

Context

Context

Node 1

Node 2

Node 3

Method show_bpartners BPs = BO->get… node1 = wd_context->…

node1->bind_elements(

BPs ).

Model Class,

ABAP Objects API,

BAPIs,

Other WD Component,

Exercise #1

How to Log on

How to Log on

Logon to Windows

 

User:

student

pwd:

teched09!

Logon to SAP workshop system

System: M23

client: 800

User:

CD264A-##

(## = group number)

pwd:

teched09

Views in Views

Views in Views

ViewContainer UI element

Views can be structured with ViewContainer UI elements

How there are arranged within each other is declared in the window

Window

MAIN_VIEW ViewCont. SO_VIEW
MAIN_VIEW
ViewCont.
SO_VIEW

MAIN_VIEW

in the window Window MAIN_VIEW ViewCont. SO_VIEW MAIN_VIEW View Controller Context Node 1 ViewContainer SORDER_VIEW

View Controller

Context

Node 1

ViewContainer

SORDER_VIEW

Label
Label

View Controller

Context

Node 1

Node 2

Interaction Between Views and Controllers

Interaction Between Views and Controllers

Component

Window

View

Between Views and Controllers Component Window View View Controller View View Label Context Label Root Node

View Controller

View

View

Label

Context

Label Root Node Node 1 Press Attribut1 Attribut2 Node 2
Label
Root Node
Node 1
Press
Attribut1
Attribut2
Node 2

View Controller

Component Controller

Mapping of

context data

Component Controller

Context

Context

Node BP

011

TEC

OnLeadSelection

wd_comp_cont->

get_sorders()

Context

Node BP

011

TEC

Node SO

5

3

Node 3

View Controller

Context

Node SO

5

3

Method get_sorders

SOs = BO->get… node = wd_cont->… node->bind_table( SOs ).

Context Node at Design Time

Context Node at Design Time

Declaration of Context Nodes

Create metadata which defines the structure of the context

Two dimensional hierarchy like files and folders

But each node can be a collection

Min and max number of elements in a node is steered by Cardinality

(0 1)

(1

1)

(0

n)

(1

n)

Context SALES_ORDERS (0 n) 503 SO_ID ITelo SELLER_COMP 052007 CREATE_DATE ITEMS (0…n) ITEM_ID PRODUCT_NAME
Context
SALES_ORDERS (0
n)
503
SO_ID
ITelo
SELLER_COMP
052007
CREATE_DATE
ITEMS (0…n)
ITEM_ID
PRODUCT_NAME

Complex Data in Context Node

Complex Data in Context Node

Context at runtime

Nodes with cardinality (0

n) can

contain several elements at runtime

Each element can have its own set

of sub nodes at runtime which are

again collections of elements

Example: Sales Orders with Items

Items of selected sales order should be displayed in second table on the same view

Each sales order has its own set of items

View Controller Context SALES_ORDERS (0 n) 501 502 503 S_ORDER_ID 123.03 403.0 99.99 AMOUNT 051003
View Controller
Context
SALES_ORDERS (0
n)
501
502
503
S_ORDER_ID
123.03
403.0
99.99
AMOUNT
051003
051223
052709
DATE
ITEMS
ITEM_ID
PRODUCT_NAME

Supply Function of Context Node

Supply Function of Context Node
Supply Function of Context Node Supply Function  Is triggered if lead selection of parent element

Supply Function

Is triggered if lead selection of

parent element changes

Is implemented as method of controller

Has access to parent element

Singleton property of context

node steers if supply function is

called

Every time lead selection changes

Only at first time for each

element

Exercise #2 & #3
Agenda 1. Web Dynpro Motivation 2. Web Dynpro ABAP Programming Model 2.1. Views and UI
Agenda 1. Web Dynpro Motivation 2. Web Dynpro ABAP Programming Model 2.1. Views and UI

Agenda

1. Web Dynpro Motivation

2. Web Dynpro ABAP Programming Model

2.1.

Views and UI Elements

2.2.

Controllers and Context

2.3.

Component Usage and Navigation

3. Web Dynpro Integration Capabilities

3.1.

Integration into SAP NetWeaver Portal

3.2.

Adobe Interactive Forms

3.3.

Adobe Flash Islands

4. Summary

3.2. Adobe Interactive Forms 3.3. Adobe Flash Islands 4. Summary © SAP AG 2009. All rights

Web Dynpro Component Usage

Web Dynpro Component Usage

Reuse of Web Dynpro Components

Real business applications usually

consist of several WD

components

Reusable components for dedicated often used tasks in different applications

Customer address display

Order details

Generic components as part of the Web Dynpro environment

ALV

Select Options

Message Viewer

environment  ALV  Select Options  Message Viewer Comp Inter Comp B Comp A Contr.
Comp Inter Comp B Comp A Contr. face Context Context Method A Method B Event
Comp
Inter
Comp B
Comp A
Contr.
face
Context
Context
Method A
Method B
Event E
Event E

Web Dynpro Component Usage

Web Dynpro Component Usage

Main Comp A

Web Dynpro Component Usage Main Comp A Main Comp B Sub Component  Several main components

Main Comp B

Web Dynpro Component Usage Main Comp A Main Comp B Sub Component  Several main components
Web Dynpro Component Usage Main Comp A Main Comp B Sub Component  Several main components

Sub Component

Several main components need

the same functionality

Functionality is developed once in reusable component

Main components declare Component Usage of sub component

Sub component is instantiated in each main component at runtime

Main Component

in each main component at runtime Main Component Sub Comp A Sub Comp B  Main
in each main component at runtime Main Component Sub Comp A Sub Comp B  Main

Sub Comp A

in each main component at runtime Main Component Sub Comp A Sub Comp B  Main

Sub Comp B

Main component needs different functionalities in a given view area

View container provides place for

sub components

Several Component Usages to different sub components with the same Interface are defined

Which component is used is decided at runtime

Web Dynpro Component Reuse

Main Component A

Window

View

Comp

Controller

Context

Interface

Controller

Context

Controller Context Interface Controller Context Sub Componen t B Window View Node Node Method A Method

Sub Component B

Window

View

Controller Context Sub Componen t B Window View Node Node Method A Method B Event E

Node

Node

Method A

Method B

Event E

Event E

View

Node Node Method A Method B Event E Event E View  Windows of a used

Windows of a used component can

be embedded as Interface Views into own windows or views

Methods, events and context nodes

can be declared as part of the

Interface

Access via Interface Controller with

Context node mapping Method call, Events raised

Embedding of Interface View

Interface

Controller

Context

Node

Method C

Event E

Sub Component C

Window

Controller Context Node Method C Event E Sub Componen t C Window View © SAP AG
View
View

Concepts: Component Interface

Concepts: Component Interface
Component Interface Controller Component Controller Interface Contr. Window Context Component Contr. View View
Component
Interface Controller
Component
Controller
Interface Contr.
Window
Context
Component Contr.
View
View Controller
Context
Root Node
Root Node
Node 1
Context
Node 1
Root Node
Node 1
Method
Node 2
SET_AIRP.
View Controller
Node 3
View
View
View Controller
Label
Context
Contexth
Label
Root Node
Root Node
Label
Node 1
Press
Node 1
Attribut1
Attribut2
Method SORT_FLIGHT
View Controller
Node 2
View
Node 2
Context
Label
Root Node
Press
Label
Attribut1
Label
Attribut2
Node 1
Node 2

Navigation Between Views

Navigation Between Views
Navigation Between Views Window Customer Details Customer Sales Orders Out In Inbound plug Outbound plug

Window

Customer

Details

Window Customer Details Customer Sales Orders Out In

Customer Sales Orders

Window Customer Details Customer Sales Orders Out In
Window Customer Details Customer Sales Orders Out In

Out

In

Inbound plugCustomer Details Customer Sales Orders Out In Outbound plug Navigation link  To define the navigation

Outbound plugDetails Customer Sales Orders Out In Inbound plug Navigation link  To define the navigation between

Navigation linkSales Orders Out In Inbound plug Outbound plug  To define the navigation between two views,

To define the navigation between two views, you need to create exit and entry points for each view using outbound and inbound plugs.

Only then you can specify the navigation flow using navigation links

Plugs and Navigation

Plugs and Navigation Create Window View View Controller SHOW_SORDERS Create Action OnActionSHOW_SORDERS
Create
Create

Window

View

Window View View Controller SHOW_SORDERS Create Action OnActionSHOW_SORDERS wd_this-> fire_EXIT_VIEW_plg( ). View View

View Controller

SHOW_SORDERS

Create

Action

OnActionSHOW_SORDERS wd_this-> fire_EXIT_VIEW_plg( ).

View

wd_this-> fire_EXIT_VIEW_plg( ). View View Controller HandleSHOW_SO … Outbound Plug EXIT_VIEW

View Controller

HandleSHOW_SO

Outbound Plug

EXIT_VIEW

OUT

IN

SHOW_SO

Create

Navigatio

n Link

OUT

IN

Create Inbound Plug

Exercise #4
Agenda 1. Web Dynpro Motivation 2. Web Dynpro ABAP Programming Model 2.1. Views and UI
Agenda 1. Web Dynpro Motivation 2. Web Dynpro ABAP Programming Model 2.1. Views and UI

Agenda

Agenda 1. Web Dynpro Motivation 2. Web Dynpro ABAP Programming Model 2.1. Views and UI Elements

1.

Web Dynpro Motivation

2.

Web Dynpro ABAP Programming Model

2.1. Views and UI Elements

2.2. Controllers and Context

2.3. Component Usage and Navigation

3.

Web Dynpro Integration Capabilities

3.1.

Integration into SAP NetWeaver Portal

3.2.

Adobe Interactive Forms

3.3.

Adobe Flash Islands

4.

Summary

Agenda 1. Web Dynpro Motivation 2. Web Dynpro ABAP Programming Model 2.1. Views and UI
Agenda 1. Web Dynpro Motivation 2. Web Dynpro ABAP Programming Model 2.1. Views and UI

Agenda

1. Web Dynpro Motivation

2. Web Dynpro ABAP Programming Model

2.1. Views and UI Elements

2.2. Controllers and Context

2.3. Component Usage and Navigation

3. Web Dynpro Integration Capabilities

3.1.

Integration into SAP NetWeaver Portal

3.2.

Adobe Interactive Forms

3.3.

Adobe Flash Islands

4. Summary

3.2. Adobe Interactive Forms 3.3. Adobe Flash Islands 4. Summary © SAP AG 2009. All rights

Web Dynpro and SAP NetWeaver Portal

Web Dynpro and SAP NetWeaver Portal

Portal Integration

Generic iViews for displaying Web Dynpro Applications

Easy integration via Web Dynpro

iView Wizard

Central User management

Portal eventing support

Object Based Navigation

Unified branding by portal

themes

support  Object Based Navigation  Unified branding by portal themes © SAP AG 2009. All

Portal Integration

Portal Integration

Web AS ABAP application system is declared in portal

Server, port,…

User mapping

Create iView for WD ABAP application

iView points to logical backend server, name space and WD application

iView is assigned to portal role

Portal iView

SAP Portal

Application Server Java

WD Application

WD Application WD Component Window View Application Server ABAP
WD Component Window View
WD Component
Window
View

Application Server ABAP

DEMO – Portal Integration

A Consistent and Flexible SAP NetWeaver UI

A Consistent and Flexible SAP NetWeaver UI SAP NetWeaver Portal: The “yellow pages” of enterprise apps
SAP NetWeaver Portal: The “yellow pages” of enterprise apps and UI assets, with new Web
SAP NetWeaver Portal:
The “yellow pages”
of enterprise apps and
UI assets, with new
Web 2.0 services and
collaboration
Web Dynpro: The
heartbeat of the
runtime for enterprise
applications, providing
client abstraction
support
Provides the
“flexibility” of model-
driven UI for both
declarative
programming and
UI modeling of
Visual Composer

SAP NetWeaver Business Client (smart client on Microsoft Windows desktop)

SAP NetWeaver Portal Client (zero footprint client with Web 2.0)

1 SAP NetWeaver Portal Platform + UI Services 2 Web Dynpro ABAP & Java Prog.
1 SAP NetWeaver Portal Platform + UI Services
2 Web Dynpro ABAP & Java Prog. Model + Runtime
3 Visual Composer Modeling + Eclipse
DEMO – NWBC
Agenda 1. Web Dynpro Motivation 2. Web Dynpro ABAP Programming Model 2.1. Views and UI
Agenda 1. Web Dynpro Motivation 2. Web Dynpro ABAP Programming Model 2.1. Views and UI

Agenda

1. Web Dynpro Motivation

2. Web Dynpro ABAP Programming Model

2.1. Views and UI Elements

2.2. Controllers and Context

2.3. Component Usage and Navigation

3. Web Dynpro Integration Capabilities

3.1. Integration into SAP NetWeaver Portal

3.2. Adobe Interactive Forms

3.3. Adobe Flash Islands

4. Summary

Portal 3.2. Adobe Interactive Forms 3.3. Adobe Flash Islands 4. Summary © SAP AG 2009. All

What Does it Look Like ?

What Does it Look Like ?

Paper-like

layout

Self-explanatory

Natural look and feel

layout  Self-explanatory  Natural look and feel User Handling  Save locally  Distribute via

User Handling

Save locally

Distribute via email / Portal

Digital signature (future)

Local printing

Background Services

Structured data in XML

Prefilled application values

Prefilled list boxes, help values, …

Automatic data extraction

and integration in application

Adobe Interactive Forms in WD ABAP

Adobe Interactive Forms in WD ABAP

Basic Forms Functionality

Define Form in system

Layout (Adobe Designer)

Data structure

Form is generated

Function for generating PDF

API for setting/getting data

Integration into Web Dynpro

Place Form in InteractiveForm UI container element

Map context data to forms API

Form is displayed at runtime

Printing

Interactive Form

API  Form is displayed at runtime  Printing  Interactive Form © SAP AG 2009.
DEMO – IFbA
Agenda 1. Web Dynpro Motivation 2. Web Dynpro ABAP Programming Model 2.1. Views and UI
Agenda 1. Web Dynpro Motivation 2. Web Dynpro ABAP Programming Model 2.1. Views and UI

Agenda

1. Web Dynpro Motivation

2. Web Dynpro ABAP Programming Model

2.1. Views and UI Elements

2.2. Controllers and Context

2.3. Component Usage and Navigation

3. Web Dynpro Integration Capabilities

3.1.

Integration into SAP NetWeaver Portal

3.2.

Adobe Interactive Forms

3.3.

Adobe Flash Islands

4. Summary

3.2. Adobe Interactive Forms 3.3. Adobe Flash Islands 4. Summary © SAP AG 2009. All rights

Adobe Flash Islands in WD ABAP

Adobe Flash Islands in WD ABAP

Adobe Flash Applications

Rich Internet Applications for complex visualization tasks

Developed in Adobe Flex Builder

Running in Adobe Flash Player

Used if Web Dynpro UI elements

are not sufficient for required user experience

Integration into Web Dynpro

Running as WD Island

Contained in MIME repository

Communication to WD component via

SAP Flash Library

Context Nodes

Events

to WD component via  SAP Flash Library  Context Nodes  Events © SAP AG
DEMO – Flash Islands
Agenda 1. Web Dynpro Motivation 2. Web Dynpro ABAP Programming Model 2.1. Views and UI
Agenda 1. Web Dynpro Motivation 2. Web Dynpro ABAP Programming Model 2.1. Views and UI

Agenda

1. Web Dynpro Motivation

2. Web Dynpro ABAP Programming Model

2.1. Views and UI Elements

2.2. Controllers and Context

2.3. Component Usage and Navigation

3. Web Dynpro Integration Capabilities

3.1.

Integration into SAP NetWeaver Portal

3.2.

Adobe Interactive Forms

3.3.

Adobe Flash Islands

4. Summary

3.2. Adobe Interactive Forms 3.3. Adobe Flash Islands 4. Summary © SAP AG 2009. All rights
DEMO – Final

Summary

Summary

Web Dynpro is SAP’s UI strategy

Declarative, MVC based UI programming

model

UI definition independent of rendering technology

Web Dynpro for ABAP available with SAP NetWeaver 7.0

Programming model similar to Web Dynpro for Java

Completely Integrated into the SAP NetWeaver Application Server ABAP

 Completely Integrated into the SAP NetWeaver Application Server ABAP © SAP AG 2009. All rights
 Completely Integrated into the SAP NetWeaver Application Server ABAP © SAP AG 2009. All rights

Virtual SAP TechEd :

Extend your SAP TechEd Year Round

Virtual SAP TechEd : Extend your SAP TechEd Year Round
Virtual SAP TechEd : Extend your SAP TechEd Year Round  Best of SAP TechEd at

Best of SAP TechEd at Your fingertips

View sessions that you missed

Replay and review sessions that you attended

Quality SAP TechEd Training

Best Practices

Product Roadmaps

Learn at your own pace

Gain Access to sessions recorded in 2006, 2007, 2008 and 2009* (*available December 2009)

24/7 Access online/offline

Flexible Course Syllabus

Volume Licensing

Special Pricing for multiple subscribers

Further Information

Further Information

SAP Public Web:

 

SAP Developer Network (SDN): www.sdn.sap.com Business Process Expert (BPX) Community: www.bpx.sap.com SAP BusinessObjects Community (BOC): www.boc.sap.com

Related SAP Education and Certification Opportunities

NET310: 5-day introductory classroom training on Web Dynpro ABAP

NET311: 3-day classroom training on advanced Web Dynpro ABAP

NET312: 3-day classroom training on UI elements

NET313: new 2-day classroom training on Floorplan Manager

Further Information

Further Information

Related Workshops/Lectures at SAP TechEd 2009

CD102, Web Dynpro ABAP Overview, Lecture (1 hour) CD264, Developing User Interfaces with Web Dynpro ABAP, Hands-On (4 hours) CD260, ABAP Development: Update Your Skills to SAP NetWeaver 7, Hands-on (4 hours) UP162, Personalization, Configuration, and Customization of Web Dynpro ABAP with Floorplan Manager, Hands-On (2 hours) UP100, SAP’s User Interaction Strategy: Introduction and Novelties in SAP NetWeaver 7.2, Lecture (2 hours) UP107, SAP NetWeaver Business Client, Lecture (1 hour)

UP264, Creating Online and Offline Form Processing Scenarios with

Adobe Forms and Web Dynpro for ABAP, Hands-On (2 hours) UP250, ASUG Influence: SAP NetWeaver User Interaction Strategy and User Interface Technology

Thank You!

Thank You!
ContactFeedback Please complete your session evaluation. Be courteous — deposit your trash, and do not

ContactFeedback

Please complete your session evaluation.

Be courteous deposit your trash, and do not take the handouts for the following session.

your session evaluation. Be courteous — deposit your trash, and do not take the handouts for
your session evaluation. Be courteous — deposit your trash, and do not take the handouts for