Confidential | Copyright © Larsen & Toubro Infotech Ltd.
Web Dynpro ABAP - [Web Dynpro ABAP Introduction]
Purpose of Web Dynpro
Confidential | Copyright © Larsen & Toubro Infotech Ltd. 2
Web Dynpro is to combinehigh interactivity (= dynamic GUI) andzero installation (= ubiquitous GUI, e.g. web browser)
Minimize coding, maximize designtools allow graphical/declarative programming, code is generated
Separate layout and logicsview vs. controller, plus data binding and navigation plugs
Support arbitrary backendsJavaBeans, ABAP, and Web Services are supported
Run on multiple platformsJava, ABAP, and .NET are supported
High fidelity web UIbrowser-based WD client, including
modern web browsers (IE 5.5, Mozilla 1.7)mobile devices (PocketPC, Blackberry)Web Dynpro Client for Windows (SAPGUI)
different rendering modes (server-side vs. client-side)Accessibility, Internationalization
2Confidential | Copyright © Larsen & Toubro Infotech Ltd.
What is Web Dynpro ABAP?
Confidential | Copyright © Larsen & Toubro Infotech Ltd. 3
Web Dynpro for ABAP (WD4A, WDA) is the SAP standard UI technology for developing Web applications in the ABAP environment
It consists of a runtime environment and a graphical development environment with special Web Dynpro tools that are integrated in the ABAP Workbench (SE80)
WDA is released for customers starting NW2004s aka NW70
Advantages of WDA
Confidential | Copyright © Larsen & Toubro Infotech Ltd. 4
The use of declarative and graphical tools significantly reduces the implementation effort
Web Dynpro supports a structured design process Strict separation between layout and business data Reuse and better maintainability by using components The layout and navigation is easily changed using the Web Dynpro
tools Stateful applications are supported Automatic data transport using data binding User interface accessibility is supported Full integration in the reliable ABAP development environment ALV Lists can be used
The concept of Web Dynpro ABAP is identical with Web Dynpro Java and offers more or less the same functions
4Confidential | Copyright © Larsen & Toubro Infotech Ltd.
Web Dynpro ABAP or Java?
Confidential | Copyright © Larsen & Toubro Infotech Ltd. 5
Organization skill set Existing System landscape IT Support capability Location of business logic WD for Java supports more models (Javabeans, web services,
adaptive RFC, and XMI) compared to the function module model in WD for ABAP
code completion and syntax checking capabilities in Java versus code generation wizard in WDA
No support for Mobile devices in WDA ALV lists can be used in WDA
Both WDA and WDJ are powerful and complete development
environments - the choice of which one to use should be based foremost on skill set and system landscape and not a 'feature and functions' comparison
5Confidential | Copyright © Larsen & Toubro Infotech Ltd.
Confidential | Copyright © Larsen & Toubro Infotech Ltd. 6
Web Dynpro Architecture - Component
Reusable entity
Contains any number of windows, views and their corresponding controllers
Embedded components – communication through Component Interface
Confidential | Copyright © Larsen & Toubro Infotech Ltd. 7
Views and Windows
Layout and behavior of user interface
Each WD application has at least one view
Inbound and outbound plugs for linking diff views or view to an interface view
Combine several views with navigation links
Window plugs
Window controller – global
Unique interface view for each window – links window with WDA application and enables window to be reused by multiple components
Confidential | Copyright © Larsen & Toubro Infotech Ltd. 8
Introduction to Context
The contexts are the main concept for storing and passing data in Web Dynpro
Each controller has its own context All data used in controllers or views is stored in the context of the
corresponding controller A context represents a hierarchical data model Structure :
8Confidential | Copyright © Larsen & Toubro Infotech Ltd.
Confidential | Copyright © Larsen & Toubro Infotech Ltd. 9
Web Dynpro Controller
Active parts of Web Dynpro Application – they define how user interacts with Web Dynpro application
Different Types of controllers -
View Controller – each view has one controller and one context
Interface Controller – visible outside of component
Global controllers - each component has at least one global controller (component controller)
Component controller
Custom controller
Window controller
Controller source code:
Event handlers
Methods
Supply functions
9Confidential | Copyright © Larsen & Toubro Infotech Ltd.
Confidential | Copyright © Larsen & Toubro Infotech Ltd. 10
Model and Application
Model - retrieves the application data from the back-end system.
Sources of Web Dynpro application data
Call and use SAP data from a SAP back-end system using BAPIs, FMs, RFCs, classes
Define new data
Call and use Web services
Application
can be called from user interface
linked to the interface view of the Web Dynpro window with an inbound plug
10Confidential | Copyright © Larsen & Toubro Infotech Ltd.
Confidential | Copyright © Larsen & Toubro Infotech Ltd. 11
A typical WDA structure
WDA Development pre-requisites
Confidential | Copyright © Larsen & Toubro Infotech Ltd. 12
Create WDA Components and Applications
Developer role along with SICF Admin access (Auth Object S_ICF_ADMIN)
The following services must be activated in the system
/default_host/sap/bc/webdynpro
/default_host/sap/public/bc
/default_host/sap/public/bc/ur, /icons, /icons_rtl, /webicons, /pictograms, /webdynpro/* (ssr, mimes, etc.), /default_host/sap/public/myssocntl, etc
Note: The service for an application <application> can be found under the ICF node /default_host/sap/bc/webdynpro/sap/<application>
Execute application within L&T Infotech network
Host file entry for the WAS
Bypass proxy for the server address
12Confidential | Copyright © Larsen & Toubro Infotech Ltd.
WDA Development Login Details
Confidential | Copyright © Larsen & Toubro Infotech Ltd. 13
Server
Sapgui 172.25.10.214
User IDs
Vashi – 720398 (training123), wdabap1 (wdabap1)
Powai – wdabap2(wdabap2), trains01 (trains01)
Pune – trains02, trains03
Bangalore - trains04
Chennai - trains05
13Confidential | Copyright © Larsen & Toubro Infotech Ltd.
Confidential | Copyright © Larsen & Toubro Infotech Ltd. 14
Hands-On - A simple WDA application
This exercise will help understand the following -
Create new Component
Create new View
View Editor
Create Context
UI elements and properties
Data Binding
Default Controller methods and attributes
Create and execute Web Dynpro Application
Confidential | Copyright © Larsen & Toubro Infotech Ltd.
Web Dynpro ABAP –[Events, Navigation and Interfaces]
15
Confidential | Copyright © Larsen & Toubro Infotech Ltd. 16
Views – Layout, UI elements
View with UI Elements
View Layout
16Confidential | Copyright © Larsen & Toubro Infotech Ltd.
Confidential | Copyright © Larsen & Toubro Infotech Ltd. 17
Context, Data Binding and Mapping
Data used in the component or view is stored in the context
Node cardinality
Singleton property
Lead selection
Data Binding – bind properties of UI elements to attributes of view context
Context mapping
External context mapping
17Confidential | Copyright © Larsen & Toubro Infotech Ltd.
Confidential | Copyright © Larsen & Toubro Infotech Ltd. 18
Events and Actions
Events
Component controller events – enable one controller to trigger event handlers in another controller within a component
Interface controller events – cross component communication
View Inbound Plug
UI Element events
Actions
UI element event can be linked to an action at design time
Actions can be reused within a view
18Confidential | Copyright © Larsen & Toubro Infotech Ltd.
Confidential | Copyright © Larsen & Toubro Infotech Ltd. 19
Interfaces of Web Dynpro components
Interface Views
Interface Controller
Interface methods
Interface events
cross component context mapping
19Confidential | Copyright © Larsen & Toubro Infotech Ltd.
Confidential | Copyright © Larsen & Toubro Infotech Ltd. 20
Hands-On - BAPI usage
This exercise will help understand the following -
Service call generator
Context mapping
Web Dynpro code wizard
Define Action and Action Handler
This exercise will help understand the following -
Create Web Dynpro Component with two views
Navigate between different views using inbound and outbound plugs
Hands-On - Events
Confidential | Copyright © Larsen & Toubro Infotech Ltd. 21
This exercise will help understand the following -
Create Context sub-node
Supply Function
Singleton
This exercise will help understand the following –
Create and raise custom event within a component
Create and raise cross component event
21Confidential | Copyright © Larsen & Toubro Infotech Ltd.
Confidential | Copyright © Larsen & Toubro Infotech Ltd.
Web Dynpro ABAP –[Component Usage, ALV, Assistance Class]
22
Hands-On - Component Usage
Confidential | Copyright © Larsen & Toubro Infotech Ltd. 23
This exercise will help understand the following -
How large Web Dynpro projects can be structured with several Web Dynpro Components
Include reusable Web Dynpro component into another Web Dynpro component
How methods of a used Web Dynpro’s Interface Controller are called
This exercise will help understand the following -
Component Usage of SALV_WD_TABLE
Configure non-editable ALV
Configure editable ALV
23Confidential | Copyright © Larsen & Toubro Infotech Ltd.
Select Options, OVS
Confidential | Copyright © Larsen & Toubro Infotech Ltd. 24
Select-Options -
Component usage – WDR_SELECT_OPTIONS
User must register for events for cancelling and copying
Valid for freely defined input help and ABAP dictionary search help
Option to deactivate standard buttons and define custom buttons
Object Value Selection Value Help -
Component usage – WDR_OVS
Event OVS automatically triggered 4 times one after the other
PHASE_INDICATOR = IF_WD_OVS=>CO_PHASE_0, IF_WD_OVS=>CO_PHASE_1, IF_WD_OVS=>CO_PHASE_2 and IF_WD_OVS=>CO_PHASE_3 24Confidential | Copyright © Larsen & Toubro Infotech Ltd.
Hands-On – Assistance class
Confidential | Copyright © Larsen & Toubro Infotech Ltd. 25
code that can be reused within various components, better performance
dynamic texts derived from the class CL_WD_COMPONENT_ASSISTANCE available to each controller of the component through the
attribute WD_ASSIST
25Confidential | Copyright © Larsen & Toubro Infotech Ltd.
Online Text Repository (OTR)
Confidential | Copyright © Larsen & Toubro Infotech Ltd. 26
Various ways to make the literals translatable in WDA environment are: 1. Online text repository (OTR)2. Text elements in an ABAP class3. ABAP dictionary
OTR is a central storage area for texts that can be used not only in a Web Dynpro context but also in BSPs, classes and normal ABAP reports
Different kinds of texts that can be defined in the OTR are Long texts: Do not have a limit on their length. They can be used only once. If the same long text has to be used again, it has to be rewritten in the original language again and translated againAlias texts (Short Texts): Limited to 255 characters. They can be reused and they have to be translated only once. In the web Dynpro context only OTR alias texts should be used
26Confidential | Copyright © Larsen & Toubro Infotech Ltd.
Using OTR
Confidential | Copyright © Larsen & Toubro Infotech Ltd. 27
To create a new OTR short text, the Online Text Repository browser can be used
The transaction SOTR_EDIT can also be used to create an OTR text
Name of an OTR short text: <package>/<alias>
To use an OTR short text as the value of a UI element property:
Press the value help button in the properties value field. The browser showing all standard texts of SOTR_VOCABULARY_BASIC package as well as the texts of your package will appear. Select your text. The OTR directive that will appear will have the format: $OTR:<package>/<alias>
27Confidential | Copyright © Larsen & Toubro Infotech Ltd.
Messages
Confidential | Copyright © Larsen & Toubro Infotech Ltd. 28
Messages are used to provide the user with status information of the application, and to display warnings and errors
Position of the messagesDefault position of the message area is on top of the page If another position is required then the MessageArea container UI element has to be used
Message handling: In a web dynpro application you can set the way the messages are displayed on the properties tab
On demandAlways
Interface IF_WD_MESSAGE_MANAGERMethods report_exception(), report_error_message(), report_warning(), report_t100_message(), etc
28Confidential | Copyright © Larsen & Toubro Infotech Ltd.
Confidential | Copyright © Larsen & Toubro Infotech Ltd.
Web Dynpro ABAP [Dynamic Programming, Portal Integration, Configuration]
29
Hands-On - Dynamic Programming
Confidential | Copyright © Larsen & Toubro Infotech Ltd. 30
Dynamic Layout Manipulation - Under certain conditions, it may be useful to change the layout of a view at runtime, e.g., CL_WD_UIELEMENT_CONTAINER (methods add_child(), get_child(), remove_child()) and CL_WD_BUTTON, etc
Working Dynamically with Parameter Mappings - The term parameter mapping is used for the bind of an event parameter to a parameter of an action handler method
Dynamic Context Manipulation - You can manipulate the context of a controller in different ways at runtime, e.g., IF_WD_CONTEXT_NODE_INFO (ADD_NEW_CHILD_NODE)
Working Dynamically with Component Usages
Dynamic embedding of an Interface view into a window
SAP Recommendation - you should use the dynamic manipulation of the layout and context – only if it is not possible to construct a component by declarative means
30Confidential | Copyright © Larsen & Toubro Infotech Ltd.
Integration with Portal
Confidential | Copyright © Larsen & Toubro Infotech Ltd. 31
SAP Web Dynpro ABAP iView template
Portal manager IF_WD_PORTAL_INTEGRATIONPortal Events (client side eventing)
Register WDA application for portal eventsTrigger portal events
Portal Navigation – a WDA application can navigate to ITS or BSP application or another WDA application
Absolute navigationRelative NavigationObject based navigation - Instead of defining a
concrete target URL, you call a particular operation of a particular Business Object.
Work Protect mode
31Confidential | Copyright © Larsen & Toubro Infotech Ltd.
Component and Application configuration
Confidential | Copyright © Larsen & Toubro Infotech Ltd. 32
Configuration and Personalization – two ways of changing the UI of SPA standard screens
Configuration – design time
Component Configuration – create configuration data records for individual Web Dynpro components. This can be explicit or implicit
Application Configuration – defines which component with which configuration is required for the Application
Personalization – run time
User Personalization – available only for that user
Administrator Personalization (Customization) – available for large group of users
32Confidential | Copyright © Larsen & Toubro Infotech Ltd.
Confidential | Copyright © Larsen & Toubro Infotech Ltd.
Web Dynpro ABAP [Advanced Concepts, Enhancements, Best Practices]
33
Hands-On - Integration with Adobe Forms
Confidential | Copyright © Larsen & Toubro Infotech Ltd. 34
Print Scenario – printing and displaying forms
Interactive Scenario – forms containing input enabled elements
Offline Scenario – upload existing Forms as MIME Objects into Web Dynpro component
Digital Signatures – forms containing digital signatures
The exercise will help understand the following -
Integrating interactive/print form into a Web Dynpro ABAP application
34Confidential | Copyright © Larsen & Toubro Infotech Ltd.
Advance Concepts - Adobe Islands
Confidential | Copyright © Larsen & Toubro Infotech Ltd. 35
Integrate Adobe Flash or Flex content into Web Dynpro ABAP
Adobe Flex Builder required for Flash development - not part of the SAP NetWeaver shipment
With Adobe Flex Builder, an Adobe Flash application is created and loaded into the Mime repository of a Web Dynpro component.
This Mime object is referenced by the Flash Island UI element
35Confidential | Copyright © Larsen & Toubro Infotech Ltd.
Modification Free Enhancements
Confidential | Copyright © Larsen & Toubro Infotech Ltd. 36
Create/Change Enhancement Implementation
Enhance View layout and Navigation
Enhance Controller Attributes
Context
Pre-exit, Post-exit, Overwrite
Enhance Component
Show Enhancement Framework in the system using any SAP application
36Confidential | Copyright © Larsen & Toubro Infotech Ltd.
Confidential | Copyright © Larsen & Toubro Infotech Ltd. 37
Best Practices
Principle: The Web Dynpro Component is both the fundamental unit of development and the unit of reuse; 1 Component = 1 Business Task
Some tell-tale signs to look out for:
Little or no use made of Web Dynpro
Component concept
Business Logic placed within View
Controllers
Development of redundant
workarounds – added to overcome a
lack of understanding, not a deficiency
in Web Dynpro
Inefficient use of backend resources
Consequently, performance problems
are often built-in to the architecture
37Confidential | Copyright © Larsen & Toubro Infotech Ltd.
Confidential | Copyright © Larsen & Toubro Infotech Ltd. 38
Best Practices – coding standards
Don’t make Web Dynpro components too largeDistributing work between several developers is harder
Reusability is poor
Don’t make Web Dynpro components too small
The application might not perform well
The resulting sea of components might reduce maintainability
Reuse level too small
Higher system overheads
Web Dynpro ABAP Object naming conventions
Web Dynpro ABAP estimation sheet – will be released soon by the Quality team
WDA ABAP Object naming conventions
38Confidential | Copyright © Larsen & Toubro Infotech Ltd.
Checklist for high Performing WDA Programming
Confidential | Copyright © Larsen & Toubro Infotech Ltd. 39
Do not write your entire application source code in Web Dynpro components
Write source code in ABAP OO classes
Use dynamic navigation or dynamic component usages only if it is absolutely necessary
Do not create a mega context for all data belonging to one application
View context should contain only the data necessary for the view
Use the assistance class or other ABAP OO classes for the data exchange
Do not create deep-nested contexts. Use singleton nodes if nesting is necessary
Do not use dynamic attributes (IF_WD_CONTEXT_NODE_INFO->ADD_ATTRIBUTE)
Do not insert any TransparentContainer UI elements into Container UI elements, for example, Groups
As far as possible, do not use the UI element tree39Confidential | Copyright © Larsen & Toubro Infotech Ltd.
References
Confidential | Copyright © Larsen & Toubro Infotech Ltd. 40
SAP Help Library
SDN Tutorials
L&T Infotech TeamSAP - http://teamsap.lntinfotech.com/sites/km/nw/KnowledgeBase/Forms/AllItems.aspx?FilterField1=Technology&FilterValue1=Web%20Dynpro%20for%20ABAP
40Confidential | Copyright © Larsen & Toubro Infotech Ltd.
Top Related