Flex 2.0.1 Tree with Spring Loaded Folders (Update 2)

February 26, 2007

I’ve updated the Flex 2.0.1 Tree with Spring Loaded Folders code to take care of a couple small bugs, plus added some features. Support for optional restricted operations during both drag and drop (including inheritance support). Optional drag proxy when dragging multiple items. Operation restriction when dragging into originating node (into self).

Spring loaded folders 2

I decreased the auto opening sensibility as it was a bit reactive, for example if you moved over a node then directly above it, it would still trigger the open sequence (sporadic).

I added a common function to show a restricted operation cursor, this allows one to constrain certain nodes/leafs from being dragged, or dragged into.

There is an optional inheritRestrictionsDrag property when set to true all children inherit it’s parents settings. This allows you to mark the top level parent with the restriction and have all children follow the rules.

I added functionality so one could specify that certain nodes/leafs can’t be dragged at all. Also has an optional inheritRestrictionsDrop property, same rules apply as above.

Your data source should have acceptDrag or acceptDrop to take advantage of the above functionality. I had thought about creating a data descriptor for these, but that may have been restrictive for some. So basically if acceptDrag = false then you can’t drag the item, and if acceptDrop = false then you can’t drop into an item.

I added support for click open where if true and the user clicks anywhere on the itemrenderer then it’ll open or close respectively. This is optional via the property openOnClick.

I’ve replaced the @isBranch, an xml specific directive with “dataDescriptor.isBranch(selectedItem)”.

I’ve added an optional groupDragProxy property and a groupDragProxyLabel. When set to true and multiple selection dragging is occurring the drag proxy image will show only one item with a optional item count, as opposed to the stacked items method. The label text for the drag proxy image can be set via the groupDragProxyLabel property with an optional “[#]” where the [#] is replaced with an item count. There is a new class which provides this support ListItemGroupedDragProxy which is an extension of ListItemDragProxy. If you don’t need/like it, it may be safely removed by deleting the overridden function dragImage.

I added support to stop the opening indication animation and subsequent actions when a node is being dragged into itself, it’ll now show a restricted operation indication.

I’ve added access to the internal dropData of the tree. It’s not used all over the place but this will officially rule out support for Flex 2.0. I’m sure there are way’s to replace the calls with other supported calls for those that wish to find a solution. For Flex version 2.0.1 all is well.

New methods include:
draggingOverSelf
showRejectDropCursor
isMouseOverNode
itemAcceptDrop
itemAcceptDrag

Plus the new class as mentioned above.

All the changes are marked with “Update:”. The below sample has been updated to reflect these changes. The previous version will remain unchanged. Ideas and feed back welcome.

Enjoy.

Requires Flash 9 player.

Sample and Source : Spring Loaded Folders (Update 2)

Jason Hawryluk

Advertisements

40 Responses to “Flex 2.0.1 Tree with Spring Loaded Folders (Update 2)”

  1. shawn gibson Says:

    Hey Jason, this is amazing, and I’m already implementing it:) I would like to ask you, since I’m an absolute newb still, how I might grab the values of the non-leaf nodes and the leaf nodes, to use this in a photo gallery. For example, if I have a simple structure in the XML:

    …etc

    …How could I grab the value of the jpeg items so I can use that to become the data provider of an image array when someone clicks it in the tree, i.e., if someone clicks the word george, the images george1 and george2 etc. would have values I could use to populate an array, say a canvas loaded with the appropriate number of image loaders where the data provider is coming from the xml file?

    You can see what I mean if you click my ‘website’ in progress. In the Galleries, click the galleries accordion header, it would load the thumbs into the area at the bottom of the screen.

    If you were able to tell me how to grab the value, hopefully I can find the rest from there, but the worst case would be, I would be willing to pay you if you instructed me through the process…

    Shawn

  2. shawn gibson Says:

    Hey Jason, thanks for your thoughtful response.

    I appreciate this effort very much. I aksed you a question and you answered it very well, but I think I made it WAY too complicated for myself.

    I am trying to use your SLFT to navigate through a set of nodes, and land on a ‘gallery’, whereafter, once you click it, my added “gURL’ attribute would fire off a variable to the rest of the application – it’s a lot simpler that way, and allows for the generation of all the galleries I’d need independently, instead of trying to load one huge XML file and get stuck actually displaying the images in the tree. Do you know how I would change your AS file to pass me back a string based on the value of gURL, for example as in the following link I have for one gallery: http://shawngibson.com/quicksilver/bin/galleriesData.xml

    It would load, for example, the following thumbnail file, into my thumbnail container, driven by an itemRenderer dynamically with a data provider: http://shawngibson.com/quicksilver/bin/model/catherine.xml

    PS If you didn’t get my emails, I sent you some important info that I think you might find helpful regarding your other project, if you got it, I hope it was helpful!

    It’s people like you who help people like me, who are not coding experts, actually have the chance to be on the net.

    Shawn


  3. Shawn, I don’t have time today to properly respond, but I will contact you via email as soon as I have time. As per the other tool I’m working on it was feature complete at the time so I did not require the info you provided.

    Thank you though for forwarding it.

    jason


  4. He Jason,

    GREAT WORK!! The standard tree is a nice approach, but most of the time it’s just not doing what you want it to do… maybe they take your new improvement to Flex 3.

  5. Scott Says:

    cool stuff! Since you’ve played with the tree control quite a bit and extended it to suit your own needs I wondered if you had ever considered extending its functionality on the data binding level. See my post here:

    http://www.adobe.com/cfusion/webforums/forum/messageview.cfm?catid=585&threadid=1261541&forumid=60

  6. Steven Liao Says:

    I have a post for using drag&drop in Tree control in another user group but getting no response yet. I am glad to see your article here. I wonder how to download your component to study. Also I paste my original posting here.

    Thanks,
    Steven Liao

    ——————————————–
    I am having problem to find out more details on drag & drop in tree
    control. I have a tree control that contains items in three levels.
    Level 1 items contains level 2 items, and level 2 items contains level
    3 items. Items in different levels are different. Items can be moved
    around only in the same level. In order to do this, I need to know the
    details on the drop destination. Here is a sample function to handle
    drag & drop.

    private function doDragDrop(event:DragEvent):void {
    var items:Array =
    event.dragSource.dataForFormat(“treeItems”) as Array;
    var item:Object = items[0];
    var dropTarget:Tree = Tree(event.currentTarget);
    var idx:int = dropTarget.calculateDropIndex(event);

    }

    I do not know how to get the items before & after the drop index from
    API document. I need to inspect those items to allow/disallow drop
    action.

    Also even the drop index is the same, it seems that Tree control could
    drop the item in different level depends on the mouse location. It
    could drop it in a higher level or lower level.

    I wonder if anyone have done things similar or have a better UI
    pattern to suggest. Thanks in advance for your help.
    ——————————————-

  7. akmeful Says:

    hi, i’ve played a little with your source code and fixed (I hope 🙂 nasty bug i posted here earlier. Here is block of code with comments:
    private function restoreState(event:TimerEvent):void{
    // Back out if state has changed since timer delay setting.
    if (_lastNodeOver != null){return;}

    // from akmeful
    if(openedFolderHierarchy.length > 0){
    openItems = openedFolderHierarchy;
    }
    // proceed …
    var currentOpenFolders:Object=openItems;

  8. akmeful Says:

    Bug: open Folder 2, move two from Folder 22 to Folder 21, click Folder 21 to open it. Here is the bug from onTweenEnd();


  9. akmeful,

    I have updated the source and sample with this fix. However I was unable to reproduce the bug. It seems this tween bug is very sporadic. Nothing wrong with an extra test to avoid unwanted results.

    Seems your earlier post with the error results was marked as spam so I wasn’t alerted to the problem. My apologies for that.

    Thanks for posting the info.

    jason

  10. Webvida Says:

    Well I love it – but I am such a noob that I cannot install it to my flex builder. I have been looking for hours, but there is no explaination that I can find showing how to install things from view source – what a suck.

  11. Webvida Says:

    Well I worked it out – you have to import the files into an existing projectm using right click import then browse to the archive you downloaded (view source).

    The little things take up so much time with flex – I am sure it will be cool once i get my head around it, but I wish the devs would stop taking it for granted that we know everything before learning it….

  12. luar Says:

    I can neither open your sample page nor download the source.

  13. luar Says:

    Thanks, I can open your page.

    I find your demo, during drag, the scrollbar can auto scroll up or down, but when I compile your source, it cannot auto scroll.


  14. luar,

    Have you installed the Flex 2.0.1 update ? Perhaps there may be a quirk with the Flex 2.0 tree regarding this. Just a thought, as it works fine for me when i recompile it here.

    jason

  15. luar Says:

    I am using 2.0.1, I find auto scroll during drag is already provided by Adobe, just do not know why it cannot work.

    Any away, I find a problem in your work, when user drag an item out of the tree and then move back into the tree to another row, the drag move will not work, the item will stay back in original row.

    (When item is move out, event.dragSource become null.)

  16. Nate Says:

    Jason, this thing is sooo awesome. I’m having some problems though and there is a 90% chance it is me. I still thought I would ask you what might be going on.

    When I drag something from a grid into the tree to a list that is in an open folder it duplicates the folder. If I close the folder the duplication goes away.

    So if i drop on the folder icon it works. If i drop into an open list it duplicates.

    Any ideas?


  17. Luar,

    I’ll have a look into that problem, this is not proper behavior. I’ll post a fix when I have a chance to locate the problem.

    jason


  18. Nate,

    I have come across this as well. What worked for me was to set the selectedIndex after the drop operation.

    I think what’s happening under the hood is that the tree is still trying to select the last item though it is no longer a valid selection for the current state.

    jason

  19. nic Says:

    so… where do I find the source for this thing. I’ve looked at the demo, and like everyone is saying, it’s amazing, could really use it… but am I being stupid… where’s the source. It says “sample and source” and there’s a link to the demo… where’s the download?

  20. Bernd Says:

    Hi Jason,
    great work! Thanks a lot. I was wondering if there is a way to show the tree completely expanded.
    Something like expandall() 🙂

    Bernd

  21. Kevin C Says:

    Dude your component freaking rocks! I love how it has multiple selections! Keep it up man!


  22. Kevin,

    Thanks 🙂

    Jason


  23. I wanted to customize the Drop eligibility check (only certain type of node can be dropped on certain type of nodes). Wondering if this is easily doable with Spring Tree


  24. Yes it’s very doable. You would have to modify the handleDragOver where it calls itemAcceptDrop to add your test or do another test just after or before it.

    Basically, If the currentCursorID is equal to the rejectCursorID the drop is ignored.

    jason

  25. chris Says:

    How do you get the scroll to work on the SpringTree when your dragging an item. In your example.. if you expand all nodes so the list is longer than the viewable space and then try to drag and item from the top of the list to the bottom.. the tree will scroll. I downloaded your source code and ran it without any changes.. My tree doesn’t scroll but the one on your web site does.. Do I need to do something special?

    Also, How do I get the tree to reject drops from non-branch items when dropping on the root row?

  26. chris Says:

    when are you going to post update 3

  27. Abdul Says:

    Hi there,

    I am requesting for the source code. I don’t find in your website or my eyes will be not good to find in your website. Can you please send the link for this complex tree handling similar to whatever you have. Really appreciated!

    https://flexibleexperiments.wordpress.com/2007/02/26/flex-201-tree-with-spring-loaded-folders-update-2/

    Thanks,
    Abdul

  28. Martin Says:

    Nice work, I would fry my last braincells to understand what you did in there, but it sure seems to work fine.. does anyone know how to keep a selected folder open while switch xmllist dp.. will show all the same folders but switch type of leafs from a tab with users|computers|other etc.. ah..dont mind if I am unclear..

  29. hunka Says:

    excellent share..thanks

  30. Travis Says:

    I have just tried to use your SpringLoadedTree v2 inside of Flex 3 and am receiving some errors. I am using acceptDrop and acceptDrag properties on the collection and receive the following errors when trying to drag items around.

    TypeError: Error #1006: parent is not a function.

  31. vrabete Says:

    Hi Jason,

    I have been working with the older version of this component until I’ve found it. I believe both versions are great, I like the additions to the new one and I’d like to use it, but it has a bug that I can’t seem to pin down.

    The bug is this one: if you drag a leaf/node and place it in the previous level, it works fine. Once you try to do so with the next one, it’s not working anymore. This happens 99% of the times, both upper and lower sometimes, the only pattern I could discover is that once I dragOver above parent node, the selectedItem blue indicator dissapears, sort of like: nothing to drop anymore.

    Could you please help me out? Any ideas?

    Again, great component, caught my ears in it trying to make it what I need it to be, but if I wouldn’t had this starting point it would have been more complicated.

    EDIT: apparently solution: commented akmeful’s line 662 like this:

    if(openedFolderHierarchy.length > 0){
    //openItems = openedFolderHierarchy;
    }

    Thank you,
    Cristi

  32. Howard Fore Says:

    Jason,

    There seems to be some issue when you try to drag in a tree that has leaf nodes longer than the height of the window. The list hops up and you lose your place in the list.

  33. Lance Says:

    For all you folks who can’t get the source – you need to be running Flash 9. I was running Flash 10 debug. Once you’re running 9, you right click and you’ll get a context menu that says “View Source”.

    Incidentally, there’s a Firefox flash switcher plugin that works for switching between flash versions. It doesn’t say that it works for Flash 10 but it worked for me. It’s basically just copying around a couple files.

  34. Lance Says:

    Actually, now “view source” seems to work for me in either 9 or 10, debug or not. When I was trying it before with Flash 10, I thought it didn’t work. I was probably just doing something dumb though.

  35. lingpri Says:

    Hi Jason,

    I’m trying to load the XML document thru a URLLoader class and the whole XML document gets loaded as a node.Please advice on what might be wrong.
    Thanks..
    Priya

    private function handleComplete( event:Event ):void {
    try {

    Model.instance.treeData = new XML( event.target.data ).copy();
    trace(Model.instance.treeData.toXMLString() );

    } catch ( e:TypeError ) {
    trace( “Could not parse text into XML” );
    trace( e.message );
    }
    }

    public function AlertInfoCommand()
    {
    super();
    m_httpService.url = Model.DEBUG ? “test.jsp” : Model.URL;
    var loader:URLLoader = new URLLoader();
    loader.addEventListener( Event.COMPLETE, handleComplete );
    loader.load(new URLRequest(“sampleData.xml”));
    //Controller.instance.addEventListener( AlertInfoEvent.TYPE, getMsgHandler );
    }

  36. lingpri Says:

    I got it i missed the labelField attribute in the Tree tag..

    Great work Jason..

    Thanks..
    Priya

  37. Shailesh Says:

    If DnD is from one tree to another tree, after drop is complete, the target tree scroll just by mouse movement (without pressing the scroll bar). Looks like auto scroll is not reset. Any one came across this issue?

  38. Man GMBH Says:

    Good blog, userful, thanks.

  39. Thorne Says:

    Slight annoying bug

    The icon to say if you can drop or not is based on where the mouse is, not on where the insertion line is.

    The mouse might be over somewhere that is OK to drop but the insertion line might be where you cannot drop. The icon will show you can drop but you can’t and vice versa


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: