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

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 Manipulation
Dynamic Context Creation
Dynamic Action Creation
Dynamic Metadata

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

Designtime

Runtime

See running example ...

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

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

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

All view controllers implement the method wdDoModifyView

oModifyView. 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.
wdDoModifyView
oModifyView is called by the Web Dynpro runtime environment for modification of the view
layout.
For all visible views, this takes place at a time immediately before the closing response
rendering.

Example
import com.sap.tc.webdynpro.clientserver.uielib.standard.api.*;
...
public static void wdDoModifyView (
Gets an Input Field
IPrivateDynamicView wdThis,
IPrivateDynamicView.IContextNode wdContext,
IWDView view, boolean firstTime)
and disables it.
{
//@@begin wdDoModifyView
if (firstTime) {
IWDInputField input = (IWDInputField)
view.getElement(someInput);
input.setEnabled(false);
}
//@@end
}

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

Example
public static void wdDoModifyView (
IPrivateDynamicView wdThis,
IPrivateDynamicView.IContextNode wdContext,
IWDView view, boolean firstTime)
{
//@@begin wdDoModifyView

//@@end
}

firstTime of the type boolean: This is true only if wdDoModifyView 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).
SAP AG 2003, Title of Presentation, Speaker Name / 7

IWDView allows the programmer to access, modify and create UI

elements.

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

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

The view parameter of wdDoModifyView method allows you to access a

views UI Elements.
To get a reference to your views UI element you use the getElement(String
id) method where the id is the name you gave the UI element.
Once you have obtained a reference to a UI Element you can change its
properties.
SAP AG 2003, Title of Presentation, Speaker Name / 9

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

The view parameter of wdDoModifyView method allows you to

create UI elements.
Once you have created your UI element you can modify its default
properties.
Some UI elements must be bound to a context attribute (ie Input
Fields)
SAP AG 2003, Title of Presentation, Speaker Name / 10

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.
SAP AG 2003, Title of Presentation, Speaker Name / 11

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

In the case you need to create UI input elements dynamically you

need to bind them to context attributes!
If these attributes are unknown at design time, it is legal to create the
necessary context attributes at runtime and bind them to UI elements.
Example
IWDInputField inputfield = (IWDInputField)view.
createElement(IWDInputField.class, "InputField1");
IWDAttributeInfo test = wdContext.getNodeInfo().
addAttribute("AttributeA",
"ddic:com.sap.dictionary.string");
wdContext.currentContextElement().
setAttributeValue("AttributeA", "Hello World!!!");
inputfield.bindValue(test);

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

"

Interface IWDNodeInfo allows programmers to add all kinds of context types to the
context tree.
To access this interface for the Root Node you must call the method:
wdContext.getNodeInfo().
Example
IWDNodeInfo rootNode = wdContext.getNodeInfo();
rootNode.addAttribute("MyAttribute",
"ddic:com.sap.dictionary.string");

For each node that you create at design time, a method is generated on wdContext
to access the node instance and from there you can access that nodes IWDNodeInfo
interface.
Example:

As shown here, we have two nodes, thus the following

methods will exist on wdContext:
!
!

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

#
#

$
$

"
"

%&'# "
&'# "

&'
&'

Interface IWDNodeInfo contains APIs to create all kinds of contexts

elements:
Mapped Attributes values that are mapped back to the context of
another controller.
addMappedAttribute( )
Attribute Values values that are not mapped to other controllers
contexts.
addAttribute( )
Mapped Nodes nodes that are mapped back to the context of another
controller.
addMappedChild( )
Nodes nodes that are not mapped to another controllers context.
addChild()
Recursive Nodes nodes that are used for representing Trees.
addRecursiveChild( )

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

()

Example

IWDInputField inputfield = (IWDInputField)view.

createElement(IWDInputField.class,
"InputField1");
Create an Input Field

IWDAttributeInfo test =
Create an Attribute
wdContext.getNodeInfo().
addAttribute("AttributeA",
"ddic:com.sap.dictionary.string");
wdContext.currentContextElement().
setAttributeValue("AttributeA", "Hello World!!!");
inputfield.bindValue(test);
Bind the newly
created attribute to
the input field
SAP AG 2003, Title of Presentation, Speaker Name / 16

Set the value of the Attribute

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)

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

The below code shows the creation of a node and an underlying attribute of
that node:
IWDNodeInfo node = wdContext.getNodeInfo().
addChild("DynamicNode", null, true, true, false, false, false,
true, null, null, null);
node.addAttribute("MyAttr", ddic:com.sap.dictionary.string");

Now we can bind a input fields value to this nodes 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");

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

Actions may be created dynamically, but the event handler

must be already available!
This means we can dynamically create actions, but we
can not dynamically create code!
Dynamically created actions can be bound to UI elements
much the same way design time declared actions are bound to
UI Elements.
Dynamic created actions must reuse some static declared
event handler and its signature! This is achieved by using
wdThis.wdCreateAction().
Example
IWDAction theAction =
wdThis.wdCreateAction(IPrivateDynamicView.WDActionEventHandler.GENERIC_ACTION,"");
theButton.setOnAction(theAction);

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

Some UI events have parameters associated with them, these

parameters need to be mapped to parameters of their associated
event handlers, this is known as Parameter Mapping.
Mapping
This process is known as parameter mapping, and is achieved as
follows:
1. Obtain the name of the parameter associated with the UI elements event
(For example: IWDCheckBox has a parameter associated with event
onToggle named checked).
2. Create an action in the view controller.
3. Define a parameter for the action of the same data type as the event
parameter.
4. Associate the event parameter with the action parameter.

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

(
Client
DynamicView

onToggle(boolean checked)

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

Server

Request

Network

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

public class DynamicView

{

public void onActionToggle(boolean checkBoxState)

{

}
}

(
This example uses the CheckBoxs
onToggle action to further illustrate how
to implement parameter mapping.
First we create an action in a view
controller to handle the change of state
in a checkbox UI element.
The checkbox is called myCheckBox
and will be associated with an action
called HandleCheckBox.
Define a parameter called
checkBoxState of type boolean for the
action handler method
onActionHandleCheckBox.

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

+)

+)

Now you can access your checkbox in the wdDoModifyView()

method to create the parameter mapping; the code for this is shown
below
Example
if (firstTime) {
// Get a reference to the checkbox UI element
IWDCheckBox cb =
(IWDCheckBox)view.getElement("myCheckBox");
// Link the client-side event parameter checked to
// the server-side action parameter checkBoxState
cb.mappingOfOnToggle().addSourceMapping("checked",
"checkBoxState");

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

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
IWDAction theAction =
wdThis.wdCreateAction(
IPrivateDynamicView.WDActionEventHandler.GENERIC_ACTION,"");
theButton.setOnAction(theAction);
theButton.mappingOfOnAction().addParameter("Command", "delete");
theActionContainer.addChild(theButton);

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

+)

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.

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

+
#

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
SAP AG 2003, Title of Presentation, Speaker Name / 26

. )

"

. %112 )

3#

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.

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