web dynpro for abap...sap ag 2006, venky varadadesigan / web dynpro for abap / 3 learning objectives...

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

[email protected]

Your Instructor


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


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”


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 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


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


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 ?


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


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>






Advanced Topics

Summary


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


Demo

DemoHello World


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


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






Advanced Topics

Summary


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


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


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


Demo

Demo -Views & UI elements






Advanced Topics

Summary


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->get_attribute( name = ‘CARR’

value = carrier ).

LH

Paris

Controller And Context


Window

View View Controller

Context

Node N1

Node N2

Attribute CARR

Attribute DEP_AIRP

Root Node

method WD_DO_INIT


node->set_attribute( name = ‘DEP_AIRP’

value = ‘Paris’).

Method onAction_GOTO_NEXT


node->get_attribute( name = ‘CARR’

value = carrier ).

LH

Paris

Controller

containsmethods...

...and eventsfor user

interactions

View Controller And View Context


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 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


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,

…



Demo

DemoController & Context






Advanced Topics

Summary


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


Window

View ControllerView

View Controller

Outbound PlugOutbound Plug

View

SEARCH_FLIGHTS

Inbound PlugInbound Plug

CreateAction

CreateAction

OUT

IN

Plugs And Navigation


Demo

Demo“Navigation between Views”





Summary

Advanced Topics



Advanced Topics

� Component Usage & ALV

� Dynamic Web Dynpro Programming

� Adobe Forms integration

� Portal Integration


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


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


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


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

Print

Email

Email / HTTP


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 IntegrationPortal IntegrationPortal IntegrationPortal Integration

� Easy integration via Web Dynpro iViewWizard

� Central User management

� Portal eventingsupport

� Object Based Navigation

� Unified branding byportal themes


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


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





Advanced Topics

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 2004s

� Programming model similar to Web Dynpro for Java

� Completely Integrated into the SAP NetWeaver Application Server ABAP


�� 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


Q&A

Questions?


Next session

Stay Tuned…

April 6th, 2006 (Thursday)

Web Services in ABAPSpeaker: Peter McNulty


� 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