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.

While working on a new example for flexwires, I built simple Flex component to display thumbnail images. When you click on the thumbnail, the full size image is displayed as a modal pop-up. The idea is similar to Lightbox, a popular JavaScript component. It’s a very simple UI control, sure, but I think it’s definitely useful in a wide range of Flex projects, so I wanted to share it. Click the image below to view a Flickr search app that demonstrates the PopUpThumbnail control:

Usage is pretty simple. It’s a subclass of the familiar mx.controls.Image, with one important change: the source property applies to the full-size pop-up content. A new property, thumbnailSource is what gets displayed in the small-size thumbnail.

<flextoolbox:PopUpThumbnail source="lolcat-big.png"
    thumbnailSource="lolcat-small.png"/>

Surprisingly, I discovered some challenges in building this component. In particular, I had one requirement that made things a little interesting. If no thumbnail is specified using the thumbnailSource property, one is automatically created by taking a bitmap snapshot of the full-size content. In this case, the full-size content must be loaded immediately. Normally, to save bandwidth, the full-size content is loaded only when it is needed (when the thumbnail is clicked). In addition to loading images from external sources, there’s also the possibility that the full-size content could be generated at runtime in Flash Player. My upcoming example for flexwires manipulates BitmapData, so there’s no need to wait for a network operation. This creates a fun little maze of activity where the internal loading mechanisms in SWFLoader may or may not dispatch Event.COMPLETE to tell me that a thumbnail can be created, that I can display a progress indicator, or that the full-size content is ready to be shown and animated.

You’ll find some interesting extensibility points in this component, if you’re interested. For instance, you can customize the progressIndicator style to display something other than a ProgressBar control. A simple SWF animation might be used instead, or a custom subclass of ProgressBar with a wildly different appearance (I can’t wait until Flex 4 skinning is mainstream. That’ll make it even easier). Another thing to note is that normally, you simply have to click anywhere to hide the full-size content pop-up after it has been shown. If you want to display something more complex than an image, such as interactive content, you can change the clickToClosePopUp property to false and set up your full-size content to dispatch CloseEvent.CLOSE when it is ready to be hidden. Imagine loading a questionnaire or a wizard when some item is clicked, or even a game, and you’ll have an idea why I made that possible.

Download the component SWC and source code from my Google Code repository. API documentation for PopUpThumbnail is available as part of the common documentation with my other “Flex Toolbox” controls like ZoomFrame and CheckBoxList. As with most of my other open source code, PopUpThumbnail is available under the terms of an MIT-style license.