In this demo I tried to combine the usefull drag and drop functionality provided by ADF together with the af:tree component.
The idea was very simple. Having a two level tree with Departments on the first level and Employees on the second. Expanding a Department node will make all Employee nodes that belong to the specific department appear. Further more utilising the powerfull and easy to implement drag and drop functionality the user should be able to drag an employee from one department and drop him to another.
The drag and drop functionality will simply get the dragged Employee and change his DepartmentId to the DepartmentId of the Department he was dropped on.
In the Model project we just need the Departments and Employees view objects (Employees should be updateable) connected with a viewLink based on common attribute DepartmentId. In the Employees view object we need a bind variable which we also add to the query so that we can execute-with-params.
After adding these to the ApplicationModule it should look something like this:
We then create the jspx page, drag and drop the Departments datasource from the Data Sources pallet and select af:tree. On the wizard that opens you can see the Departments node allready added to the binding. Click “+” to add the Employees node also. By selecting each node you can add the attributes that you want displayed on the page.
The bindings in page definition are now ready and the initial jspx code for the tree was generated. After a few changes on the page the drag and drop functionality is allready almost implemented.
The af:dropTarget along with the af:dataFlavor were added on the component displaying the Departments defining the drop zone and the af:clientAttribute along with the af:attributeDragSource were added on the Employees component allowing it to get dragged. Check the details bellow
As you can see the dropListener was bound to a method in the backing bean. In this method the dragged Employee Id and the Department Id of the Department it was dropped on are retrieved. Now that we have the Employee and the new Department we can set the Employee.DepartmentId=new DepartmentId. To do that we call a method in the Aplpication Module Impl class and refresh the tree component on the page.
In Application Module Impl method we set the EmployeesVo bind variable and execute query to get the Employee row. On that row we set the DepartmentId attribute and re-execute the Employees view object.
You can see a video of the application running here
For the source code click here