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..