Hi. Id like to share my experience in implementing Tree with drag and drop using RemoteObject and BlazeDS.
What Im doing is this: I have a database table representing a group hierarchy. The hierarchy in the table is implemented with minsort and maxsort. So for example: Group Root: minsort 0, maxsort 9 (branch) Group Child 1: minsort 1, maxsort 2 (leaf) Group Child 2: minsort 3, maxsort 6 (branch) Group Grandchild 1 (Child of child 2): minsort 4, maxsort 5 (leaf) Group Child 3: minsort 7, maxsort 8 (leaf) This would give a simple hierarchy of Root with 3 children, one of which has its own child. Okay, you get the picture. I want to display this hierarchy as a Tree in flex. Then I want to drag and drop groups on to other groups and persist that back to the database. /~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ I have a java class on the server that does a query on the database. The main work is done in the sql query where I get the groups more or less in order. More about this later. Flex on the server is using BlazeDS and RemoteObject. To get this working I did the following: 0. Installed a fresh instance of tomcat 6.0.16. 1. copied the jar files available in WEB-INF/lib of blazeds.war to the WEB-INF/lib of ROOT 2. copied the WEB-INF/flex directory from blazeds.war to WEB-INF/flex in tomcat ROOT/WEB-INF/ containing the following files: messaging-config.xml proxy-config.xml remoting-config.xml services-config.xml 3. add the listener, servlet and servlet mapping defined in web.xml in blazeds.war to the web.xml. /~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ Im using a directory (version controlled with bazaar) where my java files live. I use ant to compile the java files into a jar file and distribute them to WEB-INF/lib of the tomcat instance. My java files are here for viewing: http://edencane.pastebin.com/f6c3f8de2 I havent included the DAO stuff. Im assuming database connection infrastructure is present: For this example Ive used jdbc but it would work equally well with Hibernate. The GroupService class is the java class that I refer to in the remoting-config.xml, its id is set as 'groupPOC'. Thats what I use to access the java Class called 'GroupService' The remoting-config.xml file is here: http://edencane.pastebin.com/f2c2a1a32 as you can see in that file the relevant destination is set using: <destination id="groupPOC"> <properties> <source>groupFlexPOC.GroupService</source> </properties> </destination> /~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ I use Eclipse 3.3 on linux with flexbuilder3 plugin, license of which is running out today )-: With this I compile the flex stuff, src is under the same version control as the java code. I deploy to webapps/ROOT/groupPOC/ I could also compile the flex stuff with ant or from the command line (which I both tried and used successfully) but for the moment flexbuilder was least effort and fastest! These are my mxml and actionscript files http://edencane.pastebin.com/f34db9743 the groupPOC.mxml file has as its RemoteObject: <mx:RemoteObject id="srv" destination="groupPOC"> <mx:method name="getGroups" result="handleGetGroups(event)" fault="Alert.show(event.fault.message)"/> </mx:RemoteObject> The method tag doesnt have to be in there but its handy coz with the mx:method tag I can set the result of the remote object call to be handled by a local actionscript function. /~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ THe trick to getting the tree to display is having the arrays named 'children'. In the java class named Group there is an ArrayList named 'children'. This takes care of the hierarchy. The GroupService class has a 'getGroups' method which does the sql query and populates the Hierarchy. So then I have a 'Group' with a property of 'children', an ArrayList, which consists of 'Groups'. Each 'Group' in the 'children' ArrayList has its own 'children' ArrayList etc. When the Hierarchy is complete a Java ArrayList is returned by the GroupService class. The returned list contains all the top level 'Group' objects. ArrayList is 'all' Flex needs to translate it into actionscript. Magnificent! ArrayLists are automatically transformed to ArrayCollections on the actionscript side. Formidable! If a children ArrayList is null it is shown as a leaf otherwise its shown as a branch, all automagicallly. /~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ Drag and drop is native in flex components but can be further customised to 'catch' more events (like dragEnter, dragComplete) and fire off handlers. A demo of this is shown in the 'dcHandler' actionscript function (see my actionscript code). At the end of the function I call a Java method on the server. This method currently only displays the name of the group, but the method will eventually have to update the minsort and maxsort integers of the group to reflect it's fitting in to the tree at the new position and persist that to the database. Calling a java method from flex couldnt be simpler. Reference the RemoteObject and the java method and bobs your uncle. /~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ Im totally rapt with this technology. Ive spent almost 3 months off and on and a few weeks solid learning it. Ive only scratched the surface of it. Its a completely different approach to Web applications than I am used to with JSPs Expression Language and Servlets. Its a beautiful thing that you can create the interface in flexbuilder graphically then hook up the back end. Since Im working only on a local network with the above examples, I cant comment yet on the speed of BlazeDS. Ill be testing those speeds from a remote network soon. /~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ References: Marco Casario: Flex Solutions Essential Techniques for Flex 2 and 3 Developers. Christophe Coenraets: 30 minute test drive 'fds' and 'blazeds' Bruce Phillips:http://www.brucephillips.name/blog/index.cfm/2007/1/1/How-To-Use-An-ArrayCollection-As-The-Data-Provider--For-The-Flex-2-Tree-Control I hope this adds to the documentation for using flex data services. Kind regards. Luke.
