web dynpro for experts

PRTL351: Web Dynpro for Experts

© SAP AG 2004, SAP TechEd / PRTL351 / 2

Contributing Speakers

Marco ErtelNW PM Operations AP, Web Dynpro PM, SAP AG

Bertram GanzNWF Application UI, Web Dynpro Java Runtime, SAP AG

Gaby WennekerNW DT Development Framework, SAP AG

Michael WenzNW DT Development Framework, SAP AG

Web Dynpro Internationalization

Dynamic UI Generation

Debugging of Web Dynpro Applications

Object Value Selector



What is meant by Dynamic UI Generation?

A predefined exit from the static and declarative Web Dynpro programming paradigm.

The application is driven by programming instead of declarations and allows us to adapt to changes at runtime.

Currently we support 4 flavors of dynamic generating UI:

Dynamic UI ManipulationDynamic UI Manipulation

Dynamic Context CreationDynamic Context Creation

Dynamic Action CreationDynamic Action Creation

Dynamic MetadataDynamic Metadata


Example - A Dynamic View

Designtime Runtime



Although we highly recommend the static Web Dynpro approach, there are situations when dynamic generation is required.

Web Dynpro itself needs dynamic generation forHighly configurable applicationsSome portal integration application Framework developersCustomization 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 wdDoModifyViewoModifyView. 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.

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

import com.sap.tc.webdynpro.clientserver.uielib.standard.api.*;...public static void wdDoModifyView wdDoModifyView (

IPrivateDynamicView wdThis,IPrivateDynamicView.IContextNode wdContext,IWDView view, boolean firstTime)

{//@@begin wdDoModifyViewif (firstTime) {IWDInputField input = (IWDInputField)

view.getElement(”someInput”);input.setEnabled(false);

}//@@end

}

Creates an Input Field

Example


wdDoModifyView Input Parameters

public static void wdDoModifyView 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).

Example


IWDView Interface

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


Modifying View UI Elements

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

Example


Creating View UI Elements

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)

Example


Positioning UI Elements - IWDUIElementContainer

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.

Example


Dynamic UI Example

//@@begin wdDoModifyViewif (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

Example


Dynamic Context Creation

In the case you need to create UI input elements dynamically youneed 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.

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

Example


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

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

Example


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


Set the value of the Attribute

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 – Simple Example

Create an Attribute

Create an Input Field

Bind the newly

created attribute to

the input field

Example


Dynamic Context Creation – Accessing Elements

Dynamically create nodes and attributes do not have generated getter and setter methods.

When we create a node or attribute at design time, setter and getter methods are provided to access these elements:

wdContext.currentMyNodeElement();

wdContext.currentContextElement().setResult(result);

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

Nodes:

wdContext.currentContextElement().node() .getChildNode(String, int).getCurrentElement();

Attributes:

wdContext.currentContextElement().getAttributeValue(String)


Dynamic Context Creation – More Difficult Example

The below code shows the creation of a node and an underlying attribute of that node:

IWDNodeInfo node = wdContext.getNodeInfo(). addChild("DynamicNode", null, true, true, false,

false, false, true, null, null, null);node.addAttribute("MyAttr", “ddic:com.sap.dictionary.string");

Now we can bind a input field’s value to this node – binding context values to UI elements should occur in wdDoModifyView():

theInput.bindValue("DynamicNode." + fld.getName());

Once the binding has occurred we need to access the context variable to get the users input – this is generally done in an action event handler:

IWDNode node = wdContext.currentContextElement().node().getChildNode("DynamicNode", 0);IWDNodeElement nodeElement = node.getCurrentElement();String myAttr = (String)nodeElement.getAttributeValue("MyAttr");


Dynamic Actions

IWDAction theAction =wdThis.wdCreateAction(IPrivateDynamicView.WDActionEventHandler.GENERIC_ACTION,"");

theButton.setOnAction(theAction);

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.wdCreateActionwdThis.wdCreateAction(…)(…).

Example


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


Dynamic Actions – Parameter Mapping

Client

onToggle(boolean checked)

Server

public class DynamicView{…public void onActionToggle(boolean isChecked){…}

}

Request

Network

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

DynamicView


Dynamic Actions – Parameter Mapping Example: Step 1

This example uses the CheckBox’sonToggle 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 myCheckBoxand 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

if (firstTime) {// Get a reference to the checkbox UI elementIWDCheckBox cb =

(IWDCheckBox)view.getElement("myCheckBox");// Link the client-side event parameter ‘checked’ to// the server-side action parameter ‘checkBoxState’cb.mappingOfOnToggle().addSourceMapping("checked",

"checkBoxState");}

Example


Dynamic Actions - More Possibilities

IWDAction theAction =

wdThis.wdCreateAction(

IPrivateDynamicView.WDActionEventHandler.GENERIC_ACTION,"");

theButton.setOnAction(theAction);

theButton.mappingOfOnAction().addParameter("Command", "delete");

theActionContainer.addChild(theButton);

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


Summary

Dynamic UI Generation means:Dynamic UI Generation means:

Dynamic UI ManipulationDynamic UI Manipulation

Dynamic Context CreationDynamic Context Creation

Dynamic Action CreationDynamic Action Creation

Dynamic MetadataDynamic Metadata



Debugging of Web Dynpro Applications



Agenda

Debugging with SAP NetWeaver Developer Studio

General Overview How to start debuggingHow to use the debug viewHow to inspect data and status while debugging

Web Dynpro specific aspectsInspecting Web Dynpro context status

How to debug RFC BAPI calls

Hands-on: Web Dynpro debugging Import Web Dynpro projectSearch for errors by debugging the applicationSet 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’

NotesYou 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 servernode to debugmode

Clickrefresh to

update view

Enable debugging of processto turn debug mode „ON“

Reserve the process for yourdebugging 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 breakpointby double clicking

Optionallyedit

breakpointproperties


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

1. Start debugging

2. Createdebugging

configuration

3. Specifyproject and application

4. Start debugsession


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 toAdd new exception breakpoints

Delete existing breakpoints

Change the properties of existing breakpoints



Expressions viewUsed to evaluate results of expressions

Hierarchical display of structureContent area (based on toString() method)“Inspect” commandWatch expressions

Display viewUsed to evaluate results of expressions

String-only representation of result (based on toString() method)“Display” command

Used to evaluate own expressionsSimply type expressionUse code completion“Inspect” and “Display” possible



The debugging perspective allows to manage and run the debugging session

4. Start debugsession

Debug view: stacktraces foreach suspendedthread

Variables view: info on variables currently in scope

Editor view: currently executedcode

Breakpoints view:list of breakpoints

Expressions view:tree based expressionevaluation

Display view:text based expressionevaluation


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 seewhat the method does internally

Step over [F6]This command steps over the next statement

Execution continues with the next statement in the same methodor (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 returnor how it will change your variables.

Step return [F7] Will finish current method and return to the calling method



SuspendWill pause execution and allows to view state of variables

Resume [F8]This command resumes a suspended thread

TerminateWill 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

Resume

Suspend

Terminate

Step into

Step over

Step return

Step withfilters


Debugging a Web Dynpro Application

Sample Web Dynpro application “Search for flights and view flight details”

The application allows user tosearch the backend for flights by airline ID

select a specific flight to view its details in a form

The application contains two errorsStarting 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 flightfrom results



View details on flight in form view


Debugging an RFC BAPI Call 1

Web Dynpro content administratorRFC application data connection must be defined to specific

application server (no load balancing possible)

Maintain JCO destination WD_MODELDATA_DEST

Web Application server for ABAPLog on to same application server under the user name specified in

the RFC application connection

Enable HTTP debugging for this userSE80 -> Utilities -> Settings -> Tab Editor -> Tab HTTP Debugging

Set HTTP breakpoint(s)

IDEStart Web Dynpro application from Web Dynpro explorer or run configuration

Server does not need to be in debug mode



Use single serverconnection for

application dataconnection



Activate HTTP debugging before

setting a breakpoint


Summary

Debugging Overview

Activate debugging mode for server node

Set breakpoints

Specify debugging configuration

Use debugging perspective (debug view, variables view,…)

Debugging Web Dynpro Application

Inspect status of Web Dynpro context

Debugging RFC BAPI calls


Web Dynpro OVS Exercise

Exercise




Web Dynpro Debugging


Learning Objectives – Web Dynpro I18N

As a result of this workshop section, you will be able to:

Internationalize Web Dynpro applications

Define and access locale-specific texts in the message pool

Define locale-specific texts in simple data types

Create and edit locale-specific XLF-Files

Utilize API for accessing texts: IWDTextAccessorIWDTextAccessor-API, IMessageIMessage<Component><Component>-API


Web Dynpro Internationalization Concept

Web Dynpro Internationalization is based on externalizingexternalizing StringsStringsfrom …

controller classes, metadata-files, dictionary simple types

over locale-dependant XLFXLF--filesfiles (XML Localization InterchangeFile Format, designtime) into generated Java Java propertyproperty--filesfiles(runtime).

XLF-Files are only relevant for the translation process and can beedited at designtime using an S2XS2X--editoreditor.

The Web Dynpro runtime loads property resource bundlesdepending on a determined session locale.

An application developer can access locale-dependant texts viaIWDTextAccessorIWDTextAccessor-API: wdComponentAPI.getTextAccessor()

IMessageIMessage<Component><Component>: Message texts of type error, warning, standard


Externalizing Strings inside a Web Dynpro Project

LocalDictionary

Web DynproComponent A

Web DynproComponent B

Java PropertyResource Bundles

different locales

Project EAR File

CreateArchive

DeployableProject

ExternalizeStrings

Web Dynpro Tools


Externalized Strings

Property Files

Externalizing Strings inside a Web Dynpro Project

Strings are externalizedexternalized from a Web Dynpro component into XLFXLF--filesfiles for translationpurposes. Deployable project EAR-files containlanguage-spefic texts in propertyproperty filesfiles.

Web DynproComponent

DeployableProject

Project EAR File

CreateArchive

xlffilesxlf

filesxlf

files

different locales

en de

done by Web Dynpro Tools

Added by translationprocess

xlffilesxlf

filesen

xlffilesxlf

filesde


XLF-Files and S2X-Editor

XLF-files without _<_<localelocale>> are initially created whendefining views, windows, (text) messages and simple datatypes.

Texts inside these initial XLF-files are written by the applicationdeveloper.

The project language is specified in these initial xlf-files so that thetranslater knows the source language.

XLF-files can be edited using the S2XS2X--DocumentDocument--EditorEditor of theSAP NetWeaver Developer Studio.

xlffile


About XLIFF and SAP Supported XLIFF (S2X)

XLIFF (XML XLIFF (XML LocalisationLocalisation InterchangeInterchange File FormatFile Format) is a non-proprietary format for extracted text.

SAP SAP SupportedSupported XLIFF (S2X)XLIFF (S2X) is an XLIFF-based interface formatthat 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 _<_<localelocale>>) 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 NetWeaverDeveloper Studio.

Please note that this document is subject to change and may be changed by SAP atany time without notice. The document is not intended to be binding upon SAP to anyparticular course of business, product strategy and/or development.


Translation of XLF-Files

The translation workflowreturns locale-dependant XLF-files for every initial XLF-file. These files end with _<_<localelocale>>before the file-extension xlfxlf .

Web Dynpro Component

xlf-Filesbefore

translation

Devleoper xlf-Filesafter

translation

Web Dynpro ComponentAuthor


Web Dynpro Tools

transfer textsinto property

files

XLF files inside a Web Dynpro Project

Project EAR File

Java resource bundles

different locales

createarchive

deployableproject

xlffile

XLF-Files insde Web Dynpro project

Dictio-nary

Compo-nent

xlffile


Local Dictionary

Locale-dependant texts inside a Local Dictionary

All locale-dependant texts of a simple type contained in the localJava Dictionary are stored in a corresponding XLF-File:

ViewSimple Data Type

xlffile

Simple Data Type

Displaytexts of enumerations

Field label

Column header

Tooltip

<Simple Type <Simple Type Name>.dtsimpletype_xlfName>.dtsimpletype_xlfxlffile

<Simple Type <Simple Type Name>.dtsimpletypeName>.dtsimpletype_en_en.xlf.xlf<Simple Type <Simple Type Name>.dtsimpletypeName>.dtsimpletype_de_de.xlf.xlf


Locale-dependant texts inside a Web Dynpro Component

Inside a Web Dynpro component locale-dependant texts occur in …

Views

View Controllers

Windows

Messages (Errors, Warnings, Standard) and Texts

Web Dynpro Component

View WindowViewView Window

View Controller

Messagesand Texts

xlffile


Locale-dependant texts inside a View Layout

All translatable UI-element properties representingtext information

texttexttooltiptooltipimageAltimageAlt

View

<<ViewView Name>.wdview.xlfName>.wdview.xlfxlffile

<<ViewView Name>.wdviewName>.wdview_en_en.xlf.xlf<<ViewView Name>.wdviewName>.wdview_de_de.xlf.xlf

XLF-files

S2X Editor

View Layout


Locale-dependant texts inside a View Controller

TextText property of ActionsActions in View Controllers View Controller

<<ViewView Name>.wdcontroller.xlfName>.wdcontroller.xlfxlffile

<<ViewView Name>.wdcontrollerName>.wdcontroller_en_en.xlf.xlf<<ViewView Name>.wdcontrollerName>.wdcontroller_de_de.xlf.xlf

Action Definition

S2X Editor

XLF-files


Locale-dependant texts inside a Window

Title text displayed as window title Window

<<ViewView Name>.wdwindow.xlfName>.wdwindow.xlfxlffile

<<ViewView Name>.wdwindowName>.wdwindow_en_en.xlf.xlf<<ViewView Name>.wdwindowName>.wdwindow_de_de.xlf.xlf

Window Definition

S2X Editor

XLF-files


Message Pool inside a Web Dynpro Component

Message texts of type standard, warning and error to be displayed with the Web Dynpro Message manager(IWDMessageMangerIWDMessageManger-API)

Additional texts to be accessed in controllers via theIWDTextAccessorIWDTextAccessor-API

Messagesand Texts

<<ComponentComponent Name>MessagePool.wdmessagepool.xlfName>MessagePool.wdmessagepool.xlfxlffile

<<ComponentComponent Name>MessagePool.wdmessagepoolName>MessagePool.wdmessagepool_en_en.xlf.xlf<<ComponentComponent Name>MessagePool.wdmessagepoolName>MessagePool.wdmessagepool_de_de.xlf.xlf

XLF-files

Message Editor


Web Dynpro Runtime

Deployed Project

Accessing locale-dependant texts via Interfaces

Locale-dependant texts stored in property resource bundles can beaccessed from within a Web Dynpro controller via the interfacesIMessage<ComponentIMessage<Component>>, IWDTextAccessorIWDTextAccessor and ISimpleTypeISimpleType .

Web DynproController

IMessage-<Component>

IWDText-Accessor

ISimpleType

PropertyFiles forSession Locale


Accessing Message Texts via IMessage<Comp. Name>

All Messages of type standard, warning or error are added as Constants of type IWDMessageIWDMessage to the generated Interface IMessage<CompoIMessage<Compo-- nentnent Name>.javaName>.java.

Every Web Dynpro component has its own message interfaceIMessage<ComponentIMessage<Component Name>.javaName>.java.

Messages of type text are accessible via the IWDTextAccessorIWDTextAccessor-API.



//@@begin javadoc:onActionRent(ServerEvent)/** Declared validating event handler. *///@@endpublic void onActionRent(

com.sap.tc.webdynpro.progmodel.api.IWDCustomEvent wdEvent ){//@@begin onActionRent(ServerEvent)String vehicleType =

wdContext.currentContextElement().getVehicleType(); if (vehicleType == null) {

IWDMessageManagerIWDMessageManager msgmsg = = wdComponentAPI.getMessageManagerwdComponentAPI.getMessageManager();();msg.reportMessagemsg.reportMessage( ( IMessageLanguagesComp.NO_CARIMessageLanguagesComp.NO_CAR, , nullnull, , falsefalse););

} else {wdThis.wdFirePlugOutRent(vehicleType);

}//@@end

}

Accessing Message Texts via IMessage<Comp. Name>



Defining Message Texts containing Placeholders

Message text patterns containing placeholders can be defined in themessage pool.

The message text patterns are specified by thejava.text.MessageFormatjava.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_INPUTIMessageSimpleErrors.MISSING_INPUT,newnew ObjectObject[] { [] { fieldLabelfieldLabel }}, true);

//@@end}


Defining Message Texts containing Placeholders

Restriction when defining message patterns in Web Dynpro

In Web Dynpro message text patterns every message parameter istreated as of type string.

Conversion of parameters from type datedate and timetime are convertedinto a stringstring accoring to the data dictionary formatformat method.

The recommended procedure is to convert all context attributes thatare to be used as parameters into a string by calling the contextmethod IWDNodeElementIWDNodeElement

..getAttributeAsTextgetAttributeAsText((""<<attributeattribute namename>>")")

Do not use element formats in placeholders. Only use placeholderscontaining integer arguments.

On {0,date} at {0,time} the number {1} is again {2,number,integer}

On {0} at {1} On {0} at {1} thethe numbernumber {2} {2} isis againagain {3}{3}


Accessing Texts via IWDTextAccessor-API

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 accessedwith the IWDTextAccessorIWDTextAccessor-API associated to the IWDComponentIWDComponentinterface:

IWDTextAccessorIWDTextAccessor textAcctextAcc = = wdComponentAPI.getTextAccessorwdComponentAPI.getTextAccessor()()

IWDTextAccessor


//@@begin javadoc:onPlugInResult(ServerEvent)/** Declared validating event handler. *///@@endpublic void onPlugInResult(

com.sap.tc.webdynpro.progmodel.api.IWDCustomEvent wdEvent, java.lang.String vehicleType ) {//@@begin onPlugInResult(ServerEvent)

IWDTextAccessorIWDTextAccessor textAccessortextAccessor = = wdComponentAPI.getTextAccessorwdComponentAPI.getTextAccessor();();

String text = String text = textAccessor.getText("text_EtextAccessor.getText("text_E");");//@@end

}

Accessing Message Texts IWDTextAccessor-API

In contrast to messages of type standard, warning and error messagesof type texttext are not addressable via generated constants.

Instead the message keys have to be passed to the IWDTextAccessor-API as StringString values.


Web Dynpro Project Language

When you create a Web Dynpro Project or a Web Dynpro Development Component, you are asked to specify a mastermaster or project languageproject language.

The project language is used for the translation process only sothat the translator knows about the developer’s language (sourcelanguage).

The project language is not read by the WebDynpro Runtime when determining the session locale of a requested Web Dynproapplication,


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

CustomResource

Bundle(defined byApplication Developer)

LocalDictionary

different locales

ExternalizeStrings

Web DynproComponent A

Web DynproComponent B

BuildWeb Dynpro

Tools

Custom propertyresource bundles containing

key-value-pairs can be read using the Web Dynpro Sservice WDResourceHandlerWDResourceHandler.

Project EAR File

DeployableProject

Deprecated

Only needed in olderversions where no textscan be added to themessage pool


SAP Web Application Server

Reading Property Files at Runtime

Web Dynpro UI

Web Dynpro Container

Web DynproRuntime

EAR

start application

deployedproject

send UI containinglanguagedependant texts

determine sessionlocale

readpropertyfile

en

en


Determine Language Specific Text Information at Runtime

The Web Dynpro Runtime determines the sessionsession localelocale (WD locale) based on the following fallback-mechanism:

ruru-----Anonymous

itruit----Anonymous

frruitfr---Anonymous

enruitfren--Anonymous

deruitfrende-Authenticated

ptruitfrende/-ptDeveloper

WD Locale

VM Locale

System Locale

Applic. Locale

Browser Locale

User Locale

URL Locale*

User

* URL parameter sap-locale

The class java.lang.ResourceBundle loads property files for thecalculated WD session locale. If no resource bundle for this localeexists the default resource bundle <<name>.propertiesname>.properties is loaded.


Summary – Web Dynpro Internationalzation

Web Dynpro Internationlization is based on externalizing externalizing textstexts from controller code and metadata files into property resource bundles.

For translation purposes XLFXLF--FilesFiles are additionally created.

Accessing locale-dependant texts from inside Web Dnypro controllers is based on the interfaces IMessageIMessage<Component Name><Component Name> and IWDTextAccessorIWDTextAccessor..

Web Dynpro determines the session localesession locale of a startetWeb Dynpro application based on a predefined fall-back mechanism.


Web Dynpro Internationalization Exercise

Exercise




Web Dynpro Debugging


Learning Objectives – Object Value Selector

As a result of this workshop section, you will be able to:

Utilize the Web Dynpro Object Value SelectorObject Value Selector for searching objects in your Web Dynpro UI

Apply the Web Dynpro service class WDValueServicesWDValueServicesImplement the IWDOVSContextNorificationListenerIWDOVSContextNorificationListenerinterface

Define an OVS helper contextOVS helper context in a OVS custom controller

Name the given requirementsrequirements and restrictionsrestrictions of the generic OVS valuehelp service in Web Dynpro


Web Dynpro Valuehelp Revisited – Three Types

Based on a DropDownByKeyDropDownByKey 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

Simple Value Selector

Extended Value SelectorBased on an InputFieldInputField UI elementbound to a context value attribute of type Simple Type containing a valueset

Both types of valuehelp can be based on dynamically modified datatypes

Supports on-demand valuesets


Web Dynpro Valuehelp Revisited – Three Types

Advanced Search Functionality (Searching Structures)

Provides a generic user interface (OVS popup)

Based on a declarative/programmaticc approach:

WDValueServicesIWDOVSContexteNotificationListenerImplementing OVS Listener classHelper Context (Input/Output nodes) in OVS customer controller



OVS Custom Controller

Web Dynpro Progmodel API

WDValueServicesWDValueServices

IWDOVSContextNotificationListenerIWDOVSContextNotificationListener

<<inner class>>

OVSDemoListener<<inner class>>

OVSDemoListener

OVS-related Classes and Interfaces

to be implemented by application developer


OVS-related Contexts

View ContextRoot Node

FlightAirlineId

DepCity

0..1

ArrCity

…

ApplicationContext

Context to be filledby OVS valuehelp

RootNode

1..1

Input

OVS Custom Context

…0..n

Output

Bonn

Lufthansa

Airline

OVS Context in OVS CustomController

Context needed for thegeneric OVS valuehelp UI

OVS UI needs dictionary metadata (e.g. field labels and column headers)

Arrival

…

Context attributeshave to be properlytyped for thegeneric OVS UI

Dictionary


Web Dynpro Progmodel provides WDValueServices

WDValueServices-addOVSExtension(

IWDAttributeInfo[] startupAttributes,IWDNode queryInputNode, // lead selection pointing to elementIWDNode queryResultNode, // caridinality 0..nIWDOVSContextNotificationListener queryListener…)

WDValueServices-addOVSExtension(

IWDAttributeInfo[] startupAttributes,IWDNode queryInputNode, // lead selection pointing to elementIWDNode queryResultNode, // caridinality 0..nIWDOVSContextNotificationListener queryListener…)

Provides context attributes (startupAttributes) with OVS functionality.

Uses separate context nodes for storing search query inputvalues (queryInputNode, lead selection points to node element) and search query results (queryOutputNode, 0..n).

Uses a query listener class (queryListener) implementingIWDOVSContextNotificationListener for performing the searchquery and copying context data between OVS and the application.


The IWDOVSContextNotifiacationListener Interface

The OVS listener‘s hook method‘s can be seen as event handlers called at three points of time:

IWDOVSContextNotificationListener- appyInputValues( IWDNodeElement ovsRequestingElement,

IWDNodeElement queryInputNodeElement)- onQuery( IWDNodeElement queryInput, IWDNode queryOutput)- applyResult( IWDNodeElement ovsRequestingElement,

IWDNodeElement queryOutputElement)

IWDOVSContextNotificationListener- appyInputValues( IWDNodeElement ovsRequestingElement,

IWDNodeElement queryInputNodeElement)- onQuery( IWDNodeElement queryInput, IWDNode queryOutput)- applyResult( IWDNodeElement ovsRequestingElement,

IWDNodeElement queryOutputElement)

OVSListenerOVSListenerapplyInputValues(): when the OVS isrequested for a field. Copy application contextto 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 searchresult table. Copy selected OVS query context (output) intothe application context.


OVS Sequence Diagram

Web Dynpro Runtime View

ControllerOVS Listener

create OVS Listener

Request OVS call OVS-Listener hook applyInputValues()

Specify Searchand Press Go

call OVS Listener hook onQuery()

Select Resultcall OVS Listener hook applyResult()

add OVS Extensionto context attributes

Service Request

OVS Action

OVS Action


Running OVS Sample Application

See See runningrunning exampleexample ... ...


OVS Sample Scenario – Searching Flight Data

How does the Object Value Selector work in practice?



OVS

OVS can be triggered from UI-Elements which are bound to startup context attributes (programmatically specified).

View ContextRoot Node

FlightAirlineIdDepCity

0..1

ArrCity

…

data binding



The OVS PopUp appears and the OVS listener‘s hookmethod applyInputValuesapplyInputValues()() is called.

OVS



The OVS listener hook applyInputValuesapplyInputValues()() gets a referenceto the context node element, the startup context attributebelongs to for initializing query input parameters.

Root Node

0..1

Flight

Node Element Collection

View Context

…

applicationNodeElementdata binding

OVS

LH



The search query values are stored in a OVS helper contextwith two nodes (inside a special OVS custom controller).One 1..1 node for the query input (here OVSSearchInput) …

Root Node

1..1

OVSSearchInput

OVS Custom Controller Context

…

0..n

OVSSearchOuput

LH

OVS HelperContext

OVS



Root Node

1..1

OVSSearchInput


…

0..n

OVSSearchOuput

LH

OVS

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



Root Node

1..1

OVSSearchInput


…

0..n

OVSSearchOuput

LH

The user clicks on Go and the OVS listener‘s hookonQueryonQuery()() is called. Then the result list is retrieved usingthe OVS helper context‘s input node element OVSSearchInput.

OVS

execute RFC



Root Node

1..1

OVSSearchInput

OVS Custom Context

…

0..n

OVSSearchOutput

Bonn

LH LH

New York

LH

London

1n

0

LH

OVS

In onQueryonQuery()() the result list is stored in the OVS helpercontext‘s output node.

…

……



Root Node

1..1

OVSSearchInput

OVS Custom Context

…

0..n

OVSSearchOutput

Bonn

LH LH

New York

LH

London

1n

0

LH

OVS

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

Root Node

0..1

Flight

View Context

…

LH

FRA

New York

……

…



OVS

The OVS was successfully applied for populating input fields.


Direct Usage of Model Nodes as OVS Input/Output Nodes

Root Node

0..n

Bapi_Flight_Getlist_Input

OVS Custom Context

0..nFlight_List

Bonn

LH

AirlineId

OVS

Best Solution: Use OVS-adapted RFCs with input modelclasses containing all needed query properties and outputmodel classes containing all needed result properties (no independent helper input/ouput nodes required).

MaxRows

Output

OVS Input Node

OVS Output Node0..1


Current OVS restrictions/requirements

OVS does not support nested structures yet: the OVS queryinput and output attributes (inside the OVS Helper Context) mustbe 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 inputproperties in one context element is needed.

The generic OVS UI needs dictionary metadata (column headertexts, field labels). Consequently the declared input and outputcontext attributes must be adequately typed using a local orlogical 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 Workshops/Lectures at SAP TechEd 2004PRTL151, 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

Related SAP Education Training Opportunitieshttp://www.sap.com/education/


SAP Developer Network

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

Coming in December.

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


Q&A

Questions?


Please complete your session evaluation.

Be courteous — deposit your trash, and do not take the handouts for the following session.

Feedback

Thank You !


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.

Copyright 2004 SAP AG. All Rights Reserved

web dynpro for experts

Documents