Web Dynpro For Experts

PRTL351:
Web Dynpro for

Experts
Contributing Speakers
Marco Ertel
NW PM Operations AP, Web Dynpro PM, SAP AG
Bertram Ganz
NWF Application UI, Web Dynpro Java Runtime, SAP AG
Gaby Wenneker
NW DT Development Framework, SAP AG
Michael Wenz
NW DT Development Framework, SAP AG
© SAP AG 2004, SAP TechEd / PRTL351 / 2

Dynamic UI Generation
Debugging of Web Dynpro Applications
Web Dynpro Internationalization
Object Value Selector


What is meant by Dynamic UI Generation?

A predefined exit from the static and declarative Web
Dynpro programming paradigm.
The application is driven by programming instead of
declarations and allows us to adapt to changes at runtime.
Currently we support 4 flavors of dynamic generating UI:
Dynamic UI Manipulation
Dynamic Context Creation
Dynamic Action Creation
Dynamic Metadata

Example - A Dynamic View
Designtime Runtime

Although we highly recommend the static Web Dynpro approach,

there are situations when dynamic generation is required.
Web Dynpro itself needs dynamic generation for

Highly configurable applications
Some portal integration application
Framework developers
Customization and Personalization
…
The methodology of dynamic programming is integrated in a way,

that it nicely cooperates with the static Web Dynpro approach.
It is possible to mix static declarations with dynamic

enhancements

Dynamic UI modification & creation
All view controllers implement the method wdDoModifyView.

oModifyView This is the only location where
application code may directly access the UI elements!
Dynamic UI modification and creation allows the programmer to modify and create UI elements at
runtime.
wdDoModifyView is called by the Web Dynpro runtime environment for modification of the view
layout.
¾ For all visible views, this takes place at a time immediately before the closing response rendering.
Example
import com.sap.tc.webdynpro.clientserver.uielib.standard.api.*;
...
public static void wdDoModifyView (
IPrivateDynamicView wdThis,
Creates an Input Field
IPrivateDynamicView.IContextNode wdContext,
IWDView view, boolean firstTime)
{
//@@begin wdDoModifyView
if (firstTime) {
IWDInputField input = (IWDInputField)
view.getElement(”someInput”);
input.setEnabled(false);
}
//@@end
}

wdDoModifyView Input Parameters
Example
public static void wdDoModifyView (
IPrivateDynamicView wdThis,
IPrivateDynamicView.IContextNode wdContext,
IWDView view, boolean firstTime)
{
…
//@@end
}
firstTime of the type boolean: This is true only if wdDoModifyView is called for the first
time during the life cycle of the corresponding view.
view: Reference to the layout controller of the view.
wdThis: Reference to the IPrivate interface of the view controller . wdThis allows access
to the controller context; it also allows triggering outbound plugs and events and access to
action objects as well as controllers used.
wdContext: Reference to the root context node of the view controller (for the current
context).

IWDView Interface
IWDView allows the programmer to access, modify and create UI

elements.

Modifying View UI Elements
Example
IWDInputField input =
(IWDInputField)view.getElement("someInput");
input.setEnabled(false);
The view parameter of wdDoModifyView method allows you to access a views

UI Elements.
To get a reference to your view’s UI element you use the getElement(String
id) method where the id is the name you gave the UI element.
Once you have obtained a reference to a UI Element you can change its
properties.
Creating View UI Elements
Example
IWDInputField inputfield = (IWDInputField)
view.createElement(IWDInputField.class, "InputField1");
The view parameter of wdDoModifyView method allows you to create

UI elements.
Once you have created your UI element you can modify it’s default
properties.
Some UI elements must be bound to a context attribute (ie – Input

Fields)
Positioning UI Elements - IWDUIElementContainer
Example
IWDTransparentContainer container = (IWDTransparentContainer)

view.getElement("RootUIElementContainer");
IWDInputField inputfield = (IWDInputField)
view.createElement(IWDInputField.class, "InputField1");
inputfield.setVisible(WDVisibility.VISIBLE);
container.addChild(inputfield);
To position a UI element in your view you must first get access to the UI
Container you want to add it to (First line of code above).
You can then call the container method addChild(IWDUIElement) or
addChild(IWDUIElement, int index) to place the UI element in it.

Dynamic UI Example
Example
if (wdContext.currentContextElement().getVisible()) {
IWDLabel label2 = (IWDLabel)view.getElement("Label2");
label2.setEnabled(true);
IWDLabel label3 = (IWDLabel)view.getElement("Label3");
label3.setVisible(WDVisibility.VISIBLE);
IWDUIElementContainer container = label2.getContainer();
IWDLabel label4 =
(IWDLabel)view.createElement(IWDLabel.class, "Label4");
label4.setText("Dynamically Created Label!");
container.addChild(label4, 2);
}
//@@end
In the case you need to create UI input elements dynamically you

need to bind them to context attributes!
If these attributes are unknown at design time, it is legal to create the

necessary context attributes at runtime and bind them to UI elements.
Example
IWDInputField inputfield = (IWDInputField)view.

createElement(IWDInputField.class, "InputField1");
IWDAttributeInfo test = wdContext.getNodeInfo().

addAttribute("AttributeA",
"ddic:com.sap.dictionary.string");
wdContext.currentContextElement().
setAttributeValue("AttributeA", null);
inputfield.bindValue("AttributeA");

Dynamic Context Creation - IWDNodeInfo
Interface IWDNodeInfo allows programmers to add all kinds of context types

to the context tree.
To access this interface for the Root Node you must call the method:
wdContext.getNodeInfo().
Example
IWDNodeInfo rootNode = wdContext.getNodeInfo();
rootNode.addAttribute("MyAttribute",
For each node that you create at design time, a method is generated on
wdContext to access that nodes IWDNodeInfo interface.
As shown here, we have two nodes, thus the

following methods will exist on wdContext:
wdContext.nodeTestNode2().getNodeInfo()
wdContext.nodeTestNode().getNodeInfo()

Dynamic Context Creation Types
Interface IWDNodeInfo contains APIs to create all kinds of contexts elements:

Mapped Attributes – values that are mapped back to the context of another
controller.
addMappedAttribute(… )
Attribute Values – values that are not mapped to other controller’s contexts.
addAttribute(… )
Mapped Nodes – nodes that are mapped back to the context of another
controller.
addMappedChild(… )
Nodes – nodes that are not mapped to another controller’s context.
addChild(…)
Recursive Nodes – nodes that are used for representing Trees.
addRecursiveChild(… )

Dynamic Context Creation – Simple Example
Example
IWDInputField inputfield = (IWDInputField)view.

createElement(IWDInputField.class,
"InputField1");
Create an Input Field
IWDAttributeInfo test = Create an Attribute

wdContext.getNodeInfo().
addAttribute("AttributeA",
wdContext.currentContextElement().
setAttributeValue("AttributeA", null);
inputfield.bindValue("AttributeA");
Bind the newly

Set the value of the Attribute
created attribute to
the input field
Dynamic Context Creation – Accessing Elements
Dynamically create nodes and attributes do not have generated getter
and setter methods.
When we create a node or attribute at design time, setter and getter
methods are provided to access these elements:
wdContext.currentMyNodeElement();
wdContext.currentContextElement().setResult(result);
To access a dynamically created context element use the follow methods:

Nodes:
wdContext.currentContextElement().node()
.getChildNode(String, int).getCurrentElement();
Attributes:
wdContext.currentContextElement().getAttributeValue(String)

Dynamic Context Creation – More Difficult Example
The below code shows the creation of a node and an underlying attribute of that node:
IWDNodeInfo node = wdContext.getNodeInfo().

addChild("DynamicNode", null, true, true, false,
false, false, true, null, null, null);
node.addAttribute("MyAttr", “ddic:com.sap.dictionary.string");
Now we can bind a input field’s value to this node – binding context values to UI elements should occur in
wdDoModifyView():
theInput.bindValue("DynamicNode." + fld.getName());
Once the binding has occurred we need to access the context variable to get the users input – this is
generally done in an action event handler:
IWDNode node =
wdContext.currentContextElement().node().getChildNode("DynamicNode", 0);
IWDNodeElement nodeElement = node.getCurrentElement();
String myAttr = (String)nodeElement.getAttributeValue("MyAttr");

Dynamic Actions
Actions may be created dynamically, but the event handler

must be already available!
¾ This means we can dynamically create actions, but we
can not dynamically create code!
Dynamically created actions can be bound to UI elements

much the same way design time declared actions are bound to
UI Elements.
Dynamic created actions must reuse some static declared

event handler and its signature! This is achieved by using
wdThis.wdCreateAction(…).
(…)
Example
IWDAction theAction =
wdThis.wdCreateAction(IPrivateDynamicView.WDActionEventHandler.GE
NERIC_ACTION,"");
theButton.setOnAction(theAction);

Dynamic Actions – Parameter Mapping Basics
Some UI events have parameters associated with them, these

parameters need to be mapped to parameters of their associated
event handlers, this is known as Parameter Mapping.
Mapping
This process is known as parameter mapping, and is achieved as

follows:
1. Obtain the name of the parameter associated with the UI elements event
(For example: IWDCheckBox has a parameter associated with event
onToggle named “checked”).
2. Create an action in the view controller.
3. Define a parameter for the action of the same data type as the event
parameter.
4. Associate the event parameter with the action parameter.

Dynamic Actions – Parameter Mapping
The diagram shown here visualizes the concept of

Client parameter mapping.
DynamicView On the client side, when the checkbox is clicked the
event onToggle is fired, which sends a request
containing the parameter “checked” to the server.
onToggle(boolean checked) This onToggle event is assigned to the
onActionToggle() event handler, and its parameter
isChecked has been mapped to the checked parameter
of onToggle()
Server
Request public class DynamicView

{
…
public void onActionToggle(boolean isChecked)
{
…
Network }
}

Dynamic Actions – Parameter Mapping Example: Step 1
This example uses the CheckBox’s

onToggle action to further illustrate how
to implement parameter mapping.
First we create an action in a view

controller to handle the change of state in
a checkbox UI element.
The checkbox is called myCheckBox

and will be associated with an action
called HandleCheckBox.
Define a parameter called

checkBoxState of type boolean for the
action handler method
onActionHandleCheckBox.

Dynamic Actions – Parameter Mapping Example: Step 2
Now you can access your checkbox in the wdDoModifyView() method

to create the parameter mapping; the code for this is shown below
Example
if (firstTime) {
// Get a reference to the checkbox UI element
IWDCheckBox cb =
(IWDCheckBox)view.getElement("myCheckBox");
// Link the client-side event parameter ‘checked’ to
// the server-side action parameter ‘checkBoxState’
cb.mappingOfOnToggle().addSourceMapping("checked",
"checkBoxState");
}

Dynamic Actions - More Possibilities
Use method IWDAction.setEnabled(boolean): enables or disables any UI

element associated with the action.
Can create multiple actions that point to the same event handler.
Can create constant parameters on UI element actions and map them to

the parameters of an event handler:
Example
IWDAction theAction =
wdThis.wdCreateAction(
IPrivateDynamicView.WDActionEventHandler.GENERIC_ACTION,"")
;
theButton.setOnAction(theAction);
theButton.mappingOfOnAction().addParameter("Command", "delete");
theActionContainer.addChild(theButton);

Summary
Dynamic UI Generation means:

Dynamic UI Manipulation
Dynamic Action Creation
Dynamic Metadata


Agenda
Debugging with SAP NetWeaver Developer Studio
General Overview
How to start debugging
How to use the debug view
How to inspect data and status while debugging
Web Dynpro specific aspects

Inspecting Web Dynpro context status
How to debug RFC BAPI calls
Hands-on: Web Dynpro debugging

Import Web Dynpro project
Search for errors by debugging the application
Set up RFC BAPI debugging

Demo
Demo

Activate Debugging (1/2)
Activate debugging for the server process of the

J2EE Engine
If necessary, open the J2EE Engine view containing status
information about the running J2EE Engine
Expand the tree display fully until you can see the actual
server process (for example server0)
Choose ‘Enable debugging’ of process from the context
menu
The server process is stopped and restarted in debugging
mode. After restart the debug mode should be ‘ON’
Notes
You can only debug in non-productive server nodes
If there are more than one server nodes you have to reserve
one of the nodes for your debug session

Activate Debugging (2/2)
Switch server Click

node to debug Enable debugging of process refresh to
to turn debug mode „ON“ update
mode
view
Reserve the process for your

debugging session (more
than one server node)
Setting a Breakpoint (1/2)
You can set breakpoints in editors

Open the implementation page containing the code you
want to debug (controller, model class, own Java class, …)
Navigate to the line where you want to set the breakpoint
Set a breakpoint by double-clicking or using the context
menu on the marker bar
The breakpoint lines are highlighted with a blue dot
Breakpoint options
Use the context menu on a breakpoint to set conditions
and breakpoint properties

Setting a Breakpoint (2/2)
Set
breakpoint
by double
clicking
Optionally
edit
breakpoint
properties

Specifying a Debugging Configuration (1/2)
To start debugging a Web Dynpro application, you require a

launch configuration
Open the dialog for creating a configuration (Run → Debug...)
Select Web Dynpro application from the list of possible
configurations and create a new configuration
Select the project and the application you want to debug
[Optional] Set properties and source lookup path
[Optional] Select the server on the J2EE engine tab (multi node
server only)
Start debugging
SAP NetWeaver Studio automatically switches to debug

perspective
The Web Dynpro application is started in an external Browser
The application will stop at the breakpoint

Specifying a Debugging Configuration (2/2)
3. Specify
Specify project and
appropriate application
debugging
configuration
and start
debugging
1. Start
debugging
2. Create
4. Start debug
debugging
session
configuration

Debug Perspective: Overview (1/4)
Debug view
Allows you to manage the debugging of a program in the
IDE
Displays the stack frame for the suspended threads you
are debugging (thread = node in the tree).
Editor view
Displays program line the debugger is currently executing
If the program execution leads to a different class, Eclipse
will open up the corresponding editor automatically

Variables view
Shows information about variables that are currently in scope
(currently-selected stack frame and callstack)
Hierarchical display of variable structure
Content of variables can be checked in separate content area
(based on toString() method)
Content of variables may be changed
Breakpoints view
Shows a list of the currently set breakpoints and their state
Allows to
Add new exception breakpoints
Delete existing breakpoints
Change the properties of existing breakpoints

Expressions view
Used to evaluate results of expressions
Hierarchical display of structure
Content area (based on toString() method)
“Inspect” command
Watch expressions
Display view
Used to evaluate results of expressions
String-only representation of result (based on toString() method)
“Display” command
Used to evaluate own expressions
Simply type expression
Use code completion
“Inspect” and “Display” possible

The
debugging
perspective Debug view: Variables view:
info on variables
allows to stacktraces for
each suspended currently in scope
manage and
thread
run the
debugging
session
Display view:
text based expression
evaluation
Editor view:
currently executed
code
4. Start debug
session
Expressions view:
tree based expression
Breakpoints view: evaluation
list of breakpoints

Debug Perspective: Execution in Debug View (1/3)
Step into [F5]

This command steps into the next statement
Use this command if you are at a method call and you want to see
what the method does internally
Step over [F6]

This command steps over the next statement
Execution continues with the next statement in the same method
or (if you are at the end of a method) with the next statement in
the method from which the current method was called
Use step over if you only need to know what a method will return
or how it will change your variables.
Step return [F7]

Will finish current method and return to the calling method

Suspend
Will pause execution and allows to view state of variables
Resume [F8]
This command resumes a suspended thread
Terminate
Will terminate execution of the program
Step with filters [F5 + shift]

Jumps to the next statement which is not filtered out (see
Window > Preferences > Java > Debug > Step Filtering).

Step with
There are filters
various
Step into
different
Terminate Step over
options for
further Suspend
processing Step return
Resume

Debugging a Web Dynpro Application
Sample Web Dynpro application “Search for flights and

view flight details”
The application allows user to
search the backend for flights by airline ID
select a specific flight to view its details in a form
The application contains two errors

Starting a second search does not work
Sum of total available seats is not correct
Use debugging features for this Web Dynpro application

Try out different debugging features
Find the two errors in the application

Debugging a Web Dynpro application 2
Enter airline ID

Select single flight

from results

View details on
flight in form view





Debugging an RFC BAPI Call 1
Web Dynpro content administrator

RFC application data connection must be defined to specific
application server (no load balancing possible)
Maintain JCO destination WD_MODELDATA_DEST
Web Application server for ABAP

Log on to same application server under the user name specified in
the RFC application connection
Enable HTTP debugging for this user
z SE80 -> Utilities -> Settings -> Tab Editor -> Tab HTTP Debugging
Set HTTP breakpoint(s)
IDE
StartWeb Dynpro application from Web Dynpro explorer or run
configuration
Server does not need to be in debug mode

Use single server

connection for
application data
connection

Activate HTTP
debugging before
setting a breakpoint

Summary
Debugging Overview
Activate debugging mode for server node
Set breakpoints
Specify debugging configuration
Use debugging perspective (debug view, variables view,…)
Debugging Web Dynpro Application

Inspect status of Web Dynpro context
Debugging RFC BAPI calls

Web Dynpro OVS Exercise
Exercise

Web Dynpro Debugging

Learning Objectives – Web Dynpro I18N
As a result of this workshop section, you will be

able to:
Internationalize Web Dynpro applications
Define and access locale-specific texts in the message pool
Define locale-specific texts in simple data types
Create and edit locale-specific XLF-Files
Utilize API for accessing texts: IWDTextAccessor-API,
IWDTextAccessor
IMessage<Component>-API
<Component>

Web Dynpro Internationalization Concept
Web Dynpro Internationalization is based on externalizing Strings

from …
controller classes, metadata-files, dictionary simple types
over locale-dependant XLF-files (XML Localization Interchange

File Format, designtime) into generated Java property-files
(runtime).
XLF-Files are only relevant for the translation process and can be
edited at designtime using an S2X-editor.
editor
The Web Dynpro runtime loads property resource bundles
depending on a determined session locale.
An application developer can access locale-dependant texts via
IWDTextAccessor-API:
IWDTextAccessor wdComponentAPI.getTextAccessor()
<Component> Message texts of type error, warning,
IMessage<Component>:
standard

Externalizing Strings inside a Web Dynpro Project
different
locales
Web Dynpro
Component A
Externalize Create
Strings Archive
Web Dynpro Project

EAR
Component B File
Web
Dynpro Deployable
Tools Project
Local
Dictionary
Java Property
Resource Bundles
Externalizing Strings inside a Web Dynpro Project
Strings are externalized from a Web Dynpro

Web Dynpro component into XLF-files for translation
Component purposes. Deployable project EAR-files contain
language-spefic texts in property files.
files
Externalized Strings done by Web
Dynpro Tools
xlf
xlf
xlffiles
files
files
Create
Property Files Archive Project
EAR
xlf xlf File
xlf xlf
en files de files
files files en de Deployable
Project
Added by translation
different locales
process
XLF-Files and S2X-Editor
XLF-files without _<locale> are initially created when

defining views, windows, (text) messages and simple datatypes.
Texts inside these initial XLF-files are written by the application
developer.
The project language is specified in these initial xlf-files so that the
translater knows the source language.
XLF-files can be edited using the S2X-Document-Editor of the

SAP NetWeaver Developer Studio.
xlf
file

About XLIFF and SAP Supported XLIFF (S2X)
XLIFF (XML Localisation Interchange File Format)

Format is a non-
proprietary format for extracted text.
SAP Supported XLIFF (S2X) is an XLIFF-based interface format
that is tailored to SAP‘s requirements.
Contains specific restrictions but also extensions compared to
XLIFF.
In SAP NetWeaver ’04 the S2X-editor can be used for translating

texts in copied and renamed ( with _<locale>) XLF-files.
In NetWeaver ’04 a R/3-based translation process is not possible

on customer side.
Upcoming integration scenarios will offer an authoring
environment for translating S2X-files in the SAP NetWeaver
Developer Studio.
Please note that this document is subject to change and may be changed by SAP at
any time without notice. The document is not intended to be binding upon SAP to any
particular course of business, product strategy and/or development.
Translation of XLF-Files
Web Dynpro Component Web Dynpro Component

Devleoper xlf-Files Author xlf-Files
before after
translation translation
The translation workflow

returns locale-dependant XLF-
files for every initial XLF-file.
These files end with _<locale>
before the file-extension xlf .

XLF files inside a Web Dynpro Project
Dictio-
nary
different
locales
xlf
file Web Dynpro
Tools Project
create
Compo- transfer texts EAR
archive
nent into property File
files
deployable
xlf
project
file
Java resource bundles

XLF-Files insde Web Dynpro project
Locale-dependant texts inside a Local Dictionary
Simple
Data Type
xlf Displaytexts of enumerations

file
Field label
Simple
View Column header
Data Type
Tooltip
Local Dictionary
All locale-dependant texts of a simple type contained in the local

Java Dictionary are stored in a corresponding XLF-File:
<Simple Type Name>.dtsimpletype_de.xlf
xlf <Simple Type Name>.dtsimpletype_en.xlf
file <Simple Type Name>.dtsimpletype_xlf
Locale-dependant texts inside a Web Dynpro Component
xlf
file
View View
View Window Messages
View Window
Controller and Texts
Web Dynpro Component

Inside a Web Dynpro component locale-dependant texts occur in …
Views
View Controllers
Windows
Messages (Errors, Warnings, Standard) and Texts

Locale-dependant texts inside a View Layout
All translatable UI-element properties representing

View text information
View Layout
text
tooltip
imageAlt
S2X Editor
XLF-files
<View Name>.wdview_de.xlf
xlf <View Name>.wdview_en.xlf
file <View Name>.wdview.xlf
Locale-dependant texts inside a View Controller
View Text property of Actions in View Controllers

Controller Action
Definition
S2X Editor
XLF-files
<View Name>.wdcontroller_de.xlf
xlf <View Name>.wdcontroller_en.xlf
file <View Name>.wdcontroller.xlf
Locale-dependant texts inside a Window
Title text displayed as window title

Window
Window Definition
S2X Editor
XLF-files
<View Name>.wdwindow_de.xlf
xlf <View Name>.wdwindow_en.xlf
file <View Name>.wdwindow.xlf
Message Pool inside a Web Dynpro Component
Messages Message texts of type standard, warning and error to

and Texts be displayed with the Web Dynpro Message manager
(IWDMessageManger-API)
IWDMessageManger
Additional texts to be accessed in controllers via the

IWDTextAccessor-API
IWDTextAccessor
Message Editor
XLF-files
<Component Name>MessagePool.wdmessagepool_de.xlf
xlf <Component Name>MessagePool.wdmessagepool_en.xlf
file <Component Name>MessagePool.wdmessagepool.xlf

Accessing locale-dependant texts via Interfaces
IMessage-
<Component>
Property
Web Dynpro IWDText- Files for
Controller Accessor Session
Locale
ISimpleType
Deployed Project
Web Dynpro Runtime

Locale-dependant texts stored in property resource bundles can be
accessed from within a Web Dynpro controller via the interfaces
IMessage<Component>, IWDTextAccessor and ISimpleType .

Accessing Message Texts via IMessage<Comp. Name>
IMessage-
<Component>
All Messages of type standard, warning or error are added as

Constants of type IWDMessage to the generated Interface
IMessage<Compo- nent Name>.java.
Name>.java
Every Web Dynpro component has its own message interface

IMessage<Component Name>.java.
Name>.java
Messages of type text are accessible via the IWDTextAccessor-API.

IWDTextAccessor
Accessing Message Texts via IMessage<Comp. Name>
//@@begin javadoc:onActionRent(ServerEvent)
/** Declared validating event handler. */
//@@end
public void onActionRent(
com.sap.tc.webdynpro.progmodel.api.IWDCustomEvent wdEvent ){
//@@begin onActionRent(ServerEvent)
String vehicleType =
wdContext.currentContextElement().getVehicleType();
if (vehicleType == null) {
IWDMessageManager msg = wdComponentAPI.getMessageManager();
msg.reportMessage(
IMessageLanguagesComp.NO_CAR, null, false);
} else {
wdThis.wdFirePlugOutRent(vehicleType);
}
//@@end
}
IMessage-
<Component>

Defining Message Texts containing Placeholders
Message text patterns containing placeholders can be defined in the

message pool.
The message text patterns are specified by the

java.text.MessageFormat class without using element formats.
public void checkMandatory( java.lang.String fieldName ) {

//@@begin checkMandatory()
IWDMessageManager messageMgr = wdComponentAPI.getMessageManager();
...
messageMgr.reportContextAttributeMessage(
wdContext.currentContextElement(), attributeInfo,
IMessageSimpleErrors.MISSING_INPUT,
IMessageSimpleErrors.MISSING_INPUT
new Object[] { fieldLabel }, true);
//@@end
}

Defining Message Texts containing Placeholders
Restriction when defining message patterns in Web Dynpro
In Web Dynpro message text patterns every message parameter is

treated as of type string.
Conversion of parameters from type date and time are converted

into a string accoring to the data dictionary format method.
The recommended procedure is to convert all context attributes that

are to be used as parameters into a string by calling the context
method IWDNodeElement
.getAttributeAsText("<attribute name>")
Do not use element formats in placeholders. Only use placeholders

containing integer arguments.
On {0,date} at {0,time} the number {1} is again {2,number,integer}
On {0} at {1} the number {2} is again {3}

Accessing Texts via IWDTextAccessor-API
IWDTextAccessor
Messages of type text cannot be displayed by the Web Dynpro

Message Manager.
They are defined for externalizing texts from controller coding.
All message texts defined in the message pool can be accessed

with the IWDTextAccessor-API
IWDTextAccessor associated to the IWDComponent
interface:
IWDTextAccessor textAcc = wdComponentAPI.getTextAccessor()

Accessing Message Texts IWDTextAccessor-API
//@@begin javadoc:onPlugInResult(ServerEvent)
/** Declared validating event handler. */
//@@end
public void onPlugInResult(
com.sap.tc.webdynpro.progmodel.api.IWDCustomEvent wdEvent,
java.lang.String vehicleType ) {
//@@begin onPlugInResult(ServerEvent)
IWDTextAccessor textAccessor =
wdComponentAPI.getTextAccessor();
String text = textAccessor.getText("text_E");
//@@end
}
In contrast to messages of type standard, warning and error messages

of type text are not addressable via generated constants.
Instead the message keys have to be passed to the IWDTextAccessor-

API as String values.

Web Dynpro Project Language
When you create a Web Dynpro Project or a Web Dynpro

Development Component, you are asked to specify a master or
project language.
language
The project language is used for the translation process only so

that the translator knows about the developer’s language (source
language).
The project language

is not read by the Web
Dynpro Runtime when
determining the
session locale of a
requested Web Dynpro
application,

Web Dynpro Application Language
The locale of a Web Dynpro application within a project can be

configured by setting the pre-defined application property
sap.locale .
The application language is used by the Web Dynpro runtime as

session locale in case no user locale and no browser locale are
specified.

Using Custom Resource Bundles
different
Web Dynpro locales
Component A
Externalize
Deprecated Strings
Web Dynpro
Only needed in older Project
Component B EAR
versions where no texts Build
Web
can be added to theDynpro File
Tools
message pool Deployable
Local Project
Dictionary
Custom Custom property

Resource resource bundles containing
Bundle key-value-pairs can be read using the Web
(defined by Dynpro Sservice WDResourceHandler.
WDResourceHandler
Application Developer)
Reading Property Files at Runtime
SAP Web Application Server
determine session start application

locale
Web Dynpro
en Runtime
read
property
send UI
file Web
containing
deployed language Dynpro UI
EAR project dependant texts
en
Web Dynpro Container

Determine Language Specific Text Information at Runtime
The Web Dynpro Runtime determines the session locale (WD

locale) based on the following fallback-mechanism:
URL User Browser Applic. System VM WD
User
Locale* Locale Locale Locale Locale Locale Locale
Developer pt de/- en fr it ru pt
Authenticated - de en fr it ru de
Anonymous - - en fr it ru en
Anonymous - - - fr it ru fr
Anonymous - - - - it ru it
Anonymous - - - - - ru ru
The class java.lang.ResourceBundle loads property files for the

calculated WD session locale. If no resource bundle for this locale
exists the default resource bundle <name>.properties is loaded.
* URL parameter sap-locale
Summary – Web Dynpro Internationalzation
Web Dynpro Internationlization is based on externalizing

texts from controller code and metadata files into
property resource bundles.
For translation purposes XLF-Files are additionally

created.
Accessing locale-dependant texts from inside Web

Dnypro controllers is based on the interfaces
IMessage<Component Name> and IWDTextAccessor.
Web Dynpro determines the session locale of a startet

Web Dynpro application based on a predefined fall-back
mechanism.

Web Dynpro Internationalization Exercise
Exercise

Web Dynpro Debugging

Learning Objectives – Object Value Selector
As a result of this workshop section, you will

be able to:
Utilize the Web Dynpro Object Value Selector for searching
objects in your Web Dynpro UI
Apply the Web Dynpro service class WDValueServices
Implement the IWDOVSContextNorificationListener
interface
Define an OVS helper context in a OVS custom controller
Name the given requirements and restrictions of the generic
OVS valuehelp service in Web Dynpro

Web Dynpro Valuehelp Revisited – Three Types
Simple Value Selector

Based on a DropDownByKey UI Element
bound to a context value attribute of
type Simple Type containing a valueset
Used for small valuesets (less than 30
values)
Supports on-demand valuesets
Extended Value Selector

Based on an InputField UI element
bound to a context value attribute of
type Simple Type containing a valueset
Both types of valuehelp can be based on
dynamically modified datatypes
Supports on-demand valuesets

Web Dynpro Valuehelp Revisited – Three Types

Advanced Search Functionality (Searching Structures)
Provides a generic user interface (OVS popup)
Based on a declarative/programmatic approach:
WDValueServices
IWDOVSContexteNotificationListener
Implementing OVS Listener class
Helper Context (Input/Output nodes) in OVS customer controller

OVS-related Classes and Interfaces
Web Dynpro Progmodel API
WDValueServices
WDValueServices
IWDOVSContextNotificationListener
OVS Custom Controller
<<inner
<<innerclass>>
class>>
OVSDemoListener
OVSDemoListener
to be implemented by application developer

OVS-related Contexts
Application OVS Context in OVS Custom

Context Controller
View Context OVS Custom Context

Root Dictionary
Root Node Node OVS UI needs
0..1 Input dictionary metadata
Flight
AirlineId 1..1 (e.g. field labels and
Airline
column headers)
…
DepCity
Arrival
…
ArrCity
Context attributes
Output
have to be properly
0..n
Lufthansa
typed for the
generic OVS UI
… Bonn
Context to be filled Context needed for the

by OVS valuehelp generic OVS valuehelp UI
Web Dynpro Progmodel provides WDValueServices
WDValueServices
WDValueServices
-addOVSExtension(
-addOVSExtension(
IWDAttributeInfo[]
IWDAttributeInfo[]startupAttributes,
startupAttributes,
IWDNode
IWDNode queryInputNode, //
queryInputNode, //lead
leadselection
selectionpointing
pointingto
toelement
element
IWDNode
IWDNodequeryResultNode,
queryResultNode, ////caridinality
caridinality0..n
0..n
IWDOVSContextNotificationListener queryListener…)
IWDOVSContextNotificationListener queryListener…)
Provides context attributes (startupAttributes) with OVS

functionality.
Uses separate context nodes for storing search query input

values (queryInputNode, lead selection points to node element)
and search query results (queryOutputNode, 0..n).
Uses a query listener class (queryListener) implementing

IWDOVSContextNotificationListener for performing the search
query and copying context data between OVS and the application.

The IWDOVSContextNotifiacationListener Interface
--appyInputValues(
appyInputValues(IWDNodeElement
IWDNodeElementovsRequestingElement,
ovsRequestingElement,
IWDNodeElement
IWDNodeElementqueryInputNodeElement)
queryInputNodeElement)
- -onQuery(
onQuery(IWDNodeElement
IWDNodeElementqueryInput,
queryInput,IWDNode
IWDNodequeryOutput)
queryOutput)
- -applyResult( IWDNodeElement ovsRequestingElement,
applyResult( IWDNodeElement ovsRequestingElement,
IWDNodeElement
IWDNodeElementqueryOutputElement)
queryOutputElement)
The OVS listener‘s hook method‘s can be seen as

event handlers called at three points of time:
applyInputValues(): when the OVS is OVSListener
OVSListener
requested for a field. Copy application context
to the OVS search query context (input).
onQuery(): perform search query based on search input.
Copy search result in helper context node (output).
applyResult(): user selects a single line in the search
result table. Copy selected OVS query context (output) into
the application context.
OVS Sequence Diagram
Web Dynpro
Runtime View
OVS Listener
Controller
create OVS Listener

add OVS Extension
to context attributes
Request OVS
call OVS-Listener hook
Service Request
applyInputValues()
Specify Search
and Press Go
call OVS Listener hook
OVS Action
onQuery()
Select Result
call OVS Listener hook
OVS Action applyResult()

Running OVS Sample Application
See running example ...

OVS Sample Scenario – Searching Flight Data
How does the Object Value Selector work in practice?

OVS can be triggered from UI-Elements which are bound to

startup context attributes (programmatically specified).
data binding
View Context
Root Node
0..1
Flight
AirlineId OVS
DepCity
…
ArrCity

The OVS PopUp appears and the OVS listener‘s hook

method applyInputValues() is called.
OVS

The OVS listener hook applyInputValues() gets a reference

to the context node element, the startup context attribute
belongs to for initializing query input parameters.
applicationNodeElement
OVS
data binding
View Context
Root Node
Flight
0..1
LH
…
Node Element
Collection

The search query values are stored in a OVS helper context

with two nodes (inside a special OVS custom controller).
One 1..1 node for the query input (here OVSSearchInput) …
OVS Custom Controller Context OVS

Root Node
OVSSearchInput
1..1 OVS
LH Helper
Context
…
OVSSearchOuput
0..n

… and another 0..n node for the query result table entries.

Root Node
OVSSearchInput
1..1
LH
…
OVSSearchOuput
0..n

The user clicks on Go and the OVS listener‘s hook

onQuery() is called. Then the result list is retrieved using
the OVS helper context‘s input node element OVSSearchInput.

Root Node
execute RFC
OVSSearchInput
1..1
LH
…
OVSSearchOuput
0..n

In onQuery() the result list is stored in the OVS helper

context‘s output node.
OVS Custom Context OVS

Root Node
OVSSearchInput
1..1
LH
…
OVSSearchOutput
0
1
0..n n
LH
LH
…
… LH
Bonn
New
…
York London

The user selects a line in the OVS search result table and
the OVS listener hook applyResult() is called. Values of the
selected query result can be copied to the source context.

Root Node
View Context
OVSSearchInput Root Node
1..1 Flight
LH 0..1
…
LH
FRA
…
OVSSearchOutput New
0 York
1
0..n n
LH
LH
…
… LH
Bonn
New
…
York London

The OVS was successfully applied for populating input fields.
OVS

Direct Usage of Model Nodes as OVS Input/Output Nodes
Best Solution: Use OVS-adapted RFCs with input model

classes containing all needed query properties and output
model classes containing all needed result properties (no
independent helper input/ouput nodes required).

Root Node
Bapi_Flight_Getlist_Input OVS Input Node
0..n
AirlineId
MaxRows
Output
0..1
Flight_List OVS Output Node
0..n
LH
Bonn

Current OVS restrictions/requirements
OVS does not support nested structures yet: the OVS query
input and output attributes (inside the OVS Helper Context) must
be contained in one input and one output node.
When the needed input properties are spread accross different

model classes (this results in model attributes belonging to inner
model nodes when model binding is declared) a separate OVS
Helper context node OVSSearchInput (1..1) storing all input
properties in one context element is needed.
The generic OVS UI needs dictionary metadata (column header

texts, field labels). Consequently the declared input and output
context attributes must be adequately typed using a local or
logical data dictionary.

Web Dynpro OVS Exercise
Exercise

Further Information
Î Public Web:
www.sap.com
SAP Developer Network: www.sdn.sap.com Î Web Application Server Î
Web Dynpro
SAP Developer Network: www.sdn.sap.com Î Web Application Server Î
Web Dynpro Î Web Dynpro Articles
„Debugging a Web Dynpro Application“
„Debugging ABAP Code from within Web Dynpro Applications“
SAP Customer Services Network: www.sap.com/services/
Î Related SAP Education Training Opportunities

http://www.sap.com/education/
Î Related Workshops/Lectures at SAP TechEd 2004

PRTL151, Web Dynpro for Beginners, Hands-on
PRTL202, Integrating Web Dynpro Applications into SAP Enterprise Portal,
Lecture
DM152, Creating Interactive Forms in Web Dynpro for Java, Hands-on

SAP Developer Network
Look for SAP TechEd ’04 presentations and videos on

the SAP Developer Network.
Coming in December.
http://www.sdn.sap.com/

Questions?
Q&A

Feedback
Please complete your session evaluation.
Be courteous — deposit your trash,

and do not take the handouts for the following session.
Thank You !

Copyright 2004 SAP AG. All Rights Reserved
No part of this publication may be reproduced or transmitted in any form or for any purpose without the express
permission of SAP AG. The information contained herein may be changed without prior notice.
Some software products marketed by SAP AG and its distributors contain proprietary software components of other
software vendors.
Microsoft, Windows, Outlook, and PowerPoint are registered trademarks of Microsoft Corporation.
IBM, DB2, DB2 Universal Database, OS/2, Parallel Sysplex, MVS/ESA, AIX, S/390, AS/400, OS/390, OS/400, iSeries,
pSeries, xSeries, zSeries, z/OS, AFP, Intelligent Miner, WebSphere, Netfinity, Tivoli, and Informix are trademarks or
registered trademarks of IBM Corporation in the United States and/or other countries.
Oracle is a registered trademark of Oracle Corporation.
UNIX, X/Open, OSF/1, and Motif are registered trademarks of the Open Group.
Citrix, ICA, Program Neighborhood, MetaFrame, WinFrame, VideoFrame, and MultiWin are trademarks or registered
trademarks of Citrix Systems, Inc.
HTML, XML, XHTML and W3C are trademarks or registered trademarks of W3C®, World Wide Web Consortium,
Massachusetts Institute of Technology.
Java is a registered trademark of Sun Microsystems, Inc.
JavaScript is a registered trademark of Sun Microsystems, Inc., used under license for technology invented and
implemented by Netscape.
MaxDB is a trademark of MySQL AB, Sweden.
SAP, R/3, mySAP, mySAP.com, xApps, xApp, SAP NetWeaver and other SAP products and services mentioned herein
as well as their respective logos are trademarks or registered trademarks of SAP AG in Germany and in several other
countries all over the world. All other product and service names mentioned are the trademarks of their respective
companies. Data contained in this document serves informational purposes only. National product specifications may vary.
These materials are subject to change without notice. These materials are provided by SAP AG and its affiliated
companies ("SAP Group") for informational purposes only, without representation or warranty of any kind, and SAP Group
shall not be liable for errors or omissions with respect to the materials. The only warranties for SAP Group products and
services are those that are set forth in the express warranty statements accompanying such products and services, if any.
Nothing herein should be construed as constituting an additional warranty.

Web Dynpro For Experts

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Web Dynpro For Experts

Uploaded by

Copyright:

Available Formats

PRTL351:

Web Dynpro for

© SAP AG 2004, SAP TechEd / PRTL351 / 2

Debugging of Web Dynpro Applications

Web Dynpro Internationalization

Object Value Selector

Debugging of Web Dynpro Applications

Web Dynpro Internationalization

Object Value Selector

What is meant by Dynamic UI Generation?

Currently we support 4 flavors of dynamic generating UI:

© SAP AG 2004, SAP TechEd / PRTL351 / 5

© SAP AG 2004, SAP TechEd / PRTL351 / 6

Although we highly recommend the static Web Dynpro approach,

Web Dynpro itself needs dynamic generation for

The methodology of dynamic programming is integrated in a way,

It is possible to mix static declarations with dynamic

© SAP AG 2004, SAP TechEd / PRTL351 / 7

 All view controllers implement the method wdDoModifyView.

© SAP AG 2004, SAP TechEd / PRTL351 / 8

© SAP AG 2004, SAP TechEd / PRTL351 / 9

IWDView allows the programmer to access, modify and create UI

© SAP AG 2004, SAP TechEd / PRTL351 / 10

 The view parameter of wdDoModifyView method allows you to access a views

IWDInputField inputfield = (IWDInputField)

 The view parameter of wdDoModifyView method allows you to create

 Some UI elements must be bound to a context attribute (ie – Input

IWDTransparentContainer container = (IWDTransparentContainer)

© SAP AG 2004, SAP TechEd / PRTL351 / 13

 In the case you need to create UI input elements dynamically you

 If these attributes are unknown at design time, it is legal to create the

IWDInputField inputfield = (IWDInputField)view.

IWDAttributeInfo test = wdContext.getNodeInfo().

© SAP AG 2004, SAP TechEd / PRTL351 / 15

 Interface IWDNodeInfo allows programmers to add all kinds of context types

IWDNodeInfo rootNode = wdContext.getNodeInfo();

As shown here, we have two nodes, thus the

© SAP AG 2004, SAP TechEd / PRTL351 / 16

Interface IWDNodeInfo contains APIs to create all kinds of contexts elements:

© SAP AG 2004, SAP TechEd / PRTL351 / 17

IWDInputField inputfield = (IWDInputField)view.

IWDAttributeInfo test = Create an Attribute

Bind the newly

 To access a dynamically created context element use the follow methods:

© SAP AG 2004, SAP TechEd / PRTL351 / 19

IWDNodeInfo node = wdContext.getNodeInfo().

© SAP AG 2004, SAP TechEd / PRTL351 / 20

 Actions may be created dynamically, but the event handler

 Dynamically created actions can be bound to UI elements

 Dynamic created actions must reuse some static declared

© SAP AG 2004, SAP TechEd / PRTL351 / 21

 Some UI events have parameters associated with them, these

 This process is known as parameter mapping, and is achieved as

© SAP AG 2004, SAP TechEd / PRTL351 / 22

 The diagram shown here visualizes the concept of

Request public class DynamicView

© SAP AG 2004, SAP TechEd / PRTL351 / 23

This example uses the CheckBox’s

 First we create an action in a view

 The checkbox is called myCheckBox

 Define a parameter called

© SAP AG 2004, SAP TechEd / PRTL351 / 24

All view controllers implement the method wdDoModifyView.

The view parameter of wdDoModifyView method allows you to access a views

The view parameter of wdDoModifyView method allows you to create

Some UI elements must be bound to a context attribute (ie – Input

In the case you need to create UI input elements dynamically you

If these attributes are unknown at design time, it is legal to create the

Interface IWDNodeInfo allows programmers to add all kinds of context types

To access a dynamically created context element use the follow methods:

Actions may be created dynamically, but the event handler

Dynamically created actions can be bound to UI elements

Dynamic created actions must reuse some static declared

Some UI events have parameters associated with them, these

This process is known as parameter mapping, and is achieved as

The diagram shown here visualizes the concept of

First we create an action in a view

The checkbox is called myCheckBox

Define a parameter called

Now you can access your checkbox in the wdDoModifyView() method

Use method IWDAction.setEnabled(boolean): enables or disables any UI

Can create constant parameters on UI element actions and map them to

Dynamic Context Creation

Dynamic Action Creation

Web Dynpro specific aspects

How to debug RFC BAPI calls

Hands-on: Web Dynpro debugging

Activate debugging for the server process of the

You can set breakpoints in editors

To start debugging a Web Dynpro application, you require a

SAP NetWeaver Studio automatically switches to debug

Step into [F5]

Step over [F6]

Step return [F7]

Step with filters [F5 + shift]

Sample Web Dynpro application “Search for flights and

The application contains two errors

Use debugging features for this Web Dynpro application

Web Dynpro content administrator

Web Application server for ABAP

Debugging Web Dynpro Application

Debugging RFC BAPI calls

Web Dynpro Internationalization is based on externalizing Strings