It seems that I’m on a Flex component development streak lately. A couple days ago, I got some inspiration to give a little attention to my TreeMap Flex component. After initially starting on some minor performance enhancements, I kept finding more and more I could do. Several commits later, I realized I was putting together a very solid new release.
Most interesting of this release’s additions are the performance enhancements. I hadn’t expected to improve the performance much more than what I was able to achieve moving from the 1.x archtecture to the 2.x architecture. However, some extra time spent in the profiler, along with some inspiration from a blog post on Flash Player’s dirty rectangle by Seb Lee-Delisle (the problem he overcame wasn’t directly related to what I optimized, but it made me think about improving the way I use certain display list functions) gave me a noticeable speed increase for larger data sets over 500 items.
Another big improvement is a new implementation of the default “Squarify” layout algorithm. The original version of this algorithm, and the one that most people implement in other open source treemap projects, is recursive. As I discovered, with a large enough data provider (between 1100-1200 items), the algorithm can easily cause a stack overflow in Flash Player. I rewrote the algorithm to run in a simpler while loop, so the number of items in the TreeMap’s data provider won’t be a bottleneck anymore. This change has a positive side effect; by removing so many function calls (which have a certain performance overhead), the algorithm ends up running a bit faster.
Those are the most interesting improvements. Others include the addition of properties for separately specifying branch labels and data tips (for instance, branchLabelField takes precedence over labelField), better (and faster) skins for leaf renderers, proper non-interactive behavior when enabled is set to false (I always forget to test that when I build components), a new branchZoom event on TreeMap, more complete API documentation, and a new example named Introduction to TreeMap (pictured above) that combines, streamlines, and replaces a few of the older examples.
Like what you see? Download flextreemap from the project page. The download includes the component SWC, documentation, compiled examples, and the full source code licensed under a widely-usable MIT license. The TreeMap API documentation is also available livedocs-style online, and you can view the examples there too. and if you find any bugs in the component, the documentation, or the examples, please file a bug report. Feature requests are welcome too.
Important note: TreeMap now requires Flex 3.2.0 at the minimum. The leaf renderer is very similar to a button, and I followed some of the conventions the Flex team are using to implement the Marshall Plan as it relates to mouse events and sandboxing. Some of the APIs involved don’t appear in earlier SDKs, so you must use Flex 3.2 or higher starting with TreeMap 2.1.0.
Very good component~:)
Pingback: Open Source Flex Component: TreeMap | 达达的Blog
Thank you very much!
I would like to use it slightly different. Instead of displaying a label and a color background on each box I would like to define an image that will cover the area. So the DataProvider would hold a property called imageSrc or something like this.
What would you propose? Extending your component, modifying it?
Thanks
jatorre, that’s certainly possible. You need to create a custom ITreeMapLeafRenderer. It’s very similar to how you would create a custom item renderer on a List or a Tree.
Your example treemap linked above is triggering a server error at the moment when you click on it.
Thanks, Jean. I fixed the link.
What happened to the toolTipFunction did it change or dissappear? Kind of an important question for us.
Jean, it’s now available as
dataTipFunctionandbranchDataTipFunction.Pingback: evolutioneer.com/blog » Blog Archive » Start 2009 With Some Links
Pingback: Flex Monkey Patches » Blog Archive » Rubbernecker’s Review - Week 22
Hi,
I just want to know if is it possible to display landscape images instead of portrait to keep the isometry.
http://img5.hostingpics.net/pics/666409Image_4.png
Gauthier, you will need to modify the layout algorithm if you want to ensure that leaves are always landscape. The default layout algorithm, called “squarify”, tries to make leaves as close to square (1:1 average ratio width to height) as possible. The fact that your example has a “portrait” orientation is coincidental.
I have some problem to modify your algorithm …
The class SquarifyLayout contains the function squarify which is private. So I can’t override it. :/
Gauthier, you don’t have to override the function. You can implement the interface ITreeMapLayoutStrategy with a new class if you want to create a new algorithm.
Hi,
I want to push a fade or zoom effect when an user clicks on the icon to open or close a node.
Can you please give me some tip on how to do that?
Gaurav, that’s something I want to make a standard feature of the TreeMap component, but I haven’t put any thought into the implementation yet. You might see how the regular Flex Tree implements branch opening to see how you might implement an effect in a similar way for TreeMap.
Hi,
I am not able to access the View the examples of TreeMap API.Can you please help me provide the examples details.
Examples are now available here:
https://github.com/joshtynjala/flextreemap/wiki
Thanks for making this available! I think it will be awesome.