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).
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
Flexible Experiments 
March 7, 2007 at 10:55 am
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
March 10, 2007 at 4:45 pm
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
March 10, 2007 at 6:03 pm
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
March 11, 2007 at 1:03 am
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.
April 21, 2007 at 1:36 am
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
May 2, 2007 at 9:56 pm
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.
——————————————-
May 8, 2007 at 8:17 am
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;
…
May 8, 2007 at 8:21 am
Bug: open Folder 2, move two from Folder 22 to Folder 21, click Folder 21 to open it. Here is the bug from onTweenEnd();
May 8, 2007 at 9:17 am
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
May 11, 2007 at 1:01 pm
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.
May 11, 2007 at 1:30 pm
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….
May 15, 2007 at 7:22 am
I can neither open your sample page nor download the source.
May 15, 2007 at 9:28 am
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.
May 15, 2007 at 10:10 am
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
May 16, 2007 at 7:54 am
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.)
May 16, 2007 at 4:54 pm
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?
May 19, 2007 at 6:21 pm
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
May 19, 2007 at 6:25 pm
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
July 8, 2007 at 5:21 pm
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?
July 10, 2007 at 9:21 am
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
August 4, 2007 at 5:35 pm
Dude your component freaking rocks! I love how it has multiple selections! Keep it up man!
August 4, 2007 at 11:03 pm
Kevin,
Thanks 🙂
Jason
August 10, 2007 at 3:34 pm
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
August 10, 2007 at 4:07 pm
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
October 23, 2007 at 6:57 pm
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?
November 27, 2007 at 3:44 pm
when are you going to post update 3
December 21, 2007 at 1:15 am
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!
Thanks,
Abdul
February 20, 2008 at 3:55 am
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..
June 13, 2008 at 9:45 am
excellent share..thanks
August 4, 2008 at 4:22 pm
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.
October 20, 2008 at 2:44 pm
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
January 29, 2009 at 8:29 pm
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.
February 9, 2009 at 10:03 pm
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.
February 9, 2009 at 10:19 pm
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.
April 21, 2009 at 9:34 pm
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 );
}
April 21, 2009 at 10:12 pm
I got it i missed the labelField attribute in the Tree tag..
Great work Jason..
Thanks..
Priya
October 14, 2009 at 3:13 am
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?
October 14, 2009 at 4:49 am
Found a solution here, http://www.boxertech.com/post/Flex3-Uncontrolled-Auto-Scroll-after-DragDrop.aspx
May 16, 2010 at 3:28 pm
Good blog, userful, thanks.
December 20, 2010 at 5:41 am
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
June 6, 2020 at 11:38 am
star Emmanuel PetitONE IN, ONE OUTMan Utd receive huge boost in pursuit of Antoine Griezmann as Atletico Madrid line up Alexandre LacazetteNot so GriziGriezmann plays down talk of Man United move by claiming he wants to 'make history' with Atletico MadridKroos controlManchester United set to bid for Real Madrid star Toni Kroos as 锟?00m Antoine Griezmann deal stallsFIVE MOUR YEARSJose Mourinho to be offered new five-year deal at Man United to oversee club's 锟?bn redevelopmentWho are yaTen things you didn't know about Atletico Madrid star and Man United's 锟?5million target Antoine Griezmann Getty Images4Antoine Griezmann has an 锟?5million release clause in his contract with Atletico MadridGetty Images4Alexandre Lacazette is being lined up as a possible replacement for Antoine GriezmannArsenal and West Ham are among those said to be interested with the Gunners reportedly having a 锟?9m bid rejected last summer.
June 6, 2020 at 11:38 am
Mauricio gets across his ideas to the group and we know exactly what he wants.