Check Lists:Web/Dojo HTML5 vs HTML4 Declarative vs Programmatic: Difference between revisions
No edit summary |
No edit summary |
||
Line 49: | Line 49: | ||
</syntaxhighlight> | </syntaxhighlight> | ||
The two examples are tested in IE8 and Firefox 3.6.20 | The two examples are tested in IE8 and Firefox 3.6.20 | ||
==HTML5 Declarative vs. Programmatic dijit== | ==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.[[Dojo_Dijit_and_HTML5_in_Real_world_applications/Dijit/dijit.form.Button | dijit.form.Button Declarative vs. Programmatic implementation]] | |||
==References== | ==References== |
Latest revision as of 16:29, 23 September 2011
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