Now I’ve finished this promised extended rating widget, Wolfram started. This example should demonstrate a case, where geometric forms can be combined with other widgets and how simple it is to achieve a widget using vector graphics. dojox.gfx was a great help, because it prints the appropriate vector format for you (svg/vml/canvas) and the widget now works with ie, firefox and safari. I didn’t test other browsers, but it should also work, when it supports one of the above mentioned vector formats. The next will be to extend the approach of creating more geometric forms. Maybe there are some people out there, that have the ambition helping out.
And here some examples
Just mousover the stars and select your rating!
Example 1
<div style="display: none;" dojoType="dojox.gfx.geo.Star" jsId="myStar"
jags="6" radiuses="40,20,30,20" hoverColor="#FF5F00" color="white" borderWidth="1" borderColor="#000000"></div>
<div style="background: white; margin-top: 10px; border: 1px dotted black;"
value="4" dojoType="dojox.widget.RatingGfx" numStars="5" gfx="myStar"></div>
Example 2
<div style="display: none;" dojoType="dojox.gfx.geo.Star" jsId="myOtherStar"
radiuses="10,5" hoverColor="#FF5F00" color="white" borderWidth="1" borderColor="#000000"></div>
<div style="background: white; border: 1px dotted black;" value="2" dojoType="dojox.widget.RatingGfx" numStars="10" gfx="myOtherStar" onChange="dojo.query('#rating0Value')[0].innerHTML = this.value”></div>
The value is: <b><span id=”rating0Value”>2</span></b>
The value is: 2
Example 3
<div style="display: none;" dojoType="dojox.gfx.geo.Star" jsId="myOtherStar" hoverColor="red"
color="white" borderWidth="0"></div>
<div style="background: blue; border: 1px dotted black;" value="3" dojoType="dojox.widget.RatingGfx"
numStars="7" gfx="myOtherStar"></div>
Stars and stripes 
Technical details
As you see in the above examples, one star-widget is created within html and is connected via the attribute jsId with the defined rating widget dojox.widget.RatingGfx. Note, that this star widget must be hidden with display:none. So in later version it could be possible to put in any geometric widget. For more examples, how to define a star, see my previous blog entry about star widgets. If someone has a better idea to loose couple two widgets, i would be happy to get some input. This was the most elegant way I’ve found out.
