APPLICATION – SOURCE

Using a simple Item Renderer is very simple in flex. You may have seen the attribute a in a few different places called “itemRenderer”.

The itemRenderer is available to any ListBase Class… the ListBase class implements the IListItemRenderer Interface, any of the following by default implement the IListItemRenderer:

Button, ComboBox, Container, DataGridItemRenderer, DateField, Image, Label, ListBase, ListItemRenderer, MenuBarItem, MenuItemRenderer, NumericStepper, TextArea, TextInput, TileListItemRenderer, TreeItemRenderer.

To use an itemRenderer attribute in mxml you have to use Controls that are in one way or another related to the ListBase Class. A couple common examples would be the following controls:

<mx:DataGrid/>
<mx:List/>
<mx:Tree/>
etc…

By Default the itemRenderer is Null, but essentially it is used for displaying a little bit more about the data that is stored in a dataset.

For example, say you wanted to use a DataGrid that represents a shopping cart view, and want to have an image included in one of the columns to display the product, because we all know the saying “pictures are worth 1000 words” and it has proven itself true in many situations.

You would do this utilizing an ItemRenderer.

The example at the top is a rather simple one, to see what it does, simple open up the application, and click one of the buttons in the grid, you will get an Alert Box showing you the id that you clicked…

Although simple, a real world scenario could be a “Remove” Button in a shopping cart, that would remove the item from the grid.

<mx:DataGridColumn headerText=“”
dataField=“test_id” width=“80″>

<mx:itemRenderer>

<mx:Component>

<mx:HBox horizontalAlign=“center”>
<mx:Button label=“Details”
width=“75″
click=“outerDocument.getDetails(data.test_id)”/>
</mx:HBox>
</mx:Component>

</mx:itemRenderer>

</mx:DataGridColumn>

When you use an ItemRenderer with a datagrid you automatically get an implicit public variable available to you called “data”.

You may also be wondering what in the world does outerDocument do? outerDocument is used to access variables that are not in the scope of the itemRenderer, there for, anything you try to access in the outerDocument must be declared as PUBLIC for it to be accessed. Please don’t think you are limited by the example in using buttons in a datagrid, this can be anything! Along with all of the components I listed about, you can create your own components as well, just make sure they implement the proper classes, I’ve done this but the custom components I made extended from something that already implemented the correct use of the IListItemRenderer Interface… (an example that might not work by copying and pasting, I’m just writing the code off the top of my head)

<mx:DataGridColumn headerText=“”
dataField=“test_id” width=“80″>

<mx:itemRenderer>

<mx:Component>

<mx:HBox horizontalAlign=“center”>
<mx:Image
source=“data.someSourceYouDefineInTheDataProver)”/>
<!–
your data.source would likely be an image source ie.

source:“assets/images/CedarPointeRules.jpg”
–>
</mx:HBox>
</mx:Component>

</mx:itemRenderer>

</mx:DataGridColumn>

There are many examples of using the item renderer out there, and this is simply one more resource.

NOTE:(the following links are the same as the ones at the top, just here for easy access in case the page gets long)

APPLICATION – SOURCE