Check Lists:Web/Dojo HTML5 vs HTML4 Declarative vs Programmatic: Difference between revisions

From PMISwiki
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="secondName" id="secondName" placeholder="Your Family Name"  
<input type="text" required="true" name="firstName" id="firstName" placeholder="Your Name"  
         dojoType="dijit.form.ValidationTextBox" missingMessage="Ooops!  You forgot your second name!" />
         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