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.


 
 
 

9 Responses to “Dojo rating engine with dojo.gfx”

  1. Pythoneer » dojox.widget.Rating commited
    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 [...]

  2. David Jacques-Louis
    20. February 2008 um 13:39

    Well done. Will use it on my site for sure.

  3. Daniel
    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.

  4. Ajax Girl » Blog Archive » Dojo rating widget with dojo.gfx
    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 [...]

  5. Javascript News » Blog Archive » Dojo rating widget with dojo.gfx
    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 [...]

  6. Agora é facil ter estrelas no site com dojo | Ajax Noticias Novidades tudo sobre Ajax
    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 [...]

  7. Francisco
    22. February 2008 um 21:18

    Nice Work!

  8. Adam Peller
    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?

  9. Adam Peller
    22. February 2008 um 22:18

    Nevermind, I was looking at the wrong file. It is a subclass. Awesome!

Leave a Reply