Posts in Category "Spark Stuff"

Spark Menu and MenuBar for Flex 4.5

A few folks pointed out that the Menu and MenuBar prototypes I put together based on Spark List are not working in Flex 4.5. I found enough time to try to get it working again. I also added support for a MenuBar item that doesn’t have a menu.

Run Demo

Download Source

Spark Checkbox DataGrid With Drag and Drop Support

The Spark DataGrid is almost ready to ship. We ran out of time to do some of the things MX DataGrid could do, including popular things like drag and drop of columns to change the order of the columns, and drag and drop of items to copy or move items to and from other DataGrids and Lists or within the same DataGrid.

I found some time to show how to add that to the DataGrid. I was able to do it without subclassing, which indicates that we got the public APIs right, but if you want to have multiple DataGrids in your app, I would fold the drag/drop code into a subclass anyway. In the demo, there is an empty list below the DataGrid you can drag to or drop from.

If you’re wondering why we couldn’t bake this into DataGrid even though I had time to code it up on my blog, it is because of the time required to test and debug and handle drag/drop of cell selection. It is a prototype, not finished code. But I’ll bet we’ll integrate code like this into a future release.

I also created the Spark version of the CheckBox in MX DataGrid post. I like this implementation of using CheckBoxes in DataGrid when the dataProvider doesn’t have a slot to store the selected state. You can use the selectedIndices or selectedItems to access which items are checked without having to loop through your dataProvider. In creating this post, I also created the Spark version of the tri-state CheckBox (a CheckBox with a partially filled check box that indicates that not all items are selected in the DataGrid. It was pretty easy to do because the skin parts are easily accessible and it is easy to add a new state to the CheckBox.

Usual caveats apply: not officially supported, may not fix bugs, etc.

Run Demo
Download Source

Spark DataGrid Footers

Here is a first attempt at putting footers in a Spark DataGrid.  The approach taken is to customize the skin and add an additional Grid element and assign it an custom ArrayList that contains the summary data. A subclass of GridColumn allows specifying a summary function. In the demo, the first column does a sum, the second does an average.

One of the surprises was in the partAdded handler.  Because you can’t control the order in which skin parts are added in subclasses, you have to build in some redundancy when there are interdependencies between skin parts.

Run Demo
Download Source

Usual caveats apply.

Spark DataGrid with HierarchicalCollection and GroupingCollection

A Spark-based DataGrid is one of the most important additions to Flex. It will be officially released shortly with the Flex 4.5 SDK. Finally, folks will be able to use the same skinning workflows they use on their other Spark components to customize the look of the DataGrids in their applications.

Unlike the MX DataGrid, where I wrote most of the code, and like the MX AdvancedDataGrid, where I didn’t write any of the code, I don’t think I wrote a single line of code for Spark DataGrid. A completely different team of folks wrote it. And that means I’m not all that familiar with how it works under-the-hood, so I decided to try learn more about it by stretching its capabilities in order to see if it has the right APIs and extension points, by adding a capability that won’t ship in-the-box with Flex 4.5, and that is the ability to use GroupingCollection to get some sort of hierarchical (tree-like) display in the Spark DataGrid.

It took about 4 hours to get to this point. I started with the example in the Flex doc at this link. Spark DataGrid only takes data providers that implement mx.collections.IList, so I wrote an ICollectionView to IList adapter, plugged it in, wrote a custom renderer and it pretty much works. Links to Demo and Source below. I’d say if I can do something like this in half a day, that the APIs and extension points are in good shape.

Note: Like all Flex 4.5 applications, the newly released Flash Player 10.2 is required to run the demo. The blog software we use makes it impossible to upload HTML wrappers so there isn’t any wrapper around the demo that will force the upgrade of the Flash Player. The Flex 4.5 prerelease will install the player or you can get it from the adobe site here.

Usual caveats apply. This code is not officially supported nor is it thoroughly tested.

Run Demo
Download Flash Builder 4.5 Project

Spark Charts

MX Charts are very flexible and use composition much like the Spark architecture. I don’t know if/when we’ll create Charts on the Spark base classes. I decided to see how far I could get by putting a bunch of DataGroups and a custom collection and layout into play.
Usual caveats apply. There are bugs, missing features, etc. But it might be a starting point if you need to throw some charts on the screen on top of the Spark.
Run Demo
Download Source

Spark Menu and MenuBar

So far I’ve repurposed List into a DataGrid, Tree, DateField and ColorPicker. Here is my attempt to convert List into Menu and MenuBar. Usual caveats apply. There are probably bugs, the visuals need tuning, and there is no guarantee that the one we finally ship someday will look anything like it.
Run Demo
Download Source

Spark DateField and ColorPicker

We also ran out of time to do a Spark-based DateField/DateChooser and ColorPicker. It is on the list for future releases. I was able to hack a DateField and ColorPicker using all Spark components. I have no idea if the version we ship in the future will look anything like this at all and I’m sure there are bugs, but it will give you an idea of the flexibility and consistency in the Spark architecture. The components on the left are the ones I created, the ones on the right are the old mx versions.
Usual caveats apply.
Run Demo
Download Source

Constrained Drag and Drop

I’ve seen a few questions about how to restrict drag and drop so you can’t just drag something anywhere. I had some spare cycles so I put this together. There are probably several ways to do this, but I chose to delay the mouseMove handler to run after the DragManager has done its work, and reposition the dragImage and cursor in the mouseMove handler.
Download Source
Run Demo
You should be able to create variants that only allow vertical movement or don’t allow the dragImage outside of a certain rectangle.
Usual caveats apply. And yes, it isn’t a real game and doesn’t handle overlaying tiles.

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