17.1- wda training - day 1

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?


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


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


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



Web Dynpro Architecture - Component

Reusable entity

Contains any number of windows, views and their corresponding controllers

Embedded components – communication through Component Interface


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


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 :



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



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



A typical WDA structure

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


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



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


Web Dynpro ABAP –[Events, Navigation and Interfaces]

15


Views – Layout, UI elements

View with UI Elements

View Layout



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



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



Interfaces of Web Dynpro components

Interface Views

Interface Controller

Interface methods

Interface events

cross component context mapping



Hands-On - BAPI usage


Service call generator

Context mapping

Web Dynpro code wizard

Define Action and Action Handler


Create Web Dynpro Component with two views

Navigate between different views using inbound and outbound plugs

Hands-On - Events



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



Web Dynpro ABAP –[Component Usage, ALV, Assistance Class]

22

Hands-On - Component Usage



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


Component Usage of SALV_WD_TABLE

Configure non-editable ALV

Configure editable ALV


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

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


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


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>


Messages


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



Web Dynpro ABAP [Dynamic Programming, Portal Integration, Configuration]

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


Integration with Portal


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


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



Web Dynpro ABAP [Advanced Concepts, Enhancements, Best Practices]

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


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


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



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



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


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 tree39Confidential | Copyright © Larsen & Toubro Infotech Ltd.

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


http://help.sap.com/saphelp_nw70/helpdata/en/77/3545415ea6f523e10000000a155106/frameset.htm

http://www.sdn.sap.com/irj/sdn/nw-wdabap

http://teamsap.lntinfotech.com/sites/km/nw/KnowledgeBase/Forms/AllFolders.aspx?RootFolder=%2Fsites%2Fkm%2Fnw%2FKnowledgeBase%2FWeb%20Dynpro%20for%20ABAP&FolderCTID=0x0120002AD19BD921C9BD4094DC83EF6D3DFFC6&View=%7BF2DEE23A%2D9A5D%2D443A%2D8AF8%2DDDD538C8623

17.1- wda training - day 1

Documents