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

Laura

Laura

39 Comments

  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
    Martin,

    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. Albert Pack

    Albert Pack

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

    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.
  7. 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
  8. 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.
  9. Laura
    Hi,
    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!')" />
  10. 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
  11. 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'
  12. 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?
  13. Anusheel Verma

    Anusheel Verma

    Hi,
    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).
  14. Tahir
    Very nice
    a little thing can impresss me very much.


    Tahir Alvi
  15. 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?

    Colin
  16. 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?
    Thanks
  17. Antoine

    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.
  18. 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.
  19. gabriel

    gabriel

    Great!!!

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

    Thanks
  20. Rodrigo Montemayor

    Rodrigo Montemayor

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

    Alessio

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

    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;
  24. Laura
    anonymous,
    Do you want to remove the rating when they click on the same star again or how?
  25. Ramu
    Hi,
    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..
    Regards
    Ramu
  26. 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=mx.styles.StyleManager.getStyleManager(SystemManagerGlobals.topLevelSystemManagers[0]);    
             myStyleManager.setStyleDeclaration(className, style, true);
          

    }

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

So, what do you think ?

Subscribe to this comment thread
Leave this field empty