CD214 Webdynpro PDF

SAP TechEd 07
CD214 Web Dynpro for ABAP Overview
SAP TechEd 07
Learning Objectives As a result of this workshop, you will be able to:

Understand the Web Dynpro programming model See the important role Web Dynpro for ABAP plays in SAPs user interface strategy
SAP AG 2007, SAP TechEd 07 / CD214 / 2
SAP TechEd 07
Web Dynpro Motivation Web Dynpro ABAP Programming Model Views and Controllers Component Usage Adobe Interactive Forms in WD Portal Integration Personalization Enhancements in Web Dynpro Summary
SAP TechEd 07
Objectives of Web Dynpro

Model-based UI development
Enforce clear separation between UI logic and business logic Little coding, lots of design Declarative UI development
Future Proof UI Declaration

Browser, Web Dynpro Client, Mobile Device, Client technology independent UI definition
Central implementation of user interface standards

Accessibility support Adobe Forms integration Centrally provided UI elements Internationalization support
Supports major platforms

Java (as of SAP NetWeaver '04), ABAP (as of SAP NetWeaver 7.0)
SAP TechEd 07
Motivation Web Dynpro Web Dynpro

UI definition independent of client technology As much abstract declaration as possible
http://..... Different rendering engines for http://..... XML, delta HTML, JS different (future) UI technologies without adapting Rendering Rendering application coding Engine Engine ??? ???
Rendering Engine
Web Browser
Smart Client
other?
Meta Data
<xml> <wd:xxx> </xml>
Web Dynpro
UI development should be independent of rendering technology:

developer should just think about UI design and not worry about HTTP request/response cycles No HTML or JavaScript code part of UI definition no need to care about browser platform, not even if the client is a web browser at all
Whole UI definition (layout, eventing, data binding,...) stored in format independent of client technology
allows rendering for different UI technologies: browsers, rich clients, future technologies clients in case of future UI technology paradigms (WWW forever?) the application UI should still be usable without redesigning
SAP TechEd 07
Application Scenarios with Web Dynpro

SAP SAP NetWeaver NetWeaver Portal Portal
Web Dynpro iView Web Dynpro iView
Web Dynpro Web DynproApp App
J2EE J2EE Web Dynpro Web Dynpro Runtime Runtime
ABAP ABAP Web Web Dynpro Dynpro Web Dynpro DynproApp Web App Web Dynpro Dynpro Web App App Runtime Runtime ABAP ABAP Workbench Workbench
SAP NetWeaver Developer Studio J2EE J2EE Server Server
RFC, WS
RMI
EJB (e.a.)
Business Data
ABAP ABAP Server Server
Business API (BAPI, BackendBusiness Application Data Web Services)
SAP TechEd 07
SAP TechEd 07
Web Dynpro Development in ABAP

Development completely integrated into ABAP Workbench
Graphical View Layout design Declarative UI development ABAP editor with forward navigation ABAP dictionary data types directly available Simple remote debugging Functionality and services of the ABAP environment directly usable
ABAP lifecycle management

Transport Translation Enhancements
Since the development of Web Dynpro for ABAP applications is completely integratedinto the ABAP workbench, all the functionality and services known from the ABAP development are directly usable within Web Dynpro projects.
SAP TechEd 07
Meta-model Declarations and Custom Coding
Meta-data Web Dynpro Tools Generator
Runable App
Generated Code Custom Code
Compiler
Meta-model Declarations
Guarantees common app. design Good for graphical tool support
Screen Layout and Nesting Navigation and Error Handling Data Flow Componentization ...
Custom Coding
Guarantees universality Good for data-driven, dynamic apps
Implementation of business rules Dynamic screen modifications Access to services (files etc.) Portal eventing ...
Metamodel Concept and Declarative Programming A Web Dynpro application is developed using a declarative programming approach. Within the ABAP Workbench there are special tools that allow you to build and abstract representation of your application in the form of a Web Dynpro metamodel. The necessary source code is then generated automatically and conforms to a standard architecture known as the Web Dynpro Framework (WDF). The WDF allows each controller within a component to have a set of standard hook methods. It is within these hook methods that any required custom coding can be placed. In addition to the events provided by the WDF, you can also define your own events for a Web Dynpro application. All Web Dynpro applications are constructed from the same basic units. However, through the use of custom coding in the standard hook methods, the standard framework can be extended to supply any required business functionality. Not all implementation decisions need to be made at design time. It is perfectly possible to implement a Web Dynpro application in which the appearance of the user interface is decided at runtime. This allows a highly flexible application to be written without requiring the need to directly write any HTML or JavaScript.
SAP TechEd 07
Model View Controller (MVC) Original MVC design for decoupling presentation and application logic
Model
Binds the user and business interaction layers together. All intermediate processing is performed here.
Generates the application data without caring how it will be displayed.
Business Interaction Layer User Interaction Layer Visualizes the application data without caring how it was generated.
Request Response
Controller
Binding Layer
View
The roots of Web Dynpro Model-View-Controller SAPs Web Dynpro is built on the foundation of the Model-View-Controller (MVC) design paradigm originally invented by the Norwegian software designer Trygve Reenskaug (pronounced TRIG-vuh RAINS-cow) whilst working at Xerox PARC in the late seventies. The first implementation of this design paradigm was with the release of the Smalltalk-80 programming language. MVC was a revolutionary design paradigm because it was the first to describe software components in terms of:
The functional responsibilities each should fulfil. The message protocols to which each component should respond.
SAP has modified and extended the original MVC specification in order to create the Web Dynpro toolset.
10
SAP TechEd 07
Web Dynpro Component Architecture SAP Web Dynpro uses principles of MVC paradigm
Controller handle the user input and steer the application Views define the layout Models hold and provide the business logic
Component Controller Usage declarations Components
Component Interface Interface view Interface view

M
Interface Controller
Window
Window Controller
M
Contains
Usage declarations
Model 1
View Layout
View Controller
M
Custom Controller
Model 2
Business Logic
W e b
D y n p r o
C o m p o n e n t
(Models)
Web Dynpros use of the MVC design paradigm SAP has made several important changes to the standard MVC design paradigm:
Standard MVC allows a model to directly notify a view that it has changed. This has not been implemented in Web Dynpro. Standard MVC allows for nested view controllers. This is not permitted in Web Dynpro. SAP has extended the design concept by adding an aggregation unit known as a component. The component is both the unit of application development and application reuse.
11
SAP TechEd 07
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
Component Interface
Interface Contr. Interface View
View
View Controller
The main entity of the Web Dynpro programming model is the Web Dynpro Component. UI Development projects are organized in one ore several WD components A WD Component contains the other entities of a Web Dynpro UI:
Views and Windows which define the visible layout Controllers which define the behavior of the UI
12
SAP TechEd 07
13
SAP TechEd 07
Views and UI Elements View

Is embedded into window Defines the visible layout via predefined UI elements Does not 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 hierarchical structure
A View describes the layout of a visible part of the WD component. A component typically contains several views. The layout of a view is defined by placing UI elements on the view. The UI elements are provided in UI Libraries. UI developers declare the view layout with these provided UI elements only without making any assumptions about the used rendering technology or client. Especially there is no HTML or JavaScript possible
14
SAP TechEd 07
Defining View Layout

UI element libraries
UI element tree of view
Properties of selected UI element
View layout
UI elements are provided in several UI element libraries on the left hand side The hierarchy of the UI elements can be seen and changed in the UI element hierarchy at the top right of the workbench. A view layout is defined by placing UI elements on the view via drag and drop or changing the UI element hierarchy directly. Properties of a selected UI element can be defined at the lower right corner Visible UI elements can be arranged by container UI elements (transparent container, tray,) with specific layout properties (Matrix, Flow Layout,)
15
SAP TechEd 07
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.
There are numerous user interface elements available for designing the user interface of a Web Dynpro application. All available user interface elements are divided into categories and can be selected using buttons in the view designer. Simple Standard elements are: Button, Caption, CheckBox, CheckBoxGroup, DropDownByIndex, DropDownByKey, FileDownload, FileUpload, HorizontalGutter, IFrame, Image, InputField, InvisibleElement, Label, LintToAction, LinkToURL, ProgressIndicator, RadioButton, RadioButtonGroupByIndex, RadioButtonGroupByKey, TextEdit, TextView, TimedTrigger, ViewContainerUIElement Complex Standard elements are: DateNavigator, PhaseIndicator, RoadMap, TabStrip, Table, Tree Container Standard Elements are: Group, ScrollContainer, TransparentContainer, Tray
16
SAP TechEd 07
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 takes care of 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 ).
Web Dynpro Controller principles

Two types of controller exist within a Web Dynpro component: custom/component and view/window. Custom/component controllers have no visual interface, whereas view controllers do. All controllers are independent programs yet none function in isolation from the other controllers in the component. All controllers store their runtime data in a hierarchical data storage area known as the Context. Unless an explicit controller usage is declared, all the data in a controllers context is private.
Context Structure All controller contexts are constructed from a hierarchical arrangement of entities known as nodes and attributes. A context always has a parent node known as the Root Node. The root node is created automatically when the controller is initialised and always has the same properties. Important: The context root node may not be deleted or modified in any way! Nodes A context node is the main abstraction class used for runtime data storage within the Web Dynpro Framework. Context nodes are arranged hierarchically and are permitted to have children. The node may have attributes or other nodes as children. All the child entities of a node are aggregated into a unit known as an element. A node can then be thought of as a collection of such elements in the same way that a table is a collection of rows. The maximum and minimum number of elements permitted in a node collection is controlled by the cardinality property. All nodes contain an element collection, even if the maximum number of elements within the collection is limited to one. Attributes An attribute is a hierarchical entity within the context that is not permitted to have children. A context attribute cannot exist without being the child of some parent node be it the context root node itself, or some other node. 17
SAP TechEd 07
View Controller and View Context Window View

T*
View Controller
Context Node BP T*
PART_NAME PARTNER_ID
Controller contains methods and events for user interactions
Node N2
Method onAction_GOTO_NEXT node = wd_context->get_child_node(BP). node->get_attribute( name = PART_NAME value = part_name ).
Each view has its own view controller The view controller has its context for the data which is used by the view Context nodes and attributes can be bound to UI elements The view controller contains the event handlers which steer the behavior of the view, for example:
Initialization events which are called when a view is displayed for the first time Action handlers which are triggered by UI elements like a button click or drop down list box selection
In general the coding of the controller methods access the context data and not the UI elements directly.
18
SAP TechEd 07
Context Node Elements View

View Controller
Context Node BP Node 1 (Cardinality 0...n)
011
PARTNER_ID 013 PARTNER_ID 012
TECU. PARTNER_NAME Laur.. PARTNER_NAME Asia
DE COUNTRY JP
FR
COUNTRY
Node 2
Elements of a context node
method WD_DO_INIT * BusPartners: internal table ... node->bind_elements( partners ).
At design time context nodes can be declared as collections (Cardinality 0n) e.g. for table data A context node has n elements at runtime depending of the number of rows of the internal table bound to the node
19
SAP TechEd 07
View and View Controller Summary View

Contains the UI elements Defines the Layout UI elements mapped to context nodes and attributes
View Label Label View Controller
Context
Root Node Node N1
LH
Attribute CARR Attribute DEP_AIRP
Node N2
method WD_DO_INIT node = wd_context->get_child_node(N1). node->set_attribute( name = DEP_AIRP value = Paris).
View Controller
Stores data used in view in context Methods access context data Actions for event handling
Method onAction_GOTO_NEXT node = wd_context->get_child_node(N1). node->get_attribute( name = CARR value = carrier ).
20
SAP TechEd 07
Component Controller and Context Mapping 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) 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 takes care of data transport (references)
Method show_flights flights = BO->get node1 = wd_context-> node1->bind_elements( flights ).
Each component has its own Component Controller The Component Controller has its own context
Context nodes of the component controller can be mapped to nodes with similar structure of other controller contexts e.g. view controllers This allows the distribution of data between different views and controllers Mapped nodes automatically contain the same data without copying because they hold references to one source
The Component Controller also contains methods for central tasks of the component, for example methods which encapsulate all interaction to the underlying business logic The model which represents the business logic can be a API based on ABAP Objects, BAPIs, RFS or function modules If an application consists of several WD components the interaction of one WD component to a used sub component is also done via the Component Controller
21
SAP TechEd 07
Component Controller Component Window View

View Controller
Context Node 1 Node 2 Node 3
Mapping of context data
Context Node 1
Model Class,
Method show_bpartners BPs = BO->get node1 = wd_context-> node1->bind_elements( BPs ).
Component controller connects to business logic and gets/sets data
ABAP Objects API, BAPIs, Other WD Component,
In a typical example the Component Controller contains a method to retrieve data from the model and context nodes which are filled by these methods The context nodes of the Component Controller are mapped to the context nodes of the view controller which are bound to visible UI elements
22
SAP TechEd 07
Views in Views ViewContainer UI element

Views can be structured with ViewContainer UI elements How they are arranged within each other is declared in the window
Window
MAIN_VIEW ViewCont. SO_VIEW
MAIN_VIEW
View Controller
Context Node 1
ViewContainer
SORDER_VIEW Label View Controller
Context Node 1
Node 2
The mapping of context nodes can also be used to transport data from one view controller to another view controller. In this case the context nodes of both view controllers are mapped to the same context node of the component controller.
23
SAP TechEd 07
Interaction Between Views and Controllers Component Window View

View Controller
Context Node BP 011
TEC
Component Mapping of context data
Controller

Context Node BP 011
TEC
View Controller
OnLeadSelection wd_comp_cont-> get_sorders()
Node SO 5..3 Node 3
View View
View Controller
Context Node SO 5..3 Method get_sorders SOs = BO->get node = wd_cont-> node->bind_table( SOs ).
Label Context Label Root Node

Node 1
Press Attribut1
Attribut2
Node 2
The mapping of context nodes can also be used to transport data from one view controller to another view controller. In this case the context nodes of both view controllers are mapped to the same context node of the component controller.
24
SAP TechEd 07
Context Node at Design Time Declaration of Context Nodes

Create metadata which defines the structure of the context Two dimensional hierarchy like files and folders But each node can be a collection Min and max number of elements in a node is steered by Cardinality
(0..1) (1..1) (0..n) (1..n)
Context SALES_ORDERS (0...n) 503
ITelo 052007
SO_ID SELLER_COMP CREATE_DATE
ITEMS (0n)
ITEM_ID PRODUCT_NAME
The Context at design time At design time, you are creating the metadata structure within which the runtime data will live. The diagram above gives the impression that the context structure is a flat, two dimensional tree, much like the display of directories and files shown in the Windows Explorer. However, all context nodes are collections, so there could potentially be multiple instances of each child node and attribute within a nodes collection. The Cardinality Property Every context node has a property called Cardinality. This property is composed of two values that taken together, describe the maximum and minimum number of elements the node collection may hold at runtime.
Cardinality Minimum: Cardinality Maximum: 0..1 0..n 1..1 1..n 0 or 1 1 or n
Therefore, there are four possible cardinality values (specified as <Min>..<Max>) Zero or one elements permitted Zero or more elements permitted One and only one element permitted One or more elements permitted 25
SAP TechEd 07
Complex Data in Context Node Context at runtime

Nodes with cardinality (0..n) can contain several elements at runtime Each element can have its own set of sub nodes at runtime which are again collections of elements
View Controller
Context SALES_ORDERS (0...n) 501
123.03 051003
SR 502
Swiss 403.0 www 051223
503
99.99 052709
S_ORDER_ID AMOUNT DATE
ITEMS
Example: Sales Orders with Items

Items of selected sales order should be displayed in second table on the same view Each sales order has its own set of items
ITEM_ID PRODUCT_NAME
Three dimensional context You can now see that the structure of the context at runtime will not be the flat, two dimensional hierarchy seen at design time. Instead, a context node takes on depth. If you think of the design time structure as occupying the x-y plane, then at runtime each element in the node collection occupies a position in the z plane (moving into and out of the page). Lead Selection A node's element collection can be accessed using a 1 based index value. It is possible to flag multiple elements as being selected (controlled by the selection cardinality property), but only one of the selected elements can be processed at any one time. The element being processed is referred to as the lead selection element.
26
SAP TechEd 07
Navigation Between Views
Window
Customer Details Customer Sales Orders
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
Outbound Plugs Calling an outbound plug method causes a navigation event to be raised. Navigation events are special, asynchronous events that are placed into a navigation queue. Only when all the outbound plugs have been called by all the views in the current view assembly, will the Web Dynpro Framework enter its navigation processing phase. Outbound plugs should be named according to the action that caused navigation away from the current view. Inbound Plugs Inbound plugs are special event handler methods that subscribe to navigation events raised when outbound plugs are fired. Inbound plug methods are called only when the navigation queue is processed. This will only take place once all the views in the current view assembly have fired their outbound plugs and no validation errors have occurred that would cause navigation to be cancelled. Inbound plugs should be named according to the reason for which the view being displayed. Links Outbound and inbound plugs are joined together using navigation links.
27
SAP TechEd 07
Plugs and Navigation

Create Action
View Controller
SHOW_SORDERS
EXIT_VIEW
Window View
Create Outbound Plug
OnActionSHOW_SORDERS wd_this-> fire_EXIT_VIEW_plg( ).
OUT
IN
Create Navigation Link
View
View Controller
HandleSHOW_SO
SHOW_SO
OUT
Create Inbound Plug
IN
28
SAP TechEd 07
Component Controller and Navigation Summary Component Controller

Comp. controller context contains component data Nodes can be mapped to view controller context nodes Component methods and events Comp controller accesses model layer
View Controller
Component
Window View
View Controller
Context Comp. Contr. Context
Root Node Node 1
Root Node Node 1
Node 2 View Controller Node 3
View View Label Context Label Root Node Label Node 1 Press
Node 2
Contexth
Attribut1 Attribut2
Root Node Node 1
Navigation
Navigation steered by Inbound and Outbound Plugs of Views
Method DO
29
SAP TechEd 07
30
SAP TechEd 07
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 Comp A the Web Dynpro environment

ABAP List Viewer (ALV) Select Options Message Viewer
Comp Contr. Context
Inter face Context
Comp B
Method A Event E
Method B Event E
Component Usage The Web Dynpro component is the unit of application reuse. Therefore, if you want to make use of the functionality within another component, you can declare the use of that component.
31
SAP TechEd 07
Web Dynpro Component Usage

Main Comp A Main Comp B Main Component
Sub Component

Sub Comp A

Sub Comp B
Several main components need the same functionality Functionality is developed once in reusable component Main components declare Component Usage of sub component Sub component is instantiated in each main component at runtime
Main component needs different functionalities in a given view area View container provides place for sub components Several Component Usages to different sub components with the same Interface are defined Which component is used is decided at runtime
32
SAP TechEd 07
Web Dynpro Component Reuse

Main Component A Window Comp Controller Context
Node
Interface Controller Context

Node
Sub Component B Window
View View
View
Method A Event E
Method B Event E
Windows of a used component can
be embedded as Interface Views into own windows or views Methods, events and context nodes can be declared as part of the Interface
Access via Interface Controller with

Interface Controller Context

Node
Sub Component C Window
View
Method C Event E
Context node mapping Method call, Events raised Embedding of Interface View
Subcomponents B C
Methods, events and context nodes, which are flagges as interface can be used by the calling component
Maincomponent A
Declare a component usage to the subcomponent on the properties page of the current component Each controller, which wants to use the interface of the subcomponent has to declare its usage The interface view of the subcomponent may be used instead of a view
33
SAP TechEd 07
Concepts: Component Interface

Interface Controller Component Component Controller Interface Contr. Window
Context Component Contr. Root Node Context Root Node Node 1 Node 1
View
View Controller Context

Root Node Node 1
Node 2 Method SET_AIRP.
View Controller
Node 3
View
View
Label Context Label Root Node Label Node 1
View Controller Contexth

Root Node Node 1
Interface View method method SET_AIRP SET_AIRP

Method SORT_FLIGHT View Controller
Press Attribut1
Attribut2
View Label Attribut1 Context Press Attribut2 Label Root Node

Node Label 1 Node 2
Node 2
Node 2
The Component Interface The component interface consists of two visual parts and one programmatic part.
The interface controller is the programmatic interface that gives a parent component access to the child components functionality. The parent component can call methods in the childs interface controller, and these methods can react to events raised by the parent component. The interface view is the standardized mechanism by which all view assemblies can be presented through the generic Web Dynpro Framework. By means of the interface view, a components visual interface becomes a reusable unit, thus allowing you to embed it into a larger view set. A component may have zero or more interface views.
34
SAP TechEd 07
Dynamic Component Usage

Main Component wants to use one (or several) components of a special type Which component will be used is not known at design time Developer declares Component Interface Main component uses reference of this interface Which component is used is decided at runtime Other components with this interface can be developed and integrated later
Concrete Component Usage is determined at runtime
Main Component
Main Comp expects Component with special Comp Interface ?
35
SAP TechEd 07
Structure of WD Applications UI Layer

WD components contain the views, buttons, events,... Typically WD components use other WD components Model class adapts backend data for display
Model Class (Assistance Class)
WD Component
Context
Node
Context Context Node

Node
WD Component WD Component
Backend Logic
Core business logic Pref. defined in ESR
Backend Backend
es in f de
Business API (ABAP Objects, BAPIs, Web Services, Business Objects)
Enterprise Service Repository
Business Data
36
SAP TechEd 07
37
SAP TechEd 07
Adobe Interactive Forms Integration Business Scenarios

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

No SAP system access needed Static value help, static checking,
Down- / Upload
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
Print
Archive
Email
Interactive Form Scenario

For collaborative business processes, you can design Interactive Forms containing drop down menus, buttons, text fields and other elements that allow user entries. The form is rendered in PDF format and you provide it to users in, for example, a browser. Users fill in the form and save their entries inside the form in XML format. The SAP system extracts the data saved in the form and stores it in the database for further processing. In general, you can use such forms in two different scenarios:
- Online: The user is logged on to an SAP system while filling in the form. - Offline: The user is not logged on to an SAP system while filling in the form. After completing the form, the user sends the form back to the form provider, for example by e-mail. The providers SAP system then extracts the data from the form.
Form Processing Scenario

PDF-based documents for mass printing, e-mailing, etc. You can create PDF-based forms for printing, sending by e-mail or faxing by merging SAP system data with a form template. You can rely on the proven principle of separation of data collection and form layout, which provides the required flexibility in the case of changes to one or the other.
38
SAP NW Application Server
Online Interactive Form Scenario
SAP TechEd 07
Online Interactive Form Scenario: Example Forms for Data Acquisition
Prefilled according to location and worker
SAP Application
Bill of Material, Material properties, Q-Forms, ...
Interactive Forms used when Users are familiar with paper-based process
Paper-based forms are well known Print outs needed locally
You can use Interactive Forms in scenarios where an employee typically needs to fill in a form in order to start or advance a related business process. Lets take the example of an assembly line worker. The worker needs to order new materials to keep the work going. In a traditional setup, he would fill in a paper form, sign it and send it on its way by in-house mail. In the case of an Interactive Form, the worker can log onto the internal company portal and call up the required form, which is displayed in PDF format in the browser. The Interactive Form looks like the old paper-based form. During the time that the form is displayed, the worker is logged on to the system where the required information will be processed further. When the form is displayed, it already contains all the relevant information on the worker, such as his name and last name, the location and cost center he is assigned to, etc. This information was determined based on the user logon, and automatically prefilled by the system. Next, the worker fills in the required information on the form. When finished, he submits the form back to the system using, for example, a button. The data is written to the system, and the corresponding workflow moves the process to the next step. Moreover the worker has the possibility to print out the Interactive Form locally.
39
SAP TechEd 07
What Does it Look Like ?

Paper-like layout
Self-explanatory Natural look and
feel
User Handling
Save locally Distribute via email / Portal Digital signature (future) Local printing
Background Services
Structured data in XML Pre-filled application values Pre-filled list boxes, help values, Automatic data extraction
and integration in application
PDF forms look like your original paper form, and thus provide the familiar look and feel users need to execute business processes quickly. Visual integrity and fidelity of a form increases user acceptance. Special functions of Adobe Reader allow users, among other features, to save PDF forms locally, to distribute them via e-mail or an enterprise portal, to print them out, or (from SAP NetWeaver 2005) to sign them digitally before submitting them to the system. All user entries made in a PDF form are stored in XML format and can, thus, easily be transferred back into the SAP system. The integration of Adobe technology into the SAP development environment also allows for prefilling form fields with current system information, including context-sensitive list boxes (value help) comparable to SAPs F4 help. Upon form creation, the necessary data is automatically extracted from the backend system. When the form is returned to the system by the user, the XMLbased data is automatically returned to the system.
40
SAP TechEd 07
Adobe Interactive 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
Adobe Interactive Forms are included into the Web Dynpro development environment Interactive Form can be developed directly in the workbench Interactive Form has Interface for data import and export Interactive Form UI Container is placed onto view in Web Dynpro component with the Form as template The views context can be bound to the Interactive Forms Interface At runtime the Form is displayed as PDF document in the Acrobat Reader in the browser with the context data dynamically filled in The user can fill out input fields in the PDF form document and submit it back to the system The context gets the data out of the PDF form The data is processed by system
41
SAP TechEd 07
42
SAP TechEd 07
Web Dynpro and Enterprise Portal Portal Integration

Generic iViews for displaying Web Dynpro Applications Easy integration via Web Dynpro iView Wizard Central User management Portal eventing support Object Based Navigation Unified branding by portal themes
43
SAP TechEd 07
Portal Integration
Web AS ABAP application system is declared in portal
Server, port, User mapping
SAP Portal Portal iView
Create iView for WD ABAP application iView points to logical backend server, name space and WD application iView is assigned to portal role
Application Server Java
WD Application
WD Component Window
View
Application Server ABAP

44
SAP TechEd 07
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 (JavaScript Library) iViews can run on different systems iViews can be implemented via different technologies (WD ABAP, WD Java, BSPs, Portal Components, JSPs, ) Triggers action in second application
45
SAP TechEd 07
Portal Eventing Subscribe/Handle event

Get Portal Manager from API Call SUBSCRIBE_EVENT
Namespace Event name Action name
SAP Portal Portal iView
Method wddoinit. CC = Contr->Get_API(). PM = CC->Get_Portal_Manager PM->Subscribe_Event( name = ADD_CD action = ADD). endmethod. Method ONACTIONADD. ... endmethod.
Implement Action handler
Raise event
Get Portal Manager from API Call FIRE
Namespace Event name Event Parameter
Portal iView
method OnAction CC = Contr->Get_API(). PM = CC->Get_Portal_Manager PM->Fire( namespace = ... name = ADD_CD). endmethod.
46
SAP TechEd 07
Object Based Navigation OBN

Flexible Navigation scheme between iViews within the portal
SAP Portal Portal iView - Shopping Baske
Business Objects
Abstract representation of business functionality, for example Business Partner Portal admin declares connection between iViews and Operations of Business Object (showDetails) Web Dynpro triggers navigation by calling BO Operation
B.Partner showDetails
Portal iView Business Partner Details
47
SAP TechEd 07
48
SAP TechEd 07
Personalization and Configuration

Personalization
Typically defines look and feel of application Steered by user at runtime of application User and/or role based Implicit Personalization provided out of the box Explicit Personalization can be implemented by WD component
Configuration
Steers UI and application behavior (customizing) Defined by administrator centrally with configuration editor Valid for whole application/system/role
49
SAP TechEd 07
Personalization and Configuration Implicit Personalization and Configuration

UI elements provide standard personalization capabilities
Visibility and order of columns in table
Personalization screen for UI elem./view Data stored per user Directly available out of the box without coding Can be limited
50
SAP TechEd 07
51
SAP TechEd 07
Enhancements of WD Applications
Web Dynpro Enhancements
Modification free enhancements of WD Components Avoids conflicts with later upgrades Individual transportable objects Can be combined with ABAP Enhancement Framework based code enhancements
Allowed Enhancements
Add UI elements to View Add Context Nodes Add Controller methods and attributes
52
SAP TechEd 07
53
SAP TechEd 07
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 7.0 Programming model similar to Web Dynpro for Java Completely Integrated into the SAP NetWeaver Application Server ABAP
54
SAP TechEd 07
Further Information
SAP Public Web: SAP Developer Network (SDN): www.sdn.sap.com Web Dynpro ABAP Forum and ABAP Developer Area Related SAP Education and Certification Opportunities http://www.sap.com/education/ NET310 Fundamentals of Web Dynpro for ABAP NET311 Advanced Web Dynpro for ABAP Related Workshops/Lectures at SAP TechEd 2007 CD255, Developing User Interfaces with Web Dynpro for ABAP, Hands On Session
55
SAP TechEd 07
Q&A
THANK YOU FOR YOUR ATTENTION !

QUESTIONS SUGGESTIONS DISCUSSION
56
SAP TechEd 07
Feedback
Please complete your session evaluation. Be courteous deposit your trash, and do not take the handouts for the following session.
Thank You !
57
SAP TechEd 07
SAP Certifications Related to SAP TechEd Topics

Topic
ABAP ABAP ABAP ABAP ADM ADM ADM ADM BI E2E E2E Java Java MDM SM SOA XI
Exam Level
Professional Professional Associate Associate Professional Professional Associate Associate Associate Associate Associate Professional Associate Associate Associate Associate Associate
Certificate Title
SAP Certified Development Professional - ABAP System Interfaces with SAP NetWeaver 7.0 SAP Certified Development Professional - ABAP System Interfaces with SAP NetWeaver 7.0 SAP Certified Development Consultant ABAP Dev with NetWeaver 2004 SAP Certified Development Associate ABAP with SAP NetWeaver 7.0 SAP Certified Technology Professional NetWeaver 7.0 Platform SAP Certified Technology Professional NetWeaver 7.0 Security SAP Certified Technology Associate SAP Web AS Platform with Oracle SAP Certified Technology Consultant NetWeaver 7.0 SysAd with Oracle Solution Consultant SAP NetWeaver 04s SAP BI SAP Certified E2E Application Management Expert Change Control Mgmt SAP Certified E2E Application Management Expert Root Cause Analysis SAP Certified Development Professional JAVA with NetWeaver 7.0 SAP Certified Development Associate JAVA with NetWeaver 7.0 SAP Certified Application Associate Master Data Management 5.5 (SP04) Solution Consultant SAP Solution Manager 4.0 Implementation Tools SAP Certified Associate Enterprise Architect Certification Development Consultant SAP NetWeaver 2004s
Solution Basis
SAP NetWeaver 7.0 SAP NetWeaver 7.0 SAP NetWeaver 2004 SAP NetWeaver 7.0 SAP NetWeaver 7.0 SAP NetWeaver 7.0 SAP NetWeaver 2004 SAP NetWeaver 7.0 SAP NetWeaver 7.0 SAP NetWeaver 7.0 SAP NetWeaver 7.0 SAP NetWeaver 7.0 SAP NetWeaver 7.0 SAP NetWeaver 2004 SAP NetWeaver 7.0 Enterprise SOA SAP NetWeaver 7.0
For a complete listing of certifications, please go to
www.sap.com/services/education/certification
58
SAP TechEd 07
Copyright 2007 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, Excel, 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, System i, System i5, System p, System p5, System x, System z, System z9, z/OS, AFP, Intelligent Miner, WebSphere, Netfinity, Tivoli, Informix, i5/OS, POWER, POWER5, POWER5+, OpenPower and PowerPC are trademarks or registered trademarks of IBM Corporation. Adobe, the Adobe logo, Acrobat, PostScript, and Reader are either trademarks or registered trademarks of Adobe Systems Incorporated 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.
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.
59

CD214 Webdynpro PDF

Încărcat de

Informații document

Descriere originală:

Titlu original

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

CD214 Webdynpro PDF

Încărcat de

Drepturi de autor:

Formate disponibile

SAP TechEd 07

CD214 Web Dynpro for ABAP Overview

Learning Objectives As a result of this workshop, you will be able to:

SAP AG 2007, SAP TechEd 07 / CD214 / 2

Objectives of Web Dynpro

Future Proof UI Declaration

Central implementation of user interface standards

Supports major platforms

SAP AG 2007, SAP TechEd 07 / CD214 / 4

Motivation Web Dynpro Web Dynpro

SAP AG 2007, SAP TechEd 07 / CD214 / 5

UI development should be independent of rendering technology:

Application Scenarios with Web Dynpro

Web Dynpro Web DynproApp App

J2EE J2EE Web Dynpro Web Dynpro Runtime Runtime

SAP NetWeaver Developer Studio J2EE J2EE Server Server

ABAP ABAP Server Server

Business API (BAPI, BackendBusiness Application Data Web Services)

SAP AG 2007, SAP TechEd 07 / CD214 / 6

Web Dynpro Development in ABAP

ABAP lifecycle management

Meta-model Declarations and Custom Coding

Meta-data Web Dynpro Tools Generator

Generated Code Custom Code

Generates the application data without caring how it will be displayed.

SAP AG 2007, SAP TechEd 07 / CD214 / 10

Component Interface Interface view Interface view

SAP AG 2007, SAP TechEd 07 / CD214 / 11

Web Dynpro Components Web Dynpro Component contains

SAP AG 2007, SAP TechEd 07 / CD214 / 12

Views and UI Elements View

Defining View Layout

UI element tree of view

Properties of selected UI element

SAP AG 2007, SAP TechEd 07 / CD214 / 15

UI Element Categories Various categories of UI elements are supported

InteractiveForm BusinessGraphics, GeoMap

Controller and Context Controller

View Controller Context

Paris Attribute DEP_AIRP

SAP AG 2007, SAP TechEd 07 / CD214 / 17

Web Dynpro Controller principles

View Controller and View Context Window View

Controller contains methods and events for user interactions

Method onAction_GOTO_NEXT node = wd_context->get_child_node(BP). node->get_attribute( name = PART_NAME value = part_name ).

SAP AG 2007, SAP TechEd 07 / CD214 / 18

Context Node Elements View

PARTNER_ID 013 PARTNER_ID 012

TECU. PARTNER_NAME Laur.. PARTNER_NAME Asia

Elements of a context node

method WD_DO_INIT * BusPartners: internal table ... node->bind_elements( partners ).

SAP AG 2007, SAP TechEd 07 / CD214 / 19

View and View Controller Summary View

Attribute CARR Attribute DEP_AIRP

Method onAction_GOTO_NEXT node = wd_context->get_child_node(N1). node->get_attribute( name = CARR value = carrier ).

SAP AG 2007, SAP TechEd 07 / CD214 / 20

Component Controller and Context Mapping Component Controller

Model Class, ABAP Objects API, BAPIs, Other WD Component,

SAP AG 2007, SAP TechEd 07 / CD214 / 21

Component Controller Component Window View

Mapping of context data

Component controller connects to business logic and gets/sets data