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.


This entry was posted on Friday, February 15th, 2008 and is filed under Dojo, Javascript, Uncategorized. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response or Trackback from your own site.

 
« Simple image masking with PIL
Range slider with dojo »
 
 

16 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!

  10. Антон Павлович
    18. March 2010 um 03:50


    dojo.require(”dojox.gfx.geo.Star”);
    dojo.require(”dojox.widget.RatingGfx”);

    Now I’ve finished this promised extended rating widget, Wolfram started…..

    Конечно. Я согласен со всем выше сказанным. Давайте обсудим этот вопрос….

  11. Kylie Batt
    17. April 2010 um 02:16

    Это действительно радует меня….

    коммерческий директор
    dojo.require(”dojox.gfx.geo.Star”);
    dojo.require(”dojox.widget.RatingGfx”);

    Now I’ve finished this promised extended rating widget, Wolfram starte…

  12. Kylie Batt
    13. May 2010 um 07:45

    Я удалил это вопрос…

    Уборщица dojox.gfx was a great help, because it prints the appropriate vector format for you (svg/vml/canvas) and the widget […..

  13. ALFREDO
    2. July 2010 um 12:35


    Pillspot.org. Canadian Health&Care.Special Internet Prices.No prescription online pharmacy.Best quality drugs. High quality pills. Buy drugs online…

    Buy:Ventolin.Prozac.Female Cialis.Wellbutrin SR.Lipothin.Lasix.Amoxicillin.Acomplia.Benicar.Buspar.Zocor.Female Pink Viagra.SleepWell.Advair.Seroquel.Lipitor.Aricept.Cozaar.Nymphomax.Zetia….

  14. BRADLEY
    15. July 2010 um 20:58


    Pillspot.org. Canadian Health&Care.Best quality drugs.Special Internet Prices.No prescription online pharmacy. High quality drugs. Buy drugs online…

    Buy:Actos.Prednisolone.100% Pure Okinawan Coral Calcium.Retin-A.Zyban.Arimidex.Valtrex.Lumigan.Nexium.Accutane.Synthroid.Prevacid.Petcam (Metacam) Oral Suspension.Human Growth Hormone.Mega Hoodia.Zovirax….

  15. RAY
    21. July 2010 um 06:58


    Medicamentspot.com. Canadian Health&Care.Best quality drugs.Special Internet Prices.No prescription online pharmacy. Low price pills. Buy drugs online…

    Buy:Zyban.Mega Hoodia.Prevacid.Synthroid.Actos.Human Growth Hormone.Nexium.Accutane.100% Pure Okinawan Coral Calcium.Arimidex.Petcam (Metacam) Oral Suspension.Valtrex.Retin-A.Prednisolone.Zovirax.Lumigan….

  16. Window
    30. August 2010 um 03:56

    quiet http://iwindow5oukj.AUTOTECHGUIDE.INFO/tag/quiet+Window+air/ : air…

    quiet…

Leave a Reply

You must be logged in to post a comment.