Archiv der Kategorie ‘Javascript‘

 
 

Range slider with dojo

A range slider landed in dojo today and at the same time this is my first dojo contribution :-). This highly motivates myself to step deeper into dojo. The dojox.form.RangeSlider extends the actual dijit.form.Slider component using two instead of one slider handle. An advantage of this approach is, that the slider immediately supports snapping, intermediate changes, a11y and you can already use the rules and rule labels of the dijit.form.Slider and of course all the themes of dojo.

Here is a screenshot of the actual version of the range slider:

A screenshot of the range slider

A usecase of this widget could be e.g. to narrow down a list of shopping products by price or changing a timeframe of flight offers with just one form element. It would be great, if this widget soon will be extended to support more specialized needs; something like a date range slider or a date and time range slider.

You can visit the test page of the range slider widget or read some detailed information in the trac-ticket #6006. Or you just check out the actual version of dojo and play with it :-).

This blog entry shall show, how simple it is to contribute to dojo without being a dojo committer. The barrier to contribute to this amazing project is low but professional and I can say that there are several great people in the dojo team who always try to help you out. I really love the friendly and open atmosphere of the dojo project and hope more people will recognize that in the future. For myself I just can say: Let’s dojo.

19. May 2008 | Dojo, Javascript | Comments (11)

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.

15. February 2008 | Dojo, Javascript, Uncategorized | Comments (16)

Using dojo for creating geometric forms

The whole idea emerged from Wolfram’s new dojo widget. He created a rating widget, where he uses stars for setting a vote. Because it is using images for each star, you are sticked to the size of your images and also how the images are designed. So I’ve started to code a new widget, that is creating a star as svg/vml/canvas by using the dojox.gfx library. It uses some simple parameters for designing your stars. As I proceeded, I recognized, that there is no javascript-library (or I didn’t saw it :-)), that can create simple (or more complex) geometric forms with just a few input parameters. In my opinion this could be a start to design a general dojox.gfx.geo library, where a base class is defined for common usage (like hovering and basic color schema) and subclasses for each geometric form. I’m thinking of spirals, arrows, stars, hearts and emoticons.

Here some usage examples of this star dojo widget.

First the pretty result

And here the sample code

<div dojoType="dojox.gfx.geo.Star" borderColor="black" borderWidth="1"></div>

<div dojoType="dojox.gfx.geo.Star" borderColor="black" radiuses="20,6,12" hoverColor="#FF5A00"
color="#F1F3E9" borderWidth="1" hoverBorderWidth="1"></div>

<div dojoType="dojox.gfx.geo.Star" borderColor="black" radiuses="20,5,10,5" hoverColor="#FF5A00"
color="#F1F3E9" borderWidth="1" hoverBorderWidth="1"></div>

<div dojoType="dojox.gfx.geo.Star" borderColor="black" jags="3" radiuses="20" hoverColor="#FF5A00"
color="#F1F3E9" borderWidth="1" hoverBorderWidth="1"></div>

<div dojoType="dojox.gfx.geo.Star" borderColor="black" jags="4" radiuses="20" hoverColor="#FF5A00"
color="#F1F3E9" borderWidth="1" hoverBorderWidth="1"></div>

<div dojoType="dojox.gfx.geo.Star" borderColor="black" jags="10" radiuses="20,17" hoverColor="#FF5A00"
color="#F1F3E9" borderWidth="1" hoverBorderWidth="1"></div>

<div dojoType="dojox.gfx.geo.Star" borderColor="black" jags="10" radiuses="20,4" hoverColor="#FF5A00"
color="#F1F3E9" borderWidth="1" hoverBorderWidth="1"></div>

<div dojoType="dojox.gfx.geo.Star" borderColor="black" jags="5" radiuses="20,17,14,17" hoverColor="#FF5A00"
color="#F1F3E9" borderWidth="1" hoverBorderWidth="1"></div>

A big star! (Try the mouseover)

Sample code for big star

<div dojoType="dojox.gfx.geo.Star" borderColor="black" jags="30" radiuses="250,200,250,150,200" specialHoverColor='{type: "radial", r:250, cx: 250, cy: 250, colors: [{offset: 0, color: "#FFFFFF"}, {offset: 1, color: "#FF5A00"}]}’ color=”#F1F3E9″ borderWidth=”1″ hoverBorderWidth=”1″></div>

The next step would be using this star widget within the above mentioned rating-engine. Maybe someone else has a better recommendation, where to use this kind of geometric forms within other widgets.

Here you can download an early version of this star widget:

First draft of the geometric star widget

07. February 2008 | Dojo, Javascript | Comments (4)