WebDynPro ABAP BASICS Part 1

CD154
Web Dynpro for

ABAP Part 1–
The Basics
Contributing Speakers
Ulrich Klingels
Product Manager, SAP AG
Venky Varadadesigan
Product Manager, SAP Labs LLC
Dirk Feeken
Product Manager, SAP AG
Manfred Lutz
Product Specialist, SAP AG
Regina Breuer
Developer, SAP AG
© SAP AG 2006, SAP TechEd ’06 / CD154 / 2

Learning Objectives
As a result of this workshop, you will be able to:

Know why Web Dynpro is SAP's preferred UI model
Understand the Web Dynpro programming model
Be able to create basic Web Dynpro applications in ABAP

Motivation of Web Dynpro
The Web Dynpro Programming Model
Views and UI elements
Controllers and Context
Navigation and Plugs
Supply Functions
Summary
Positioning: IT Practices and IT Scenarios
IT practices “slice” SAP NetWeaver to directly address key

issues ... and help enterprises find the right starting point
SAP NetWeaver™
PEOPLE INTEGRATION
Application governance and Security

Business Information Management
Multi channel access
Composite Application Framework
End-to-End Process Integration
Enterprise Service Architecture

Unified Life-Cycle Management
Portal Collaboration
User Productivity Enablement
Business Event Management

INFORMATION INTEGRATION
Life Cycle Mgmt

Bus. IntelligenceKnowledge Mgmt
Custom Development
Master Data Mgmt
Data Unification
PROCESS INTEGRATION
Consolidation
Integration Business
Broker Process Mgmt
APPLICATION PLATFORM
J2EE ABAP
DB and OS Abstraction
Different capabilities used jointly in

each “slice”

Positioning: SAP NetWeaver Technology Map
IT Practices IT Scenarios
User Productivity Running an Enterprise Enabling User Business Task Mobilizing Business Enterprise Knowledge
Enablement Portal Collboration Management Processes Management
Central Master-Data
Data Unification Master-Data Harmonization Master-Data Consolidation Enterprise Data Warehousing
Management
Business Information Enterprise Reporting, Query, and Business Planning and Analytical
Enterprise Data Warehousing
Management Analysis Services
Business Event
Business Event Resolution Business Task Management
Management
Enabling Application-
End-to-End Process Enabling Business-to- Business Process Enabling Platform Business Task
to-Application
Integration Business Processes Management Interoperability Management
Processes
Custom Development Developing, Configuring, and Adapting Applications Enabling Platform Interoperability
Unified Life-Cycle
Software Life-Cycle Management SAP NetWeaver Operations
Management
Application
Authentication and Single Sign-On Integrated User and Access Management
Governance & Security
Enabling Platform Enterprise Knowledge

Consolidation SAP NetWeaver Operations Master-Data Consolidation
Interoperability Management
Enterprise Service
Architecture – Design & Enabling Enterprise Services
Deployment

What is Web Dynpro ?
A Programming Model for User Interfaces

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 modelling
– Code is generated from meta-model declarations
Integrated in SAP NetWeaver Developer Studio and the ABAP
Workbench
A Runtime Environment for Applications

Framework running on SAP Web AS server offers common services
A Technology for Software Modularization

Components help structure applications and support pattern-based UIs

Web Dynpro Main Benefits
Deliver an Enterprise Quality

Web Development Environment Web Dynpro Web Dynpro
Tools Metadata
Enforce clear separation between UI
logic and business logic
Little coding, lots of design Web Dynpro Runtime
Declarative UI development
JAVA ABAP
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

Motivation Web Dynpro
Web Dynpro
UI definition independent
of client technology
Web Smart other?
as much abstract
Browser Client
declaration as possible
Different rendering
engines for different
(future) UI technologies http://..... http://..... ???
without adapting HTML, JS XML, delta ???
application coding
Rendering Rendering Rendering
Engine Engine Engine
Meta Data
<xml>
<wd:xxx>
</xml>
Web Dynpro

Supply Functions
Summary
Application Scenarios With Web Dynpro
SAP
SAP Enterprise
Enterprise Portal
Portal
Web Dynpro iView Web Dynpro iView MUSE Client
Web Dynpro J2EE

J2EE ABAP
ABAP Web
Web Dynpro
Dynpro
Web DynproApp Web Web
Web Dynpro
Dynpro
Web Dynpro
Dynpro Web
Web Dynpro
Dynpro App
App
App App
App
Runtime
Runtime Runtime
Runtime
ABAP
ABAP
SAP
RFC, WS Workbench
Workbench
NetWeaver
Developer
Studio
RMI
J2EE
J2EE ABAP
ABAP Business
Server
Server EJB (e.a.) Server
Server API (BAPI,
BackendBusiness
Business
Data Application
Web Services) Data

Web Dynpro Development
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

DEMO
WD in Workbench

Meta-model Declarations and Custom Coding
Meta-data
Run able 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
... ...
Model View Controller (MVC)
Original MVC design for decoupling presentation and

application logic
Generates the application
data without caring how it
Model will be displayed.
Binds the user and business
interaction layers together. All
intermediate processing is
performed here.
Business Interaction Layer
Request User Interaction Layer

Controller
Response
Visualizes the application
data without caring how it
Binding Layer was generated.
View

Web Dynpro Component Architecture
SAP Web Dynpro uses principles of MVC paradigm
Controller handle the

Component Interface
user input and steers
Interface Interface
the application Interface viewview Controller
M
Views define the layout
Model holds and

Component
provide the business Controller
Window M
logic
Usage declarations
Window Controller
Components
M
Contains Usage
declarations Model 1
View M
View Custom
Controller
Layout Controller Model 2
M
Business Logic
W e b D y n p r o C o m p o n e n t (Models)

Web Dynpro Components
Web Dynpro Component contains

Windows
Views
Component Component
– UI elements
Controller
– Layout Window
View View
Controllers Controller
– Context Data
– Eventing
– Methods
– Attributes
Component Interface View View
Controller
– Interface Contr.
– Interface View

Supply Functions
Summary
View, Windows and UI Elements
View
Is embedded into window Window
Defines the visible layout via
predefined UI elements View
Don’t contain any HTML or
scripting
UI elements
Are the smallest UI building
blocks (button, input field,…)
Available as provided UI
element libraries
Have properties which steer
their behavior
Can be nested with Container
UI elements
Are positioned in hierarchical
structure
Defining View Layout
UI element
UI
libraries
element
tree of
view
Properties of
selected UI
element
View
layout

UI Element Categories
Various categories of UI elements are supported
e.g. Button, InputField, Gantt, Network

Label
InteractiveForm
BusinessGraphics,
GeoMap
e.g. DateNavigator,
Table, Tree
BI Application Frame
OfficeControl
e.g.
TransparentContainer, MessageArea
Tray
Each UI element object is represented as an abstract class that is independent

of any client presentation layer.

DEMO
Hello World
Supply Functions
Summary
Controller and Context
Controller
Contains the logic of the UI View Controller
layer Context
Implements event handlers Root Node
Node N1
Reads and writes context LH Attribute CARR
node content Paris Attribute DEP_AIRP
Each view has its own view Node N2
controller
Context method WD_DO_INIT

node = wd_context->get_child_node(‘N1’).
Hierarchy of nodes and node->set_attribute( name = ‘DEP_AIRP’
value = ‘Paris’).
attributes
Contains the data of the UI Method onAction_GOTO_NEXT
Nodes and attributes can be node->get_attribute( name = ‘CARR’
value = carrier ).
bound to UI elements
Framework cares about
updating the values

View Controller and View Context
Window
View View Controller

Context
Root Node
Node N1
LH Attribute CARR
Paris Attribute DEP_AIRP
Node N2
Controller
contains
methods... method WD_DO_INIT
node->set_attribute( name = ‘DEP_AIRP’
value = ‘Paris’).
...and events
for user Method onAction_GOTO_NEXT
interactions node = wd_context->get_child_node(‘N1’).
node->get_attribute( name = ‘CARR’
value = carrier ).

Context Node Elements

Context
Root Node
Node 1 Node 1 (Cardinality 0...n)
AA ABID
Airline AC Airline ID
Amer. Airline NameAir C. Airline Name

Air B.
www URL
www www URL
Node 2
Elements of a
context node
method WD_DO_INIT
* carriers: internal table
...
node->bind_elements( carriers ).

Exercise 1
Display Flight List

How to Log on
Logon to Windows
User: sap
pwd: BestRun06
Logon to SAP workshop system

System: M99 client: 001
User: teched_## (## = group number)
pwd: teched
Coding: Report Z_CD154_CODING

Component Controller and Context Mapping
Component Controller
Controller which is the
backbone of the component Component Controller
Context
Has its own Context
Root Node
Contains the logic for Node 1
interaction with the model
(ABAP class, function modules,
BAPIs, Web Services) Node 2 Model
Class,
Context Mapping
Node 3
ABAP
Nodes of Component Objects
Controller context can be API,
Method show_flights
mapped to nodes of other flights = BO->get…
BAPIs,
contexts node1 = wd_context->…
Other WD
node1->bind_elements(
Framework cares about data flights ). Compo-
transport (references) nent,
…

Context Mapping Between Views
Component User enters Component Controller

data
Mapping of
Window context data
View View Controller Component Controller
Context
Context
Root Node
Root Node
Node 1 Node 1
LH LH
View Controller Node 2
View Node 3
Label
Context
Label Contexth
Root Node Root Node
Label
Node 1 Node 1
Press
Attribut1
Attribut2 LH
Node 2
Node 2

Mapping of
Component context data Component Controller
Window Context
Root Node
Context Node 1
Root Node
Node 1
Node 2
Node 3
Model Class,
ABAP
Method show_flights
flights = BO->get… Objects API,
Component node1 = wd_context->…
controller connects node1->bind_elements( BAPIs,
to business logic flights ).
Other WD
and gets/sets data Component,
…

Exercise 2
Find Flights via

BAPI Call
Supply Functions
Summary
Navigation Between Views
Window
Customer Customer
Search List
Out In
Inbound plug
Outbound plug
Navigation link
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
Outbound Plug
Window

OUT
OUT
SEARCH_FLIGHTS IN
Inbound Plug
Create
View Action View Controller
IN
OUT
IN

Exercise 3
Navigation
between Views
Supply Functions
Summary
Context Node at Design Time
Declaration of Context
Nodes
Create metadata which
Context
defines the structure of the
context Root Node
FLIGHTS (0...n)
Two dimensional hierarchy SQ Airline ID
like files and folders 203 Flight Nr
But each node can be a 051003 Date

collection
BOOKINGS (0…n)
Min and max number of Booking Nr
elements in a node is
Customer
steered by Cardinality
AGENCY (1…1)
– (0..1)
– (1..1)
– (0..n)
– (1..n)

Complex Data in Context Node
Context at runtime
Nodes with cardinality (0..n)
View Controller
can contain several elements
at runtime Context
Root Node
Each element can have its FLIGHTS (0...n)
own set of sub nodes at SQ SR
LH UA Airline ID
runtime which are again 203 Swiss
4030 0407 Flight Nr
collections of elements
051003 www
051223 052709 Date
BOOKINGS
Example: Flights with Booking Nr
bookings Customer
Bookings for a selected flight

should be displayed in second
table on the same view
Each flight has its own set of
bookings

Supply Function of Context Node
Supply Function
Is triggered if lead
selection of parent
element changes
Is implemented as method
of controller
Has access to parent
element
Typically used when
substructure of context
nodes with several
elements has to be filled.
Flights – Bookings,
Customers – Orders,…

Exercise 4
Display Bookings
of selected Flight
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 2004s
Programming model similar to
Web Dynpro for Java
Completely Integrated into the
SAP NetWeaver Application
Server ABAP

Further Information
Î Public Web:
www.sap.com
SAP Developer Network: www.sdn.sap.com
Î SAP NetWeaver Î Application Server Î ABAP and Web Dynpro
SDN Forums: Application Server Î Web Dynpro
SAP Customer Services Network: www.sap.com/services/
Î Related SAP Education Training Opportunities

http://www.sap.com/education/
Î Related Workshops/Lectures at SAP TechEd 2006

CD264 Web Dynpro for ABAP Part 2 – Advanced Topics,
4h Hands On Workshop

THANK YOU FOR YOUR
ATTENTION !
QUESTIONS – SUGGESTIONS – DISCUSSION

Feedback
Please complete your session evaluation.
Be courteous — deposit your trash,

and do not take the handouts for the following session.
Thank You !

WebDynPro ABAP BASICS Part 1

Загружено:

Сведения о документе

Авторское право

Доступные форматы

Поделиться этим документом

Поделиться или встроить документ

Параметры публикации

Этот документ был вам полезен?

Это неприемлемый материал?

Авторское право:

Доступные форматы

WebDynPro ABAP BASICS Part 1

Загружено:

Авторское право:

Доступные форматы

CD154

Web Dynpro for

© SAP AG 2006, SAP TechEd ’06 / CD154 / 2

As a result of this workshop, you will be able to:

© SAP AG 2006, SAP TechEd ’06 / CD154 / 3

IT practices “slice” SAP NetWeaver to directly address key

Application governance and Security

End-to-End Process Integration

Enterprise Service Architecture

User Productivity Enablement

Business Event Management

Life Cycle Mgmt

Different capabilities used jointly in

© SAP AG 2006, SAP TechEd ’06 / CD154 / 5

Enabling Platform Enterprise Knowledge

© SAP AG 2006, SAP TechEd ’06 / CD154 / 6

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 2006, SAP TechEd ’06 / CD154 / 7

Deliver an Enterprise Quality

Improve User Experience

© SAP AG 2006, SAP TechEd ’06 / CD154 / 8

© SAP AG 2006, SAP TechEd ’06 / CD154 / 9

Web Dynpro J2EE

© SAP AG 2006, SAP TechEd ’06 / CD154 / 11

ABAP lifecycle management

© SAP AG 2006, SAP TechEd ’06 / CD154 / 12

© SAP AG 2006, SAP TechEd ’06 / CD154 / 13

Run able App

Meta-model Declarations Custom Coding

Original MVC design for decoupling presentation and

Request User Interaction Layer

© SAP AG 2006, SAP TechEd ’06 / CD154 / 15

SAP Web Dynpro uses principles of MVC paradigm

 Controller handle the

 Views define the layout

 Model holds and

© SAP AG 2006, SAP TechEd ’06 / CD154 / 16

Web Dynpro Component contains

© SAP AG 2006, SAP TechEd ’06 / CD154 / 17

© SAP AG 2006, SAP TechEd ’06 / CD154 / 20

Various categories of UI elements are supported

e.g. Button, InputField, Gantt, Network

Each UI element object is represented as an abstract class that is independent

© SAP AG 2006, SAP TechEd ’06 / CD154 / 21

Context method WD_DO_INIT

© SAP AG 2006, SAP TechEd ’06 / CD154 / 24

View View Controller

Paris Attribute DEP_AIRP

© SAP AG 2006, SAP TechEd ’06 / CD154 / 25

View View Controller

Amer. Airline NameAir C. Airline Name

© SAP AG 2006, SAP TechEd ’06 / CD154 / 26

© SAP AG 2006, SAP TechEd ’06 / CD154 / 27

Logon to SAP workshop system

© SAP AG 2006, SAP TechEd ’06 / CD154 / 28

© SAP AG 2006, SAP TechEd ’06 / CD154 / 29

Component User enters Component Controller

View Controller Node 2

© SAP AG 2006, SAP TechEd ’06 / CD154 / 30

© SAP AG 2006, SAP TechEd ’06 / CD154 / 31

Find Flights via

Controller handle the

Views define the layout

Model holds and

But each node can be a 051003 Date

Bookings for a selected flight

Web Dynpro is SAP’s UI strategy