Code Zen

This is definitely work in progress. I ported my treemap classes to the Flex framework and created this quick app that reads data from Digg. It doesnt automatically load data so click on one of the links above to get started. Rollover the rectangles to preview the story and click on them to launch the link. I just love the visualization since it makes so much more sense of the number of diggs than just the number on next to the story. For example the image below just underlines the importance of Halo3 in the gaming community so much more than seeing the number in a list (click to enlarge)

You can try the DiggMapper here. Its still incomplete but if you have any suggestions, please leave them as a comment

I had posted yesterday how I had managed to use the listData property to add numbers to the list item renderer. However this technique broke when the List actually extended beyond viewable area and became scrollable. I have the updated the example to reflect the fix but here is what I learned during the entire process.

1) The list draws out as many itemRenderers as can be rendered if the dataProviders length is more than the numbers that can be drawn on the list without scolling.
2) List item sets the data value of the item renderer.
3) If the renderer extends IDropInListItemRenderer interface, the list sets the listData value on the renderer. The listData gives some more info to the renderer such as what its row index is,etc.
4)When the user scrolls the list, the labels are rewritten on the same renderers without actually drawing new renderers.

To actually implement the numbering, I ended up using the renderer’s owner property to get a reference on the List and then using the itemRendererToIndex method on the List passing it itself as the parameter. This now works much better as you can see. Right-click to view source :).

One design I am working on required a numbered list with a custom renderer and drag-move enabled. I had no idea how to do this the right way and it took me a couple of hours to finally get it. So I have released the source here just in case anyone else ever needs something similar.

I originally thought the List class was something like the Repeater class. Had it been, the instanceIndex property of the UIComponent would have been the simplest way to implement the feature. Unfortunately, the List doesn’t use Repeater at all. The key is actually the listData property on the renderer that the parent List tries to set on the renderer but only if the renderer implements the IDropInListItemRenderer.

Anyway, take a look at the implementation (right click to view source) – its pretty self-explanatory. I have set it drag/drop enabled but this implementation keeps the numbering correct.

I love to break out of the Flex look whenever I can. Flex does give me a lot of functionality that I don’t have to write from scratch in AS3 but for entertainment oriented applications, the default look doesn’t always work. Of course, being lazy, I always love it when I can make something look interesting without that much work.

So here is a rather simple extension to the TileList component that adds some personality to it. The code is simple enough, I just randomly add a small rotation to the images to give it more of a scattered deck of images look rather than a standard grid. A custom cell renderer adds to the effect. I have also added a ‘hover to see larger image’ thing there but that part isn’t completely done yet and so the images are getting clipped but its an interesting experiment on creating custom toolTips.

Check it out here and right click to view source.

The skinning capabilities of Flex 2 components has been criticized quite a bit. There are a few articles on devnet that discuss this a bit but I have to say that skinning components really does require some effort.

The problem is that Flex tries to be the framework for everything and of course everyone’s requirement is just slightly different. Flash was always a language for personal expression and a lot of people have the same expectations for Flex (Hardly anyone asks the Java Swing developers for scrollbars that look drastically different from the basic look and feel). To do Flex justice, compare the pain of skinning Flex components to creating a new look-and-feel for the Swing widget set.

Enough philosophy though, here is my first attempt to actually skin the Slider component (Right-click to view source). Couple of points that struck me were:
1) Make sure your components report the correct dimensions to the measurement architecture. I am still fuzzy on that part but the component wasnt working correctly until I added the measure() implementation on the SliderButton class.
2) The slider scrub positions the scrub button at an x of width/2. The width/2 point is also used as the point to set the value the slider reports.
3) This is definitely wrong and I hope the Flex team fixes this: The Slider class puts the highlight track at 1 pixel below the progress track. This definitely needs to be configurable without extending the Slider base class itself.

As always, comments are always welcome.

Of course I had to do this but this was much easier. Now you can drag the tabs to reorder them. Works pretty well. The one thing that seems lacking is instant notification where the new tab is going (on MouseMove), like FireFox brings up a purple arrow at the point where the tab is going. I dont know if I have the time for that, especially since it doesn’t seem like I will be using this container for my project, but the implementation should be simple.

Check the swf out here, and right click to view source.

If you are using this in a commercial app or something make sure you catch history management errors since removing tabs screws up history before that event (there isnt a tab-add undo when you click back 😉 ), and brings up the error stack trace if you are running the debug player.

Hope this helps someone :).

[Update] Responding to a query from someone, this code is released under the MIT license. You can download/fork the code from the GitHub Repository