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

Dojo 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) JavaScript and Dijit are case sensitive!
• Some time you need to use the <div> element instead of <input> or <form>

Validation of entered name

This input validation control that something has been entered as name.

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"/>

Validation of email

When it comes to more complex validation the difference become bigger: In this case validation of an entered email. The validator expects a function therefore it is necessary to wrap the dojox.validate.isEmailAddress() into a call back function.

Example of Declarative dijit widget for HTML 4:

<input type="text" required="true" name="email" id="email" dojoType="dijit.form.ValidationTextBox" validator="dojox.validate.isEmailAddress" />

Example of Declarative dijit widget for HTML 5:

<input type="text" name="email" id="email" 
        data-dojo-type="dijit.form.ValidationTextBox" 
        data-dojo-props=" required:true, 
                          promptMessage:'Enter Your email',
                          placeHolder:'Your email',
                          invalidMessage:'Ooops!  You email is not correct!',
                          validator: function (val){return dojox.validate.isEmailAddress(val)},
                          missingMessage:'Ooops!  You forgot your email!' " />

The two examples are tested in IE8 and Firefox 3.6.20

HTML5 Declarative vs. Programmatic dijit

dijit.form.Select Declarative implementation

soon to come..

dijit.form.Select Programmatic implementation

soon to come..

References

Dojotoolkit.org HTML5