Flex drag and drop tree with blazeds in JDeveloper 10.1.3

In this blog I will show you how you can make a custom Flex drag and drop tree in any jsf page where you can drag for example an employee to another department. If you drag an employee to an another department then flex component gives the remote object
method the new department name and with the help of blazeds and ADF BC4J I can update the employee with the new department id. To make the flex tree more flashy, I added a search bar, collapse and expand all button and a tree item click function. Other
features are, a special icon if the employee is a manager and more important you can only drag an employee to a department not between the departments. The departments
employees tree look like this but you can easily customize it. In JDeveloper 11G there is support for dnd ( see my previous blog ) but within in tree and with transactions it can be very complex. Here some pictures.


For using blazeds with jdeveloper and Adobe Flex see my previous blog
This is how the xml looks like which I pass as document ( from the remote object to the flex component). The tree component uses this xml to build the tree. With the type attribute I know what type the tree items is and the label is show in the tree.
To make this work I had to xalan library to the project and put it on the top of the needed libraries, so the xmlparserv2 lib is not loaded first.
<br /><root type="root"><br /> <department id="10" label="ACCOUNTING" type="dept"><br /> <employee id="7521" label="WARD" type="emp"/><br /> <employee id="7566" label="JONES" type="emp"/><br /> <employee id="7788" label="SCOTT" type="emp"/><br /> <employee icon="myManagerIcon" id="7839" label="KING" type="emp"/><br /> <employee id="7900" label="JAMES" type="emp"/><br /> </department><br /> <department id="20" label="RESEARCH" type="dept"><br /> <employee id="7369" label="SMITH" type="emp"/><br /> <employee icon="myManagerIcon" id="7698" label="BLAKE" type="emp"/><br /> <employee id="7876" label="ADAMS" type="emp"/><br /> </department><br /> <department id="30" label="SALES" type="dept"><br /> <employee id="7499" label="ALLEN" type="emp"/><br /> <employee icon="myManagerIcon" id="7782" label="CLARK" type="emp"/><br /> <employee id="7844" label="TURNER" type="emp"/><br /> </department><br /></root> <br />

This is the needed configuration for blazeds, These xml's are located in WEB-INF/flex/

remoting-config.xml
<br /><?xml version="1.0" encoding="UTF-8"?><br /><service id="remoting-service"<br /> class="flex.messaging.services.RemotingService"><br /> <adapters><br /> <adapter-definition id="java-object" class="flex.messaging.services.remoting.adapters.JavaAdapter" default="true"/><br /> </adapters><br /> <default-channels><br /> <channel ref="my-amf"/><br /> </default-channels><br /> <destination id="DeptTree"><br /> <properties><br /> <source>nl.ordina.flex.data.DeptTree</source><br /> </properties><br /> <channels><br /> <channel ref="my-amf"/><br /> </channels> <br /> </destination><br /></service><br />
services-config.xml
<br /><?xml version="1.0" encoding="UTF-8"?><br /><services-config><br /> <services><br /> <service-include file-path="remoting-config.xml"/><br /> <service-include file-path="messaging-config.xml"/><br /> <default-channels><br /> <channel ref="my-amf"/><br /> </default-channels><br /> </services><br /><br /> <channels><br /> <channel-definition id="my-amf"<br /> class="mx.messaging.channels.AMFChannel"><br /> <endpoint url="http://{server.name}:{server.port}/{context.root}/messagebroker/amf"<br /> class="flex.messaging.endpoints.AMFEndpoint"/><br /> <properties><br /> <polling-enabled>false</polling-enabled><br /> </properties><br /> </channel-definition><br /> </channels><br /><br /> <logging><br /> <target class="flex.messaging.log.ConsoleTarget" level="Debug"><br /> <properties><br /> <prefix>[Flex] </prefix><br /> <includeDate>false</includeDate><br /> <includeTime>false</includeTime><br /> <includeLevel>false</includeLevel><br /> <includeCategory>false</includeCategory><br /> </properties><br /> </target><br /> </logging><br /></services-config><br />

Now we can work on the java side. It has three methods, the first (getDept) is to generate the xml for the tree. The second (setNewDept) is update the employee with the new department and the last (showCurrent) is when the user click on a tree item.

public Document getDept()  {

  Document xmldoc= new DocumentImpl();
    
  Element e  = null;
  Element ee = null;

  // Root element.
  Element root = xmldoc.createElementNS(null, "root");
  root.setAttributeNS(null, "type", "root");
                
  DeptViewImpl view = am.getDeptView();
  view.executeQuery();
  while (view.hasNext()) {
    DeptViewRowImpl row = (DeptViewRowImpl)view.next();
    e = xmldoc.createElementNS(null, "department");
    e.setAttributeNS(null, "id"   ,row.getDeptno().toString() );
    e.setAttributeNS(null, "label",row.getDname());
    e.setAttributeNS(null, "type", "dept");

    RowIterator empRows = row.getEmpView();
    while (empRows.hasNext()) {
      EmpViewRowImpl row2 = (EmpViewRowImpl)empRows.next();
      ee = xmldoc.createElementNS(null, "employee");
      ee.setAttributeNS(null, "id"   ,row2.getEmpno().toString() );
      ee.setAttributeNS(null, "label",row2.getEname());
      ee.setAttributeNS(null, "type" ,"emp");
      // check is the employee is a manager
      RowIterator empRows2 = row2.getManagerEmpView();
      if ( empRows2.hasNext() ) {
        ee.setAttributeNS(null, "icon" ,"myManagerIcon");
      }
      e.appendChild(ee);
     } 
     root.appendChild(e);
  }                
  xmldoc.appendChild(root);
               
  return xmldoc;
}


public Document setNewDept(Integer department, Integer employee) {
  System.out.println(" new department "+ department.toString()+ " employee "+employee.toString());
  EmpViewImpl view = am.getEmpView();
  view.setid(employee);
  view.executeQuery();
  EmpViewRowImpl row = (EmpViewRowImpl)view.next();
  row.setDeptno(new Number(department.intValue()));
  am.getDBTransaction().commit();        
  return getDept();   
}

public void showCurrent( Integer id, String type) {
  System.out.println("type "+type+" id "+id.toString());
}

Now we can make a flex project. In this are three important function the first is dragOverHandler, this enabled or disables the drop of the employee. The second is the dragDropHandler, this function handles the drop and calls the remote object to updat e the employee and the last is the dragEnterHandler which stores the dragged employees.
<br /><?xml version="1.0" encoding="utf-8"?><br /><mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" creationComplete="init()" <br /> width="333" height="620" layout="absolute" backgroundColor="white"><br /> <mx:Script><br /> CDATA<br /> import mx.controls.List;<br /> import mx.core.DragSource;<br /> import mx.managers.DragManager;<br /> import mx.events.*;<br /> import mx.rpc.events.ResultEvent; <br /> import mx.controls.Alert;<br /> import mx.collections.ArrayCollection;<br /> import mx.utils.ObjectUtil;<br /><br /> [Bindable]<br /> private var myXml:XML;<br /> private var selectedItems:Array; <br /><br /> [Bindable]<br /> [Embed("assets/crown.jpg")]<br /> public var myManagerIcon:Class;<br /><br /> public function init():void{<br /> srv.getDept();<br /> }<br /><br /> // Called when the user moves the drag proxy onto the drop target.<br /> private function dragEnterHandler(event:DragEvent):void {<br /> trace("dragEnter triggered" );<br /> var dropTarget:Tree = Tree(event.currentTarget);<br /> // Get the dragged items from the drag initiator.<br /> selectedItems =event.dragSource.dataForFormat("treeItems") as Array;<br /> var i:int;<br /> for (i = 0; i < selectedItems.length; i++) {<br /> trace("emp "+selectedItems[i].@id + " " +selectedItems[i].@label + " "+ selectedItems[i].@type);<br /> }<br /> if(selectedItems[0].@type == "emp"){<br /> DragManager.showFeedback(DragManager.MOVE);<br /> DragManager.acceptDragDrop(dropTarget);<br /> } else {<br /> DragManager.showFeedback(DragManager.NONE);<br /> return; <br /> }<br /> }<br /> <br /> // Called if the target accepts the dragged object and the user <br /> // releases the mouse button while over the Canvas container. <br /> private function dragDropHandler(event:DragEvent):void {<br /> trace("dragDrop triggered" );<br /> // Explicitly handle the dragDrop event. <br /> event.preventDefault();<br /> event.currentTarget.hideDropFeedback(event);<br /> var dropTarget:Tree =Tree(event.currentTarget); <br /><br /> var i:int;<br /> for (i = 0; i < selectedItems.length; i++) {<br /> trace("emp "+selectedItems[i].@id + " " +selectedItems[i].@label + " "+ selectedItems[i].@type);<br /> }<br /> // Get the drop location in the destination.<br /> var dropLoc:int=dropTarget.calculateDropIndex(event); <br /> tree.selectedIndex = dropLoc;<br /> var node:XML = tree.selectedItem as XML;<br /> var nodeParent:XML = node.parent();<br /> if (nodeParent.@type == "dept") {<br /> var ii:int;<br /> for (ii = 0; ii < selectedItems.length; ii++) {<br /> tree.dataDescriptor.addChildAt(node.parent(), selectedItems[ii], dropLoc+1);<br /> trace("dropDept: " + nodeParent.@label +" drop emp "+node.@label + " emp " + selectedItems[ii].@label); <br /> srv.setNewDept(new int (nodeParent.@id),new int(selectedItems[ii].@id));<br /> }<br /> } else {<br /> trace("not allowed to drop employee under root element");<br /> }<br /> } <br /><br /><br /> private function dragOverHandler(event:DragEvent):void {<br /> trace("dragOver triggered" );<br /> event.preventDefault();<br /> event.currentTarget.showDropFeedback(event);<br /><br /> var dropTarget:Tree = Tree(event.currentTarget);<br /> var r:int = dropTarget.calculateDropIndex(event);<br /> tree.selectedIndex = r;<br /> var node:XML = tree.selectedItem as XML;<br /> trace ( node.@type +" " +node.@label);<br /><br /> // if dragged item is a department return<br /> var i:int;<br /> for (i = 0; i < selectedItems.length; i++) {<br /> trace("emp "+selectedItems[i].@id + " " +selectedItems[i].@label + " "+ selectedItems[i].@type);<br /> if( selectedItems[i].@type == "dept" ) {<br /> DragManager.showFeedback(DragManager.NONE);<br /> return;<br /> }<br /> }<br /> // if drop item is a department return<br /> if( node.@type == "dept" ) {<br /> DragManager.showFeedback(DragManager.NONE);<br /> return;<br /> }<br /> if( event.dragInitiator is Tree ) {<br /> DragManager.showFeedback(DragManager.COPY);<br /> } else {<br /> if (event.ctrlKey)<br /> DragManager.showFeedback(DragManager.COPY);<br /> else if (event.shiftKey)<br /> DragManager.showFeedback(DragManager.LINK);<br /> else {<br /> DragManager.showFeedback(DragManager.MOVE);<br /> }<br /> }<br /> return;<br /> }<br /><br /> private function resultHandler(event:ResultEvent):void { <br /> if ( event.result != null ) { <br /> myXml = event.result as XML; <br /> tree.dataProvider = myXml;<br /> trace(myXml.toString());<br /> openAllNodes();<br /> }<br /> } <br /> private function openAllNodes():void {<br /> tree.openItems = myXml..department;<br /> }<br /><br /> private function closeAllNodes():void {<br /> tree.openItems = [];<br /> }<br /><br /> private function findNodeById():void<br /> {<br /> var xmllistDescendants:XMLList; <br /> if ( search_combo.selectedItem == "label" ) {<br /> xmllistDescendants = tree.dataProvider.descendants().(@label.toLowerCase() == search.text.toLowerCase());<br /> } else if (search_combo.selectedItem == "id") {<br /> xmllistDescendants = tree.dataProvider.descendants().(@id == search.text);<br /> }<br /> tree.selectedItem = xmllistDescendants[0];<br /> }<br /> //event for tree Click<br /> private function treeClickHandler(evt:MouseEvent):void{<br /> var id:String = evt.currentTarget.selectedItem.@id;<br /> var treeType:String = evt.currentTarget.selectedItem.@type;<br /> srv.showCurrent(new int (id),treeType);<br /> }<br /> <br /> </mx:Script><br /><br /> <mx:RemoteObject id="srv" result="resultHandler(event)" showBusyCursor="true" destination="DeptTree"/><br /><br /> <mx:ApplicationControlBar><br /> <mx:Button label="Refresh" click="init();"/><br /> <mx:Button label="Open all nodes" click="openAllNodes();" /><br /> <mx:Button label="Close all nodes" click="closeAllNodes();" /><br /> </mx:ApplicationControlBar><br /> <mx:ApplicationControlBar y="40" width="324"><br /> <mx:TextInput id="search" width="114"/><br /> <mx:Button id="search_button" label="Search" width="73" click="findNodeById()" /><br /> <mx:ComboBox id="search_combo" width="95"><br /> <mx:String>label</mx:String><br /> <mx:String>id</mx:String><br /> </mx:ComboBox><br /> </mx:ApplicationControlBar><br /><br /> <mx:Tree id="tree" labelField="@label" showRoot="false" verticalScrollPolicy="on"<br /> alternatingItemColors="[#FFFFFF,#EEEEEE]"<br /> showScrollTips="true" dragEnabled="true" dropEnabled="true" dragMoveEnabled="true"<br /> dragEnter="dragEnterHandler(event);" <br /> dragDrop="dragDropHandler(event);" <br /> dragOver="dragOverHandler(event);" <br /> allowMultipleSelection="true"<br /> click="treeClickHandler(event)"<br /> iconField="@icon"<br /> width="300" rowCount="6" height="530" y="80"/><br /></mx:Application> <br />

At last we can add the object to jsf page
<br /> <af:panelGroup layout="vertical"><br /> <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"<br /> id="DragTree" width="315" height="582"<br /> codebase="http://fpdownload.macromedia.com/get/flashplayer/current/swflash.cab"<br /> align="left"><br /> <param name="movie" value="DragTree-debug/DragTree.swf"/><br /> <param name="quality" value="high"/><br /> <param name="bgcolor" value="#ffffff"/><br /> <param name="allowScriptAccess" value="sameDomain"/><br /> </object><br /> </af:panelGroup><br />

Here are the sources to build your own dnd tree.