Our Blog

Flex Rating ComponentFor 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




  1. Martin Cooper

    Martin Cooper

    Nice widget. Thanks! How hard would it be to turn this into an item renderer / item editor, so that it could be used in a datagrid?
  2. Laura

    We 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).
  3. Juan
    Very cool. I've used this component previously:

  4. Albert Pack

    Albert Pack

    Its gotta be the coolest looking rating system Ive ever seen. Thanks Nahuel!
  5. Cesare
    Your widget rocks! Also documentation. Code well written!
    Have you plans for a new renderer?
  6. Laura
    We do plan to implement the IDataRenderer so that it can be placed inside a datagrid or list.
  7. insurancerelease.com


    Great to see it work. Think its a great tool as it allows the user to further contribute his or her thoughts towards a skin or in the case of other blogs their approval ratings.
  8. shawn gibson
    This is exactly what I've been looking for to replace a similar thing I had for Flash, from someone else. My site is Flex now. It relied on Shared Objects and PHP to store individual ratings. Is there any way this could be used to rate individual images...many, many of them individually...with either PHP, CF 7.0.2 or Shared Objects? I'm using xml files and my thought would be to have a rating ID within the xml (i.e., something like '<item name="Landscape Photo" piclink="images/ls/1.jpg" ratingid="001" />' to fit with my current set up) but that would be beyond me, if someone could help out with such a thing. I'd be willing to pay if needed. Shawn
  9. limitedwave
    Anyone know why this component, version #5, the {ratingExample5.selectedValue} comes up 'undefined' when used within a repeater? Also - any tutorials/instructions for triggering a function when ratings are clicked? I can't seem to access the listener...thanks.
  10. Laura
    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!')" />
  11. Nathan D
    Looking over the examples there's a minor bug when a user uses their own images rather than the default stars. The "notification" (for selecting a rating), doesn't change back to the unselected state once it's been "mouse over"d. Then if I click on a lower rating than what I've mouse over'd - it saves my rating as that rather than what I actually chose. Otherwise looks good! :D
  12. Glenn
    I had the same bug as Nathan was talking about. I experimented with the possible values and found a solution!
    The bug occurs when horizontalGap is set to 0. If you change it to 5 for example, there's a bigger gap between the individual images. If the mouse is moved from one custom image to another one, the mouse is moved over the gap which causes a 'mouseOut Event'. The previous selected image will be set 'unselected'
  13. Tom
    Great job, I tried to set the horizontalGap from a MXML sheet:

    <controls:Rating x="5" y="70" horizontalGap="1" />

    But I got an error when I run it, I dont know why, your style declaration seems good, but Flex searchs the horizontalGap property in Rating object rather than style.

    Any idea?
  14. Anusheel Verma

    Anusheel Verma

    Greate component, I am using it in my application, can we extend this component to accept picking half stars (Ex : I need to select 3.5 Star).
  15. Laura
    It might be a bug. We'll see if we can fix it.

    You can make modifications, you just need to comply with the license: ttp://www.apache.org/licenses/LICENSE-2.0
  16. Tahir
    Very nice
    a little thing can impresss me very much.

    Tahir Alvi
  17. Colin Hansford

    Colin Hansford

    Hi, thanks for sharing this nice component.

    If there is not a version for item renderer / dataGrid, would you be able to post details of the simple workaround you briefly outlined in post #3 to Martin above?

  18. ip
    Hi, great component.
    I tried to align the stars verticaly by changeing xPos to yPos under "layoutItems" but then I can only select one value.

    What do I have to change?
  19. Antoine


    Great component. I used the component on a flv player and change the star to a one thumbs up. My question is, how do you have the component refresh to it's default color when a new title is selected from the flv playlist. And where can I have the data stored for later review for all the flv title's that was given a thumbs up or rating.
  20. Lee Probert
    @ip - to align vertically change to YPos like you did but also update the 'updateItemRollOver' method.

    Also, I managed to get this component working in the Flex 4 SDK only if you set the Stars skins with a Stylesheet. It doesn't want to compile with the default skins.

    I noticed that if the horizontal gap is zero then the component doesn't trigger a new MouseOver event when you roll over a new star. This is because the event is triggered by rolling over the entire component and not the individual stars. To fix this change the listener from MouseOver to MouseMove.
  21. gabriel



    But I would like to disable the capability of voting once I have vote, has the component any method to do that?

  22. Rodrigo Montemayor

    Rodrigo Montemayor

    Thanks a lot, saved me a lot of time. Works perfect!
  23. Alessio


    This component not function on Flash Builder 4 beta !!
  24. Joy
    Do you have a version for Flex 4? Thanks!
    This is a great component. Hope it will be updated with flex 4, too!
  25. anonymous


    Great job! Is there a way to remove a rating? I am using this hack at the moment:
    Rating.as 675: selectedValue = (selectedValue==1 && rollOverValue==1) ? 0 : rollOverValue;
  26. Laura
    Do you want to remove the rating when they click on the same star again or how?
  27. Ramu
    I've the requirement like i want to show the star rating number on top of the star image.. and i dont want to show all the star images. i've only one image on top of it it will show the star rating in numaric number..
    please help in.. in this...

    thanks in advance..
  28. addi
    hi,Laura,I'm trying to update it to flex 4 and change some code in a few days,other is ok,but it return null in ratingstyle.as ,,the code i have chaged as follow:
          public static function initDefaultStyles(className:String):void
    var style:CSSStyleDeclaration = new CSSStyleDeclaration();
    style.defaultFactory = function():void
                this.disabledSkin = Star;
                this.overSkin = OverStar;
                this.unselectedSkin = Star;
                this.upSkin = SelectedStar;
                this.selectedSkin = SelectedStar;
                this.horizontalGap = 5;
                this.paddingBottom = 0;
                this.paddingTop = 0;
                this.paddingLeft = 0;
                this.paddingRight = 0;
             var myStyleManager:IStyleManager2;
             myStyleManager.setStyleDeclaration(className, style, true);


    can you reply me?
  29. steve
    Would love to see this work in Flex 4!
    pleaaase update :)
  30. alpar
    Did anyone figure out how to use the component in Flex 4?