Web Dynpro ABAP [Web Dynpro ABAP Introduction]

Confidential | Copyright Larsen & Toubro Infotech Ltd.

Purpose of Web Dynpro

Web Dynpro is to combine
high
zero

interactivity (= dynamic GUI) and

installation (= ubiquitous GUI, e.g. web browser) allow graphical/declarative programming, code is generated vs. controller, plus data binding and navigation plugs ABAP, and Web Services are supported

Minimize coding, maximize design

tools

Separate layout and logics

view

Support arbitrary backends

JavaBeans,

Run on multiple platforms

Java,

ABAP, and .NET are supported

WD client, including

High fidelity web UI

browser-based
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) Internationalization

2

Accessibility,

Confidential | Copyright Larsen & Toubro Infotech Ltd.

What is Web Dynpro ABAP?

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

Confidential | Copyright Larsen & Toubro Infotech Ltd.

Advantages of WDA
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

Confidential | Copyright Larsen & Toubro Infotech Ltd.

Web Dynpro ABAP or Java?

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

Confidential | Copyright Larsen & Toubro Infotech Ltd.

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.

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.

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 :

Confidential | Copyright Larsen & Toubro Infotech Ltd.

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

Confidential | | Copyright Copyright Larsen Larsen& &Toubro ToubroInfotech InfotechLtd. Ltd. Confidential

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 can be called from user interface linked to the interface view of the Web Dynpro window with an inbound plug

Application

Confidential | Copyright Larsen & Toubro Infotech Ltd.

10

A typical WDA structure

Confidential | Copyright Larsen & Toubro Infotech Ltd.

11

WDA Development pre-requisites

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

Confidential | Copyright Larsen & Toubro Infotech Ltd.

12

WDA Development Login Details

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

Confidential | Copyright Larsen & Toubro Infotech Ltd.

13

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.

14

Web Dynpro ABAP [Events, Navigation and Interfaces]

Confidential | Copyright Larsen & Toubro Infotech Ltd.

15

Views Layout, UI elements

View Layout

View with UI Elements

Confidential | Copyright Larsen & Toubro Infotech Ltd. 16

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

Confidential | Copyright Larsen & Toubro Infotech Ltd.

17

Events and Actions

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

UI element event can be linked to an action at design time

Actions can be reused within a view

Confidential | Copyright Larsen & Toubro Infotech Ltd.

18

Interfaces of Web Dynpro components

Interface Views

Interface Controller Interface methods Interface events

cross component context mapping

Confidential | Copyright Larsen & Toubro Infotech Ltd.

19

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

Confidential | Copyright Larsen & Toubro Infotech Ltd.

20

Hands-On - Events
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

Confidential | Copyright Larsen & Toubro Infotech Ltd.

21

Web Dynpro ABAP

[Component Usage, ALV, Assistance Class]

Confidential | Copyright Larsen & Toubro Infotech Ltd.

22

Hands-On - Component Usage

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 Dynpros Interface Controller are called This exercise will help understand the following -

Component Usage of SALV_WD_TABLE

Configure non-editable ALV Configure editable ALV

Confidential | Copyright Larsen & Toubro Infotech Ltd.

23

Select Options, OVS

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
Confidential | Copyright Larsen & Toubro Infotech Ltd. 24

Hands-On Assistance class

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

Confidential | Copyright Larsen & Toubro Infotech Ltd.

25

Online Text Repository (OTR)

Various ways to make the literals translatable in WDA environment are:
1. Online text repository (OTR) 2. Text elements in an ABAP class 3. 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 again Alias 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

Confidential | Copyright Larsen & Toubro Infotech Ltd.

26

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

Confidential | Copyright Larsen & Toubro Infotech Ltd.

27

Messages
Messages are used to provide the user with status information of the

application, and to display warnings and errors

Position of the messages
Default

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

Interface

IF_WD_MESSAGE_MANAGER Methods report_exception(), report_error_message(), report_warning(), report_t100_message(), etc

28

Confidential | Copyright Larsen & Toubro Infotech Ltd.

Web Dynpro ABAP

[Dynamic Programming, Portal Integration, Configuration]

Confidential | Copyright Larsen & Toubro Infotech Ltd.

29

Hands-On - Dynamic Programming

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
Confidential | Copyright Larsen & Toubro Infotech Ltd. 30

Integration with Portal

SAP Web Dynpro ABAP iView template
Portal manager IF_WD_PORTAL_INTEGRATION Portal Events (client side eventing) Register WDA application for portal events Trigger portal events Portal Navigation a WDA application can navigate to ITS or BSP application or another WDA application Absolute navigation Relative Navigation Object based navigation - Instead of defining a concrete target URL, you call a particular operation of a particular Business Object. Work Protect mode

Confidential | Copyright Larsen & Toubro Infotech Ltd.

31

Component and Application configuration

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

Confidential | Copyright Larsen & Toubro Infotech Ltd.

32

Web Dynpro ABAP

[Advanced Concepts, Enhancements, Best Practices]

Confidential | Copyright Larsen & Toubro Infotech Ltd.

33

Hands-On - Integration with Adobe Forms

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

Confidential | Copyright Larsen & Toubro Infotech Ltd.

34

Advance Concepts - Adobe Islands

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

Confidential | Copyright Larsen & Toubro Infotech Ltd.

35

Modification Free Enhancements

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

Confidential | Copyright Larsen & Toubro Infotech Ltd.

36

Best Practices
Some tell-tale signs to look out for:
Little

or no use made of Web Dynpro Logic placed within View of redundant workarounds

Component concept
Business

Controllers
Development

added to overcome a lack of understanding, not a deficiency in Web Dynpro

Inefficient

use of backend resources performance problems are

Consequently,

often built-in to the architecture

Principle: The Web Dynpro Component is both the fundamental unit of development and the unit of reuse; 1 Component = 1 Business Task
Confidential | Copyright Larsen & Toubro Infotech Ltd. 37 37

Best Practices coding standards

Dont make Web Dynpro components too large
Distributing

work between several developers is harder

Reusability

is poor

Dont make Web Dynpro components too small

The The

application might not perform well resulting sea of components might reduce maintainability level too small system overheads

Reuse

Higher

Web Dynpro ABAP Object naming conventions

Web Dynpro ABAP estimation sheet will be released soon by the Quality team
Confidential | Copyright Larsen & Toubro Infotech Ltd. 38

Checklist for high Performing WDA Programming

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 tree
Confidential | Copyright Larsen & Toubro Infotech Ltd. 39

References

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%20 ABAP

Confidential | Copyright Larsen & Toubro Infotech Ltd.

40