Dojo and custom widgets

I want to extend Dojo library with some custom widgets. Dojo widgets are really cool. You can use them from JavaScript and from HTML with the Dojo markup.

From js:

var dialog = new dijit.Dialog({
            title: title,
            href: href,
            preventCache: false,
            parseOnLoad: true

From HTML:

<button DojoType="dijit.form.Button" type="submit" onClick='Desktop.login()'>Login</button>

Using Dojo widgets from HTML gives you errors when you validate your HTML files because Dojo attributes are non HTML attributes. If you are strict with HTML you have a problem using Dojo but its really easy to develop rich application with Dojo. so it’s your choice ;). But remember: validation tools are just that: validation tools

For my tests I use Dojo from CDN. Dojo library is very big so I don’ t want to upload all the library to my hosting. My hosting (a free one) has a monthly traffic usage limit so I want to limit the trafic to my hosting as far as I can (poor man techniques). Dojo library is in some CDNs (AOL and google for example). You only need to point your scripts to CDN and use cross domain (xd) of Dojo library and you are using the CDN. Really simple.

But If you create a custom widget you can’t upload your widget to the CD. If you paid for a CDN (akamai for example) you can do it but according my poor man’s techniques I use a free CDN so I can’t upload anything to the CDN.

For example when you use a dijit.form.TextBox with Dojo library pointing to google’s CDN you are using the following url:
But if you are going to use your wonderfull custom widget gam.widget.coolwidget your browser will try to load:
and you will get a flaming 404 file not found error.

My first solution was upload all Dojo library to my hosting. With this solution I will can develop custom widgets without any problem but this is not the Dojo way. You can use xd version of Dojo and custom library in your server without problems. You only need to say Dojo in the configuration where are your widgets

djConfig = {
    parseOnLoad: false,
        gam: './js/gamjs'
    baseUrl: '/'

With this configuration Dojo will continue trying to get dijit.form.TextBox from but gam.widget.coolwidget from /js/gamjs/widget/coolwidget.xd.js.

Really easy. isn’t it?


Leave a Reply

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

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

Facebook photo

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

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.