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:
http://ajax.googleapis.com/ajax/libs/Dojo/1.2.3/dijit/form/TextBox.xd.js
But if you are going to use your wonderfull custom widget gam.widget.coolwidget your browser will try to load:
http://ajax.googleapis.com/ajax/libs/Dojo/1.2.3/gam/widget/coolwidget.xd.js
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,
    modulePaths:{
        gam: './js/gamjs'
    },
    baseUrl: '/'
};

With this configuration Dojo will continue trying to get dijit.form.TextBox from http://ajax.googleapis.com/ajax/libs/Dojo/1.2.3/dijit/form/TextBox.xd.js but gam.widget.coolwidget from /js/gamjs/widget/coolwidget.xd.js.

Really easy. isn’t it?

Advertisements

About Gonzalo Ayuso

Web Architect. PHP, Python, Node, Angular, ionic, PostgreSQL, Linux, ... Always learning.

Posted on February 15, 2009, in dojo, Web Development and tagged . Bookmark the permalink. Leave a comment.

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

%d bloggers like this: