Check Lists:Web/Dojo HTML5 vs HTML4 Declarative vs Programmatic

Dojo and Declarative HTML5

Normally it is possible to find programming examples and Declarative examples on how to define a Dijit widget. However it is more difficult to find Declarative HTML5 examples. This check list might help you to debug your declarative HTML5 widget.

• First you need at least Dojo 1.6.0 to get Dijit widget's to work with HTML5 mark-up (this is valid for most widgets).
• See the two examples below: Are you sure that all relevant parameters are declared in the data-dojo-props element.
• Some parameters are not presented the same way in HTML (see: placeholder) and dijit (placeHolder, onFocus, onClick) Dijit is case sensitive!
• Some time you need to use the <div> element instead of <input> or <form>

Example of Declarative dijit widget for HTML 4:

<input type="text" required="true" name="firstName" id="firstName" placeholder="Your Name" 
        dojoType="dijit.form.ValidationTextBox" missingMessage="Ooops!  You forgot your first name!" />

Example of Declarative dijit widget for HTML 5:

<input type="text"  name="firstName" 
        data-dojo-type="dijit.form.ValidationTextBox"  
        data-dojo-props=" required:true, 
                          promptMessage:'Enter Your Name',
                          placeHolder:'Your Name',
                          missingMessage:'Ooops!  You forgot your first name!'"
        data-dojo-id="firstName"/>

The two examples are tested in IE8 and Firefox 3.6.20