Skip to Content
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 6
        b. Target Environment:
            Portal
4.0. 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,Class elementClass,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 containascii 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)
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.
Parameter:
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.0. Creating DynamicUI (User Interface)
A) Creating dynamic table
a)   Creating table caption object:
     a) IWDCaption testCaption=view.createElement(IWDCaption.class,“captionid”);
   ClaimsCaption.setText(“TestTable”);
     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

IWDTabStrip ts = (IWDTabStrip)view.createElement(IWDTabStrip.class,“TabStrip”);
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);
IWDTextView txvInstances=(IWDTextView)view.createElement(IWDTextView.class,“txvDet”);
txvInstances.setText(“Enter Details”);
  .    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          

IWDTableStandardCellt2 = 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”);
To report this post you need to login first.

7 Comments

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

  1. Juney Qiu

    Hi deepa,

    It’s well_written.But how to use it in our dayly development.Can you  give us  more detailed description. or  severy demos.thanks 🙂

    (0) 
  2. Deepa Kalyani Post author

    Hello Juney Qiu,

    Thanks alot.

    I will show you the First Demo of Dynamic UI and Nodes.In that we will create the UI such as Tabs,Textviews,InputField and buttons.

    Step A : Create Node and Attribute in component Controller’s init()  Method.

    Here Node CTX_VN_Details is created with  two attributes CTX_VA_FNAME and CTX_VA_LNAME

    Code:

    IWDNodeInfo nodeInfo=null;

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

    nodeInfo.addAttribute(“CTX_VA_FNAME”,“ddic:com.sap.dictionary.string”);

    nodeInfo.addAttribute(“CTX_VA_LNAME”,“ddic:com.sap.dictionary.string”);

    Step B: Now we Will Map Component’s Node with View’s(Write below code in

    wdDoModifyView() method of View )

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

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

    nodeInfo.setMapping(ccnodeinfo, true);
    nodeInfo.addAttributesFromDataNode();

    Step C : Create Dynamic User Interface.Here We have created the dynamic Tab UI.

    Code :

    IWDTransparentContainer trn=  (IWDTransparentContainer)
    view.getElement(
    “trctabs”); // This is for using already created transparent container of your view.

    IWDTabStrip ts =(IWDTabStrip)view.createElement(IWDTabStrip.class,“tbs_1”);//For creating TabStrip.

    IWDTab tab1 = (IWDTab) view.createElement(IWDTab.class,“Tab1”);//Creating Tabs

    IWDCaption header1 = (IWDCaption) view.createElement(IWDCaption.class,“tbh_1”);//Giving header to tab

    header1.setText(“Tab1”);//setting Tab’s Text

    tab1.setHeader(header1);

    ts.addTab(tab1);//adding tab into TabStrip

    trn.addChild(ts);//adding TabStrip to Transparent Container

    OutPut:

    /wp-content/uploads/2014/07/tab_500820.png

    Step D:Now We Will Create UI Elements in above created Tab.

    To create Tab Content We will create a container in that we will add UI elements As Follows

    Code:

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

    tabcontent.createLayout(IWDMatrixLayout.class);//setting Matrix Layout of
    container

    IWDTextView txvName=(IWDTextView)view.createElement(IWDTextView.class,“txv_Name”);

    txvName.setText(“Enter First Name”); 

    tabcontent.addChild(txvName);//Creating TextView adding it to container

    IWDTextView txv_blanktextview=view.createElement(IWDTextView.class,“txv_blank1”);

    txv_blanktextview.setVisible(WDVisibility.BLANK);

    txv_blanktextview.setText(“TextView”);

    tabcontent.addChild(txv_blanktextview);//creating Blank Textview  for Space between Textview and InputField

    IWDInputField inpFname=view.createElement(IWDInputField.class,”FName”);

    inpFname.bindValue(nodeInfo.getAttribute(“CTX_VA_FNAME”));

    tabcontent.addChild(inpFname);//creating Input Field for First Name

    IWDTextView txvLastName=(IWDTextView)view.createElement(IWDTextView.class,“txv_LastName”);Creating another TextView for Last Name

    txvLastName.setText(“Enter Last Name”);          

    txvLastName.createLayoutData(IWDMatrixHeadData.class);

    tabcontent.addChild(txvLastName);                      

    IWDTextView txv_blanktextview2=view.createElement(IWDTextView.class,”txv_blank2″);

    txv_blanktextview2.setVisible(WDVisibility.BLANK);

    txv_blanktextview2.setText(“TextView”);                                          

    tabcontent.addChild(txv_blanktextview2);//Creating blank TextView for space Between Last Textview and its input field

    IWDInputField inpLname=view.createElement(IWDInputField.class,”LName”);

    inpLname.bindValue(nodeInfo.getAttribute(“CTX_VA_LNAME”));//binding inputfield with attribute

    tabcontent.addChild(inpLname);

      tab1.setContent(tabcontent);//setting content in a tab

    Output:

    UI.png

    Step F:Create a Button Dynamically

    To Create a button dynamically first you need to create a  Action at
    design time As creating Action Event handler at Runtime is not possible.We will
    create Action then will associate it with the dynamic button.

    /wp-content/uploads/2014/07/action_500870.png

    Click On Add(+) then give a name to Action.

    /wp-content/uploads/2014/07/next_500871.png

    Then Next and Finish.

    Now Will Write Code for Dynamic Button:

    IWDAction btnAction=wdThis.wdCreateAction(IPrivateDynamicCompView.WDActionEventHandler.SUBMIT,“Submit”);//Referring to design time Action which we had created

    IWDButton btn_submit=view.createElement(IWDButton.class,“btn_Submit”);

    btn_submit.setText(“Submit”);

    btn_submit.setOnAction(btnAction);//linking button to a action

    btn_submit.createLayoutData(IWDMatrixHeadData.class);

    tabcontent.addChild(btn_submit);

    Output:

    /wp-content/uploads/2014/07/button_500872.png

    Now OnSubmitAction() Will Write a code which we want to execute on click of Submit Button.

    Here I am retrieving the values of Attributes CTX_VA_FNAME and CTX_VA_LNAME and Printing it.

    public void onActionSubmit(com.sap.tc.webdynpro.progmodel.api.IWDCustomEvent
    wdEvent )

      {

        //@@begin onActionSubmit(ServerEvent)

    String Fname=””,LName=””;

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

    Fname=node.getCurrentElement().getAttributeValue(“CTX_VA_FNAME”).toString();

    LName= node.getCurrentElement().getAttributeValue(“CTX_VA_LNAME”).toString();

    wdComponentAPI.getMessageManager().reportSuccess(“Hello” + Fname +” “+ LName);

    //@@end

    }

    Output:

    /wp-content/uploads/2014/07/final_500885.png

    In Next Demo we will check how to create dynamic Tables and their bindings.

    (0) 

Leave a Reply