Tag: dojo

dojo.hitch

~ Gonzalo Ayuso ~ 2 Comments

The first time I read about dojo.hitch I didn’t understand anything. I read in a book dojo.hitch is a very important function and widely used into dojo library but I didn’t understand why. I am using my learning of dojo to improve my skill in javascript. I remember the time when I hate javascript. I thought it was a very poor program language and everything I need to do with js was a nightmare. If browser was Netscape one way to to do one thing, if browser was IE other (of a other and a couple of hacks). But the times have changed. XHR and Ajax has reinvented the web. Web pages had became into Web Applications. Asynchronous request had opened our minds to a new generation of web applications, and all of it is thanks to javascript. Each day I spent learning js I see how much I was wrong.

Javascript literals are really powerful but the concept of scope is strange when you come from POO. this.foo in js sounds like $this->foo in PHP but its not the same.

For example in the following example:

dojo.declare("gam.desktop", null, {
    variable1: 1,
    foo: function() {
        dojo.xhrPost({
            url: myUrl,
            load: function(responseObject, ioArgs){
                console.log(this.variable1);
            }),
            handleAs: "json"
        });
    });

console.log(this.variable1); will not display 1 in firebug console. Its strange for me when I started with dojo. The problem is that here this points to the scope of the function foo and not to the scope of class gam.desktop. You can do strange tricky-hacks to solve the problem with global variables or something like that, or use dojo.hitch.

dojo.declare("gam.desktop", null, {
    variable1: 1,
    foo: function() {
        dojo.xhrPost({
            url: myUrl,
            load: dojo.hitch(this, function(responseObject, ioArgs){
                console.log(this.variable1);
            }),
            handleAs: "json"
        }));
    });

elegant isn’t it?

Advertisement

Dojo and custom widgets

~ Gonzalo Ayuso ~ Leave a comment

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?

Dojo series

~ Gonzalo Ayuso ~ Leave a comment

I will start a new series of posts based on my experiences learning Dojo. This is not a tutorial of Dojo. Those posts want to help me to get new skills. The learning of Dojo is a bit frustrating sometimes. When you have written a dozens of source code and you realized all its wrong and that isn’t the Dojo way of doing this and you need to rewrite all. But you feel really happy when your widget appear on the browser. I have in my mind some post-project now and I hope I will post them soon