Working with item renderers
Example: Using an item renderer with the TileList and HorizontalList controls
The TileList and HorizontalList controls display a tiled list of items. The TileList control displays items in vertical columns. The HorizontalList control displays items in horizontal rows. The TileList and HorizontalList controls are particularly useful in combination with a custom item renderer for displaying a list of images and other data.
The following image shows a HorizontalList control that is used to display a product catalog:
Each item in the HorizontalList control contains an image, a descriptive text string, and a price. The following code shows the application that displays the catalog. The item renderer for the HorizontalList control is an MXML component named Thumbnail.
<?xml version="1.0"?>
<!-- itemRenderers\MainTlistThumbnailRenderer.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Model id="catalog" source="catalog.xml"/>
<mx:HorizontalList id="myList"
columnWidth="125"
rowHeight="125"
columnCount="4"
dataProvider="{catalog.product}"
itemRenderer="myComponents.Thumbnail"/>
</mx:Application>
The executing SWF file for the previous example is shown below:
The file catalog.xml defines the data provider for the HorizontalList control:
<?xml version="1.0"?>
<catalog>
<product id="1">
<name>Nokia Model 3595</name>
<price>129.99</price>
<image>../assets/products/Nokia_3595.gif</image>
<thumbnail>../assets/products/Nokia_3595_sm.gif</thumbnail>
</product>
<product id="2">
<name>Nokia Model 3650</name>
<price>99.99</price>
<image>../assets/products/Nokia_3650.gif</image>
<thumbnail>../assets/products/Nokia_3650_sm.gif</thumbnail>
</product>
<product id="3">
<name>Nokia Model 6010</name>
<price>49.99</price>
<image>../assets/products/Nokia_6010.gif</image>
<thumbnail>../assets/products/Nokia_6010_sm.gif</thumbnail>
</product>
<product id="4">
<name>Nokia Model 6360</name>
<price>19.99</price>
<image>../assets/products/Nokia_6360.gif</image>
<thumbnail>../assets/products/Nokia_6360_sm.gif</thumbnail>
</product>
<product id="5">
<name>Nokia Model 6680</name>
<price>19.99</price>
<image>../assets/products/Nokia_6680.gif</image>
<thumbnail>../assets/products/Nokia_6680_sm.gif</thumbnail>
</product>
<product id="6">
<name>Nokia Model 6820</name>
<price>49.99</price>
<image>../assets/products/Nokia_6820.gif</image>
<thumbnail>../assets/products/Nokia_6820_sm.gif</thumbnail>
</product>
</catalog>
The following example shows the Thumbnail.mxml MXML component. In this example, you define the item renderer to contain three controls: an Image control and two Label controls. These controls examine the data property that is passed to the item renderer to determine the content to display.
<?xml version="1.0" ?>
<!-- itemRenderers\htlist\myComponents\Thumbnail.mxml -->
<mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml"
horizontalAlign="center"
verticalGap="0" borderStyle="none" backgroundColor="white" >
<mx:Image id="image" width="60" height="60" source="{data.image}"/>
<mx:Label text="{data.name}" width="120" textAlign="center"/>
<mx:Label text="${data.price}" fontWeight="bold"/>
</mx:VBox>
For more information on the TileList and HorizontalList controls, see Using Data-Driven Controls.
Example: Using an item renderer with a DataGrid control
The DataGrid control works with the DataGridColumn class to configure the grid. For a DataGrid control, you can specify two types of renderers: one for the cells of each column, and one for the header cell at the top of each column. To specify an item renderer for a column of a DataGrid control, you use the DataGridColumn.itemRenderer property. To specify an item renderer for a column header cell, you use the DataGridColumn.headerRenderer property.
For example, to highlight a column in the DataGrid control, you can use using an icon in the column header cell to indicate a sale price, as the following item renderer shows:
<?xml version="1.0"?>
<!-- itemRenderers\dataGrid\myComponents\RendererDGHeader.mxml -->
<mx:HBox xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Script>
<![CDATA[
[Embed(source="saleIcon.jpg")]
[Bindable]
public var sale:Class;
]]>
</mx:Script>
<mx:Label text="Sale Price!"/>
<mx:Image height="20" source="{sale}"/>
</mx:HBox>
This item renderer uses a Label control to insert the text "Sale Price!" and an Image control to insert an icon in the column header.
The following example shows the main application:
<?xml version="1.0"?>
<!-- itemRenderers\dataGrid\MainDGHeaderRenderer.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
[Bindable]
private var initDG:ArrayCollection = new ArrayCollection([
{Artist:'Pavement', Album:'Slanted and Enchanted',
Price:11.99, SalePrice: true },
{Artist:'Pavement', Album:'Brighten the Corners',
Price:11.99, SalePrice: false }
]);
]]>
</mx:Script>
<mx:DataGrid id="myGrid"
dataProvider="{initDG}"
variableRowHeight="true">
<mx:columns>
<mx:DataGridColumn dataField="Artist"/>
<mx:DataGridColumn dataField="Album"/>
<mx:DataGridColumn dataField="Price"/>
<mx:DataGridColumn width="150" dataField="SalePrice"
headerRenderer="myComponents.RendererDGHeader"/>
</mx:columns>
</mx:DataGrid>
</mx:Application>
The executing SWF file for the previous example is shown below:
In this example, the DataGrid control displays the String true or false in the column to indicate that the price is a sale price. You can also define an item renderer for that column to display a more compelling icon rather than text. For an example that uses an item renderer with a DataGrid control, see Using custom item renderers and item editors.
Example: Using an item renderer with a List control
When you use a custom item renderer with a List control, you specify it using the List.itemRenderer property, as the following example shows:
<?xml version="1.0"?>
<!-- itemRenderers\list\MainListStateRenderer.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
height="700" width="700">
<mx:List id="myList"
height="180" width="250"
variableRowHeight="true"
itemRenderer="myComponents.RendererState"
backgroundColor="white" >
<mx:dataProvider>
<mx:Object label="Alaska"
data="Juneau"
webPage="http://www.state.ak.us/"/>
<mx:Object label="Alabama"
data="Montgomery"
webPage="http://www.alabama.gov/" />
<mx:Object label="Arkansas"
data="Little Rock"
webPage="http://www.state.ar.us/"/>
</mx:dataProvider>
</mx:List>
</mx:Application>
The executing SWF file for the previous example is shown below:
The previous example sets the rowHeight property to 75 pixels because the item renderer displays content that exceeds the default row height of the List control. To see an image that shows this application, see Using custom item renderers and item editors.
The following item renderer, RendererState.mxml, displays the parts of each List item, and creates a LinkButton control which lets you open the state's website:
<?xml version="1.0"?>
<!-- itemRenderers\list\myComponents\RendererState.mxml -->
<mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml" >
<mx:Script>
<![CDATA[
// Import Event and URLRequest classes.
import flash.events.Event;
import flash.net.URLRequest;
private var u:URLRequest;
// Event handler to open URL using
// the navigateToURL() method.
private function handleClick(eventObj:Event):void {
u = new URLRequest(data.webPage);
navigateToURL(u);
}
]]>
</mx:Script>
<mx:HBox >
<!-- Use Label controls to display state and capital names. -->
<mx:Label id="State" text="State: {data.label}"/>
<mx:Label id="Statecapital" text="Capital: {data.data}" />
</mx:HBox>
<!-- Define the Link control to open a URL. -->
<mx:LinkButton id="webPage" label="Official {data.label} web page"
click="handleClick(event);" color="blue" />
</mx:VBox>
Example: Using an item renderer with a Tree control
For the Tree control, you use the itemRenderer property to specify a single renderer for all nodes of the tree. If you define a custom item renderer, you are responsible for handling the display of the entire node, including the text and icon.
One option is to define an item renderer as a subclass of the default item renderer class, the TreeItemRenderer class. You can then modify the item renderer as required by your application without implementing the entire renderer, as the following example shows:
package myComponents
{
// itemRenderers/tree/myComponents/MyTreeItemRenderer.as
import mx.controls.treeClasses.*;
import mx.collections.*;
public class MyTreeItemRenderer extends TreeItemRenderer
{
// Define the constructor.
public function MyTreeItemRenderer() {
super();
}
// Override the set method for the data property
// to set the font color and style of each node.
override public function set data(value:Object):void {
super.data = value;
if(TreeListData(super.listData).hasChildren)
{
setStyle("color", 0xff0000);
setStyle("fontWeight", 'bold');
}
else
{
setStyle("color", 0x000000);
setStyle("fontWeight", 'normal');
}
}
// Override the updateDisplayList() method
// to set the text for each tree node.
override protected function updateDisplayList(unscaledWidth:Number,
unscaledHeight:Number):void {
super.updateDisplayList(unscaledWidth, unscaledHeight);
if(super.data)
{
if(TreeListData(super.listData).hasChildren)
{
var tmp:XMLList =
new XMLList(TreeListData(super.listData).item);
var myStr:int = tmp[0].children().length();
super.label.text = TreeListData(super.listData).label +
"(" + myStr + ")";
}
}
}
}
}
For each node that has a child node, this item renderer displays the node text in red and includes the count of the number of child nodes in parentheses. The following example uses this item renderer in an application.
<?xml version="1.0" encoding="iso-8859-1"?>
<!-- itemRenderers\tree\MainTreeItemRenderer.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
initialize="initCollections();">
<mx:Script>
<![CDATA[
import mx.collections.*;
public var xmlBalanced:XMLList =
<>
<node label="Containers">
<node label="DividedBoxClasses">
<node label="BoxDivider" data="BoxDivider.as"/>
</node>
<node label="GridClasses">
<node label="GridRow" data="GridRow.as"/>
<node label="GridItem" data="GridItem.as"/>
<node label="Other File" data="Other.as"/>
</node>
</node>
<node label="Data">
<node label="Messages">
<node label="DataMessage"
data="DataMessage.as"/>
<node label="SequenceMessage"
data="SequenceMessage.as"/>
</node>
<node label="Events">
<node label="ConflictEvents"
data="ConflictEvent.as"/>
<node label="CommitFaultEvent"
data="CommitFaultEvent.as"/>
</node>
</node>
</>;
[Bindable]
public var xlcBalanced:XMLListCollection;
private function initCollections():void {
xlcBalanced = new XMLListCollection(xmlBalanced);
}
]]>
</mx:Script>
<mx:Text width="400"
text="The nodes with children are in bold red text, with the number of children in parenthesis.)"/>
<mx:Tree id="compBalanced"
width="400" height="500"
dataProvider="{xlcBalanced}"
labelField="@label"
itemRenderer="myComponents.MyTreeItemRenderer"/>
</mx:Application>
The executing SWF file for the previous example is shown below: