Monday, August 10, 2009

Grails w/ Dojo enabled forms



Didn't touched my Blogger account for almost a month now and I think regular tweeting is not good for the number of entries on your blog... But twitter is limited to 140 characters and I needed a little bit more this time.

While playing with Spring Roo the other day I noticed Roo is using Dojo - and to be more specific Dijit Forms - to enhance plain htlm input fields with javascript. For example Number fields are decorated with a Dojo dijit.form.NumberTextBox; what this means is that the user can only enter digits and no text. The lack of this feature with plain html inputs is a problem that has always bothered me when developing 'business' web applications.

So I dived into the magic of Dojo and it's Dijit form controls last week, and it does not only validate values using javascript, but it also contains nice widgets.

During the weekend I decided to create a small Grails application to leverage all Dijit form controls using a tag library. The following Dijit enabled form controls are available in this tag library:


  • actionSubmit

  • checkBox

  • currencyTextBox

  • comboBox (note: do not confuse this one with a filteringSelect)

  • dateTextBox

  • editor

  • filteringSelect

  • form

  • multiSelect

  • numberTextBox

  • numberSpinner

  • passwordTextBox

  • radioButton

  • radioGroup

  • simpleTextarea

  • submitButton

  • textarea

  • textBox

  • validationTextBox



Example screenshots:








The complete application code and a little bit more information can be found at: http://code.google.com/p/grails-snippets/wiki/DojoForm. I will use this repository to share more Grails snippets in the future.

6 comments:

prpatel said...

Looks great Marcel! Did you also implement auto-complete on one of the form fields?

Marcel Overdijk said...

@prpatel: Yes I also used an autocomplete using a Dijit FilteringSelect. You can see it in the 2nd screenshot on the Author field.

Dean Del Ponte said...

Great post! Thanks for shedding some light on Dojo.

Anonymous said...

Great work , but How to do the same with local hosted library of dojo/dijit thank's

Anonymous said...

Great work , but How to do the same with local hosted library of dojo/dijit thank's

Khue said...

Great work! Thanks Marcel