You are on page 1of 27

Peter McNulty

SAP Labs, LLC

Contents:
Dynamic Programming Overview
Dynamic User Interfaces
Dynamic Contexts
Dynamic Actions

SAP AG 2003, Title of Presentation, Speaker Name / 2

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 programming: Dynamic UI Manipulation Dynamic Context Creation Dynamic Action Creation Dynamic Metadata SAP AG 2003. Title of Presentation.What is Dynamic Programming? A predefined exit from the static and declarative Web Dynpro programming paradigm. Speaker Name / 3 .

SAP AG 2003.Designtime Runtime See running example .. Title of Presentation. Speaker Name / 4 ..

It is possible to mix static declarations with dynamic enhancements SAP AG 2003. that it nicely cooperates with the static Web Dynpro approach. Speaker Name / 5 . Title of Presentation.Although we highly recommend the static Web Dynpro approach. there are situations when dynamic programming is required. Web Dynpro itself needs dynamic programming Highly configurable applications Some portal integration application Framework developers Customization and Personalization … The methodology of dynamic programming is integrated in a way.

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

SAP AG 2003. boolean firstTime) { //@@begin wdDoModifyView … //@@end } firstTime of the type boolean: This is true only if wdDoModifyView wis called for the first time during the life cycle of the corresponding view. wdThis: Reference to the IPrivate interface of the view controller . Title of Presentation. Speaker Name / 7 .Example public static void wdDoModifyView ( IPrivateDynamicView wdThis. IWDView view.IContextNode wdContext. view: Reference to the generic view controller API. wdContext: Reference to the root context node of the view controller (for the current context). IPrivateDynamicView. wdThis allows triggering outbound plugs and events and access to action objects as well as controllers used. suitably typed to offer special view functionality like creating UI elements.

Speaker Name / 8 . Title of Presentation. SAP AG 2003.IWDView allows the programmer to access. modify and create UI elements.

To get a reference to your view’s UI element you use the getElement(String id) method where the id is the name you gave the UI element.Example IWDInputField input = (IWDInputField)view. input.getElement("someInput"). Title of Presentation. SAP AG 2003. The view parameter of wdDoModifyView method allows you to access a views UI Elements. Once you have obtained a reference to a UI Element you can change its properties.setEnabled(false). Speaker Name / 9 .

class.createElement(IWDInputField. Some UI elements must be bound to a context attribute (ie – Input Fields) SAP AG 2003.! Example IWDInputField inputfield = (IWDInputField) view. Title of Presentation. Once you have created your UI element you can modify it’s default properties. The view parameter of wdDoModifyView method allows you to create UI elements. "InputField1"). Speaker Name / 10 .

Title of Presentation. SAP AG 2003.class. container. 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).addChild(inputfield). int index) to place the UI element in it. You can then call the container method addChild(IWDUIElement) or addChild(IWDUIElement. "InputField1"). Speaker Name / 11 .createElement(IWDInputField.! Example IWDTransparentContainer container = (IWDTransparentContainer) view. IWDInputField inputfield = (IWDInputField) view.getElement("RootUIElementContainer").

"Label4").setEnabled(true). IWDUIElementContainer container = label2.VISIBLE). Title of Presentation.getElement("Label2"). } //@@end SAP AG 2003.Example //@@begin wdDoModifyView if (wdContext.class. IWDLabel label3 = (IWDLabel)view. container. IWDLabel label4 = (IWDLabel)view.getVisible()) { IWDLabel label2 = (IWDLabel)view.createElement(IWDLabel.addChild(label4.getContainer().setText("Dynamically Created Label!").currentContextElement(). label4.setVisible(WDVisibility. Speaker Name / 12 .getElement("Label3"). 2). label3. label2.

SAP AG 2003. Example IWDInputField inputfield = (IWDInputField)view. "Hello World!!!"). "InputField1").getNodeInfo(). createElement(IWDInputField. addAttribute("AttributeA". inputfield. it is legal to create the necessary context attributes at runtime and bind them to UI elements.class. Speaker Name / 13 .dictionary. setAttributeValue("AttributeA".currentContextElement(). IWDAttributeInfo test = wdContext.bindValue(test).! ! 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. "ddic:com.string").sap. Title of Presentation.

Example IWDNodeInfo rootNode = wdContext. Example: As shown here.getNodeInfo(). Title of Presentation. a method is generated on wdContext to access the node instance and from there you can access that node’s IWDNodeInfo interface.getNodeInfo(). Speaker Name / 14 # # $ $ " " %&'# " &'# " &' &' .! ! " Interface IWDNodeInfo allows programmers to add all kinds of context types to the context tree. For each node that you create at design time. thus the following methods will exist on wdContext: ! ! SAP AG 2003. "ddic:com.dictionary.sap.string").addAttribute("MyAttribute". we have two nodes. To access this interface for the Root Node you must call the method: wdContext. rootNode.

addChild(…) Recursive Nodes – nodes that are used for representing Trees. addMappedAttribute(… ) Attribute Values – values that are not mapped to other controller’s contexts. addMappedChild(… ) Nodes – nodes that are not mapped to another controller’s context.! ! $ Interface IWDNodeInfo contains APIs to create all kinds of contexts elements: Mapped Attributes – values that are mapped back to the context of another controller. addRecursiveChild(… ) SAP AG 2003. Title of Presentation. addAttribute(… ) Mapped Nodes – nodes that are mapped back to the context of another controller. Speaker Name / 15 .

setAttributeValue("AttributeA". inputfield.currentContextElement().class.string"). wdContext.dictionary. createElement(IWDInputField.! ! () Example IWDInputField inputfield = (IWDInputField)view. "ddic:com.bindValue(test). Bind the newly created attribute to the input field SAP AG 2003.getNodeInfo().sap. "InputField1"). Create an Input Field IWDAttributeInfo test = Create an Attribute wdContext. Title of Presentation. addAttribute("AttributeA". "Hello World!!!"). Speaker Name / 16 Set the value of the Attribute .

node() .currentContextElement(). Title of Presentation.currentContextElement().currentContextElement(). setter and getter methods are provided to access these elements: wdContext.getChildNode(String.currentMyNodeElement(). int).getAttributeValue(String) SAP AG 2003.getCurrentElement().setResult(result). wdContext. Speaker Name / 17 . When we create a node or attribute at design time. To access a dynamically created context element use the follow methods: Nodes: wdContext.! ! ( Dynamically create nodes and attributes do not have generated getter and setter methods. Attributes: wdContext.

null.sap. SAP AG 2003. IWDNodeElement nodeElement = node. true.currentContextElement().dictionary. false. false. false. node.! ! ( The below code shows the creation of a node and an underlying attribute of that node: IWDNodeInfo node = wdContext. addChild("DynamicNode".node(). null).string").getNodeInfo(). null. “ddic:com. String myAttr = (String)nodeElement. 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. Now we can bind a input field’s value to this node’s attribute – binding context values to UI elements should occur in wdDoModifyView(): theInput. true. true.getAttributeValue("MyAttr").addAttribute("MyAttr".bindValue("MyAttr"). null. 0).getCurrentElement(). Speaker Name / 18 .getChildNode("DynamicNode". Title of Presentation.

SAP AG 2003.Actions may be created dynamically.wdCreateAction(IPrivateDynamicView. Title of Presentation.WDActionEventHandler. Speaker Name / 19 . Dynamic created actions must reuse some static declared event handler and its signature! This is achieved by using wdThis. 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.GENERIC_ACTION."").setOnAction(theAction). Example IWDAction theAction = wdThis. theButton.wdCreateAction(…). but the event handler must be already available! This means we can dynamically create actions.

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

Speaker Name / 21 public class DynamicView { … public void onActionToggle(boolean checkBoxState) { … } } . Title of Presentation.( Client DynamicView onToggle(boolean checked) The diagram shown here visualizes the concept of parameter mapping. which sends a request containing the parameter “checked” to the server. and its parameter checkBoxState has been mapped to the checked parameter of onToggle() Server Request Network SAP AG 2003. On the client side. This onToggle event is assigned to the onActionToggle() event handler. when the checkbox is clicked the event onToggle is fired.

First we create an action in a view controller to handle the change of state in a checkbox UI element. . Speaker Name / 22 +) . The checkbox is called myCheckBox and will be associated with an action called HandleCheckBox.( This example uses the CheckBox’s onToggle action to further illustrate how to implement parameter mapping. SAP AG 2003. Define a parameter called checkBoxState of type boolean for the action handler method onActionHandleCheckBox. Title of Presentation.

Title of Presentation. // Link the client-side event parameter ‘checked’ to // the server-side action parameter ‘checkBoxState’ cb. the code for this is shown below Example if (firstTime) { // Get a reference to the checkbox UI element IWDCheckBox cb = (IWDCheckBox)view. "checkBoxState"). Speaker Name / 23 . } SAP AG 2003.mappingOfOnToggle().addSourceMapping("checked".( +) % Now you can access your checkbox in the wdDoModifyView() method to create the parameter mapping.getElement("myCheckBox").

theButton. "delete"). because they can do more than triggering the action.GENERIC_ACTION.addParameter("Command". theActionContainer.wdCreateAction( IPrivateDynamicView.addChild(theButton).mappingOfOnAction(). Certain UI elements like Button that do nothing else but trigger an action are also disabled. SAP AG 2003. theButton. Other UI elements like CheckBox are not.""). Can create constant parameters on UI element actions and map them to the parameters of an event handler: Example IWDAction theAction = wdThis.setOnAction(theAction). as well as certain UI elements that are bound to it. Title of Presentation. Can create multiple actions that point to the same event handler.setEnabled(boolean): disables the action.Use method IWDAction. Speaker Name / 24 .WDActionEventHandler.

SAP AG 2003. Dynamically modify and create UI elements. Dynamically create context elements.+) You should now be able to: Understand what is dynamic programming. Title of Presentation. Dynamically create actions. Understand and create parameter mappings. Speaker Name / 25 . Dynamically bind UI element values to context elements.

toolkits and code-samples A collaboration platform. not a one-way street SAP experts from customers. collaborative areas. weblogs. ) / " 0 . administrators and developers Focus around SAP NetWeaver and SAP xApps High quality of technical resources Articles.consultants. partners and SAP SDN is powered by SAP NetWeaver™ Built on the SAP Enterprise Portal Featuring collaboration capabilities of SAP Knowledge Management SAP AG 2003. how-to guides. discussion forums and downloads. contribute and collaborate. Speaker Name / 26 .( + # # # The central hub for the SAP technology community Everyone can connect. Title of Presentation.

ICA®. OSF/1®. Massachusetts Institute of Technology. MarketSet and Enterprise Buyer are jointly owned trademarks of SAP AG and Commerce One. OS/2®. VideoFrame®. and Motif® are registered trademarks of the Open Group. xSeries. World Wide Web Consortium. Parallel Sysplex®. Word®. Program Neighborhood®. 4 / No part of this publication may be reproduced or transmitted in any form or for any purpose without the express permission of SAP AG. AFP. WINDOWS®.com. The information contained herein may be changed without prior notice. Inc. Speaker Name / 27 . SAP AG 2003. X/Open®. R/3. WebSphere®. mySAP. MetaFrame®. the Citrix logo. Microsoft®. All other product and service names mentioned are the trademarks of their respective companies.. xApps. Tivoli®. Some software products marketed by SAP AG and its distributors contain proprietary software components of other software vendors. Informix and Informix® Dynamic ServerTM are trademarks of IBM Corporation in USA and/or other countries. Title of Presentation. MVS/ESA. Netfinity®. DHTML. JAVASCRIPT® is a registered trademark of Sun Microsystems. DB2®. mySAP. AS/400®. EXCEL®. JAVA® is a registered trademark of Sun Microsystems. zSeries. ORACLE® is a registered trademark of ORACLE Corporation. UNIX®. DB2 Universal Database. used under license for technology invented and implemented by Netscape. xApp 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. NT®. pSeries. WinFrame®. AIX®. Citrix®. OS/390®. Inc. iSeries. Intelligent Miner. XHTML are trademarks or registered trademarks of W3C®. XML. IBM®. Inc. HTML. MultiWin® and other Citrix product names referenced herein are trademarks of Citrix Systems. %112 ) 3# 4 .! . SAP. PowerPoint® and SQL Server® are registered trademarks of Microsoft Corporation. S/390®. z/OS. OS/400®.