One of the most powerful and important features new to Flash MX is components. The built-in components give you a vast amount interactive controls that far exceeds nearly any UI widgets created for Flash. With this power though, comes complexity. The components are all based on a very robust but intricate hierarchy of objects that provide all of the functionality you would expect from OS native widgets. This includes skinnability, keyboard control, and focus control.

One component that is not built-in though that there is a great need for is a simple grid view. Something where you can easily view tabular data. A more complex grid where the columns are resizable, reorderable, etc would be wonderful, but for now even displaying tabular data would be more than what is out there.

One track you could take would be start from scratch and try to build your own grid component. This is a very valid path to take, again, if all you need is to display tabular data that would be overkill. The reason is because will a little bit of hacking you can make the listbox control display tabular data!

First off, the listbox and a number of its sub-objects have hard-coded into them some particular ways to display the items in any scrollable select list (this includes the combobox component). The problem is that this code does some offsetting of the items in the list and in order for our hacked-together grid view to work properly, all of the items need to be lined up with the same height. In order to get around this I created a small object ListBoxGridHack that you can use to "patch" any listbox you have on your stage so that it aligns the items in the way you need. This code is all contained in the ZIP file link at the top of this tutoria. Snag that file, decompress it, and save it to your hard drive. Inside the ZIP is two files, the finished version of this tutorial and this .AS file.

Setting up the movie

So to actually get started, create a new movie and save it as gridExample.fla and put it in the same directory where you saved the .as file. Then create two layers, actions and listbox. With the listbox layer selected, drag a listbox component from the components panel to the stage.

Now, set the listbox's width to be 216 (more on this in a second), and it's height to 100. Also, give it an instance name of grid_lb.

For this tutorial you are going to make a grid where each row is 200 pixels wide. Because of the fact that the standard scrollbar is 16px wide you're actually control needs to be 216px wide. If you have a custom scrollbar skin or are making or grid's rows a different size make sure you properly compensate.

Creating the custom item symbol

Now you need to create the custom item symbol that will be used for each row in the grid. First open up the library and dig down to Flash UI Components -> Core Assets - Developer Only -> FUIComponent SubClasses -> FSelectableItem SubClasses

Here you will find one item, FListBoxItem. Select it, right click (Ctrl-click for our Mac friends) on it and select Duplicate. When the duplicate window pops up first give this new symbol a symbol name of FGridItem. Then click on the Advanced button, click the "Export for ActionScript" checkbox, and then give it an identifier of FGridItemSymbol. Now click OK.

Setting up the items code

#initclip 3

function FGridItemClass(){
    this.init();
    this.itmHgt = 16;
}

FGridItemClass.prototype = new FSelectableItemClass();
FGridItemClass.prototype.displayContent = function(obj){
    this._visible = (obj != null);
    this.lname_txt.text = obj.lname;
    this.fname_txt.text = obj.fname;
}

FGridItemClass.prototype.layoutContent = function(){};

Object.registerClass("FGridItemSymbol", FGridItemClass);

#endinitclip

So, what's going on here? First off, the #initclip statement makes this code run before your main movie starts, that way this clip is fully initialized before you try to use it (very important!). Next, you are defining a new ActionScript class named FGridItemClass. Each custom list/combo box symbol needs to have it's own class in it in order to work properly. One thing in this constructor that's special is the line that sets the variable itmHgt to 16. This is there to tie into a specific hack in the ListBoxGridHack file that allows you to set the size of the rows in the list rather than ActionScript trying to measure them (which would cause problems if your textfield was even the tiniest bit too tall)

Then you are defining two methods, displayContent and layoutContent. DisplayContent is run anytime new data is placed in the grid or it is scrolled. DisplayContent gets passed a single argument that contains the data it should be displaying. In a normal listbox it would contain two properties, label and data, but in our case it can contain anything we want.

The next three lines handle actually drawing this particular line of the grid. First, it checks to make sure that the object passed to it isn't null, if it is then it just hides this item. Next the code extracts two properties from the information passed to it, lname and fname and puts their data into two textfields lname_txt and fname_txt respectively.

Next is the layoutContent method, which is only run when this item is first run or whenever it is resized. You'll notice there's no code inside of LayoutContent, this is because the class you are inheriting from, FSelectableItemClass has it's own layoutContent method and we need to override it. (it draws a label onto the this clip that you don't need)

Finally, you are registering this class with the symbol. This way all instance of the FGridItemSymbol will have this class built into it. This makes each item of your grid act the same way.

Customizing the items appearance

Now all that needs to be done to this symbol is to actually put the custom graphics in it. First, create two layers under the actions layer, text and lines. With the lines layer selected create a 200px long horizontal hairline located at 0x, 16y. Then draw a 16px long vertical hairline and place it at 100x, 0y. Now lock the lines layer.

Next create two textfields and make sure that they both are set to dynamic and have selection turned off. Now position them so that the first is at 0x, 0y, and the second is at 100x,0y. Finally give the first on an instance name of lname_txt and the second an instance name of fname_txt.

That's it for the custom item symbol!

Applying the hack

Now jump back to the main timeline and add this code:

#include "ListBoxGridHack.as" ListBoxGridHack.patch(grid_lb); grid_lb.setItemSymbol("FGridItemSymbol");

The first line includes the .as file mentioned earlier. The second line applies the hack to the listbox you created earlier, grid_lb. Finally the third line tells the listbox that you want to use your new custom symbol for the items in the list.

Now, another feature of the hack is that it modifies how the addItem and addItemAt methods of any listbox you apply the hack to. These methods now only accept a single argument for the information to be added to the list (the addItemAt method still supports one additional method for where you want the new item added in the list)

This single argument is now an object with any properties you would like. In our case since our custom item symbol is displaying fname and lname thats want we want to send in. Here's the code to do that:

grid_lb.addItem({fname:"Patrick", lname:"Miko"});
grid_lb.addItem({fname:"Robert", lname:"Penner"});
grid_lb.addItem({fname:"Samuel", lname:"Wan"});
grid_lb.addItem({fname:"Branden", lname:"Hall"});
grid_lb.addItem({fname:"Dave", lname:"Yang"});
grid_lb.addItem({fname:"Nigel", lname:"Pegg"});
grid_lb.addItem({fname:"Andreas", lname:"Heim"});
grid_lb.addItem({fname:"Peter", lname:"NRG"});

That's it!

One nice effect of this hack is that you can actually sort on any property you send in. For example:

grid_lb.sortItemsBy("lname");

will actually sort the items by last name!

Conclusion

Obviously this tutorial covers the creation of a very specific grid view, but now that you know where all of the vital pieces are you can make your own custom grid views. All you need to do is to make sure you properly create the custom item symbol and that you modify the layoutContent and displayContent method inside of it to deal with your particular situation.

Oh, and keep an eye out later this year for a book by Sam Wan and myself from New Riders Press!