[FlexJS] DataGrid Updated

[Peter Ent <pe...@adobe.com>]

This week I updated the FlexJS DataGrid to make it behave more like the Flex DataGrid.

Some background first. The FlexJS DataGrid is a composite component. The DataGrid uses a ButtonBar for its column headers and Lists for its columns. It is styled via CSS.

The column lists are presented within a Container that is scrollable (thanks to the addition of a ScrollableViewport bead on this Container). The lists themselves do not scroll (they use a plain Viewport bead) and are not given any specific height, so they can grow as tall as they need to be. As they exceed the size of the DataGrid's space, the ScrollableViewport kicks in and adds a vertical scrollbar so all of the lists' contents are reachable.

Out of the box the FlexJS DataGrid is very plain - there are no vertical and horizontal grid lines. That is work to be done, but they would be added as beads in keeping with the FlexJS pay-as-you-go philosophy.

The DataGrid is also set up to present static data. That is, while you can update the data the DataGrid is presenting, the DataGrid will not update its UI to reflect those changes. When you want to have the DataGrid become more reactive, add the DataProviderChangeNotifier bead to the DataGrid. This bead sense changes to the underlying model and dispatches events to the lists that make up the DataGrid's columns; the lists then pull or update information from the model. The initial version of DataProviderChangeNotifier is primitive, but more complex versions can be created.

Finally, the DataGrid's model is now based on the new ArrayList in the Collections framework. The ArrayList is very similar to the ArrayList from Flex in that it wraps an Array and provides change events whenever items are added, updated, or modified. This enables the DataProviderChangeNotifier to monitor the changes.

The DataGrid and ArrayList classes are written in ActionScript and cross-compiled into JavaScript.

Peter Ent
Adobe Systems