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

You can use the excamples below to compair Declarative and Programmatic implementation. In this case the implementation of a simple dijit.form.Button. dijit.form.Button Declarative vs. Programmatic implementation

References

Dojotoolkit.org: Dojo HTML5 Data-Attribute Support