Dojo rating engine with dojo.gfx
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.
16. February 2008 um 22:06
[...] and CSS. If you want an even more flexible way to customize the stars you should look at what Tobi has to offer with his SVG generated stars, they come in many more [...]
20. February 2008 um 13:39
Well done. Will use it on my site for sure.
20. February 2008 um 14:55
I couldn’t understand some parts of this article o.us poetry, but I guess I just need to check some more resources regarding this, because it sounds interesting.
20. February 2008 um 15:14
[...] von Klipstein has created a Dojo rating component that uses dojo.gfx: This example should demonstrate a case, where geometric forms can be combined with other widgets [...]
20. February 2008 um 19:53
[...] von Klipstein has created a Dojo rating component that uses dojo.gfx: This example should demonstrate a case, where geometric forms can be combined with other widgets [...]
21. February 2008 um 21:18
[...] nova extensão criada por Tobias von Klipstein usa o Dojo especialmente o dojo.gfx que permite criar gráficos em formato vector [...]
22. February 2008 um 21:18
Nice Work!
22. February 2008 um 22:04
Wonderful job! I wonder how difficult would it be to subclass from Wolfram’s Rating widget? Or is it not worth the effort?
22. February 2008 um 22:18
Nevermind, I was looking at the wrong file. It is a subclass. Awesome!