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
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
Example - A Dynamic View

Designtime Runtime
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
Dynamic UI modification & creation

All view controllers implement the method wdDoModifyView. This is the only location where oModifyView 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, IPrivateDynamicView.IContextNode wdContext, Creates an Input Field 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) { //@@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).
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 views 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 its 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 //@@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
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");
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()
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 controllers contexts. addAttribute( ) Mapped Nodes nodes that are mapped back to the context of another controller. addMappedChild( ) Nodes nodes that are not mapped to another controllers 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", "ddic:com.sap.dictionary.string"); wdContext.currentContextElement(). setAttributeValue("AttributeA", null); inputfield.bindValue("AttributeA");
Bind the newly created attribute to the input field
Set the value of the Attribute
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 fields 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

Client
DynamicView
The diagram shown here visualizes the concept of parameter mapping. 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. This onToggle event is assigned to the onActionToggle() event handler, and its parameter isChecked has been mapped to the checked parameter of onToggle()
onToggle(boolean checked)
Server
public class DynamicView { public void onActionToggle(boolean isChecked) { } }
Request
Network
Dynamic Actions Parameter Mapping Example: Step 1

This example uses the CheckBoxs 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 Context Creation 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 node to debug mode
Enable debugging of process to turn debug mode ON Click refresh to update 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)

Specify appropriate debugging configuration and start debugging
3. Specify project and application
1. Start debugging
2. Create debugging configuration
4. Start debug session
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 allows to manage and run the debugging session
Debug view: stacktraces for each suspended thread
Variables view: info on variables currently in scope
Display view: text based expression evaluation Editor view: currently executed code
Breakpoints view: list of breakpoints

Expressions view: tree based expression evaluation
4. Start debug session
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).

There are various different options for further processing
Step with filters Step into Terminate Suspend Resume Step return Step over
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 SE80 -> Utilities -> Settings -> Tab Editor -> Tab HTTP Debugging Set HTTP breakpoint(s)
IDE
Start Web 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
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>
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: wdComponentAPI.getTextAccessor() IWDTextAccessor IMessage<Component>: Message texts of type error, warning, <Component> standard
Externalizing Strings inside a Web Dynpro Project

different locales
Web Dynpro Component A

Externalize Strings
Create Archive Project EAR File
Web Dynpro Component B

Web Dynpro Tools Local Dictionary Java Property Resource Bundles
Deployable Project
Externalizing Strings inside a Web Dynpro Project

Web Dynpro Component Strings are externalized from a Web Dynpro component into XLF-files for translation purposes. Deployable project EAR-files contain language-spefic texts in property files. files Externalized Strings xlf xlf xlf files files files Property Files xlf xlf files en files xlf xlf files de files done by Web Dynpro Tools
Create Archive Project EAR File Deployable Project
en
de
Added by translation process

different locales
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) is a nonFormat proprietary format for extracted text. SAP Supported XLIFF (S2X) is an XLIFF-based interface format that is tailored to SAPs 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
Devleoper
xlf-Files before translation
Web Dynpro Component Author xlf-Files after translation
The translation workflow returns locale-dependant XLFfiles for every initial XLF-file. These files end with _<locale> before the file-extension xlf .
XLF files inside a Web Dynpro Project

Dictionary
different locales Web Dynpro Tools transfer texts into property files
xlf file
Component
create archive
Project EAR File deployable project
xlf file
XLF-Files insde Web Dynpro project

Java resource bundles
Locale-dependant texts inside a Local Dictionary

Simple Data Type xlf file Simple View Data Type Local Dictionary Displaytexts of enumerations Field label Column header Tooltip
All locale-dependant texts of a simple type contained in the local Java Dictionary are stored in a corresponding XLF-File: xlf file <Simple Type Name>.dtsimpletype_de.xlf <Simple Type Name>.dtsimpletype_en.xlf <Simple Type Name>.dtsimpletype_xlf
Locale-dependant texts inside a Web Dynpro Component
xlf file View View View View Controller Window Window Messages 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 text information View Layout text tooltip imageAlt S2X Editor
View
XLF-files xlf file <View Name>.wdview_de.xlf <View Name>.wdview_en.xlf <View Name>.wdview.xlf
Locale-dependant texts inside a View Controller

View Controller Text property of Actions in View Controllers Action Definition
S2X Editor
XLF-files xlf file <View Name>.wdcontroller_de.xlf <View Name>.wdcontroller_en.xlf <View Name>.wdcontroller.xlf
Locale-dependant texts inside a Window

Title text displayed as window title Window Definition
Window
S2X Editor
XLF-files xlf file <View Name>.wdwindow_de.xlf <View Name>.wdwindow_en.xlf <View Name>.wdwindow.xlf
Message Pool inside a Web Dynpro Component

Messages and Texts Message texts of type standard, warning and error to 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 xlf file

<Component Name>MessagePool.wdmessagepool_de.xlf <Component Name>MessagePool.wdmessagepool_en.xlf <Component Name>MessagePool.wdmessagepool.xlf
Accessing locale-dependant texts via Interfaces
IMessage<Component> Web Dynpro Controller IWDTextAccessor 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 .
Property Files for Session Locale
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 associated to the IWDComponent IWDTextAccessor 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 IWDTextAccessorAPI 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 developers 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
Web Dynpro Component A Deprecated Web Dynpro Only needed in older Component B versions where no texts Web Dynpro can be added to the Tools message pool
Local Dictionary Externalize Strings
different locales
Build
Project EAR File Deployable Project
Custom Resource Bundle

(defined by Application Developer)
Custom property resource bundles containing key-value-pairs can be read using the Web Dynpro Sservice WDResourceHandler. WDResourceHandler
Reading Property Files at Runtime

SAP Web Application Server determine session locale
en
start application
Web Dynpro Runtime
read property file EAR deployed project
en
send UI containing language dependant texts
Web Dynpro UI
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:
User Developer Authenticated Anonymous Anonymous Anonymous Anonymous URL User Browser Applic. System VM Locale* Locale Locale Locale Locale Locale pt de/de en en en fr fr fr fr it it it it it ru ru ru ru ru ru WD Locale
pt de en fr it 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
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
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
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
OVS-related Classes and Interfaces

Web Dynpro Progmodel API WDValueServices WDValueServices
IWDOVSContextNotificationListener IWDOVSContextNotificationListener
OVS Custom Controller OVSDemoListener OVSDemoListener

to be implemented by application developer
<<inner class>> <<inner class>>
OVS-related Contexts
Application Context
View Context
Root Node 0..1 Flight AirlineId DepCity ArrCity 0..n
OVS Context in OVS Custom Controller

Root Node 1..1
OVS Custom Context

Dictionary
Input
Airline
OVS UI needs dictionary metadata (e.g. field labels and column headers) Context attributes have to be properly typed for the generic OVS UI
Output
Lufthansa
Arrival
Bonn
Context to be filled by OVS valuehelp

Context needed for the generic OVS valuehelp UI
Web Dynpro Progmodel provides WDValueServices

WDValueServices WDValueServices
-addOVSExtension( -addOVSExtension( IWDAttributeInfo[] startupAttributes, IWDAttributeInfo[] startupAttributes, IWDNode queryInputNode, // lead selection pointing to element IWDNode queryInputNode, // lead selection pointing to element IWDNode queryResultNode, // caridinality 0..n IWDNode queryResultNode, // caridinality 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

IWDOVSContextNotificationListener IWDOVSContextNotificationListener
--appyInputValues( IWDNodeElement ovsRequestingElement, appyInputValues( IWDNodeElement ovsRequestingElement, IWDNodeElement queryInputNodeElement) IWDNodeElement queryInputNodeElement) - -onQuery( IWDNodeElement queryInput, IWDNode queryOutput) onQuery( IWDNodeElement queryInput, IWDNode queryOutput) - -applyResult( IWDNodeElement ovsRequestingElement, applyResult( IWDNodeElement ovsRequestingElement, IWDNodeElement queryOutputElement) IWDNodeElement queryOutputElement)
The OVS listeners hook methods can be seen as event handlers called at three points of time:
applyInputValues(): when the OVS is

requested for a field. Copy application context to the OVS search query context (input).
OVSListener OVSListener
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 Controller
OVS Listener
add OVS Extension to context attributes Request OVS Service Request Specify Search and Press Go OVS Action call OVS-Listener hook applyInputValues()
create OVS Listener
call OVS Listener hook onQuery()
Select Result
OVS Action
call OVS Listener hook 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 DepCity ArrCity
OVS

The OVS PopUp appears and the OVS listeners 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
data binding
OVS
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
Root Node OVSSearchInput 1..1
LH
OVS
OVS Helper Context
OVSSearchOuput 0..n

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

LH
OVS
OVSSearchOuput 0..n

The user clicks on Go and the OVS listeners hook onQuery() is called. Then the result list is retrieved using the OVS helper contexts input node element OVSSearchInput.
LH
OVS
execute RFC
OVSSearchOuput 0..n

In onQuery() the result list is stored in the OVS helper contexts output node.
OVS Custom Context
LH
OVS
OVSSearchOutput
0
0..n
1 LH LH
n 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.
OVS Custom Context
LH
OVS
View Context
Root Node Flight 0..1
LH FRA New York
OVSSearchOutput
0
0..n
1 LH LH
n 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).
OVS Custom Context

Root Node Bapi_Flight_Getlist_Input 0..n
AirlineId MaxRows
OVS
OVS Input Node
0..1
Output Flight_List
LH Bonn
0..n
OVS Output Node
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 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 Experts

SAP AG 2004, SAP TechEd / PRTL351 / 2

What is meant by Dynamic UI Generation?

SAP AG 2004, SAP TechEd / PRTL351 / 5

Example - A Dynamic View

SAP AG 2004, SAP TechEd / PRTL351 / 6

SAP AG 2004, SAP TechEd / PRTL351 / 7

Dynamic UI modification & creation

wdDoModifyView Input Parameters

SAP AG 2004, SAP TechEd / PRTL351 / 9

IWDView allows the programmer to access, modify and create UI elements.

SAP AG 2004, SAP TechEd / PRTL351 / 10

Modifying View UI Elements

IWDInputField input = (IWDInputField)view.getElement("someInput"); input.setEnabled(false);

Creating View UI Elements

IWDInputField inputfield = (IWDInputField) view.createElement(IWDInputField.class, "InputField1");

Positioning UI Elements - IWDUIElementContainer

Dynamic Context Creation

Dynamic Context Creation - IWDNodeInfo

IWDNodeInfo rootNode = wdContext.getNodeInfo(); rootNode.addAttribute("MyAttribute", "ddic:com.sap.dictionary.string");

Dynamic Context Creation Types

SAP AG 2004, SAP TechEd / PRTL351 / 17

Dynamic Context Creation Simple Example

IWDInputField inputfield = (IWDInputField)view. createElement(IWDInputField.class, "InputField1");

Set the value of the Attribute

Dynamic Context Creation Accessing Elements

SAP AG 2004, SAP TechEd / PRTL351 / 19

Dynamic Context Creation More Difficult Example

SAP AG 2004, SAP TechEd / PRTL351 / 20

IWDAction theAction = wdThis.wdCreateAction(IPrivateDynamicView.WDActionEventHandler.GE NERIC_ACTION,""); theButton.setOnAction(theAction);

SAP AG 2004, SAP TechEd / PRTL351 / 21

Dynamic Actions Parameter Mapping Basics

SAP AG 2004, SAP TechEd / PRTL351 / 22

Dynamic Actions Parameter Mapping

SAP AG 2004, SAP TechEd / PRTL351 / 23

Dynamic Actions Parameter Mapping Example: Step 1

SAP AG 2004, SAP TechEd / PRTL351 / 24

SAP AG 2004, SAP TechEd / PRTL351 / 25

Dynamic Actions - More Possibilities

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

Dynamic UI Generation means:

SAP AG 2004, SAP TechEd / PRTL351 / 27

Debugging with SAP NetWeaver Developer Studio

Web Dynpro specific aspects

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

SAP AG 2004, SAP TechEd / PRTL351 / 30

Activate Debugging (1/2)

Activate debugging for the server process of the J2EE Engine

SAP AG 2004, SAP TechEd / PRTL351 / 31

Activate Debugging (2/2)

Setting a Breakpoint (1/2)

You can set breakpoints in editors

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)

SAP NetWeaver Studio automatically switches to debug perspective

SAP AG 2004, SAP TechEd / PRTL351 / 35

Specifying a Debugging Configuration (2/2)