Former Member

April 9, 2014 8 minute read

Dynamic Node & UI Generation

1.0   Overview
     For creating dynamic User interface, Context nodes, Attributes & binding
between them. This document provides approach for creating dynamic user interface, nodes & their binding.
2.0   Scope

This document is applicable for Creating User interface in WDJ.

3.0 Functionality

This document provides the step by step approach of how to create dynamic UI, Context nodes,Context attributes &
binding between them.

a. Software/Technology

NWDS 7.3, jdk

b. b. Target Environment:

Portal

4. Creating Dynamic Nodes and Attributes

Ø Create a node in component controller

IWDNodeInfo nodeInfo=wdContext.getNodeInfo().addChild(“test”,null,true,CMICardinality.ONE_TO_MANY,CMICardinality.ONE,true,null);

Method:
addChild

   IWDNodeInfo addChild(String name,

                     Class elementClass,

                     boolean singleton,

                     CMICardinality collection,

                     CMICardinality selection,

                     boolean initializeLeadSelection,

                     IStructure structure)

Details:

It Dynamically declares and adds an unmapped child NodeInfo with the given properties.

Parameters:

name – the name of the child NodeInfo. Must be
unique within this node’s children and attributes. The name may only contain
ascii letters, digits and underscore (‘_’) and must not start with a digit.

elementClass – The element class for a model node,
null for a value node.

singleton – indicates, whether the described Node
is singleton relatively to its parent

collection – the collection cardinality

selection – the selection cardinality

initializeLeadSelection – true if this node’s
selection shall be initialized when the collection is initialized

structure – a structure or null if the node is not
structure based. If you want a structure from the local Java dictionary and you
only have the name,

Returns:

the added NodeInfo

Ø Add Attributes in created node.

nodeInfo.addAttribute(“Name”,
“com.sap.dictionary.string”);

nodeInfo.addAttribute(“City”,
“com.sap.dictionary.string”);

Methods:
addAttribure

   IWDAttributeInfo addAttribute(String name,

                              String dataType)

Details:

   Adds a new unmapped attribute to the structure.

Parameters:

     name – The name of the attribute within the node,
     must be unique. The name may only contain ascii letters, digits and underscore
     (‘_’) and must not start with a digit.

dataType – The name of the attribute’s data type.
It can be either a Java class (prefixed with “java:”), a type in the local Java DDIC (prefixed with “ddic:”) or a type from a logical dictionary (in that case the name is built “extern:name.of.logical.dictionary:name.of.type“). If you choose a Java class, no UI element can be bound to this attribute! A DDIC type may be either one that you defined within your application or one of the predefined types. Note, that the predefined types are in the package” com.sap.dictionary” at run time.

Returns:

The added attribute.

Ø Map
Component controller node to view controller

IWDNodeInfo ccnodeinfo=wdThis.wdGetDetCompController().wdGetAPI().getContext().getRootNode().getChildNode(“test”,
IWDNode.LEAD_SELECTION).getNodeInfo();

IWDNodeInfo nodeInfo=wdThis.wdGetAPI().getContext().getRootNodeInfo().addMappedChild(“test”,null, true, false, true,null,false,true);
nodeInfo.setMapping(ccnodeinfo,true);

nodeInfo.addAttributesFromDataNode();
Methods:

1) addMappedChild:

IWDNodeInfo addMappedChild(String name,

                           Class elementClass,

                           boolean singleton,

                           boolean mandatorySelection,

                           boolean multipleSelection,

                           String mappedPath,

                           boolean selectionMapped,

                           boolean initializeLeadSelection)

                          boolean initializeLeadSelection)

Details:

Dynamically declares and adds a mapped child NodeInfo with the given
properties. NW04 version using two booleans for the cardinality and having
several now obsolete parameters.

Parameters:

name – the name of the child NodeInfo.

elementClass – obsolete

singleton – obsolete

mandatorySelection – indicates, whether the lead
selection is guaranteed to be valid

multipleSelection – indicates, whether multi
selection is allowed

mappedPath – The path of the mapped node or null
if you want to set the origin node later.

selectionMapped – indicates whether the selection
is mapped

initializeLeadSelection – indicates whether the
lead selection is to be set to 0 if the collection is filled

Returns:

the added NodeInfo

2)setMapping

void setMapping(IWDNodeInfo mappedNode,

                boolean selectionMapped)

Details:

Sets the mapping of
a mapped node that has been declared before.

Parameters:

mappedNode – The
NodeInfo of the mapped node.

selectionMapped –
indicates whether the selection is mapped

3)addAttributesFromDataNode

  void addAttributesFromDataNode()

Details:

Automatically adds
all attributes from the data node. This method can only be called on a mapped
node.

Ø Code for referring created node :

IWDNode node=wdThis.wdGetAPI ().getContext ().getRootNode
().getChildNode (“test”, 0)

· code for setting value of
attribute:

node.getElementAt (index).setAttributeValue
(“Name”,
“Deepa”);

node.getElementAt (index).setAttributeValue
(“City”,
“Mumbai”);

· Code for retrieving Value of Attribute:

String name=node.getElementAt
(index).getAttributeValue (“Name”)

String city= node.getElementAt
(index).getAttributeValue (“City”)

5.Creating Dynamic
UI (User Interface)

A) Creating dynamic table

a) creating table caption object :

IWDCaption testCaption=view.createElement
(IWDCaption.class,
“captionid”);

ClaimsCaption.setText
(“Test
Table”);

b) Creating Table:

IWDTable testTable= (IWDTable)
view.createElement (IWDTable.class,”tableid”);

c) setting
table’s width:

v.setWidth
(“100%”);

d)
Setting table’s caption:

testTable.setHeader (testCaption);

e)
Setting table’s position:

testTable.createLayoutData
(IWDMatrixHeadData.class);

f)
Binding table with a node:

testTable.bindDataSource
(nodeInfo);

Note: Same ways you
can set properties
whatever u want

B) Creating Columns & their Editor in table and binding to
context Attribute

IWDCaption NameCaption = (IWDCaption)
view.createElement(IWDCaption.class,” NameCaptionID”);

NameCaption.setText (“Name
“);

IWDTableColumn NameColumn =
(IWDTableColumn)view.createElement(IWDTableColumn.class,”NameColumnID”);

NameColumn.setHeader(NameCaption);

NameColumn.setHAlign(WDTableColumnHAlign.CENTER);

IWDInputField NameColumneditor = (IWDInputField)
view.createElement(IWDInputField.class, “NameColumneditorID”);

NameColumneditor.bindValue(nodeInfo.getAttribute(“Name”));

NameColumn.setTableCellEditor(NameColumneditor);

testable.addColumn(NameColumn;

Note: same way will add city column

C) Create Dynamic Tabs

a. IWDTabStrip ts = (IWDTabStrip)
view.createElement(IWDTabStrip.class,“TabStrip”);

b. IWDTab tab1 = (IWDTab)
view.createElement(IWDTab.class,“Tab1”);

c. IWDCaption header1 =
(IWDCaption) view.createElement(IWDCaption.class,“Header1”)

d. header1.setText(“Tab1”);

e. tab1.setHeader(header1);

f. IWDTransparentContainer tabcontent=view.createElement(IWDTransparentContainer.class);

g. IWDTextView txvInstances=(IWDTextView)view.createElement(IWDTextView.class,“txvDet”);

h. txvInstances.setText(“Enter Details”);

h. tabcontent.addChild(txvInstances);

i. ts.add(tab1);

6) How to use cell variant Dynamically.

a) create an attribute CTX_VA_CellVariantName of
String type

b) create a text view for name column

IWDTextView
NametxtView = (IWDTextView) view.createElement (IWDTextView.class,”NametxtView”);

AmtClaimtxtView.bindText
(nodeInfo.getAttribute(“CTX_VA_Name”);

c) create a table standard cell fro cell
variant

IWDTableStandardCell
t2=view.createElement (IWDTableStandardCell.class);

t2.setEditor
(NametxtView);

t2.setVariantKey (“noneditable”);

d) following code is for creating a Name
column & their editor(editor is inputfield)

IWDCaption
NameCaption = (IWDCaption) view.createElement (IWDCaption.class,”NameCaption”);

NameCaption.setText
(“Name”);

IWDTableColumn
NameColumn = (IWDTableColumn) view.createElement(IWDTableColumn.class,”Name”);

NameColumn.setHeader
(NameCaption);

NameColumn.setHAlign
(WDTableColumnHAlign.CENTER);

IWDInputField
Nameeditor = (IWDInputField) view.createElement (IWDInputField.class,”Nameeditor”);

Nameeditor.bindValue
(CTX_VA_Name”);

NameColumn.setTableCellEditor (Nameeditor);

e) bind this column with table standard cell
&cwith new created attribute

NameColumn.addCellVariant
(t2); NameColumn.bindSelectedCellVariant
(nodeInfo.getAttribute(“CTX_VA_CellVariantName”));

f) Now if I want in last row Name column should be text view.

p_node.getElementAt (0).setAttributeValue
(“CTX_VA_CellVariantName”, “noneditable”);

Be the first to leave a comment

You must be Logged on to comment or reply to a post.

Dynamic Node & UI Generation

2)setMapping

3)addAttributesFromDataNode

Assigned Tags