Flex Chronicles #15: Container Cell Renderers

When creating cell renderers in Flex (for use in Lists & DataGrids), using containers can be advantageous. Whether you use an ActionScript class, or an MXML one, centering things and controlling the layout of how your cell renderer works is a lot easier with say, an HBox.

Example, we have one DataGrid cell that represents a rating, and as a list of customers is shown in the grid, the rating goes from 0 to 5. I show a number of stars for the cell based on what the rating value is passed into the cell renderer’s setValue function.

Now, without a container, I’d have to create a position based on how many I created; usually just incrementing a number and adding the width of the previously created MovieClip.

HBox? Just call createChild in a for loop… done. 3 lines of code. Best thing is, you can later control horizontal & vertical centering and other properties since it’s all built into the box model (think DIV tags).

…one thing I forgot, however, was how all Containers extend ScrollRect. Meaning, if the content they hold is larger than they are, they will automatically show scrollbars so you can see the content. Just like a web browser works for example. You need to manually turn these off so the cell renderer doesn’t squeeze scrollbars in your List or DataGrid. Simply:

public function init():Void
{
        super.init();
        
        hScrollPolicy = "off";
        vScrollPolicy = "off";
}

Just a quick note, if you emailed/im’d me and I didn’t respond, sorry, been working 24/7 on-site finishing up the first round of a Flex project. Get up, drive an hour to work, work till 11’ish, drive an hour home, pass out, repeat. Email? Bills? Laundry? F-that stuff, yo. Code, code, and more code. Starbucks Dinner. Then code some more.