Web Dynpro For Beginners

Web Dynpro for Beginners
Web Dynpro Basics NetWeaver Developer Studio first Exercise Netweaver Development Infrastructure Using Webservices with Web Dynpro Web Dynpro Applications inside the Enterprise Portal
Web Dynpro
Web Dynpro is the standard programming model for building SAP NetWeaver user interfaces (UIs).
SAP AG 2005, Web Dynpro Product Management / 3
SAP UI Framework Roadmap: From ABAP to Web Dynpro
Web Dynpro Pattern Web Dynpro Foundation Business Blueprint Pattern (BSP) HTML Business for Java (HTMLB) Business Server Pages (BSP) UIs ITS Technology (SAP GUI, Flow Logic) ABAP UIs 1991 ... ITS UIs (Web GUI, IACs)
NetWeaver 04
...
Web Dynpro in SAP NetWeaver 04

SAP NetWeaver
PEOPLE INTEGRATION COMPOSITE APPLICATION FRAMEWORK/xApps Multi-channel access Portal Collaboration LIFE CYCLE MANAGEMENT
The Web Dynpro Runtime Environment is placed into the Web Dynpro Container part of the SAP J2EE Engine All Web Dynpro Projects (Deployable Objects, Web Dynpro Development Components) containing running Applications are deployed into this Web Dynpro Container
INFORMATION INTEGRATION Business Intellig. Knowledge Mgmt
Master Data Management PROCESS INTEGRATION Integration Broker Bus. Process Management
APPLICATION PLATFORM
J2EE / Web Dynpro
ABAP
DB and OS Abstraction
...
Web Dynpro Main Goals

Deliver an Enterprise Quality Web Development Environment
minimize coding, maximize design support reuse of components separate layout and logic support arbitrary backends
Web Dynpro Tools
Web Dynpro Meta-Data
Web Dynpro Runtime

.NET J2EE ABAP
Achieve Independence...
from platform from UI technology
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 personalization
Multi Device Internet
Development Layers: Advantages and Examples
Easy integration into SAP Enterprise Portal Sophisticated business Web applications Efficient tools within SAP NetWeaver Developer Studio Performant user-interface development services Platform-independent metadata generation
EP WD Application Web Dynpro Designtime
Adapt Portal theme for Web Dynpro application The user-interface technology for SAP EP Wizards and graphical tools Integration into SAP Web AS Declarative programming
Web Dynpro Runtime Web Dynpro Metadata
Web Dynpro Programming Paradigm Some Building Blocks
Model-View-Controller Architecture
Model : encapsulates the business logic and persistence View: View defines certain part of the User Interface Controller: Controller handles events, updates the model, shows next view
Generic UI-Services
Valuehelp, Message Management based on datatype information
Maximized Declaration Minimized Coding

Declaration of UI-Design and Screen flow (navigation) Declaration of data structures and data flow (contexts, databinding and context-mapping)
Reusable Components
Construct Web Applications from Patterns
Model View Controller (MVC)

Design pattern for decoupling presentation and logic of an application
Handles events Updates application data Defines control flow Request
Controller
Defines application data Usually connected to business functionality
Model
Response
View
Visualizes the application data
Web Dynpro Zoom-in: 10 x
Browser
Web Dynpro Client
SAP J2EE Server

Web Dynpro Runtime
mySAP.com Backend
Web Dynpro is only for the user interface
Web Dynpro Zoom-in: 10 x 10 x
Single channel between client and runtime Web Dynpro Runtime

Web Dynpro Client (JavaScript)
Buffers for delta mgmt Layout + Output Data
Web Dynpro Application Web Dynpro Application Web Dynpro Application
http
Input Data + Action
Client generates HTML and displays it without page reloads

Web Dynpro Zoom-in: 10 x 10 x 10 x
Web Dynpro Application
Web Dynpro Component
Model
Web Dynpro Zoom-in: 10 x 10 x 10 x
Component Interface Controller
View
View Controller
View
View Controller
Component Controller
Model Interface
Model
View
View Controller
Custom Controller
Separation of model, view and controller

Web Dynpro Zoom-in: 10 x 10 x 10 x 10 x
View
Layout UIElements Nested Views
View Controller
Coding
Coding Model Interface
Context
Model Data Global Data
Context
Model Data Global Data Model Data
Navigation Links
Local Data

Data Binding
View
View Controller
Coding
Context
Context
Navigation Links
Local Data
Data Binding: Filling UI-Elements with (context-)data

View
View Controller
Coding
Context
Context
Navigation Links
Local Data
Context Mapping
Context Mapping: Referencing other context elements

View
View Controller
Coding
Context
Context
Model Binding
Navigation Links
Local Data
Creating Context Structures based on Model Classes / Relations

Web Dynpro Zoom-in: 10 x 10 x 10 x 10 x 10 x
Layout
Controls
Context
The coding is in Java everything else is platform-independent !

Controller Coding Actions Methods Event handlers Error handlers Validators Inbound plugs
Declarative data flow: Binding & Mapping

data
bind
MasterViewContext
ing
Opportunities Goals ... Products Category Product ID Quantity ... Valuation ...
MasterView
con tex t
ma ppi ng
CustomContext
Sales ... Opportunities Goals ... Products Category Product ID Quantity ... Valuation ... ...
DetailView DetailViewContext
Products Category Product ID Quantity ...
Components = Reusable building blocks
Web Dynpro Application

View View Controller
View
View Controller
Custom Controller Interface
Model Interface
Model
View
View Controller View Controller
Custom Controller Web Dynpro Component
View
Components can combine arbitrary structures of views and controllers
Steps in building a Freestyle Web Dynpro application

Identify the backend for the application. Create a model for this backend or include an existing model. Break up the UI into individual, mostly independent views. Consider which views belong to the same focus area. Divide the screen into view sets and view areas accordingly. Assign the views to view areas and draw the navigation paths between them. Identify all the tasks in the user interface. If possible, assign them to the views controllers. Group the tasks that cannot be attributed to any particular view. Add a custom controller for each group. Design the contexts for each controller and the mapping between the contexts, as well as between model and contexts. Define the layout for each view. Bind the layout elements against the view contexts. Code eventhandlers etc., first for the custom controllers and then for the view controllers. As an optional step, add special resource files (images, style sheets, etc.)
Controller Anatomy of Web Dynpro Components

Component Interface View Controller Default Controller Component Interface Controller
Custom Controller Optional Controller View Controller View Controller
Custom Controller
View Controller
Web Dynpro Controller Types
Web Dynpro knows different Controller Types

Component Interface Controllers
Interface for external users of a component: data transfer, eventing.
Component Interface View Controllers

Controller for the visual representation of a Component. Handle startupplug, handle exit/outbound-plug of a component interface view.
Controllers
Component Controllers
Default controller inside every Web Dynpro Component: own context, events, public methods
Custom Controllers
Additional controller for encapsulating separate logic. A Component Controller can be seen as the default Custom Controller.
View Controllers
Controller for every view with own context, public methods, plugeventhandlers, action-eventhandlers managing user interaction.
SAP NetWeaver Developer Studio

Eclipse offers everything required to develop Java programs. However, integration with the application server and database support is missing in XML and JSP editors for J2EE projects. The SAP NetWeaver Developer Studio adds new functionality to Eclipse through a number of Plug-Ins.
J2EE Tools
Web Dynpro Tools
Web Services Tools
Infrastructure Tools
Java Dictionary Tools
Persistence Tools
UML Modeler or other 3rd Party Tools
J2SE Tools
SAP Integration Framework Eclipse Plug-In Framework

SAP NetWeaver Developer Studio: Basics

Based on open source Eclipse development framework Incremental build, ant-based build support, support for building archives, state-of-the-art debugger (local and remote) Functionality enhanced by SAP with Plug-Ins Support for SAP-specific development (for example, Web Dynpro) Creation wizards, Deployment, Local test and debug environment File and folder-based component storage Fully integrated IDE-support for component development Flexible use of the PC + reliable server-based Infrastructure By seamlessly integrating the Java Development Infrastructure the SAP NetWeaver Developer Studio combines the advantages of the ABAP Workbench with the advantages of a local IDE
SAP NetWeaver Developer Studio: Settings

Menu: Window Preferences ...
SAP NetWeaver Developer Studio: Tool Set

Menu Window Open Perspective
Order of all opened perspectives can be changed afterwards Choose your favorite perspectives via Preferences Workbench Window Perspective
SAP NetWeaver Developer Studio: Views

We recommend that you always open the views Navigator, Outline, Properties, Tasks via Window Show View Other Basic for your daily work. For logging purposes, select the corresponding view: Show View Window PDE Runtime Error Log Generally, task-dependent views are automatically opened with the start of the corresponding perspective.
Close File, View, Perspective
Close single file Doubleclicking the toolbar adapts the size of any view to screen size, and back !
Close perspective via context menu
Close view
SAP NetWeaver Developer Studio: J2EE Perspective
Select Perspective
Create EJB and display its structure
Select View Select Editor

Create EJB method
Display and edit EJB method
SAP NetWeaver Developer Studio: Editors

Depending on the type of file you are editing, the appropriate editor is displayed in the editor area. For example: JSP Editor
XML Editor
Preview
Source code editor
Project Management: Create Project

Choose File New Project <perspective> ... etc. Result: Navigator displays all project files (.java, .xml) Explorer displays project entities, including option for creating and editing an entity, including tool start
Project Management: Import Project

Copy the project to the local file system into your workspace File Import Multiple Existing Projects into Workspace Enables you to reuse existing projects within a new Developer Studio version Navigate one level above the project folder; in general this is the workspace folder
Project Management: Remove Project
Web Dynpro Explorer
Data Modeler
Double click or Choose Open Data Modeler from the context menu
Navigation Modeler
Double click or Choose Open Navigation Modeler from the context menu
View Designer
Make the Properties View visible to show the properties of the selected Context elements.
Choose Edit from the context menu

Display the structure in the Outline view
Controller/Context Editor
Choose the Context tab.
Make the Properties View visible to show the properties of the selected Context elements.
Choose Edit from the context of a WD component (e.g. a controller or view)

Message Editor
Choose Open Message Editor from the context of Message Pool.
Guided Hands-On: QuickStart-Application

Whats covered: View-Layout: Designing a simple User Interface Data Binding: Binding Binding UI element to context attribute Context and Context Mapping: Sharing data between views Navigation: Navigating from one view to another
See running example ...

Scenario of the QuickStart-Example
2 Views: Simple input form view together with a confirmation view Navigation: User can navigate between both iews Shared Data: Both views have to share the entered name of the user. This is done via Context Mapping.
Project Structure of the QuickStart-Example

Model (Model Part) not used here User Interface (View Part) 2 views: StartView and ResultView Navigation is done via actions, plugs and navigation links Controllers (Controller Part) 2 views have 2 view controllers Every view controller has its context for providing data Shared data is stored in the component controller context
Controller Anatomy of the QuickStart-Example
Component Interface View Controller

Controller A
Component Interface Controller
Controller B
declared Controller Usage between controllers A and B View Controller 1 View Controller 2
Controller Context
Providing Data from Contexts to the UI

The contexts belong the corresponding controllers
original value = John
C o n t r o l l e r
Component Context
Name
View 1 Context
Name
Context Mapping
referenced values
View 2 Context
Map value attributes Name from view contexts to value attribute Name in the component context Bind text property of UI element to the view contexts value attribute Name The entered name John is stored in a component contexts value attribute. mapped attributes reference this value.
Name
V i e w
View Layout View 1
Data Binding
View Layout View 2
John
InputField
John
TextView
Context Value Attribute

Data Binding and Context Mapping

Data Binding
Main context advantage: advantage ability to declaratively bind UI elementattributes to context elements called Data Binding. Binding Data Binding generically manages the population of UI elements with state information provided by the controller context. Generally all UI element properties (except the ID property) can be bound to the context.
Context Mapping
Reuse of previously defined attributes and nodes from other contexts. Done by defining attribute and/or node mappings from one context to another. Advantage: Advantage reduction of complexity as well as reducing a context's scope to the minimal set of data required to fulfill a task
Context Mapping
For sharing context data between two view controllers a Custom or Component Controller is needed, storing e.g. the original context value attribute. The view controllers context attributes are mapped to the custom controllers one. A corresponding Controller Usage (of the custom controller) has to be set in both view controllers via IDE. Based on reference semantics (only one original context structure is stored).
Actions and Event Handler

View Layout
Action
Event Handler public void onActionSave(IWDCustomEvent wdEvent) { //@@begin onActionSave(ServerEvent) saveProductDetails(wdContext.currentProdDetailsElement()); wdThis.wdFirePlugDataHasBeenSaved(); //@@end Custom coding! }
Navigation
Principle Navigation between two views A and B can easily be done by the following three steps:
defining a Navigational Link from Outbound Plug of view A to Inbound Plug of view B defining an Action Event triggering the navigation fireing the defined Outbound Plug in the view controllers corresponding event handler wdThis.wdFirePlugToResultView();
Inbound Plug Outbound Plug Navigational Link

Guided Hands-On Part: The QuickStart Application
Developing the QuickStart Application Open Document Creating Your First WebDynpro Application
in temp/WebDynpro/sampleapps/ WebDynpro_QuickStart_Tutorial_en.pdf
You have 45 minutes for developing the Welcome Web Dynpro application
Overview: Java Development Environment

To implement large business applications with J2EE, SAP must: Provide new features (SAP Web Dynpro, database-independent) Integrate open non-J2EE standards Enhance the existing programming model Support a highly productive development environment
Presentation Layer Web Web Dynpro Dynpro Servlet Servlet Business Layer EJB EJB JSP JSP Integration Layer
Web Web Services Services
Persistence JDBC JDBC SQLJ SQLJ Open Open SQL SQL
Components in a J2EE Application
Development environment
Component Model
Products
Collection of various software components Product version
Software Components (SCs)

Software components and installation units Group development components without overlaps
* *
SC version 1 1 0/1 Release
Development Components (DCs)

Development objects for build process Group development objects without overlaps
*
DC version 1
Development Objects
Are saved as versioned files in the DTR
*
File version
Development Components
Development Components (DCs)
Container for development objects Build unit
DC B DC C
Nested DCs
DCs can be nested within each other (restricted access) usage dependency usage dependency
Public parts
Part of a DC that can be used by other DCs (DC interfacing)
ppA DC A ppX DC X ppY DC Y
Usage dependencies
Indicates that a DC part can be used by other DCs (during the build process or during the runtime)
Design Time Repository

Repository that is based on files and directories (Client/Server) Access to the repository via DeltaV / WebDAV protocols Version management (sync/checkout/checkin/...)
DTR Server DTR Client DTR Client Eclipse Plug-In DTR Client Commandline Tool
Browser/ WebFolder Client WebDAV Client
WebDAV DeltaV+ DASL
Local File System

J2EE Server
Developer's PC
Component Build Service

Central build process
Automatic generation of build scripts for different component types. "Build on demand" instead of usual "nightly builds". Synchronization of Archive/Assemblies. Synchronization of resources in development teams. Automatic deployment controlled via CMS.
Change Management Service

The Change Management Service (CMS) is responsible for transporting software components (changes etc.) within an SAP Java development landscape. Uses of the CMS include:
Automatic deployment of builds Configuration of the SAP NetWeaver Developer Studio. Import of Java Support Packages (supplied by SAP), Transport of your own Java projects in the development landscape.
SAP Java Development Process

Local development environment Design Time Repository Component Build Service
CentralJ2EE server
Create Development Component
Archive Pool Java sources
Naming Naming Naming Service Service Service Service Service Service
Save / load File system
Deploy
Develop, build, and test locally
Web Container EJB Container
Check-in changes
J2EE Server
Naming Naming Naming Service Service Service Service Service Service
Component Build
Activate
Web Container EJB Container J2EE Server
OK?
Deploy archives
Local J2EE engine

WSDL Structure (simplified)

<?xml version="1.0" encoding="utf-8" ?> <definitions> <types> <element name=qty" type="string minOccurs="0"/> </types> <message name=POMessageIn> <part name=Quantity" type=qty"/> </message> <portType name="POPortType"> <operation> <input message=POMessageIn" /> </operation> </portType> <binding name=SOAP portType=POPortType> SOAP/HTTP binding definition </binding> <service name="OrderWineService"> <port name=Order binding=SOAP"> <address location="http://www.dijan.fr/Order/"/> </port> </service> </definitions>
What
A portType describes the abstract interface (Web service type) of the Web service Each contained operation can have an input, an output and a number of fault messages Different Messages are build from build-in or custom data types Data types are defined using XML Schema
How
A binding specifies exactly one protocol for the operations of a portType
Where
A port defines the Web service endpoint by specifying a single network address
UDDI Overview
Universal Description, Discovery and Integration (UDDI) Describes how to advertise and discover a Web service
Differentiates Web service provider, Web service and Web service type Holds metadata that can be used to search for services (names, IDs, categories, types, etc.) Specifies the interface for Web service registries
UDDI Business Registry

THE directory for Web services on the Internet Publicly available, free of charge Operated by SAP, IBM, Microsoft, and NTT Communications UDDI Version 3 Beta available now SAPs node at http://uddi.sap.com
SOAP Structure and Features

Transport Binding Message Format Header Body Application Data
Protocol specific data (e.g. quality of service)
HTTP, SMTP,
SOAP
Application-specific data Type system
Implementing a Web Service Client
Service Provider WSDL

1
Service Requestor
Read WSDL
UDDI
Tool 2
Generate
3
Web Service Application
SOAP Client Proxy
Implement
calls 4
Client Application
Web Dynpro and Web Services
Personalization and Navigation

My My Role Role Corporate Corporate Branding Branding
Top-Level Navigation
iViews Detailed Navigation
My My iViews iViews
My My Page Page
From the standard to your corporate design
SAP Design
Theme Editor
How to integrate business applications
Usage of Client-side Eventing

Works between iViews on the same portal page Can transfer any string from, avoids copy and past of information Prerequisites:
J2EE for EP and Web Dynpro must be reachable full qualified System for WD J2EE must be created in EP (incl. Alias)
Usage:
firing Events: WDPortalEventing.fire("namespace","event","parameter=valu e"); subscribing to Events: WDPortalEventing.subscribe("namespace","event",wdThis.wdG etPortalEventAction()); unsubscribing from Events: WDPortalEventing.unsubscribe("namespace","event",wdThis.w dGetPortalEventAction());
WorkProtect Mode
2 1
Web Dynpro applications can use the Work Protect mode to prevent, that unsaved data inside the Web Dynpro application is lost, if the user navigates to another portal page.
Object Based Navigation
In the past, where an extra column is needed ...

In the past, where an extra column is needed to navigate to details

In the past, where an extra column is needed to navigate to details

Management Self Service (MSS) with OBN
With OBN, this can be achieved with a direct mouse click

Actions show up
Management Self Service (MSS) with OBN

Navigational concept known from WWW and Windows click and choose operation Operation is directly attached to the object (optically and logically) Operations are role sensitive Better User experience (more ergonomically) SAP delivers navigation scenarios out-of-the box. Customers can easily modify or create navigation scenarios (open APIs) Timing:
as of SP2 as of NW 04 FP Dynamical link (Operation with highest prio. fires) Context menu (List of Operations)
Further Information
Public Web:
www.sap.com SAP Developer Network: sdn.sap.com SAP Customer Services Network: www.sap.com/services/
Related SAP Education Training Opportunities

http://www.sap.com/education/
Copyright 2004 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 in the United States 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, 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. These materials are subject to change without notice. These materials are provided by SAP AG and its affiliated companies ("SAP Group") for informational purposes only, without representation or warranty of any kind, and SAP Group shall not be liable for errors or omissions with respect to the materials. The only warranties for SAP Group products and services are those that are set forth in the express warranty statements accompanying such products and services, if any. Nothing herein should be construed as constituting an additional warranty.

Web Dynpro For Beginners

Hochgeladen von

Dokumentinformationen

Originalbeschreibung:

Originaltitel

Copyright

Verfügbare Formate

Dieses Dokument teilen

Dokument teilen oder einbetten

Freigabeoptionen

Stufen Sie dieses Dokument als nützlich ein?

Sind diese Inhalte unangemessen?

Copyright:

Verfügbare Formate

Web Dynpro For Beginners

Hochgeladen von

Copyright:

Verfügbare Formate

Web Dynpro for Beginners

SAP AG 2005, Web Dynpro Product Management / 3

SAP UI Framework Roadmap: From ABAP to Web Dynpro

SAP AG 2005, Web Dynpro Product Management / 4

Web Dynpro in SAP NetWeaver 04

INFORMATION INTEGRATION Business Intellig. Knowledge Mgmt

J2EE / Web Dynpro

Web Dynpro Main Goals

Web Dynpro Tools

Web Dynpro Meta-Data

Web Dynpro Runtime

Improve User Experience through a "High Fidelity Web UI"

Multi Device Internet

SAP AG 2005, Web Dynpro Product Management / 6

Development Layers: Advantages and Examples

EP WD Application Web Dynpro Designtime

Web Dynpro Runtime Web Dynpro Metadata

SAP AG 2005, Web Dynpro Product Management / 7

Web Dynpro Programming Paradigm Some Building Blocks

Maximized Declaration Minimized Coding

SAP AG 2005, Web Dynpro Product Management / 8

Model View Controller (MVC)

Visualizes the application data

SAP AG 2005, Web Dynpro Product Management / 9

Web Dynpro Zoom-in: 10 x

SAP J2EE Server

Web Dynpro is only for the user interface

SAP AG 2005, Web Dynpro Product Management / 10

Web Dynpro Zoom-in: 10 x 10 x

Single channel between client and runtime Web Dynpro Runtime

Web Dynpro Application Web Dynpro Application Web Dynpro Application

Client generates HTML and displays it without page reloads

Web Dynpro Zoom-in: 10 x 10 x 10 x

Web Dynpro Application

Web Dynpro Component

Web Dynpro Component

Web Dynpro Component

SAP AG 2005, Web Dynpro Product Management / 12

Web Dynpro Zoom-in: 10 x 10 x 10 x

Component Interface Controller

Web Dynpro Component

Separation of model, view and controller

Web Dynpro Zoom-in: 10 x 10 x 10 x 10 x

SAP AG 2005, Web Dynpro Product Management / 14

Web Dynpro Zoom-in: 10 x 10 x 10 x 10 x

Data Binding: Filling UI-Elements with (context-)data

Web Dynpro Zoom-in: 10 x 10 x 10 x 10 x

Context Mapping: Referencing other context elements

Web Dynpro Zoom-in: 10 x 10 x 10 x 10 x

Creating Context Structures based on Model Classes / Relations

Web Dynpro Zoom-in: 10 x 10 x 10 x 10 x 10 x

The coding is in Java everything else is platform-independent !

SAP AG 2005, Web Dynpro Product Management / 18

Declarative data flow: Binding & Mapping

SAP AG 2005, Web Dynpro Product Management / 19

Components = Reusable building blocks

Web Dynpro Application

Custom Controller Interface

View Controller View Controller

Custom Controller Web Dynpro Component

Components can combine arbitrary structures of views and controllers

SAP AG 2005, Web Dynpro Product Management / 20