Josh Talks Flash

Open Source Flex Component: TreeMap updated to version 2.1.0

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.

by Josh Tynjala | 9 comments

Open Source Flex Component: PopUpThumbnail

While working on a new example for Wires, 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.

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 Wires 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.

by Josh Tynjala | 3 comments

Open Source Flex Project: Wires UI library

After a few weeks of hard work, I'm happy to present Wires, an open source library featuring "wiring" components for Flex. If you've ever played with Yahoo! Pipes, you'll understand the UI paradigm I'm talking about. Basically, data is passed around the application by connecting jacks together with wires, similar to how one might connect cables between a TV and DVD player or from a computer to a network.

Be sure to take a look at the fun YouTube video player example:

Wires is available for download from Google Code under the terms of the MIT license, so it may easily be used freely in both open source and commercial products. Be sure to take a look at the API documentation, and the source code for the examples are available in the main ZIP file. A simple tutorial on the wiki walks you through adding the library SWC to your project and explains the Getting Started example.

Update: In addition to releasing the library, I've made minor updates to Logicly, the logic gate simulator I posted about last week. The logic gates now support circular references, which allows some particularly interesting circuits to be created.

Update: I forgot to mention something very important. Due to a bug in earlier versions of the Flex SDK, Wires requires Flex 3.2 at the minimum, so be sure to update, if you haven't already.

by Josh Tynjala | 19 comments

Logicly: a logic gate simulator built in Flex

Update: Wires, the UI library used in this application, is now available for download. Read my introductory blog post about Wires.

Recently, I decided to take some time off to relax and take a short break from regular day-to-day software development. At least that was the plan. A few days into my much-needed vacation, I got the itch to write some code, and I soon started building a library for Flex to allow "wires" to transmit data among controls in an application. Have you played with Yahoo! Pipes? It's basically the same sort of UI concept, but built for Flex.

To test the library, and to have a more complex application that could show off its features, I started building an app that I call Logicly (yes, I know, I've been infected with the trendy Web 2.0 misspelling bug). During my university days, one of my professors requested that we students build an application much like this one so that he could use it for demonstrations in his Computer Architecture classes. Basically, Logicly allows you to chain together "logic gates" to simulate the boolean algebra used by digital circuitry. You know, simple operations like AND, OR, NOT, XOR, and others. Nothing revolutionary. In fact, I found several 90s-era Java applets that do the same thing, but I've got to say that a Flex app feels much more responsive and rich than that old Java stuff, even without a very creative skin.

If you're interested in playing with the wiring library, I'm going to have to ask you to be patient for a bit. It will be an open source release, but I still need to finish writing documentation and building some simple examples to get everyone started. Additionally, the library is not compatible with the current version of the Flex SDK. There's a bug with the drag manager when you use custom cursors, and I had to start using the 3.2 nightly builds to finish development. In short, stay tuned while I get everything polished, and enjoy the Logicly preview app for now.

by Josh Tynjala | 16 comments