So this store finder project is turning out to be full of nifty little discoveries. The latest request I got was that the client would like the 5 star (or in this case diamond) rating component to appear inside the data grid instead of simply displaying a number. Now in general when I get a request to nest one component (especially a custom one) inside of another component, I am very wary. However, as it turned out, this was incredibly simple.

The original rating component I was using can be found here.

The DataGridColumn tag allows you to specify an item renderer property.

<mx:DataGridColumn headerText=”Popularity” dataField=”popularity” itemRenderer=”custom.DataGridRating”/>

This is a component that will be used to draw the content of the cell. An item render is passed a property called data, so for simplicities sake, I simply modified the original rating component to reference the data object passed to it, and saved it as a separate component, which ended up looking like:

ORIGINAL

<?xml version=”1.0″ encoding=”iso-8859-1″?>
<mx:Canvas xmlns:mx=”http://www.adobe.com/2006/mxml”
horizontalScrollPolicy=”off” verticalScrollPolicy=”off”>

<mx:Script>
<![CDATA[

/**
* The rating value to be displayed by this component.
*/
[Bindable]
public var rating:Number = 0;

]]>
</mx:Script>

<mx:HBox horizontalGap=”1″ verticalCenter=”0″>

<mx:Spacer width=”4″ />

<mx:Repeater id=”stars” dataProvider=”{[1,2,3,4,5]}” count=”5″>
<mx:Image id=”starIcon” width=”18″ alpha=”{(rating > stars.currentIndex) ? 1 : .35}” source=”@Embed(‘diamond.gif’)” />
</mx:Repeater>

<mx:Spacer width=”4″ />

</mx:HBox>

</mx:Canvas>

Modified

<?xml version=”1.0″ encoding=”iso-8859-1″?>
<mx:Canvas xmlns:mx=”http://www.adobe.com/2006/mxml”
horizontalScrollPolicy=”off” verticalScrollPolicy=”off”>

<mx:HBox horizontalGap=”1″ verticalCenter=”0″>

<mx:Spacer width=”4″ />

<mx:Repeater id=”stars” dataProvider=”{[1,2,3,4,5]}” count=”5″>
<mx:Image id=”starIcon” width=”18″ alpha=”{(data.popularity > stars.currentIndex) ? 1 : .35}” source=”@Embed(‘diamond.gif’)” />
</mx:Repeater>

<mx:Spacer width=”4″ />

</mx:HBox>

</mx:Canvas>

Note that data.popularity matches the data field of the data column that the item renderer has been applied to. And that was it.

<mx:DataGridColumn headerText=”Popularity” dataField=”popularity” itemRenderer=”custom.DataGridRating”/>

You can see the live product at:

http://www.independentlycertifieddiamonds.com/find.html

Update

I found that this component as written would round up to the next value. For example, I tested with a value of 3.25 and it showed it as 4. This was because the original component was using th currentIndex property as opposed to the currentItem property. currentIndex is 0 based meaning the value being compared was one less than it should have been. You can fix this by modifying the code as follows.

<mx:Repeater id=”stars” dataProvider=”{[1,2,3,4,5]}” count=”5″>
<mx:Image id=”starIcon” width=”18″ alpha=”{(rating >= stars.currentItem) ? 1 : .35}” source=”@Embed(‘diamond.gif’)” />
</mx:Repeater>

This entry was posted on Thursday, May 1st, 2008 at 7:34 pm and is filed under Flex. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.