Pages

Sunday, March 30, 2008

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.


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

remoting-config.xml

services-config.xml


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.


At last we can add the object to jsf page


Here are the sources to build your own dnd tree.

2 comments:

  1. Great article.
    Can I use the same principle under jsf, adf bc: use drag /drop to insert element from a tree into a tabele?
    thanks

    ReplyDelete
  2. Hi, in jdeveloper 11g it is possible to do some drag and drop. I don't know within the tree

    see this blog entry http://biemond.blogspot.com/2007/11/drag-and-drop-update-department-of.html

    ReplyDelete