Web Dynpro For ABAP

Web Dynpro for ABAP
Your Instructor
Venky Varadadesigan
Product Manager SAP NetWeaver US PM - SAP Labs Venkata.varadadesigan@sap.com
SAP AG 2006, Venky Varadadesigan / Web Dynpro for ABAP / 2
Learning Objectives
As a result of this workshop, you will:

Know why Web Dynpro is SAPs 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
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
Multi channel access Composite Application Framework
Application governance and Security
PEOPLE INTEGRATION
Business Information Management
End-to-End Process Integration
User Productivity Enablement
Portal
Collaboration
INFORMATION INTEGRATION
Master Data Mgmt

PROCESS INTEGRATION
Custom Development
Bus. IntelligenceKnowledge Mgmt
Integration Broker
Business Process Mgmt
APPLICATION PLATFORM
J2EE
ABAP
DB and OS Abstraction
Different capabilities used jointly in each slice
Enterprise Service Architecture
Unified Life-Cycle Management
Data Unification
Business Event Management
Consolidation
Life Cycle Mgmt
Positioning: SAP NetWeaver Technology Map

IT Practices
User Productivity Enablement Running an Enterprise Portal
IT Scenarios
Enabling User Collboration Business Task Management Mobilizing Business Processes Enterprise Knowledge Management
Data Unification
Master-Data Harmonization
Master-Data Consolidation
Central Master-Data Management
Enterprise Data Warehousing
Business Information Management Business Event Management End-to-End Process Integration
Enterprise Reporting, Query, and Analysis
Business Planning and Analytical Services
Enterprise Data Warehousing
Business Event Resolution Enabling Applicationto-Application Processes
Business Task Management
Enabling Business-toBusiness Processes
Business Process Management
Enabling Platform Interoperability
Business Task Management
Custom Development
Developing, Configuring, and Adapting Applications
Unified Life-Cycle Management Application Governance & Security
Software Life-Cycle Management
SAP NetWeaver Operations
Authentication and Single Sign-On
Integrated User and Access Management
Consolidation Enterprise Service Architecture Design & Deployment
SAP NetWeaver Operations
Master-Data Consolidation
Enterprise Knowledge Management
Enabling Enterprise Services
SAP UI Framework Roadmap: From SAP GUI to Web Dynpro
Web Dynpro ABAP Web Dynpro Java HTMLB for BSP JSP & HTMLB (tag library) Java Business Server Pages (BSP) ITS (IACs, Flow Logic) ITS Technology (SAP GUI for HTML) SAP GUI ... 4.6 6.10 6.20 ITS UIs (Web GUI, IACs) NW 2004 NW 2004s
Portal Content Design Tools: Offering

Content Complexity SAP NetWeaver Developer Studio (Java + PDK Perspective) SAP ABAP Development Workbench (Business Server Pages) PDK for .Net SAP NetWeaver Developer Studio (Web Dynpro for Java Perspective) SAP ABAP Development Workbench (Web Dynpro for ABAP) SAP NetWeaver Visual Composer
Web Applications
Transactional Business Applications Interactive Applications Display Applications Portal Content Studio Content Admin
Business Expert
Business Application J2EE/ABAP/.Net Developer Developer Developing Portal Content
Creating Portal Content

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
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
Web Dynpro Runtime JAVA ABAP
Web Dynpro Tools
Web Dynpro Metadata
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 As much abstract declaration as possible Different rendering engines for different (future) UI technologies without adapting application coding Web Browser Smart Client other?
http://..... HTML, JS
Rendering Engine
http://..... XML, delta

Rendering Engine
??? ???
Rendering Engine
Meta Data
<xml> <wd:xxx> </xml>
Web Dynpro
Application Scenarios With Web Dynpro

SAP Enterprise Portal
Web Dynpro iView Web Dynpro iView
Web Dynpro Web Dynpro App App
J2EE Web Dynpro Runtime
ABAP Web Dynpro Web DynproApp Web Dynpro App Runtime ABAP Workbench
SAP NetWeaver Developer Studio

RMI
RFC, WS
J2EE Server
EJB (e.a.)
Business Data
ABAP Server
Business API (BAPI, BackendBusiness Application Data Web Services)
Demo
Demo Hello World
Model View Controller (MVC)

Original MVC design for decoupling presentation and application logic
Model
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.
Business Interaction Layer User Interaction Layer
Request Response
Controller
Visualizes the application data without caring how it was generated.
Binding Layer
View
Web Dynpro Components

Web Dynpro Component contains
Windows Views
UI elements Layout Component Window View
View Controller
Component Controller
Controllers
Context Data Eventing Methods Attributes View
View Controller
Component Interface
Interface Contr. Interface View
Label
View, Windows And UI Elements

View
Is embedded into window Defines the visible layout via predefined UI elements Doesnt contain any HTML or scripting
Window View
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
Defining View Layout

UI element UI element libraries libraries
UI UI element element tree of tree of view view
Properties of Properties of selected UI selected UI element element
View View layout layout
UI Element Categories
Various categories of UI elements are supported
e.g. Button, InputField, Label Gantt, Network
InteractiveForm BusinessGraphics, GeoMap

e.g. DateNavigator, Table, Tree BI Application Frame
OfficeControl
e.g. TransparentContainer, Tray MessageArea
Each UI element object is represented as an abstract class that is independent of any client presentation layer.
Demo
Demo Views & UI elements
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
View Controller Context
Root Node Node N1 LH
Attribute CARR
Paris Attribute DEP_AIRP
Node N2
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
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

Window View
Root Node Node N1 LH
Attribute CARR
Paris Attribute DEP_AIRP
Node N2
Controller contains methods...
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 ).
...and events for user interactions
Component Controller And Context Mapping

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) Component Controller
Component Controller Context
Root Node Node 1
Node 2 Node 3
Model Class, ABAP Objects API, BAPIs, Other WD Component,
Context Mapping
Nodes of Component Controller context can be mapped to nodes of other contexts Framework cares about data transport (references)
Method show_flights flights = BO->get node1 = wd_context-> node1->bind_elements( flights ).
Component Window View
Root Node Node 1 Node 2 Node 3
Mapping of context data
Component Controller Context
Root Node Node 1
Model Class,
Method show_flights flights = BO->get node1 = wd_context-> node1->bind_elements( flights ).
Component controller connects to business logic and gets/sets data
ABAP Objects API, BAPIs, Other WD Component,
Demo
Demo Controller & Context
Navigation Between Views
Window
Customer Search Customer 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

Window View
Outbound Plug Outbound Plug
View Controller
OUT
SEARCH_FLIGHTS
Inbound Plug Inbound Plug
View
Create Create Action Action
View Controller
IN
Demo
Demo Navigation between Views
Advanced Topics
Component Usage & ALV Dynamic Web Dynpro Programming Adobe Forms integration Portal Integration
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 Comp A ALV Select Options Message Viewer
Comp Contr. Context
Inter face Context
Comp B
Method A Event E
Method B Event E
ALV in SAP NetWeaver 2004s
ALV in Web Dynpro

Provide a more advanced display component compared to TableView Offer same functionality as common ALV in ABAP
ALV realized as WD Component not as UI control

More complex interface Included via Component Usage Data binding by reverse context mapping
ALV Pattern Component Web Dynpro ALV Component Web Dynpro UI Controls
Dynamic Web Dynpro Programming (cont.)
Layout Manipulation
Include/Delete UI elements Bind UI elements to context Create actions in WD_DO_MODIFY_VIEW
Context Manipulation
Create, fill, bind nodes Add attributes
Dynamic Navigation
Generic call of Outbound Plug Define navigation between plugs
Dynamic Component Usage

Create Component Usage Event registration
Adobe Forms Integration
Online Interactive Form Scenario

SAP system access needed Full integration into Web Dynpro framework Context-sensitive value help, online checks
Browser with Adobe Reader plug-in
Down- / Upload
Offline Interactive Form Scenario

No SAP system access needed Static value help, static checking, simple arithmetic calculations Self-contained PDF (XML data+layout)
Adobe Reader offline Email / HTTP
Form Processing Scenario

Documents get printed, e-mailed, archived or faxed
Archive Print Email
SAP NW Application Server
Business Scenarios
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
Web Dynpro and Enterprise Portal
Portal Integration
Easy integration via Web Dynpro iView Wizard Central User management Portal eventing support Object Based Navigation Unified branding by portal themes
Portal Integration
SAP Portal
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
Portal iView
NW App Server Java
WD Application
WD Component Window
View
NW App Server ABAP

Portal Eventing
Flexible Interaction
Allows direct interaction between independent iViews Event consumer subscribes to event Event raiser fires event
Event raised in first iView
Loose Coupling
EP Client Manager based Triggers (JavaScript Library) action in iViews can run on difsecond application ferent systems iViews can be implemented via different technologies (WD ABAP, WD Java, BSPs, Portal Components, JSPs, )
Summary Web Dynpro is SAPs 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 Help Portal: www.help.sap.com -> Documentation -> SAP NetWeaver -> SAP NW04s NetWeaver Developers 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
Questions?
Q&A
Next session
Stay Tuned April 6th, 2006 (Thursday)
Web Services in ABAP

Speaker: Peter McNulty
Copyright 2006 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, 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.

Web Dynpro For ABAP

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Web Dynpro For ABAP

Uploaded by

Copyright:

Available Formats

Web Dynpro for ABAP

SAP AG 2006, Venky Varadadesigan / Web Dynpro for ABAP / 2

As a result of this workshop, you will:

SAP AG 2006, Venky Varadadesigan / Web Dynpro for ABAP / 3

Application governance and Security

Business Information Management

End-to-End Process Integration

User Productivity Enablement

Master Data Mgmt

Bus. IntelligenceKnowledge Mgmt

Business Process Mgmt

Different capabilities used jointly in each slice

SAP AG 2006, Venky Varadadesigan / Web Dynpro for ABAP / 5

Enterprise Service Architecture

Unified Life-Cycle Management

Business Event Management

Life Cycle Mgmt

Positioning: SAP NetWeaver Technology Map

Central Master-Data Management

Enterprise Data Warehousing

Business Information Management Business Event Management End-to-End Process Integration

Enterprise Reporting, Query, and Analysis

Business Planning and Analytical Services

Enterprise Data Warehousing

Business Event Resolution Enabling Applicationto-Application Processes

Business Task Management

Enabling Business-toBusiness Processes

Business Process Management

Enabling Platform Interoperability

Business Task Management

Developing, Configuring, and Adapting Applications

Enabling Platform Interoperability

Unified Life-Cycle Management Application Governance & Security

Software Life-Cycle Management

SAP NetWeaver Operations

Authentication and Single Sign-On

Integrated User and Access Management

Consolidation Enterprise Service Architecture Design & Deployment

Enabling Platform Interoperability

SAP NetWeaver Operations

Enterprise Knowledge Management

Enabling Enterprise Services

SAP AG 2006, Venky Varadadesigan / Web Dynpro for ABAP / 6

SAP UI Framework Roadmap: From SAP GUI to Web Dynpro

SAP AG 2006, Venky Varadadesigan / Web Dynpro for ABAP / 7

Portal Content Design Tools: Offering

Business Application J2EE/ABAP/.Net Developer Developer Developing Portal Content

Creating Portal Content

What is Web Dynpro ?

A Set of Tools for User Interface Design

Integrated in SAP NetWeaver Developer Studio and the ABAP Workbench

A Runtime Environment for Applications

A Technology for Software Modularization

SAP AG 2006, Venky Varadadesigan / Web Dynpro for ABAP / 9

Web Dynpro Main Benefits

Web Dynpro Tools

Web Dynpro Metadata

Improve User Experience through a "High Fidelity Web UI"

Motivation Web Dynpro

http://..... XML, delta

SAP AG 2006, Venky Varadadesigan / Web Dynpro for ABAP / 11

Application Scenarios With Web Dynpro