Playing with Cell Renderers

We can write a cell renderer in two ways one is in Action script format and the second one is MXML Component type.
1) A custom cell renderer class should extend the UIComponent class or any subclass of the UIComponent class.A cell renderer class must implement the createChildren() and setValue() methods.
2) The only method that that a cell renderer written as an MXML component must implement is the setValue() method.

CellRenderer.createChildren()

Cell renderers implement this method to create the subobjects in the component.
The following example creates a CheckBox control:

function createChildren() : Void {
check = createClassObject(CheckBox, “check”, 1, {styleName:this,
owner:this});
check.addEventListener(“click”, this);
size();
}

CellRenderer.getPreferredHeight()

Returns the preferred height of a cell.

This method is especially important for getting the right height of text within the cell. If you set this value higher than the rowHeight property of the component, cells will extend above and below the rows.

Declare the method in your own class as the following example shows. This example returns the value 16, which indicates that the cell’s preferred height is 16 pixels.

function getPreferredHeight() : Number {
return 16;
}

CellRenderer.getPreferredWidth()

Returns the preferred width of a cell. This method is only required when using the Menu component, but it is good practice to create a method stub. If you specify more width than the component has, the cell can be clipped.

Declare the method in your own class as the following example shows. This example returns the value 3, which indicates that the cell’s preferred width is three times as wide as the length of the string it is rendering.

function getPreferredWidth() : Number {
return myString.length*3;
}

CellRenderer.layoutChildren()

Lays out the children of a component. Declare a layoutChildren() method in your own class to call the setSize() method of child objects, as the following example shows:

function layoutChildren() : Void {
check.setSize(20, layoutHeight);
}

CellRenderer.setValue(str:String,item:Object, sel:String)

Sets the content to be displayed in the cell. Takes the values given and creates a representation of them within the cell. This clears up any difference in what was displayed in the cell and what needs to be displayed in the cell for the new item. Any cell could display many values during its time in the list. This is the most important method in any cell renderer.

This method has the following arguments:

str Value to be used for the cell renderer’s text, if any is needed.

item An object that is the entire item to be rendered. The cell renderer can use any properties of this object for rendering.

sel Can have the following String values:

selected Indicates that the row is selected .
highlighted Indicates that the row is being rolled over .
normal Indicates that the row is not selected or highlighted .
Declare the method in your own class, as the following example shows:

function setValue(str:String, item:Object, sel:String) : Void {
check._visible = (item!=undefined);
check.selected = item[getDataLabel()];
}

NOTES :

1 . If a cell does not draw quickly enough, in the setValue() method, you can call the redraw() method of the object that is being rendered.
For example, if you have a label in the cell renderer, and you set myLabel.text = itemObj.value in the setValue() method, you can then call the myLabel.redraw() method. This updates the label and avoids a delay in refreshing the cell.

2. Only call the redraw() method when there is a significant delay in refreshing the cell. Using this method can affect performance.

3. It is useful to give the cell renderer class a reference to the List-based control that contains it to call the selectedIndex property of the List-based control. To set the selectedIndex property to the correct value, the cell must reference the index of the item that it is currently rendering. To do so, the cell can use the listOwner property and getDataLabel(), getCellIndex() methods. You do not need to implement this property or these methods, but you must declare variables for them if you use them in your class as follows.

var listOwner : UIObject // A reference to the List component that contains the cell.
var getDataLabel : Function; // Returns a string that contains the name of the CellRenderer class’s data field.
var getCellIndex : Function;// Returns an object with two fields, columnIndex and itemIndex, that indicate the
// position of the cell.

– by imtiyaz basha