Você está na página 1de 113

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


Dynamic UI Generation

Debugging of Web Dynpro Applications

Web Dynpro Internationalization

Object Value Selector


Dynamic UI Generation

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

© SAP AG 2004, SAP TechEd / PRTL351 / 5


Example - A Dynamic View

Designtime Runtime

© SAP AG 2004, SAP TechEd / PRTL351 / 6


Dynamic UI Generation

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

© SAP AG 2004, SAP TechEd / PRTL351 / 7


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
}

© SAP AG 2004, SAP TechEd / PRTL351 / 8


wdDoModifyView Input Parameters

Example
public static void wdDoModifyView (
IPrivateDynamicView wdThis,
IPrivateDynamicView.IContextNode wdContext,
IWDView view, boolean firstTime)
{
//@@begin wdDoModifyView

//@@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).

© SAP AG 2004, SAP TechEd / PRTL351 / 9


IWDView Interface

IWDView allows the programmer to access, modify and create UI


elements.

© SAP AG 2004, SAP TechEd / PRTL351 / 10


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.
© SAP AG 2004, SAP TechEd / PRTL351 / 11
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)
© SAP AG 2004, SAP TechEd / PRTL351 / 12
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.

© SAP AG 2004, SAP TechEd / PRTL351 / 13


Dynamic UI Example

Example

//@@begin wdDoModifyView
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
© SAP AG 2004, SAP TechEd / PRTL351 / 14
Dynamic Context Creation

„ 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");

© SAP AG 2004, SAP TechEd / PRTL351 / 15


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",
"ddic:com.sap.dictionary.string");

„ 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()

© SAP AG 2004, SAP TechEd / PRTL351 / 16


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(… )

© SAP AG 2004, SAP TechEd / PRTL351 / 17


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",
"ddic:com.sap.dictionary.string");

wdContext.currentContextElement().
setAttributeValue("AttributeA", null);

inputfield.bindValue("AttributeA");

Bind the newly


Set the value of the Attribute
created attribute to
the input field
© SAP AG 2004, SAP TechEd / PRTL351 / 18
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)

© SAP AG 2004, SAP TechEd / PRTL351 / 19


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");

© SAP AG 2004, SAP TechEd / PRTL351 / 20


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

© SAP AG 2004, SAP TechEd / PRTL351 / 21


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.

© SAP AG 2004, SAP TechEd / PRTL351 / 22


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

© SAP AG 2004, SAP TechEd / PRTL351 / 23


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.

© SAP AG 2004, SAP TechEd / PRTL351 / 24


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");
}

© SAP AG 2004, SAP TechEd / PRTL351 / 25


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

© SAP AG 2004, SAP TechEd / PRTL351 / 26


Summary

Dynamic UI Generation means:


„ Dynamic UI Manipulation

„ Dynamic Context Creation

„ Dynamic Action Creation

„ Dynamic Metadata

© SAP AG 2004, SAP TechEd / PRTL351 / 27


Dynamic UI Generation

Debugging of Web Dynpro Applications

Web Dynpro Internationalization

Object Value Selector


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

© SAP AG 2004, SAP TechEd / PRTL351 / 29


Demo

Demo

© SAP AG 2004, SAP TechEd / PRTL351 / 30


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

© SAP AG 2004, SAP TechEd / PRTL351 / 31


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)
© SAP AG 2004, SAP TechEd / PRTL351 / 32
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

© SAP AG 2004, SAP TechEd / PRTL351 / 33


Setting a Breakpoint (2/2)

Set
breakpoint
by double
clicking

Optionally
edit
breakpoint
properties

© SAP AG 2004, SAP TechEd / PRTL351 / 34


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

© SAP AG 2004, SAP TechEd / PRTL351 / 35


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

© SAP AG 2004, SAP TechEd / PRTL351 / 36


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

© SAP AG 2004, SAP TechEd / PRTL351 / 37


Debug Perspective: Overview (2/4)

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

© SAP AG 2004, SAP TechEd / PRTL351 / 38


Debug Perspective: Overview (3/4)

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

© SAP AG 2004, SAP TechEd / PRTL351 / 39


Debug Perspective: Overview (4/4)

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

© SAP AG 2004, SAP TechEd / PRTL351 / 40


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

© SAP AG 2004, SAP TechEd / PRTL351 / 41


Debug Perspective: Execution in Debug View (2/3)

„ 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).

© SAP AG 2004, SAP TechEd / PRTL351 / 42


Debug Perspective: Execution in Debug View (3/3)

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

© SAP AG 2004, SAP TechEd / PRTL351 / 43


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

© SAP AG 2004, SAP TechEd / PRTL351 / 44


Debugging a Web Dynpro application 2

Enter airline ID

© SAP AG 2004, SAP TechEd / PRTL351 / 45


Debugging a Web Dynpro application 3

Select single flight


from results

© SAP AG 2004, SAP TechEd / PRTL351 / 46


Debugging a Web Dynpro application 4

View details on
flight in form view

© SAP AG 2004, SAP TechEd / PRTL351 / 47


Debugging a Web Dynpro application 5

© SAP AG 2004, SAP TechEd / PRTL351 / 48


Debugging a Web Dynpro application 6

© SAP AG 2004, SAP TechEd / PRTL351 / 49


Debugging a Web Dynpro application 7

© SAP AG 2004, SAP TechEd / PRTL351 / 50


Debugging a Web Dynpro application 8

© SAP AG 2004, SAP TechEd / PRTL351 / 51


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

© SAP AG 2004, SAP TechEd / PRTL351 / 52


Debugging an RFC BAPI Call 2

Use single server


connection for
application data
connection

© SAP AG 2004, SAP TechEd / PRTL351 / 53


Debugging an RFC BAPI Call 3

Activate HTTP
debugging before
setting a breakpoint

© SAP AG 2004, SAP TechEd / PRTL351 / 54


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

© SAP AG 2004, SAP TechEd / PRTL351 / 55


Web Dynpro OVS Exercise

Exercise

© SAP AG 2004, SAP TechEd / PRTL351 / 56


Dynamic UI Generation

Web Dynpro Debugging

Web Dynpro Internationalization

Object Value Selector


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>

© SAP AG 2004, SAP TechEd / PRTL351 / 58


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

© SAP AG 2004, SAP TechEd / PRTL351 / 59


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
© SAP AG 2004, SAP TechEd / PRTL351 / 60
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
© SAP AG 2004, SAP TechEd / PRTL351 / 61
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

© SAP AG 2004, SAP TechEd / PRTL351 / 62


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.
© SAP AG 2004, SAP TechEd / PRTL351 / 63
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 .

© SAP AG 2004, SAP TechEd / PRTL351 / 64


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
© SAP AG 2004, SAP TechEd / PRTL351 / 65
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
© SAP AG 2004, SAP TechEd / PRTL351 / 66
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

© SAP AG 2004, SAP TechEd / PRTL351 / 67


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
© SAP AG 2004, SAP TechEd / PRTL351 / 68
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
© SAP AG 2004, SAP TechEd / PRTL351 / 69
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
© SAP AG 2004, SAP TechEd / PRTL351 / 70
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

© SAP AG 2004, SAP TechEd / PRTL351 / 71


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 .

© SAP AG 2004, SAP TechEd / PRTL351 / 72


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
© SAP AG 2004, SAP TechEd / PRTL351 / 73
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>

© SAP AG 2004, SAP TechEd / PRTL351 / 74


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
}

© SAP AG 2004, SAP TechEd / PRTL351 / 75


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}

© SAP AG 2004, SAP TechEd / PRTL351 / 76


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

© SAP AG 2004, SAP TechEd / PRTL351 / 77


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.

© SAP AG 2004, SAP TechEd / PRTL351 / 78


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,

© SAP AG 2004, SAP TechEd / PRTL351 / 79


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.

© SAP AG 2004, SAP TechEd / PRTL351 / 80


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)
© SAP AG 2004, SAP TechEd / PRTL351 / 81
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

© SAP AG 2004, SAP TechEd / PRTL351 / 82


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
© SAP AG 2004, SAP TechEd / PRTL351 / 83
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.

© SAP AG 2004, SAP TechEd / PRTL351 / 84


Web Dynpro Internationalization Exercise

Exercise

© SAP AG 2004, SAP TechEd / PRTL351 / 85


Dynamic UI Generation

Web Dynpro Debugging

Web Dynpro Internationalization

Object Value Selector


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

© SAP AG 2004, SAP TechEd / PRTL351 / 87


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

© SAP AG 2004, SAP TechEd / PRTL351 / 88


Web Dynpro Valuehelp Revisited – Three Types

Object Value Selector


„ 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

© SAP AG 2004, SAP TechEd / PRTL351 / 89


OVS-related Classes and Interfaces

Web Dynpro Progmodel API

WDValueServices
WDValueServices

IWDOVSContextNotificationListener
IWDOVSContextNotificationListener

OVS Custom Controller

<<inner
<<innerclass>>
class>>
OVSDemoListener
OVSDemoListener
to be implemented by application developer

© SAP AG 2004, SAP TechEd / PRTL351 / 90


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
© SAP AG 2004, SAP TechEd / PRTL351 / 91
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.

© SAP AG 2004, SAP TechEd / PRTL351 / 92


The IWDOVSContextNotifiacationListener Interface

IWDOVSContextNotificationListener
IWDOVSContextNotificationListener
--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.
© SAP AG 2004, SAP TechEd / PRTL351 / 93
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()

© SAP AG 2004, SAP TechEd / PRTL351 / 94


Running OVS Sample Application

See running example ...

© SAP AG 2004, SAP TechEd / PRTL351 / 95


OVS Sample Scenario – Searching Flight Data

How does the Object Value Selector work in practice?

© SAP AG 2004, SAP TechEd / PRTL351 / 96


OVS Sample Scenario – Searching Flight Data

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

© SAP AG 2004, SAP TechEd / PRTL351 / 97


OVS Sample Scenario – Searching Flight Data

The OVS PopUp appears and the OVS listener‘s hook


method applyInputValues() is called.

OVS

© SAP AG 2004, SAP TechEd / PRTL351 / 98


OVS Sample Scenario – Searching Flight Data

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

© SAP AG 2004, SAP TechEd / PRTL351 / 99


OVS Sample Scenario – Searching Flight Data

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

© SAP AG 2004, SAP TechEd / PRTL351 / 100


OVS Sample Scenario – Searching Flight Data

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

OVS Custom Controller Context OVS


Root Node

OVSSearchInput

1..1

LH


OVSSearchOuput

0..n

© SAP AG 2004, SAP TechEd / PRTL351 / 101


OVS Sample Scenario – Searching Flight Data

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.

OVS Custom Controller Context OVS


Root Node
execute RFC
OVSSearchInput

1..1

LH


OVSSearchOuput

0..n

© SAP AG 2004, SAP TechEd / PRTL351 / 102


OVS Sample Scenario – Searching Flight Data

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

© SAP AG 2004, SAP TechEd / PRTL351 / 103


OVS Sample Scenario – Searching Flight Data

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.

OVS Custom Context OVS


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

© SAP AG 2004, SAP TechEd / PRTL351 / 104


OVS Sample Scenario – Searching Flight Data

The OVS was successfully applied for populating input fields.

OVS

© SAP AG 2004, SAP TechEd / PRTL351 / 105


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

OVS Custom Context OVS


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

© SAP AG 2004, SAP TechEd / PRTL351 / 106


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.

© SAP AG 2004, SAP TechEd / PRTL351 / 107


Web Dynpro OVS Exercise

Exercise

© SAP AG 2004, SAP TechEd / PRTL351 / 108


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 AG 2004, SAP TechEd / PRTL351 / 109


SAP Developer Network

Look for SAP TechEd ’04 presentations and videos on


the SAP Developer Network.

Coming in December.

http://www.sdn.sap.com/

© SAP AG 2004, SAP TechEd / PRTL351 / 110


Questions?

Q&A

© SAP AG 2004, SAP TechEd / PRTL351 / 111


Feedback
Please complete your session evaluation.

Be courteous — deposit your trash,


and do not take the handouts for the following session.

Thank You !

© SAP AG 2004, SAP TechEd / PRTL351 / 112


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.

© SAP AG 2004, SAP TechEd / PRTL351 / 113