Upload
others
View
22
Download
1
Embed Size (px)
Citation preview
Web Dynpro for ABAP
SAP AG 2006, Venky Varadadesigan / Web Dynpro for ABAP / 2
Venky VaradadesiganVenky VaradadesiganVenky VaradadesiganVenky Varadadesigan
Product Manager
SAP NetWeaver US PM - SAP Labs
Your Instructor
SAP AG 2006, Venky Varadadesigan / Web Dynpro for ABAP / 3
Learning Objectives
As a result of this workshop, you will:
� 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
Advanced Topics
Summary
SAP AG 2006, Venky Varadadesigan / Web Dynpro for ABAP / 5
Positioning: IT Practices and IT Scenarios
SAP NetWeaver™
Co
mp
osit
e A
pp
licati
on
Fra
mew
ork
PEOPLE INTEGRATION
Multi channel access
Portal Collaboration
INFORMATION INTEGRATION
Bus. Intelligence
Master Data Mgmt
Knowledge Mgmt
PROCESS INTEGRATION
Integration Broker
BusinessProcess Mgmt
APPLICATION PLATFORM
J2EE
DB and OS Abstraction
ABAP
Life
Cycle
Mg
mt
IT practices “slice” SAP NetWeaver to directly address key issues ... and help enterprises find the right starting point
Use
r P
rod
uc
tivit
y E
na
ble
me
nt
Da
ta U
nif
ica
tio
n
Bu
sin
ess
In
form
ati
on
Ma
na
ge
me
nt
Bu
sin
ess
Eve
nt
Ma
na
gem
en
t
En
d-t
o-E
nd
Pro
cess
In
teg
rati
on
Cu
sto
m D
eve
lop
me
nt
Un
ifie
d L
ife
-Cyc
le M
an
ag
em
en
t
Ap
pli
ca
tio
n g
ove
rnan
ce
an
d S
ec
uri
ty
Co
ns
oli
da
tio
n
En
terp
rise
Serv
ice
Arc
hit
ec
ture
Different capabilities used jointly in each “slice”
SAP AG 2006, Venky Varadadesigan / Web Dynpro for ABAP / 6
Positioning: SAP NetWeaver Technology Map
User Productivity Enablement
Running an Enterprise Portal
Enabling User Collboration
Business Task Management
Mobilizing Business Processes
Enterprise Knowledge Management
Data Unification Master-Data Harmonization Master-Data ConsolidationCentral Master-Data Management
Enterprise Data Warehousing
Business Information Management
Enterprise Reporting, Query, and Analysis
Business Planning and Analytical Services
Enterprise Data Warehousing
Business Event Management
Business Event Resolution Business Task Management
End-to-End Process Integration
Enabling Application-to-Application Processes
Enabling Business-to-Business Processes
Business Process Management
Enabling Platform Interoperability
Business Task Management
Custom Development Developing, Configuring, and Adapting Applications Enabling Platform Interoperability
Unified Life-Cycle Management
Software Life-Cycle Management SAP NetWeaver Operations
Application Governance & Security
Authentication and Single Sign-On Integrated User and Access Management
ConsolidationEnabling Platform Interoperability
SAP NetWeaver Operations Master-Data ConsolidationEnterprise Knowledge Management
Enterprise Service Architecture – Design & Deployment
Enabling Enterprise Services
IT IT IT IT PracticesPracticesPracticesPractices IT IT IT IT ScenariosScenariosScenariosScenarios
SAP AG 2006, Venky Varadadesigan / Web Dynpro for ABAP / 7
SAP UI Framework Roadmap: From SAP GUI to Web Dynpro
SAP GUI
ITS UIs (Web GUI, IACs)NW 2004...
ITS Technology (SAP GUI for HTML)
Business Server Pages (BSP)
JSP & HTMLB (tag library) Java
HTMLB for BSP
Web Dynpro Java
Web Dynpro ABAP
4.6
ITS (IACs, Flow Logic)
6.10 6.20NW 2004s
SAP AG 2006, Venky Varadadesigan / Web Dynpro for ABAP / 8
Portal Content Design Tools: Offering
Content Complexity
Content Admin
PortalContent Studio
SAP NetWeaver Developer Studio (Java + PDK Perspective)
SAP ABAP Development Workbench (Business Server Pages)
PDK for .Net
J2EE/ABAP/.Net Developer
Interactive Applications
Transactional Business
Applications
Web Applications
Business ApplicationDeveloper
Business Expert
SAP NetWeaver Developer Studio (Web Dynpro for Java Perspective)
SAP ABAP Development Workbench(Web Dynpro for ABAP)
SAP NetWeaver Visual Composer
Display Applications
Developing Portal ContentCreating Portal Content
SAP AG 2006, Venky Varadadesigan / Web Dynpro for ABAP / 9
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
What is Web Dynpro ?
SAP AG 2006, Venky Varadadesigan / Web Dynpro for ABAP / 10
Deliver an Enterprise Quality
Web Development Environment
� minimize coding, maximize design
� separate layout and logic
� support arbitrary backend systems
� support reuse of components
� configuration of UI patterns
� 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
Web DynproMetadata
Web DynproTools
Web Dynpro Runtime
JAVA ABAP
Web Dynpro Main Benefits
SAP AG 2006, Venky Varadadesigan / Web Dynpro for ABAP / 11
Motivation Web Dynpro
Web Dynpro
RenderingEngine
RenderingEngine
RenderingEngine
WebBrowser
SmartClient
other?
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
??????
http://.....XML, delta
http://.....
HTML, JS
Meta Data<xml><wd:xxx></xml>
Motivation of Web Dynpro
The Web Dynpro Programming Model
Views and UI elements
Controllers and Context
Navigation and Plugs
Advanced Topics
Summary
SAP AG 2006, Venky Varadadesigan / Web Dynpro for ABAP / 13
Application Scenarios With Web Dynpro
J2EE
Web DynproRuntime
Web Dynpro AppWeb Dynpro
App
SAP Enterprise Portal
SAP NetWeaver
DeveloperStudio
ABAP
Web DynproRuntime
Web DynproAppWeb Dynpro
App
ABAPWorkbench
J2EE Server Backend
Application
ABAP
Server
RMI
RFC, WS
BusinessData
BusinessData
BusinessAPI (BAPI,
Web Services)
EJB (e.a.)
Web Dynpro iView Web Dynpro iView
SAP AG 2006, Venky Varadadesigan / Web Dynpro for ABAP / 14
Demo
DemoHello World
SAP AG 2006, Venky Varadadesigan / Web Dynpro for ABAP / 15
Original MVC design for decoupling presentation and
application logic
Request
Response
User Interaction Layer
Business Interaction Layer
Binding Layer
Visualizes the application
data without caring how it
was generated.
Generates the application
data without caring how it
will be displayed.Binds the user and business
interaction layers together. All
intermediate processing is
performed here.
Model View Controller (MVC)
Model
View
Controller
SAP AG 2006, Venky Varadadesigan / Web Dynpro for ABAP / 16
Web Dynpro Components
Web Dynpro Component
contains
� Windows
� Views
� UI elements
� Layout
� Controllers
� Context Data
� Eventing
� Methods
� Attributes
� Component Interface
� Interface Contr.
� Interface View Label
Component
Controller
Component
Window
ViewController
View
ViewController
View
Motivation of Web Dynpro
The Web Dynpro Programming Model
Views and UI elements
Controllers and Context
Navigation and Plugs
Advanced Topics
Summary
SAP AG 2006, Venky Varadadesigan / Web Dynpro for ABAP / 18
Window
View
View
� Is embedded into window
� Defines the visible layout via predefined UI elements
� Doesn’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 a hierarchical structure
View, Windows And UI Elements
SAP AG 2006, Venky Varadadesigan / Web Dynpro for ABAP / 19
Defining View Layout
UI element
libraries
UI element
libraries
Properties of selected UI
element
Properties of selected UI
element
UI
element tree of
view
UI
element tree of
view
View
layout
View
layout
SAP AG 2006, Venky Varadadesigan / Web Dynpro for ABAP / 20
Various categories of UI elements are supported
e.g. Button, InputField, Label
e.g. DateNavigator, Table, Tree
e.g. TransparentContainer, Tray
OfficeControl
Gantt, Network
InteractiveForm
BusinessGraphics,
GeoMap
BI Application Frame
MessageArea
Each UI element object is represented as an abstract
class that is independent of any client presentation layer.
UI Element Categories
SAP AG 2006, Venky Varadadesigan / Web Dynpro for ABAP / 21
Demo
Demo -Views & UI elements
Motivation of Web Dynpro
The Web Dynpro Programming Model
Views and UI elements
Controllers and Context
Navigation and Plugs
Advanced Topics
Summary
SAP AG 2006, Venky Varadadesigan / Web Dynpro for ABAP / 23
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 cares about
updating the values
View Controller
Context
Node N1
Node N2
Attribute CARR
Attribute DEP_AIRP
Root Node
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 ).
LH
Paris
Controller And Context
SAP AG 2006, Venky Varadadesigan / Web Dynpro for ABAP / 24
Window
View View Controller
Context
Node N1
Node N2
Attribute CARR
Attribute DEP_AIRP
Root Node
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 ).
LH
Paris
Controller
containsmethods...
...and eventsfor user
interactions
View Controller And View Context
SAP AG 2006, Venky Varadadesigan / Web Dynpro for ABAP / 25
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 cares about data transport (references)
Component Controller
Component ControllerContext
Root Node
Node 1
Node 3
Node 2
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 And Context Mapping
SAP AG 2006, Venky Varadadesigan / Web Dynpro for ABAP / 26
Component ControllerComponent
Window
View Controller
Context
Node 1
View
Component ControllerContext
Root Node
Node 1
Node 3
Node 2
Mapping of
context data
Root Node
Method show_flights
flights = BO->get…
node1 = wd_context->…
node1->bind_elements(
flights ).
Componentcontroller connectsto business logic
and gets/sets data
Model Class,
ABAP Objects API,
BAPIs,
Other WD
Component,
…
Component Controller
SAP AG 2006, Venky Varadadesigan / Web Dynpro for ABAP / 27
Demo
DemoController & Context
Motivation of Web Dynpro
The Web Dynpro Programming Model
Views and UI elements
Controllers and Context
Navigation and Plugs
Advanced Topics
Summary
SAP AG 2006, Venky Varadadesigan / Web Dynpro for ABAP / 29
Window
� 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
Outbound plug
Navigation link
Inbound plug
Customer List
CustomerSearch
Out In
Navigation Between Views
SAP AG 2006, Venky Varadadesigan / Web Dynpro for ABAP / 30
Window
View ControllerView
View Controller
Outbound PlugOutbound Plug
View
SEARCH_FLIGHTS
Inbound PlugInbound Plug
CreateAction
CreateAction
OUT
IN
Plugs And Navigation
SAP AG 2006, Venky Varadadesigan / Web Dynpro for ABAP / 31
Demo
Demo“Navigation between Views”
Motivation of Web Dynpro
The Web Dynpro Programming Model
Views and UI elements
Controllers and Context
Summary
Advanced Topics
Navigation and Plugs
SAP AG 2006, Venky Varadadesigan / Web Dynpro for ABAP / 33
Advanced Topics
� Component Usage & ALV
� Dynamic Web Dynpro Programming
� Adobe Forms integration
� Portal Integration
SAP AG 2006, Venky Varadadesigan / Web Dynpro for ABAP / 34
Web Dynpro Component Usage
Reuse of Web Dynpro ComponentsReuse of Web Dynpro ComponentsReuse of Web Dynpro ComponentsReuse 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
Interface
Comp B
Context
Method B
Event E
CompContr.
Context
Method A
Event E
Comp A
SAP AG 2006, Venky Varadadesigan / Web Dynpro for ABAP / 35
ALV in SAP NetWeaver 2004s
ALV in Web DynproALV in Web DynproALV in Web DynproALV in Web Dynpro
� Provide a more advanced display component compared to TableView
� Offer same functionality as common ALV in ABAP
ALV realized as WD ALV realized as WD ALV realized as WD ALV realized as WD
Component not as UI Component not as UI Component not as UI Component not as UI
controlcontrolcontrolcontrol
� More complex interface
� Included via Component Usage
� Data binding by reverse context mapping
ALV Pattern Component
Web Dynpro ALV Component
Web DynproUI Controls
SAP AG 2006, Venky Varadadesigan / Web Dynpro for ABAP / 36
Dynamic Web Dynpro Programming (cont.)
Layout ManipulationLayout ManipulationLayout ManipulationLayout Manipulation
� Include/Delete UI elements
� Bind UI elements to context
� Create actions in WD_DO_MODIFY_VIEW
Context ManipulationContext ManipulationContext ManipulationContext Manipulation
� Create, fill, bind nodes
� Add attributes
Dynamic NavigationDynamic NavigationDynamic NavigationDynamic Navigation
� Generic call of Outbound Plug
� Define navigation between plugs
Dynamic Component UsageDynamic Component UsageDynamic Component UsageDynamic Component Usage
� Create Component Usage
� Event registration
SAP AG 2006, Venky Varadadesigan / Web Dynpro for ABAP / 37
Adobe Forms Integration
Business Scenarios
Online Interactive Form Scenario
� SAP system access needed
� Full integration into Web Dynpro framework
� Context-sensitive value help, online checks
Offline Interactive Form Scenario
� No SAP system access needed
� Static value help, static checking, simple arithmetic calculations
� Self-contained PDF (XML data+layout)
Form Processing Scenario
� Documents get printed, e-mailed,archived or faxed
Browser withAdobe Reader plug-in
SA
P N
W A
pp
licati
on
Serv
er
Adobe Reader offline
Archive
Down- / Upload
Email / HTTP
SAP AG 2006, Venky Varadadesigan / Web Dynpro for ABAP / 38
Adobe 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
SAP AG 2006, Venky Varadadesigan / Web Dynpro for ABAP / 39
Web Dynpro and Enterprise Portal
Portal IntegrationPortal IntegrationPortal IntegrationPortal Integration
� Easy integration via Web Dynpro iViewWizard
� Central User management
� Portal eventingsupport
� Object Based Navigation
� Unified branding byportal themes
SAP AG 2006, Venky Varadadesigan / Web Dynpro for ABAP / 40
Portal Integration
� SAP NW 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
WD Application
WD Component
Window
View
NW App Server Java
NW App Server ABAP
Portal iView
SAP Portal
SAP AG 2006, Venky Varadadesigan / Web Dynpro for ABAP / 41
Portal Eventing
Flexible InteractionFlexible InteractionFlexible InteractionFlexible Interaction
� Allows direct interaction between independent iViews
� Event consumer subscribes to event
� Event raiser fires event
Loose CouplingLoose CouplingLoose CouplingLoose Coupling
� EP Client Manager based (JavaScript Library)
� iViews can run on dif-ferent systems
� iViews can be implemented via different technologies (WD ABAP, WD Java, BSPs, Portal Components, JSPs, …)
Event raised in
first iView
Triggers
action in second
application
Motivation of Web Dynpro
The Web Dynpro Programming Model
Views and UI elements
Controllers and Context
Advanced Topics
Summary
Navigation and Plugs
SAP AG 2006, Venky Varadadesigan / Web Dynpro for ABAP / 43
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
SAP AG 2006, Venky Varadadesigan / Web Dynpro for ABAP / 44
���� Public Web:
www.sap.com
Help Portal: www.help.sap.com -> Documentation -> SAP NetWeaver -> SAP NW04s
NetWeaver Developer‘s Guide: www.sdn.sap.com/sdn/developersguide.sdn
���� SAP Developer NetWeaver (SDN)
http://sdn.sap.com � SAP NW � App Server � ABAP � WD-ABAP Knowledge Center
Further Information
SAP AG 2006, Venky Varadadesigan / Web Dynpro for ABAP / 45
Q&A
Questions?
SAP AG 2006, Venky Varadadesigan / Web Dynpro for ABAP / 46
Next session
Stay Tuned…
April 6th, 2006 (Thursday)
Web Services in ABAPSpeaker: Peter McNulty
SAP AG 2006, Venky Varadadesigan / Web Dynpro for ABAP / 47
� 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, Outlook, and PowerPoint 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, and Informix are trademarks or registered trademarks of IBM Corporation.
� Oracle is a registered trademark of Oracle Corporation.
� UNIX, X/Open, OSF/1, and Motif are registered trademarks of the Open Group.
� Citrix, ICA, Program Neighborhood, MetaFrame, WinFrame, VideoFrame, and MultiWin are trademarks or registered trademarks of Citrix Systems, Inc.
� HTML, XML, XHTML and W3C 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.
� MaxDB is a trademark of MySQL AB, Sweden.
� 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. Data contained in this document serves informational purposes only. National product specifications may vary.
� The information in this document is proprietary to SAP. No part of this document may be reproduced, copied, or transmitted in any form or for any purpose without the express prior written permission of SAP AG.
� This document is a preliminary version and not subject to your license agreement or any other agreement with SAP. This document contains only intended strategies, developments, and functionalities of the SAP® product and is not intended to be binding upon SAP to any particular course of business, product strategy, and/or development. Please note that this document is subject to change and may be changed by SAP at any time without notice.
� SAP assumes no responsibility for errors or omissions in this document. SAP does not warrant the accuracy or completeness of the information, text, graphics, links, or other items contained within this material. 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 shall have no liability for damages of any kind including without limitation direct, special, indirect, or consequential damages that may result from the use of these materials. This limitation shall not apply in cases of intent or gross negligence.
� The statutory liability for personal injury and defective products is not affected. SAP has no control over the information that you may access through the use of hot links contained in these materials and does not endorse your use of third-party Web pages nor provide any warranty whatsoever relating to third-party Web pages.
Copyright 2006 SAP AG. All Rights Reserved