Image Recursive Tree with an Action

[former_member193821]

Need for this blog?

Although the following links deals about Recursive Tree, this blog is intended for newbie's for easy understanding of RecursiveTree with an action.

1) Tutorial
2) Create a Web Dynpro Recursive Tree

Application details

The user interface of this Web application is to have only one view. This view consists of a tree-interface element with images, a Text View, and an Image UI for displaying the selected image.

Context

Create a TreeUI with a recursive node (child) and Text,Image as Value Attributes of that UI.Create SelectImage ValueAttribute for the context then,



Code to obtain tree structure in wdDoInit()

  IPrivateTreeCompView.ITreeNodeElement level1element;  IPrivateTreeCompView.ITreeNodeElement level2element;  IPrivateTreeCompView.ITreeNodeElement level3element;  level1element = wdContext.createTreeNodeElement();  level1element.setText("Modes of Transportation");  wdContext.nodeTreeNode().addElement(level1element);  level2element = level1element.nodeChild().createTreeNodeElement();  level1element = CreateChild(level1element, level2element, "Land", "");  level3element = level2element.nodeChild().createTreeNodeElement();  level3element = CreateChild(level2element, level3element, "Car", "car1.bmp");  level3element = level2element.nodeChild().createTreeNodeElement();  level3element = CreateChild(level2element, level3element, "Bike", "bike3.bmp");  level3element = level2element.nodeChild().createTreeNodeElement();  level3element = CreateChild(level2element, level3element, "Bus", "bus1.bmp");  level2element = level1element.nodeChild().createTreeNodeElement();  level1element = CreateChild(level1element, level2element, "Water", "");  level3element = level2element.nodeChild().createTreeNodeElement();  level3element = CreateChild(level2element, level3element, "Ship", "ship.bmp");  level3element = level2element.nodeChild().createTreeNodeElement();  level3element = CreateChild(level2element, level3element, "Boat", "boat.bmp");  level3element = level2element.nodeChild().createTreeNodeElement();  level3element = CreateChild(level2element,level3element,"Submarine","submarine.bmp");  level3element = level2element.nodeChild().createTreeNodeElement();  level2element = level1element.nodeChild().createTreeNodeElement();  level1element = CreateChild(level1element, level2element, "Air", "");  level3element = level2element.nodeChild().createTreeNodeElement();  level3element = CreateChild(level2element, level3element, "Plane", "plane.bmp");  level3element = level2element.nodeChild().createTreeNodeElement();  level3element = CreateChild(level2element,level3element,"helicopter","helicopter.bmp");  

Include the following code in WDModify() method, These lines create a parameter mapping from the UI element parameter path to the event parameter Select or element. The parameter path is of type string and contains the string representation of the tree node that triggered the event onAction or onLoadChildren

IWDTreeNodeType treeNode =(IWDTreeNodeType) view.getElement("TreeNodeType1"); treeNode.mappingOfOnAction().addSourceMapping("path", "Select");treeNode.mappingOfOnLoadChildren().addSourceMapping("path", "element");

CreateChild() method

CreateChild( com.sap.wipro.wdp.IPrivateTreeCompView.ITreeNodeElement element1, com.sap.wipro.wdp.IPrivateTreeCompView.ITreeNodeElement element2, java.lang.String Text, java.lang.String Image )  {      element2.setText(Text);  element2.setImage(Image);  element1.nodeChild().addElement(element2);  return element1;     }

A tree node also has an event onAction. This is triggered whenever the user selects a Tree Element. You have to define an action to react to the selection of node element. The event of the tree-node can then be bound to this action. You must also declare a parameter "Select" for this action to save the selected element.

Code for OnActionSelect1() for selecting an image

public void onActionSelect1(com.sap.tc.webdynpro.progmodel.api.IWDCustomEvent wdEvent, com.sap.wipro.wdp.IPrivateTreeCompView.ITreeNodeElement Select )  {wdContext.currentContextElement().setModeofTrans("Mode of Transport Selected");wdContext.currentContextElement().setSelectImage(Select.getImage());      }

Result

After deploying the application