ColdFusion MX / FLASH MX - Tree Menu

      Hi All..       Can anyone point me to some tutorials or online docs or manuals that would aid me in doing the following:       I have a menu to build consisting of dynamic "parent" categories. Next to each "parent" will be an image, a "+" sign. When clicked the menu will expand to reveal the "parent's children". If the "child" also has "children", there will be a "+" sign next to their text as well and so on. Whenever a parent is expanded the "+" will turn to a "-" and thus when clicked again will be retracted. A tree menu!  LOL       Anyways, does this sound like a good Flash MX project? I have never used Flash to interact with dynmaic data so any tips, links, advice, or thoughts would be much appreciated.       Thanks!       Mike

>       Anyways, does this sound like a good Flash MX project? I > have never used Flash to interact with dynmaic data so any tips, > links, advice, or thoughts would be much appreciated. Well, the answer is two fold.  One hand, yes, this is actually a great Flash MX project.  On the other hand, if you haven't used Flash MX before, there's going to be quite a learning curve to get to the point where you can pull dynamic data from the server and populate a Tree component with a recursive function. I have an article that will/may/(who knows) be on FlashKit that covers Data Binding using the DataGlue class.  That would be a good start.  It doesn't cover adding tree data, though, because that's a whole other can of worms. If you don't have to worry about browser compatibility, you can go with an IE 5.0+ solution which involves some heavy javascripting & XML.  That also has a pretty steep learning curve, but it's really a nice interface.  It's used as the left hand navigation on Microsoft's MSDN library: http://msdn.microsoft.com/library Ben Johnson

Thanks Ben. I think I will go with the Flash approach now.. no better time to get up to speed.. I'll deal with the elarning curve.  :-) Flashkit.com has been useful in the past, are there any other sites you can think of that might discuss the concepts I will need to grasp to build the menu? Data Binding and Data Glue.. any other concepts/ideas/or approaches? I appreciate the help. Mike ----- Original Message ----- From: "Ben Johnson" <bjohnson@hostworks.com> To: "CF-Talk" <cf-talk@houseoffusion.com> Sent: Thursday, July 18, 2002 6:41 PM Subject: RE: CF MX / FLASH MX - Tree Menu Flash > MX project.  On the other hand, if you haven't used Flash MX before, there's > going to be quite a learning curve to get to the point where you can pull > dynamic data from the server and populate a Tree component with a recursive > function. > > I have an article that will/may/(who knows) be on FlashKit that covers Data

get the Flash Component UI Kit 2 from the flash exchange: http://www.macromedia.com/exchange/flash/ there is a tree menu component included. mike chambers mesh@macromedia.com

I've been doing this very thing right at the moment, and once you get your head into actionscripting its actually quite easy. set up your CFC to return a query... <cffunction name="getCategories" access="remote" returntype="query">   <cfquery name="categories" datasource="test" dbtype="ODBC">   SELECT group_id, group_name   FROM groups   WHERE active = 1   </cfquery>        <cfreturn categories>    </cffunction> then in your flash MX movie, ensure you have flash remoting properly setup and include the following in the first frame: #include "NetServices.as" if (gatewayConnection == null) { NetServices.setDefaultGatewayUrl("http://localhost:8500/flashservices/gatewa y"); gatewayConnection = NetServices.createGatewayConnection(); CFMService = gatewayConnection.getService("componentdir.componentname", this); } you may need to change some of the above.... then call your CFC function: CFMService.getCategories(); and build a _Return function to handle the incoming data (in it I reference an fTree component instance on the stage named 'catTree'): function getCategories_Result(result) {   _root.catTree.setEnabled(true);   _root.treeRoot = new FtreeNode("Categories");   _root.treeRoot.setDataProvider(result, "group_name", "group_id");   _root.catTree.setRootNode(_root.treeRoot);   //_root.catTree.setDataProvider(result);   _root.catTree.setAutoHideScrollBar(true);   _root.catTree.setSize(300,400);   _root.treeRoot.setIsOpen(true);   _root.catTree.refresh(); } there we go! Flash displays all my categories in the tree component (and you can add a clickHandler to handle what happens when a node is selected). You can change the appearance of the whole thing (although I'm not going into that here) and you can add child nodes to other nodes etc. Look at the reference window for the fTree component and you'll see all its methods available to you. I'm still learning myself, so the above may be stylistically yucky, but it the idea is right.

> I've been doing this very thing right at the moment, and > once you get your head into actionscripting its actually > quite easy. Even once you learn ActionScripting, which can be a beast of it's own, you still have to learn Flash Remoting and CFCs.  After you have the basics down with that, you'll have to understand recursive functions, which again, can be a beast. I have not had the chance to really test the following assumptions so anyone, please let me know if I'm wrong. If you don't use recursive functions, you load the data in one recordset at a time.  The first recordset is easy because you assign it to the DataProvider of the RootNode (actually, I would recommend DataGlue, but setDataProvider works well too).  Once you want to pull in the next set of data for a tree node, you have no reference back to the original tree node (unless you create a lookup for your tree).  For example, you make your call to the server and when the recordset comes back, you have to reference to the parent tree node.  You can find it's ID from the recordset perhaps, but there's no "findTreeNodeByID()" function. The only other way I could see implementing something like this without using a recursive function would be to have the server return a recordset of all the nodes, ordered by ParentID and doing this: (pseudo-code because I can't remember Recordset syntax off-hand): // input is a recordset from the server called "result" var rsLkp = new Object(); var rsTree = new Object(); rsTree.ID = 0; rsTree.ParentID = null;   // not really necessary, but used for clarity rsTree.Name = "root node"; rsTree.arrChildren = new Array(); rsLkp[0] = rsTree; // loop through recordset and stick nodes into the tree for(var i=0; i<result.recordcount; i++) {   // find parentNode from Lookup   var parentNode = rsLkp[result[i].ParentID];   // find max index of child array in the parent node   var childIndex = parentNode.arrChildren.length;   // set tree node with information   parentNode.arrChildren[childIndex] = new Object();   parentNode.arrChildren[childIndex].ID = result[i].ID;   parentNode.arrChildren[childIndex].ParentID = result[i].ParentID;   parentNode.arrChildren[childIndex].Name = result[i].Name;   parentNode.arrChildren[childIndex].arrChildren = new Array();   // add node to the lookup   rsLkp[result[i].ID] = parentNode.arrChildren[childIndex]; } Disclaimer: I haven't tried that code, but it looks like it should work. (Famous last words)  You could probably change that code around to assign it to a Tree component as well. Ben Johnson

the tree menu has a method called setDataProvider, which takes a data provider class (as do many of the other components). thus you don't have to manually map the recordset data to the tree menu, you just do something like: tree.setDataProvider(recordset); if you have a deeper data structure, then you will have to loop through the data and map it too the tree. mike chambers mesh@macromedia.com

> if you have a deeper data structure, then you will have to loop through > the data and map it too the tree. I think we're talking about the same thing.  The problem that I have is that I can rarely think of an instance where I would have a tree with only one level (excluding the root node level).  It seems as though there should have been more functionality put into the Tree component to allow for truely tree structure data.  There's a TreeDataProvider class.  I haven't taken a good look at it, but I don't believe that it allows for tree structured data. Ben Johnson

greg burch has written a component that extends the Tree component, and will take an XML document as its data source. it will then automatically build the tree. it is avaliable from the flash exchange: http://www.macromedia.com/exchange/flash/ let me know if you cant find it. mike chambers mesh@macromedia.com

Would that component that we are all talking about be considered a starting point? I don't think it will ever have all the functioanlity everyone wants, but it is a nice starting point. I wish I knew more flash and actionscripting to add what I need. In due time I will im sure. Mike > if you have a deeper data structure, then you will have to loop through > the data and map it too the tree. I think we're talking about the same thing.  The problem that I have is that I can rarely think of an instance where I would have a tree with only one level (excluding the root node level).  It seems as though there should have been more functionality put into the Tree component to allow for truely tree structure data.  There's a TreeDataProvider class.  I haven't taken a good look at it, but I don't believe that it allows for tree structured data. Ben Johnson

> Would that component that we are all talking about be > considered a starting point? I don't think it will ever have all the > functioanlity everyone wants, but it is a nice starting point. Starting point for learning ActionScript?  Eh... probably not.  The Tree component is probably one of the more advanced components, imho.  Start with something like the List box component or combo box.  Actually, start with just a text box.  Play around with it, make it do stuff, etc. As for a starting for tree components in general, yes, it is a good starting point.  I simply wish there was more data binding functionality included. But then again, we will always have our wish list.  I don't mean to discount the efforts put into the component sets.  I think Macromedia has done a great job with only a few minor glitches and snags here and there. Ben Johnson

I agree with you Ben.. as someone just getting into Flash and actionscripting like myself, would you recommend some formal training? > Would that component that we are all talking about be > considered a starting point? I don't think it will ever have all the > functioanlity everyone wants, but it is a nice starting point. Starting point for learning ActionScript?  Eh... probably not.  The Tree component is probably one of the more advanced components, imho.  Start with something like the List box component or combo box.  Actually, start with just a text box.  Play around with it, make it do stuff, etc. As for a starting for tree components in general, yes, it is a good starting point.  I simply wish there was more data binding functionality included. But then again, we will always have our wish list.  I don't mean to discount the efforts put into the component sets.  I think Macromedia has done a great job with only a few minor glitches and snags here and there. Ben Johnson

> I agree with you Ben.. > as someone just getting into Flash and actionscripting > like myself, would you recommend some formal training? Training is only useful if you're the kind of person that can learn from a school/classroom setting.  For some people, it's great.  I happened to sleep through most of my schooling days simply because it wasn't the right format for me.  I learn much more simply from reading books. It's all a matter of preference. Ben Johnson P.S. If you need any help with Flash, feel free to contact me off list.

I agree with that!! I hated school, seemed like all the teachers were extremely monotone...snor.. snor.. snor..But going home and reading the books was ok. Douglas Brown Email: dbrown@socal.rr.com ----- Original Message ----- From: "Ben Johnson" <bjohnson@hostworks.com> To: "CF-Talk" <cf-talk@houseoffusion.com> Sent: Friday, July 19, 2002 11:05 AM Subject: RE: CF MX / FLASH MX - Tree Menu

this might help get you started: http://radio.weblogs.com/0106797/2002/07/19.html#a211 mike chambers mesh@macromedia.com