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 .

The application is driven by programming instead of declarations and allows us to adapt to changes at runtime.Dynamic UI Generation What is meant by Dynamic UI Generation? A predefined exit from the static and declarative Web Dynpro programming paradigm. 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 . SAP TechEd / PRTL351 / 6 .A Dynamic View Designtime Runtime © SAP AG 2004.

that it nicely cooperates with the static Web Dynpro approach.Dynamic UI Generation Although we highly recommend the static Web Dynpro approach. It is possible to mix static declarations with dynamic enhancements © SAP AG 2004. 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. there are situations when dynamic generation is required. SAP TechEd / PRTL351 / 7 .

Dynamic UI modification & creation All view controllers implement the method wdDoModifyView. IPrivateDynamicView.getElement(”someInput”).sap. For all visible views.uielib. wdDoModifyView is called by the Web Dynpro runtime environment for modification of the view layout. .tc.IContextNode wdContext. input. this takes place at a time immediately before the closing response rendering..setEnabled(false). boolean firstTime) { //@@begin wdDoModifyView if (firstTime) { IWDInputField input = (IWDInputField) view.webdynpro.api. Example import com. Creates an Input Field IWDView view.*..clientserver. SAP TechEd / PRTL351 / 8 . 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. public static void wdDoModifyView ( IPrivateDynamicView wdThis. } //@@end } © SAP AG 2004.standard.

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.IContextNode wdContext. SAP TechEd / PRTL351 / 9 . © SAP AG 2004. wdThis: Reference to the IPrivate interface of the view controller . IPrivateDynamicView.wdDoModifyView Input Parameters Example public static void wdDoModifyView ( IPrivateDynamicView wdThis. view: Reference to the layout controller of the view. wdContext: Reference to the root context node of the view controller (for the current context). 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. IWDView view.

© SAP AG 2004. SAP TechEd / PRTL351 / 10 . modify and create UI elements.IWDView Interface IWDView allows the programmer to access.

setEnabled(false). 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.getElement("someInput"). © SAP AG 2004. input. SAP TechEd / PRTL351 / 11 . Once you have obtained a reference to a UI Element you can change its properties.Modifying View UI Elements Example IWDInputField input = (IWDInputField)view. The view parameter of wdDoModifyView method allows you to access a views UI Elements.

Once you have created your UI element you can modify it’s default properties.class. The view parameter of wdDoModifyView method allows you to create UI elements. Some UI elements must be bound to a context attribute (ie – Input Fields) © SAP AG 2004.createElement(IWDInputField.Creating View UI Elements Example IWDInputField inputfield = (IWDInputField) view. "InputField1"). SAP TechEd / PRTL351 / 12 .

getElement("RootUIElementContainer").VISIBLE). inputfield. "InputField1"). SAP TechEd / PRTL351 / 13 .class. 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).IWDUIElementContainer Example IWDTransparentContainer container = (IWDTransparentContainer) view.Positioning UI Elements . © SAP AG 2004.addChild(inputfield). container. You can then call the container method addChild(IWDUIElement) or addChild(IWDUIElement. int index) to place the UI element in it.setVisible(WDVisibility. IWDInputField inputfield = (IWDInputField) view.createElement(IWDInputField.

IWDLabel label4 = (IWDLabel)view. "Label4"). label4.getVisible()) { IWDLabel label2 = (IWDLabel)view. SAP TechEd / PRTL351 / 14 .getElement("Label2"). IWDLabel label3 = (IWDLabel)view.currentContextElement(). label2. } //@@end © SAP AG 2004.getElement("Label3").getContainer().setVisible(WDVisibility. label3.setText("Dynamically Created Label!").Dynamic UI Example Example //@@begin wdDoModifyView if (wdContext.class.createElement(IWDLabel.addChild(label4. container.setEnabled(true). IWDUIElementContainer container = label2. 2).VISIBLE).

getNodeInfo().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. wdContext.string").bindValue("AttributeA"). "InputField1"). IWDAttributeInfo test = null). it is legal to create the necessary context attributes at runtime and bind them to UI elements. Example IWDInputField inputfield = (IWDInputField)view. © SAP AG 2004.currentContextElement().class. setAttributeValue("AttributeA". inputfield. addAttribute("AttributeA". "ddic:com. SAP TechEd / PRTL351 / 15 . createElement(IWDInputField.

dictionary.nodeTestNode().addAttribute("MyAttribute". For each node that you create at design time.nodeTestNode2(). Example IWDNodeInfo rootNode = wdContext. SAP TechEd / PRTL351 / 16 .IWDNodeInfo Interface IWDNodeInfo allows programmers to add all kinds of context types to the context tree.Dynamic Context Creation .getNodeInfo(). To access this interface for the Root Node you must call the method: wdContext. we have two a method is generated on wdContext to access that nodes IWDNodeInfo interface.getNodeInfo(). thus the following methods will exist on wdContext: wdContext.getNodeInfo() © SAP AG 2004. rootNode.getNodeInfo() wdContext. "ddic:com. As shown here.string").

addChild(…) Recursive Nodes – nodes that are used for representing Trees.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. addMappedChild(… ) Nodes – nodes that are not mapped to another controller’s context. addRecursiveChild(… ) © SAP AG 2004. addAttribute(… ) Mapped Nodes – nodes that are mapped back to the context of another controller. SAP TechEd / PRTL351 / 17 . addMappedAttribute(… ) Attribute Values – values that are not mapped to other controller’s contexts.

null).dictionary.string").class.bindValue("AttributeA"). wdContext. " setAttributeValue("AttributeA". Bind the newly created attribute to the input field © SAP AG 2004.getNodeInfo(). addAttribute("AttributeA". SAP TechEd / PRTL351 / 18 Set the value of the Attribute . "InputField1").currentContextElement(). Create an Input Field IWDAttributeInfo test = Create an Attribute wdContext. createElement(IWDInputField.Dynamic Context Creation – Simple Example Example IWDInputField inputfield = (IWDInputField)view. inputfield.

When we create a node or attribute at design time.Dynamic Context Creation – Accessing Elements Dynamically create nodes and attributes do not have generated getter and setter methods.setResult(result).currentContextElement().currentMyNodeElement().getAttributeValue(String) © SAP AG 2004. To access a dynamically created context element use the follow methods: Nodes: wdContext.getCurrentElement().node() .currentContextElement().currentContextElement(). wdContext. Attributes: wdContext. int).getChildNode(String. SAP TechEd / PRTL351 / 19 . setter and getter methods are provided to access these elements: wdContext.

SAP TechEd / PRTL351 / 20 . IWDNodeElement nodeElement = node. false. null. null. true." + fld. “ddic:com. 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(). addChild("DynamicNode".getName()).addAttribute("MyAttr". false.getNodeInfo(). true. false.bindValue("DynamicNode.Dynamic Context Creation – More Difficult Example The below code shows the creation of a node and an underlying attribute of that node: IWDNodeInfo node ="MyAttr").getCurrentElement(). null). String myAttr = (String)nodeElement.string"). Now we can bind a input field’s value to this node – binding context values to UI elements should occur in wdDoModifyView(): theInput.node().getChildNode("DynamicNode". null. 0). © SAP AG 2004. true. node.

© SAP AG 2004. (…) Example IWDAction theAction = wdThis.Dynamic Actions Actions may be created dynamically.""). Dynamic created actions must reuse some static declared event handler and its signature! This is achieved by using wdThis.wdCreateAction(IPrivateDynamicView. theButton. 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.WDActionEventHandler. but the event handler must be already available! This means we can dynamically create actions.wdCreateAction(…).setOnAction(theAction).GE NERIC_ACTION. SAP TechEd / PRTL351 / 21 .

this is known as Parameter Mapping. 4. SAP TechEd / PRTL351 / 22 . Mapping This process is known as parameter mapping.Dynamic Actions – Parameter Mapping Basics Some UI events have parameters associated with them. 2. Define a parameter for the action of the same data type as the event parameter. 3. Associate the event parameter with the action parameter. © SAP AG 2004. Obtain the name of the parameter associated with the UI elements event (For example: IWDCheckBox has a parameter associated with event onToggle named “checked”). and is achieved as follows: 1. these parameters need to be mapped to parameters of their associated event handlers. Create an action in the view controller.

SAP TechEd / PRTL351 / 23 . which sends a request containing the parameter “checked” to the server. when the checkbox is clicked the event onToggle is fired.Dynamic Actions – Parameter Mapping Client DynamicView The diagram shown here visualizes the concept of parameter mapping. 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 © SAP AG 2004. On the client side. This onToggle event is assigned to the onActionToggle() event handler.

© SAP AG 2004.Dynamic Actions – Parameter Mapping Example: Step 1 This example uses the CheckBox’s onToggle action to further illustrate how to implement parameter mapping. 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 TechEd / PRTL351 / 24 . First we create an action in a view controller to handle the change of state in a checkbox UI element.

// Link the client-side event parameter ‘checked’ to // the server-side action parameter ‘checkBoxState’ cb. SAP TechEd / PRTL351 / 25 . the code for this is shown below Example if (firstTime) { // Get a reference to the checkbox UI element IWDCheckBox cb = (IWDCheckBox)view.getElement("myCheckBox").Dynamic Actions – Parameter Mapping Example: Step 2 Now you can access your checkbox in the wdDoModifyView() method to create the parameter mapping.mappingOfOnToggle().addSourceMapping("checked". } © SAP AG 2004. "checkBoxState").

Can create constant parameters on UI element actions and map them to the parameters of an event handler: Example IWDAction theAction = wdThis. theActionContainer. Can create multiple actions that point to the same event handler.wdCreateAction( IPrivateDynamicView.Dynamic Actions .setOnAction(theAction).addParameter("Command". © SAP AG 2004.GENERIC_ACTION."") .WDActionEventHandler. theButton. "delete").mappingOfOnAction().addChild(theButton).More Possibilities Use method IWDAction. theButton. SAP TechEd / PRTL351 / 26 .setEnabled(boolean): enables or disables any UI element associated with the action.

SAP TechEd / PRTL351 / 27 .Summary Dynamic UI Generation means: Dynamic UI Manipulation Dynamic Context Creation Dynamic Action Creation Dynamic Metadata © SAP AG 2004.

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

SAP TechEd / PRTL351 / 29 .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 / 30 .Demo Demo © SAP AG 2004.

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.Activate Debugging (1/2) Activate debugging for the server process of the J2EE Engine If necessary. SAP TechEd / PRTL351 / 31 . 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.

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

…) 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. model class.Setting a Breakpoint (1/2) You can set breakpoints in editors Open the implementation page containing the code you want to debug (controller. own Java class. 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 .

.) 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. you require a launch configuration Open the dialog for creating a configuration (Run → Debug.. SAP TechEd / PRTL351 / 35 .Specifying a Debugging Configuration (1/2) To start debugging a Web Dynpro application.

Create debugging configuration 4.Specifying a Debugging Configuration (2/2) Specify appropriate debugging configuration and start debugging 3. SAP TechEd / PRTL351 / 36 . Specify project and application 1. Start debugging 2. Start debug session © SAP AG 2004.

Eclipse will open up the corresponding editor automatically © SAP AG 2004. Editor view Displays program line the debugger is currently executing If the program execution leads to a different class. SAP TechEd / PRTL351 / 37 .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).

SAP TechEd / PRTL351 / 38 .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 / 39 .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.

Start debug session . SAP TechEd / PRTL351 / 40 Expressions view: tree based expression evaluation 4.Debug Perspective: Overview (4/4) 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 © SAP AG 2004.

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)

Will pause execution and allows to view state of variables

Resume [F8]
This command resumes a suspended thread

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)
There are various different options for further processing
Step with filters Step into Terminate Suspend Resume Step return Step over

© SAP AG 2004, SAP TechEd / PRTL351 / 43

SAP TechEd / PRTL351 / 44 .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.

Debugging a Web Dynpro application 2 Enter airline ID © SAP AG 2004. SAP TechEd / PRTL351 / 45 .

SAP TechEd / PRTL351 / 46 .Debugging a Web Dynpro application 3 Select single flight from results © SAP AG 2004.

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 .

SAP TechEd / PRTL351 / 51 .Debugging a Web Dynpro application 8 © SAP AG 2004.

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

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. SAP TechEd / PRTL351 / 55 . variables view.…) Debugging Web Dynpro Application Inspect status of Web Dynpro context Debugging RFC BAPI calls © SAP AG 2004.

Web Dynpro OVS Exercise Exercise © SAP AG 2004. SAP TechEd / PRTL351 / 56 .

Dynamic UI Generation Web Dynpro Debugging Web Dynpro Internationalization Object Value Selector .

SAP TechEd / PRTL351 / 58 . 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.Learning Objectives – Web Dynpro I18N As a result of this workshop section.

getTextAccessor() IWDTextAccessor IMessage<Component>: Message texts of type error. dictionary simple types over locale-dependant XLF-files (XML Localization Interchange File Format. metadata-files. <Component> standard © SAP AG 2004.Web Dynpro Internationalization Concept Web Dynpro Internationalization is based on externalizing Strings from … controller classes. SAP TechEd / PRTL351 / 59 . An application developer can access locale-dependant texts via IWDTextAccessor-API: wdComponentAPI. warning. designtime) into generated Java property-files (runtime). editor The Web Dynpro runtime loads property resource bundles depending on a determined session locale. XLF-Files are only relevant for the translation process and can be edited at designtime using an S2X-editor.

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 © SAP AG 2004. SAP TechEd / PRTL351 / 60 Deployable Project .

SAP TechEd / PRTL351 / 61 different locales . Deployable project EAR-files contain language-spefic texts in property files.Externalizing Strings inside a Web Dynpro Project Web Dynpro Component Strings are externalized from a Web Dynpro component into XLF-files for translation purposes. 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 © SAP AG 2004.

XLF-files can be edited using the S2X-Document-Editor of the SAP NetWeaver Developer Studio.XLF-Files and S2X-Editor XLF-files without _<locale> are initially created when defining views. The project language is specified in these initial xlf-files so that the translater knows the source language. Texts inside these initial XLF-files are written by the application developer. SAP TechEd / PRTL351 / 62 . windows. (text) messages and simple datatypes. xlf file © SAP AG 2004.

In NetWeaver ’04 a R/3-based translation process is not possible on customer side. The document is not intended to be binding upon SAP to any particular course of business. © SAP AG 2004. Upcoming integration scenarios will offer an authoring environment for translating S2X-files in the SAP NetWeaver Developer Studio. In SAP NetWeaver ’04 the S2X-editor can be used for translating texts in copied and renamed ( with _<locale>) XLF-files. SAP Supported XLIFF (S2X) is an XLIFF-based interface format that is tailored to SAP‘s requirements. product strategy and/or development. Please note that this document is subject to change and may be changed by SAP at any time without notice. SAP TechEd / PRTL351 / 63 .About XLIFF and SAP Supported XLIFF (S2X) XLIFF (XML Localisation Interchange File Format) is a nonFormat proprietary format for extracted text. Contains specific restrictions but also extensions compared to XLIFF.

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

SAP TechEd / PRTL351 / 65 Java resource bundles .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 © SAP AG 2004.

dtsimpletype_en.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>. SAP TechEd / PRTL351 / 66 .xlf <Simple Type Name>.xlf <Simple Type Name>.dtsimpletype_xlf © SAP AG 2004.dtsimpletype_de.

Warnings. SAP TechEd / PRTL351 / 67 . Standard) and Texts © SAP AG 2004.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.

xlf <View Name>.wdview_de.xlf <View Name>.wdview.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>.xlf © SAP AG 2004.wdview_en. SAP TechEd / PRTL351 / 68 .

xlf <View Name>.wdcontroller_de.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_en.xlf <View Name>.xlf © SAP AG 2004.wdcontroller. SAP TechEd / PRTL351 / 69 .

SAP TechEd / PRTL351 / 70 .xlf <View Name>.wdwindow_en.xlf <View Name>.wdwindow.xlf © SAP AG 2004.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.

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.Message Pool inside a Web Dynpro Component Messages and Texts Message texts of type standard.xlf © SAP AG 2004.wdmessagepool.xlf <Component Name>MessagePool. SAP TechEd / PRTL351 / 71 .wdmessagepool_en.xlf <Component Name>MessagePool.wdmessagepool_de.

IWDTextAccessor and ISimpleType .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>. SAP TechEd / PRTL351 / 72 Property Files for Session Locale . © SAP AG 2004.

SAP TechEd / PRTL351 / 73 . warning or error are added as Constants of type IWDMessage to the generated Interface IMessage<Compo.nent Name>. IWDTextAccessor © SAP AG Name>. Name> IMessage<Component> All Messages of type Every Web Dynpro component has its own message interface IMessage<Component Name> Messages of type text are accessible via the IWDTextAccessor-API. Name>.Accessing Message Texts via IMessage<Comp.

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

.reportContextAttributeMessage( wdContext.currentContextElement().lang. true). messageMgr. //@@end } © SAP AG 2004. SAP TechEd / PRTL351 / 75 .MISSING_INPUT new Object[] { fieldLabel }. attributeInfo.MessageFormat class without using element formats.Defining Message Texts containing Placeholders Message text patterns containing placeholders can be defined in the message pool.getMessageManager(). IMessageSimpleErrors.text. IMessageSimpleErrors. public void checkMandatory( java..String fieldName ) { //@@begin checkMandatory() IWDMessageManager messageMgr = wdComponentAPI. The message text patterns are specified by the java..MISSING_INPUT.

number. Only use placeholders containing integer arguments. On {0.integer} On {0} at {1} the number {2} is again {3} © SAP AG} at {0. SAP TechEd / PRTL351 / 76 .time} the number {1} is again {2.getAttributeAsText("<attribute name>") Do not use element formats in placeholders. 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 .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.

They are defined for externalizing texts from controller coding. SAP TechEd / PRTL351 / 77 .getTextAccessor() © SAP AG 2004. All message texts defined in the message pool can be accessed with the IWDTextAccessor-API associated to the IWDComponent IWDTextAccessor interface: IWDTextAccessor textAcc = wdComponentAPI.Accessing Texts via IWDTextAccessor-API IWDTextAccessor Messages of type text cannot be displayed by the Web Dynpro Message Manager.

Instead the message keys have to be passed to the IWDTextAccessorAPI as String values. */ //@@end public void onPlugInResult( com.IWDCustomEvent wdEvent.String vehicleType ) { //@@begin onPlugInResult(ServerEvent) IWDTextAccessor textAccessor = wdComponentAPI.getTextAccessor().api. warning and error messages of type text are not addressable via generated constants.lang. String text = textAccessor. java.Accessing Message Texts IWDTextAccessor-API //@@begin javadoc:onPlugInResult(ServerEvent) /** Declared validating event"text_E").progmodel. SAP TechEd / PRTL351 / 78 . //@@end } In contrast to messages of type standard. © SAP AG

you are asked to specify a master or project language. SAP TechEd / PRTL351 / 79 .Web Dynpro Project Language When you create a Web Dynpro Project or a Web Dynpro Development Component. The project language is not read by the Web Dynpro Runtime when determining the session locale of a requested Web Dynpro application. language The project language is used for the translation process only so that the translator knows about the developer’s language (source language). © SAP AG 2004.

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

WDResourceHandler .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) © SAP AG 2004. SAP TechEd / PRTL351 / 81 Custom property resource bundles containing key-value-pairs can be read using the Web Dynpro Sservice 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 © SAP AG 2004. SAP TechEd / PRTL351 / 82 .

properties is loaded.ResourceBundle loads property files for the calculated WD session locale. 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.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. * URL parameter sap-locale © SAP AG 2004.lang. SAP TechEd / PRTL351 / 83 . If no resource bundle for this locale exists the default resource bundle <name>.

Web Dynpro determines the session locale of a startet Web Dynpro application based on a predefined fall-back mechanism. © SAP AG 2004. Accessing locale-dependant texts from inside Web Dnypro controllers is based on the interfaces IMessage<Component Name> and IWDTextAccessor.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. 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 .

SAP TechEd / PRTL351 / 87 .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.

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 .

SAP TechEd / PRTL351 / 89 .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 / 90 <<inner class>> <<inner class>> .OVS-related Classes and Interfaces Web Dynpro Progmodel API WDValueServices WDValueServices IWDOVSContextNotificationListener IWDOVSContextNotificationListener OVS Custom Controller OVSDemoListener OVSDemoListener to be implemented by application developer © SAP AG 2004.

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 © SAP AG 2004. SAP TechEd / PRTL351 / 91 Context needed for the generic OVS valuehelp UI .1 Flight AirlineId DepCity … ArrCity 0....OVS-related Contexts Application Context View Context Root Node 0.

Web Dynpro Progmodel provides WDValueServices WDValueServices WDValueServices -addOVSExtension( -addOVSExtension( IWDAttributeInfo[] startupAttributes.n IWDNode queryResultNode. lead selection points to node element) and search query results (queryOutputNode. // caridinality 0.. // lead selection pointing to element IWDNode queryResultNode. Uses a query listener class (queryListener) implementing IWDOVSContextNotificationListener for performing the search query and copying context data between OVS and the application.. // caridinality 0.n). 0.. SAP TechEd / PRTL351 / 92 . // lead selection pointing to element IWDNode queryInputNode. Uses separate context nodes for storing search query input values (queryInputNode. © SAP AG 2004. IWDNode queryInputNode. IWDAttributeInfo[] startupAttributes.n IWDOVSContextNotificationListener queryListener…) IWDOVSContextNotificationListener queryListener…) Provides context attributes (startupAttributes) with OVS functionality.

The IWDOVSContextNotifiacationListener Interface IWDOVSContextNotificationListener IWDOVSContextNotificationListener --appyInputValues( IWDNodeElement ovsRequestingElement.-onQuery( IWDNodeElement queryInput. applyResult( IWDNodeElement ovsRequestingElement. IWDNode queryOutput) onQuery( IWDNodeElement queryInput. © SAP AG 2004. Copy search result in helper context node (output). appyInputValues( IWDNodeElement ovsRequestingElement. applyResult(): user selects a single line in the search result table. Copy selected OVS query context (output) into the application context.-applyResult( IWDNodeElement ovsRequestingElement. IWDNode queryOutput) . Copy application context to the OVS search query context (input). OVSListener OVSListener onQuery(): perform search query based on search input. SAP TechEd / PRTL351 / 93 . IWDNodeElement queryOutputElement) IWDNodeElement 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 requested for a field. IWDNodeElement queryInputNodeElement) IWDNodeElement queryInputNodeElement) .

SAP TechEd / PRTL351 / 94 call OVS Listener hook applyResult() .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 © SAP AG 2004.

SAP TechEd / PRTL351 / 95 .Running OVS Sample Application See running example . © SAP AG 2004...

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 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. SAP TechEd / PRTL351 / 99 .1 LH Node Element Collection … © SAP AG 2004. applicationNodeElement data binding OVS View Context Root Node Flight 0..

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)...1 LH OVS OVS Helper Context OVSSearchOuput 0.1 node for the query input (here OVSSearchInput) … OVS Custom Controller Context Root Node OVSSearchInput 1.. One 1.n … © SAP AG 2004. SAP TechEd / PRTL351 / 100 .

. SAP TechEd / PRTL351 / 101 ..1 LH OVS OVSSearchOuput 0..n node for the query result table entries.n … © SAP AG 2004.OVS Sample Scenario – Searching Flight Data … and another 0. OVS Custom Controller Context Root Node OVSSearchInput 1.

SAP TechEd / PRTL351 / 102 .1 LH OVS execute RFC OVSSearchOuput 0. Then the result list is retrieved using the OVS helper context‘s input node element OVSSearchInput. OVS Custom Controller Context Root Node OVSSearchInput 1..n … © SAP AG 2004.OVS Sample Scenario – Searching Flight Data The user clicks on Go and the OVS listener‘s hook onQuery() is called..

1 LH OVS OVSSearchOutput 0 … 0. OVS Custom Context Root Node OVSSearchInput 1.OVS Sample Scenario – Searching Flight Data In onQuery() the result list is stored in the OVS helper context‘s output node. SAP TechEd / PRTL351 / 103 ...n 1 LH LH n LH Bonn … … New York … London © SAP AG 2004.

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 Root Node OVSSearchInput 1.1 LH FRA New York OVSSearchOutput 0 … … 0.. SAP TechEd / PRTL351 / 104 .n 1 LH LH n LH … … Bonn New York … London © SAP AG 2004.1 LH OVS View Context Root Node Flight 0..

OVS © SAP AG 2004. SAP TechEd / PRTL351 / 105 .OVS Sample Scenario – Searching Flight Data The OVS was successfully applied for populating input fields.

.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).. SAP TechEd / PRTL351 / 106 ..1 Output Flight_List LH Bonn 0.n AirlineId MaxRows OVS OVS Input Node 0.n OVS Output Node © SAP AG 2004. OVS Custom Context Root Node Bapi_Flight_Getlist_Input 0.

1) storing all input properties in one context element is needed. SAP TechEd / PRTL351 / 107 .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. field labels). © SAP AG 2004. Consequently the declared input and output context attributes must be adequately typed using a local or logical data dictionary.. The generic OVS UI needs dictionary metadata (column header texts. 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.

SAP TechEd / PRTL351 / 108 .Web Dynpro OVS Exercise Exercise © SAP AG 2004. Related Workshops/Lectures at SAP TechEd 2004 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: Lecture DM152. Hands-on PRTL202.sdn.sdn.Further Information Public Web: www. Web Dynpro for Beginners. SAP TechEd / PRTL351 / 109 Related SAP Education Training Opportunities http://www. Hands-on © SAP AG SAP Developer Network: Web Application Server Web Dynpro SAP Developer Network: www. Integrating Web Dynpro Applications into SAP Enterprise Portal. Creating Interactive Forms in Web Dynpro for Java. Developer Network Look for SAP TechEd ’04 presentations and videos on the SAP Developer Network. Coming in December. SAP TechEd / PRTL351 / 110 .com/ © SAP AG 2004.

Questions? Q&A © SAP AG 2004. SAP TechEd / PRTL351 / 111 .

SAP TechEd / PRTL351 / 112 . and do not take the handouts for the following session. Be courteous — deposit your trash. Thank You ! © SAP AG 2004.Feedback Please complete your session evaluation.

S/390. Inc. xSeries. used under license for technology invented and implemented by Netscape. zSeries. 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. and Informix are trademarks or registered trademarks of IBM Corporation in the United States and/or other countries. AS/400. AFP. Nothing herein should be construed as constituting an additional warranty.. Inc. X/Open. mySAP. xApp. IBM. Netfinity. Microsoft. MVS/ESA. DB2 Universal Database. Data contained in this document serves informational purposes only. SAP. These materials are subject to change without notice. xApps. OS/400. and PowerPoint are registered trademarks of Microsoft Corporation. ICA. All other product and service names mentioned are the trademarks of their respective companies. if any. z/OS. iSeries. JavaScript is a registered trademark of Sun Microsystems. Citrix. Outlook. DB2.Copyright 2004 SAP AG. These materials are provided by SAP AG and its affiliated companies ("SAP Group") for informational purposes only. HTML. Massachusetts Institute of Technology. and MultiWin are trademarks or registered trademarks of Citrix Systems. Some software products marketed by SAP AG and its distributors contain proprietary software components of other software vendors. The information contained herein may be changed without prior notice. Sweden. 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. Program Neighborhood. Inc. Parallel Sysplex. OS/2. AIX. OSF/1. World Wide Web Consortium. Java is a registered trademark of Sun Microsystems. © SAP AG 2004. 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. MaxDB is a trademark of MySQL AB. Oracle is a registered trademark of Oracle Corporation. WebSphere. UNIX. WinFrame. XML. MetaFrame. XHTML and W3C are trademarks or registered trademarks of W3C®. Windows. Tivoli. and Motif are registered trademarks of the Open Group. pSeries. OS/390. mySAP. and SAP Group shall not be liable for errors or omissions with respect to the materials. SAP TechEd / PRTL351 / 113 . R/3. National product specifications may vary. Intelligent Miner. without representation or warranty of any kind.

Sign up to vote on this title
UsefulNot useful