Overview of Web Dynpro Tools

Overview ofWeb Dynpro Tools

Joachim Jakob

SAP AG

2002 SAP Labs, LLC, JAVA216, Jakob / Wenz / Raith, 2

Learning Objectives

As a result of this workshop, you will:

Be familiar with SAP’s new user-interfacetechnologyKnow the features of the Web DynproDesigntime ToolsBe capable of developing a really Web-like eBusiness application


Agenda

SAP Java IDEWeb DynproWeb Dynpro Designtime Tools

Application Design Layout DesignView Logic and Application LogicModel DefinitionData Type Definition

Summary


Agenda



Summary


SAP Web Application Server

Web Dynpro as integral part ofthe SAP WebApplicationServerAs of mySAPTechnology Release 6.30, WebDynproTechnologyaddressesuser-interface development for

Web applicationsPortal applicationsxApps

SAP Web Application ServerSAP Web Application Server

Browser /Portal

Browser /Portal

3rd Party / Exchange3rd Party / Exchange

Presentation LayerPresentation Layer

Business LayerBusiness Layer

J2EE / ABAP

Integration LayerIntegration Layer

Integration Engine

Integration Engine

Web DynproWeb Dynpro


Local File System

Tool Integration Platform

Java Development Infrastructure

DesignTime

Repository(DTR)

ComponentBuild

Service(CBS)

Software Logistics(SL)

RunTimeJ2EEServer

DeployJava J2EE

JavaDictionary

WebDynpro

WebService

DTR

/CB

S/SL

Inte

grat

ion

Generic Model Abstraction Layer

GraphicsTool Service

Layer


Agenda



Summary


Web Dynpro – An Example


Web Dynpro – A new User-Interface Technology

Web Dynpro Runtime

Web DynproApplication



BackendProxy

BackendProxy

Web DynproClient

(JavaScriptEnhancement)

Layout +

Output Data

Input Data +

Action

Buffers fordelta mgmt

http

Client generates HTML and displays it flicker-free

Zero footprint on the client

Single channel between client and runtime


Web Dynpro - Benefits

Platform-independenceSAP’s new user-interface technology for Java, ABAP,and .NET applications

High performanceDouble speed in displaying screens in comparison to SAP GUI

Screen appearanceGreat experience for the end user

Easy programming styleAs much abstract declaration, and as few coding aspossibleReusable components

Clear separation between presentation logic andapplication logic


Agenda



Summary


Agenda



Summary


Web Dynpro Designtime Tools

Personalize the SAP Java IDE: View compositionShow, Move, Hide

Visual andgraphical overview ofapplicationQuick switchto other tool via tabEasy handling


Web Dynpro Tools - Benefits

User-friendlinessEfficient handling of all Web Dynpro tools

Easy to learnContinuous design principles

Time-savingApplication structure visually comprehensibleand enhanced graphical support

FlexibilityQuick rearrangement possible at any time

EfficiencyOnly few additional coding necessary


Agenda



Summary


Application Design

Application Design:

Which views do I need for my application?View sequence?

SelectionView

DisplayView

DetailsView

BookingView

ConfirmationView


Application Design

Model and createWeb Dynpro applications

Easily draw the Views for afirst draftGraphical supportfor Web DynproDiagram Elements:

ViewView SetPlugLink


Navigation

NavigationSpecifies the View sequenceIs triggered by event handler

PlugInbound Plug

Contains Event Handler definition

Outbound Plug

LinkDeclares flow of Views from Outbound Plug (View ”Search”) to Inbound Plug (View ”Display”)

View“Search“

Layout

NavigationLinks

OutboundPlug

View“Display“

Layout

NavigationLinks

InboundPlug


Application Modeler


Application Modeler


View Set

View Set for displaying more than one View in one screen

(Re-)Arrange your Views bychoosing another View SetCustomize

Views in the View SetView SetView Set area size

Pre-defined View Set types

View creation within View Setpossible

View Set nesting

Grid Layout

T-Layout 90°

T-Layout

T-Layout 270°

Embedded View Set


Application Design With Graphical Support

Two-way editingCreate, edit, and delete Views, Plugs, and Links within Diagram View

Changes alsovisible in theapplicationstructure, andvice versa

Easy change of navigation


Exercise

Demo and Exercise

Application Design


Agenda


Application DesignLayout DesignView Logic and Application LogicModel DefinitionData Type Definition

Summary


Layout Definition – Views

Efficient wizard support for View creationLarge number of View elements availablePlace the View elements via drag & drop

View ElementsText View, Link to URL, and more

Input ElementsInput Field, Checkbox, Table, Drop Down By Key, and more

Business GraphicsLayout displays View elements as they appear on the screenEasy rearrange the View elementsAutomatic generation of implementation file


View Designer

View Designer

Drag &

Drop


View Designer and Business Graphics

Charts and ImagesSupport of all popular chart typesTwo and three dimension graphicsConnect to the Internet Graphics Service (IGS)


Exercise

Demo and Exercise

View Layout


Agenda



Summary


Web Dynpro – Model-View-Controller Approach

Web Dynpro Application

BackendProxy

View ViewController

CustomController

CustomController

ModelInterfaceView View

Controller

View ViewController


View Controller

View Controller is the active part of the ViewIs automatically created by Web Dynpro Generatorwhen you create ViewContains presentation logicTriggers event/actionLife-time of View Controller class is bound to lifetimeof corresponding View

Layout

ViewController

CustomController


View Context

View Context is the local memory of the ViewController

Contains local data fieldsData binding / Mapping

Hierarchical structureNodes with attributes and child nodes

Passes data Between View and application logic

Layout

View

Context

Controller

CustomController


Application Logic – Custom Controller and Context

Responsible for data flowBetween layout and application logicBetween Views of a Web Dynpro application

Contains imports and methods relevant for all Web Dynpro application classes (modular approach)

Layout

View

Context

Controller

CustomController

Context

View

View


Data Binding/Mapping

Model

CustomController

View Controller

Context

View Controller

View “Search“

View “Display“DepartAirline

FlightContextDepart

Airline

Flight

ContextDepartAirline

LayoutTextView

Table

TextView

LayoutInputInput


Controller/Context Editor


Mapping


Exercise

Demo and Exercise

Controller/Context


Event Handling

ViewController

Methods

View“Search“

Layout

NavigationLinks

Button

OutboundPlug

onActionHandler

View“Display“

Layout

NavigationLinks

InboundPlug


Event Handling

/** declared event handler */public void onActionDetails(){

//@@begin onActionDetails(ServerEvent)wdThis.toDisplayout();//@@end

}/** declared event handler */public void onPlugdisplayin(){

//@@begin onPlugdisplayin(ServerEvent)wdThis.getFlightDataController().getFlights();//@@end

}


Exercise

Demo and Exercise

Event Handling


Agenda



Summary


Web Dynpro – Model-View-Controller Approach

Web Dynpro Application

BackendProxy

View ViewController

CustomController

CustomController

ModelInterfaceView View

Controller

View ViewController


Web Dynpro Models

BackendProxy

ModelInterface

CustomController

Model creationCreate new model

Import RFC model

Import model from UML definition(XML Metadata Interchange (XMI))


SAP Java Connectivity Builder

Generation of Java classes for accessing SAP businessfunctionalityProvides easy-to-use call interface to Java programmersSupplies a higher level Java API on top of generic SAP JavaConnector (Jco) API

Class and method names correspond to RFM andparameter namesStrongly-typed interfaces

■ Web Services Description Language (WSDL)Launch SAP JCB from Web Dynpro Perspective


Using Back-End Logic

Call any RemoteFunction Module(RFM) fromWeb Dynprowith minimalcodingProvidestype-safetySupportsdata binding/mapping from context to RFMparameters


Data Binding Model – View Context

Data Binding XX

XXX

X

XXX

X


Web Dynpro Model

AttributesAIRLINE, AIRLINEID, ...

PropertiesAIRLINE, AIRLINEID, ...

ComponentsAIRLINE, AIRLINEID, ...

Model NodemyModelNodeName

Adapter Class (Java)Bapisfldat.java+Web DynproModel Class (XML)Bapisfldat.modelclass

= Model NodeBapisfldat

Reference Type /BAPI StructureBAPISFLDAT

ContextModelR/3 Back-End


Agenda


Application DesignLayout DesignModel DefinitionView Logic and Application LogicData Type Definition

Summary


Java Dictionary

DTRDDIC Objects

Java DictionaryValidation Value Sets Format Metadata Deploy

Data TypesServices

Tables

Indexes

Views

Unified type system for all application layers


Data Type Definition

Data TypedefinitionDefinition of UIservice informationGeneration of runtime objectsDeploymentof data type runtime objects


Java Dictionary: Type System

DataType

FlatStructure

ComplexType

Structure List

ScalarType

Built-inType SimpleType

User-defined Type

Abstract Type

stringinteger

floatdate…


Data Type Usage

View Layout

InputFieldFirst NameInputFieldLast NameInputFieldAccount

Context

<View id="FlightPassenger"> <Controller> <Context>

<Node id="reservation"> <Attribute id="firstName"

type="com.sap.firstname"/> <Attribute id="lastName"

type="com.sap.lastname"/> </Node>

<Attribute id="account" type="com.sap.account"/>

boundTo: //FlightPassenger/reservation/firstNameboundTo: //FlightPassenger/reservation/lastNameboundTo: //FlightPassenger/reservation/account


Exercise

Demo and Exercise

Data Type -Definition and Usage


Agenda


Application Design Layout DesignModel DefinitionView Logic and Application LogicData Type Definition

Summary


Summary

Profit from SAP’s Java IDE including theWeb Dynpro Perspective Focus on quick and high-quality application development since you can develop the user-interface in a rather short timeSeparation of layout and application logicdevelopment allows outsourcing of UI designTake an efficient tool set including graphical support for your Web application development for grantedPick-up a high-quality product that results from SAP’s experience in development environment and user-interface technology


Q&A

Questions?


Feedback

Please complete your session evaluation and drop it in the box on

your way out.

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

following session.

The SAP TechEd ’02 New Orleans Team


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®, NT®, EXCEL®, Word®, PowerPoint® and SQL Server® 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®, Informix and Informix® Dynamic ServerTM are trademarks of IBM Corporation in USA and/or other countries.

ORACLE® is a registered trademark of ORACLE Corporation.

UNIX®, X/Open®, OSF/1®, and Motif® are registered trademarks of the Open Group.

Citrix®, the Citrix logo, ICA®, Program Neighborhood®, MetaFrame®, WinFrame®, VideoFrame®, MultiWin® and other Citrix product names referenced herein are trademarks of Citrix Systems, Inc.

HTML, DHTML, XML, XHTML 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.

MarketSet and Enterprise Buyer are jointly owned trademarks of SAP AG and Commerce One.

SAP, SAP Logo, R/2, R/3, mySAP, mySAP.com 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 trademarks of their respective companies.

Copyright 2002 SAP AG. All Rights Reserved

Documents

Overview of Web Dynpro Tools