Archive for December, 2009

Displaying Tree-like Hierarchical Data in a Spark List

We’re winding up development of Flex 4.0 and the Spark components. As most of you know, we didn’t have time to make Spark equivalents of the MX components. One missing components is Tree.
The MX Tree is based on a List and has a custom dataProvider that flattens the hierarchical data and uses custom renderers that offset their labels to indicate depth of the nodes. One of the reasons there is no Spark Tree is that we’re not quite sure that is the right design for a Tree. Instead, it might have a custom layout that does the offsetting, or it might be better to know how to walk a hierarchy instead of having it flattened for you. Watch for that discussion after Flex 4.0 ships.
In the interim, Flex 4.0 will have a MXTreeItemRenderer class that allows you to create item renderers for MX Tree using the same workflow as creating item renderers for Spark List.
I had some spare cycles recently and decided to see what it would take to re-create the MX Tree pieces in Spark. I got this far in 2 hours. It can only handle XML and doesn’t have open/close effects but because it is based on Spark List, you can customize this Tree the same way you can customize other Spark components. Customizing MX Tree is difficult at times.
There is no guarantee that a Spark Tree will be anything like this mock up. Usual caveats apply. I’m sure there are bugs and missing features, but I’m posting to give folks ideas if they absolutely have to display hierarchical data and need something that Spark makes easier like custom scrollbars.

Run Demo
Download Source

Spark List + Spark List = Spark DataGrid?

One of the goals of Spark is to use composition to create custom components. For Halo, everything was about performance and we hardwired a lot of custom subclasses together to get things to work as fast as possible. All of those custom subclasses made extending components very difficult at times.
One of the axioms of programming is that prototyping is usually much easier than creating something that is production-ready.
Most of you know that Flex 4.0 won’t have a Spark DataGrid. There just wasn’t enough time on the schedule. We created a Spark-based class called MXDataGridItemRenderer that allows you create item renderers for DataGrid using the same basic workflow as creating item renderers for Spark List. But the ways you customize the rest of DataGrid is different than the way you’d customize other Spark components.
I had some time recently to prototype a DataGrid-like thing by compositing two Spark Lists together. It took about a day or so to get this far. You can drag the headers to re-order them, resize the column widths, click on the headers to sort. And since it is composed of Spark pieces you can customize aspects of it like you would other Spark components.
Remember, this is a prototype. Not fully debugged or fully featured, and there is probably performance issues if you have lots of columns. I’m just posting it in case it inspires ideas for how you can create things in Spark that mimic things that exist in the MX components that are missing from Spark. For example, if you wanted to add a footer, it should be much more obvious that you can do that by adding a third List. If you wanted locked rows and columns, you’d probably just add more Lists.
Usual caveats apply. Also, there is absolutely no guarantee that when we finally produce a Spark DataGrid that it will be composed in the same way.

Run Demo
Download Source