Macromedia flex 2-migrating applications to flex 2 Manual De Usuario

Cell renderers

169

Cell renderers

In Flex 1.5, a cell renderer had to implement the 

setValue()

 method to access the data 

passed to the cell renderer:

<mx:VBox xmlns:mx="http://www.adobe.com/2003/mxml" width="198" 

backgroundAlpha="0">

<mx:Script>

function setValue(str:String, item:Object) {

// Set values of the cell renderer controls.

}

</mx:Script>

<mx:HBox height="100%">

<mx:Image id="myImage" width="30"/>
<mx:Text text="{labelData}" width="150" height="100%"/>

</mx:HBox>
<mx:CheckBox label="Check"/>
<mx:TextInput/>

</mx:VBox>

In Flex 2, cell renderers and cell editors were renamed to item renderers and item editors. In 
addition, the architecture was completely redesigned for Flex 2. For more information, see 
Chapter 21, “Using Item Renderers and Item Editors,” in the Flex 2 Developer’s Guide.

In Flex 2, cell renderers receive a 

data

 property that contains the data for the item to render. 

For example, for a cell of a DataGrid control, the 

data

 property contains a copy of the data 

provider element for the entire row of the grid. You access the 

data

 property in your cell 

renderer to initialize it, as the following example shows:

<mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml" width="198" 

backgroundAlpha="0">
<mx:HBox height="100%">

<mx:Image id="myImage" source="{data.imageLocal}" width="30"/>
<mx:Text text="{data.displayText}" width="150" height="100%"/>

</mx:HBox>
<mx:CheckBox label="Check"  selected="{data.status}"/>
<mx:TextInput selected="{data.moreText}"/>

</mx:VBox>

In this example, you use data binding to set the values of the controls in the cell renderer, 
where the fields of the 

data

 property correspond to fields of the data provider that populates 

the DataGrid control.