Web Dynpros

��

Peter McNulty

SAP Labs, LLC

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

� Dynamic Programming Overview

� Dynamic User Interfaces

� Dynamic Contexts

� Dynamic Actions

Contents:

��


��

What is Dynamic Programming?

� 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 programming:

�� Dynamic UI ManipulationDynamic UI Manipulation�� Dynamic Context CreationDynamic Context Creation�� Dynamic Action CreationDynamic Action Creation�� Dynamic MetadataDynamic Metadata


��

See running example ... See running example ...

Designtime Runtime


��

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, that it nicely cooperates with the static Web Dynpro approach.

It is possible to mix static declarations with dynamic enhancements


��

� 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

}

Gets an Input Field

and disables it.

Example


��

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 wis called for the first time during the life cycle of the corresponding view.

� view: Reference to the generic view controller API, suitably typed to offer special view functionality like creating UI elements.

� wdThis: Reference to the IPrivate interface of the view controller . wdThis 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 allows the programmer to access, modify and create 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


!��

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


� � � �� !��

IWDTransparentContainer container = (IWDTransparentContainer) view.getElement("RootUIElementContainer");

IWDInputField inputfield = (IWDInputField)

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

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


��

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


�� !��!��

� 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", "Hello World!!!");

inputfield.bindValue(test);

Example


�� !��!�� "��

� 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 the node instance and from there you can access that node’s IWDNodeInfointerface.

Example: As shown here, we have two nodes, thus the following methods will exist on wdContext:

��!��#��$� �"��%&'#��"��&'

��!��#��$� �"��&'#��"��&'

Example


�� !��!�� $��

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", "Hello World!!!");

inputfield.bindValue(test);

�� !��!�� ( ) ��

Create an Attribute

Create an Input Field

Bind the newly

created attribute to

the input field

Example


�� !��!�� ( ��

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


�� !��!�� ( � ��

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’s attribute – binding context values to UI elements should occur in wdDoModifyView():theInput.bindValue("MyAttr");

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


��

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.


�� ( ��

Client

onToggle(boolean checked)

Server

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

}

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 checkBoxState has been mapped to the checked parameter of onToggle()

DynamicView


�� ( �� +�)��,

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.


�� ( �� +�)��%

� 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 element

IWDCheckBox cb =

(IWDCheckBox)view.getElement("myCheckBox");

// Link the client-side event parameter ‘checked’ to

// the server-side action parameter ‘checkBoxState’

cb.mappingOfOnToggle().addSourceMapping("checked",

"checkBoxState");

}

Example


��

IWDAction theAction =

wdThis.wdCreateAction(

IPrivateDynamicView.WDActionEventHandler.GENERIC_ACTION,"");

theButton.setOnAction(theAction);

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

theActionContainer.addChild(theButton);

� Use method IWDAction.setEnabled(boolean): disables the action, as well as certain UI elements that are bound to it.

� Certain UI elements like Button that do nothing else but trigger an action are also disabled.

� Other UI elements like CheckBox are not, because they can do more than triggering 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


You should now be able to:

� Understand what is dynamic programming.

� Dynamically modify and create UI elements.

� Dynamically create context elements.

� Dynamically bind UI element values to context elements.

� Dynamically create actions.

� Understand and create parameter mappings.

�� +�)��


-�� +�� .��)��/��"��0�( ��# ��# ��#��

The central hub for the SAP technology community� Everyone can connect, contribute and

collaborate- consultants, administrators and developers

� Focus around SAP NetWeaver and SAP xApps

High quality of technical resources� Articles, how-to guides, weblogs,

collaborative areas, discussion forums and downloads, toolkits and code-samples

A collaboration platform, not a one-way street� SAP experts from customers, partners and

SAP

SDN is powered by SAP NetWeaver™� Built on the SAP Enterprise Portal� Featuring collaboration capabilities of SAP

Knowledge Management


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®, NT®, EXCEL®, Word®, PowerPoint® and SQL Server® 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®, Informix and Informix® Dynamic ServerTM are trademarks of IBM Corporation in USA 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®, the Citrix logo, ICA®, Program Neighborhood®, MetaFrame®, WinFrame®, VideoFrame®, MultiWin® and other Citrix product names referenced herein are trademarks of Citrix Systems, Inc.

HTML, DHTML, XML, XHTML 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.

MarketSet and Enterprise Buyer are jointly owned trademarks of SAP AG and Commerce One.

SAP, R/3, mySAP, mySAP.com, xApps, 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. All other product and service names mentioned are the trademarks of their respective companies.

!�� .��%112�)��3#��4 �.� �4� �/��

Web Dynpros

Documents