Check Lists:Web/Dojo HTML5 vs HTML4 Declarative vs Programmatic: Difference between revisions
Jump to navigation
Jump to search
(Created page with "==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...") |
No edit summary |
||
Line 7: | Line 7: | ||
* Some time you need to use the <div> element instead of <input> or <form> | * Some time you need to use the <div> element instead of <input> or <form> | ||
Example of Declarative dijit widget for HTML 4 | Example of Declarative dijit widget for HTML 4: | ||
<syntaxhighlight lang="html4strict"> | <syntaxhighlight lang="html4strict"> | ||
<input type="text" required="true" name=" | <input type="text" required="true" name="firstName" id="firstName" placeholder="Your Name" | ||
dojoType="dijit.form.ValidationTextBox" missingMessage="Ooops! You forgot your | dojoType="dijit.form.ValidationTextBox" missingMessage="Ooops! You forgot your first name!" /> | ||
</syntaxhighlight> | </syntaxhighlight> | ||
Example of Declarative dijit widget for HTML 5 | Example of Declarative dijit widget for HTML 5: | ||
<syntaxhighlight lang="html4strict"> | <syntaxhighlight lang="html4strict"> | ||
<input type="text" name="firstName" | <input type="text" name="firstName" | ||
Line 22: | Line 22: | ||
data-dojo-id="firstName"/> | data-dojo-id="firstName"/> | ||
</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 | ||
[[Category:software development]] | [[Category:software development]] |
Revision as of 02:38, 24 August 2011
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