DojoToolkit 1.6 and HTML 5

This is our first step to make our form example a HTML 5 compliant web page, we’ll need to make small modifications to our dojo toolkit widget’s tags. These will not be necesary until 2.0 when the actual notation eill be deprecated, but we can start our migration now.

First, download the full 1.6 version (3.7MB) of dojo and replace our old 1.5 files in /var/www/dojo (in ubuntu). Then acording to the data-attribute documentation -you may want to check the 1.6 release too- we need to:

  1. Change the doc type (<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/strict.dtd”&gt;) to:
    <!DOCTYPE htlm=html>
  2. Change dojo config (src=”/dojo/dojo/dojo.js” djconfig=”isDebug: true, parseOnLoad: true”) to:
    src=”/dojo/dojo/dojo.js” data-dojo-config=parseOnLoad: true, isDebug: true
  3. Do a global replace from ‘dojoType=’ to:
    data-dojo-type=’
  4. For each widget it is necesary to check attributes and move them inside the tag data-dojo-props.
    In our form, the date value was set to “value=’2010-08-31′”, the name must be repeated also as I found out thanks to this conversation between Jérôme Despatis and Peter Higgins, and now is:
    data-dojo-props=name:’dtText’, value:’2010-08-31′.
    In the Checkbox and Radio Button the checked state and value are also included.
  5. The events also need modification, as they are evaluated, so in the button the onclick=”getValues()” is now:
    data-dojo-props=onClick:function(){getValues();}.  Notice that the event is now in camelCase form.

This is the final code: Demo_Form_v16.html. [this is a pdf file wich contains the code]

And this is how it runs in Firefox 4.0, Opera 11.10 and Chromium 10.0.648:

The actual code running un three browsers

Firefox, Opera, Chrome

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s