Flex Rating Component
13 comments Posted by: Laura
For our new Fill Colors site, Nahuel developed a rating component to allow people to rate the Flex skins in the gallery. In this blog, we'd like to share this straightforward and easy-to-use component.
To use the rating component, you simply use a single tag <controls:Rating/> and you can specify optional attributes. We have examples of different attributes being used along with the source.
In one of the more interesting examples, Example 5, we want the rating the user selects to be displayed both in the rating component and as a number. So we add the following attributes and text that will display the selected value:
<controls:Rating id="ratingExample5" showSelectedValue="true" />
<mx:Text text="Currently selected value: {ratingExample5.selectedValue}" />
For more information, we also have the API documentation.
View example (View source enabled on Right Click)
Download the source
View API documentation
13 Comments so far
Write yoursWe probably should make an example of that or modify the Rating class so that implements the item renderer interfaces, but this is a simple way:
1. Create a simple mxml class, say that extends Canvas. You could implement mx.core.IDataRenderer or simply have a data variable.
2. Place the <Rating> tag inside and bind to the data.yourRatingValue property (the name of your property depends on what you are using as the dataprovider for your grid).
http://flexibleexperiments.wordpress.com/2007/04/28/flex-201-rating-component/
Have you plans for a new renderer?
We do plan to implement the IDataRenderer so that it can be placed inside a datagrid or list.
When the rating is clicked and changes its value, you get a selectionChange event, so that you could do:
<controls:Rating selectionChange="trace('user has changed the selection!')" />