3 Replies Latest reply on Aug 15, 2006 9:07 AM by kohinoor75

    Advanced Tree Programming : HEEEELP

      I try to develop an extended Tree component with the following behaviours (that could be in mx class):
      - On the first time the data is loaded:
      - automatic node opening on a given number of levels
      - automatic selection of the first node
      - On later refresh of data, after the user has played with the tree:
      - restore the open state of the tree (re-open previously opened nodes)
      - restore the item selected
      - restore the scroll state of the Tree, so that the selected item is visible

      Here is what I did :
      1°) My items have their own uid, that I manage from server, so there is no problem of identification
      2°) Just before resetting the dataProvider, my component stores the current openItems array
      3°) After dataProvider reset, I restore the openItems array (in the onRender event)
      ==> First problem : the state of the tree is restored BUT if the list needs a scroller, the scroller is invisible. The tree did not realize that many nodes were opened, and that the list needs a scroller
      4°) When user selects an item, I store the selected uid of the item
      5°) AFTER the tree has been re-opened, I first :
      - Locale recursiveley the previously selected uid (QUESTION : WHY IS IT NOT POSSIBLE TO USE THE PRIVATE HIERARCHICAL CURSOR ?)
      - If i found my item (which is the case), I set the selectedItem tree property to it, BUT NOTHING HAPPENS : there is no selection in the Tree

      So, my questions are :
      1°) How to traverse easily the dataProvider collection of a Tree, in a hierarchical way, without developing my own recursive method ?
      2°) How to safely restore open/close state of a tree ?
      3°) How to safely restore selection state of a - possibly deeply- nested element

        • 1. Re: Advanced Tree Programming : HEEEELP
          Flex harUI Adobe Employee
          I'm going to answer in a different order.
          3) There is a bug in Tree. Setting selectedItem doesn't work right. You will need to use selectedIndex. Hopefully you can calculate that accurately and quickly.
          1) So, now that you need the index instead of the item, unless the data will change underneath you, you might want to see if you can create a UID scheme that hints at the index, or makes it more efficient to find it. You could make the UID a path of its parents, for example, then you wouldn't really need a true tree walking thing like the hierarchical cursor.
          2) If you set the openItems array, you should call invalidateDisplayList() on the Tree, and I would do it right after setting the DP and not wait for onRender.

          • 2. Advanced Tree Programming : HEEEELP
            You're not alone.

            I ran into almost exactly what you're talking about and after a while I figured it all out.

            I built a custom actionscript component, which I am pasting below. You can also download it from: http://dev.able.org/utree.zip

            Basically, as there is obviously no documentation on it, here's what it does:

            When you double click on an item, it opens it up for editing. (Not that using the doubleclick event listener doesn't work for this functionality).

            Every time you finish updating an item, it sends a request back to the HTTPService giving the new name. The HTTPService is expected to recreate the XML from scratch and pass it back to Flex.

            You can add nodes and remove nodes (or items/branches). In my database I have a table for instance which has a field of parent. It stores the parent's id and basically, when it creates the XML, it runs a recursive function to loop through the database until it finds data that doesn't have any children.

            The two main things to note are:

            Flex harUI hinted at, referring to items as items in the tree is buggy, instead you have to refer to them by their index.

            He also says "You could make the UID a path of its parents, for example, then you wouldn't really need a true tree walking thing like the hierarchical cursor"

            I went down that path, but unsuccesfully. Instead, I found out what of the key functionalities of e4x, which is descendants.

            Basically, before the HTTPService is called, there is a function which iterates through OpenItems, stores the values by the UID you are talking about (as well as the scroll positions) and then calls the HTTPService. Oh, and a variable of selected also gets stored referring to the UID.

            The function that re-opens the items looks like this:

            for(var x:String in Opened){
            if(in_array(AlreadyOpened,Opened[x]) === false){
            super.expandItem(_TreeXML.descendants(_nodeName).(@[_idField]==Opened[x]).parent()[_nodeN ame][_TreeXML.descendants(_nodeName).(@[_idField]==Opened[x]).childIndex()],true,false,fal se);

            And the function for re-setting the selectedItem looks like this:

            // We can't set selectedItem to the node if it's parents aren't opened, so we have to do it here in another "if" statement.
            if(_selected != ""){
            super.selectedItem = _TreeXML.descendants(_nodeName).(@[_idField]==_selected).parent()[_nodeName][_TreeXML.des cendants(_nodeName).(@[_idField]==_selected).childIndex()];

            The implementation of this custom component looks like this:

            <tk:uTree id="Tree" idField="uid" nodeName="node" request="{request}" selected="{selected}" httpService="{url}" labelField="@label" width="100%" height="100%"/>

            Where request is an object that would contain any variables you want to pass to the HTTPService and selected would be set to the UID of the item you want opened -- when the tree loads it will open the item of the UID and any of its' parents, so if it's five levels down in the tree, it will be expanded all the way up. httpService is a string, containing the url you want to use as the httpService.

            Anyways, those are the key notes. Let me know if you find any bugs in it or need help on something. If you post your code of your MXML and your server-side script, I could direct you further if needed, but I think this will suffice.

            (I couldn't paste the code as it would have exceeded the maximum size allowed -- you can download it with the link above)
            • 3. Re: Advanced Tree Programming : HEEEELP
              kohinoor75 Level 1
              Thanks for the tip about the selectedItem tree, I will replace them by selectedIndex. But this is really tedious, because I have to find out what are the index of tree items, regarding a unidirectional list actually reflecting only what is present on the display liste of the tree, where hierarchical information is not handled.

              However, I wrote a method base on selectedItem to restore tree state, it works, but with an eratic behaviour; some times, it does not work at all... May be this is an effect of the bug you described