mixin dojo and google api libraries


I’m working in a dojo application and I also need to use some goolge api like feeds, maps and books. Dojo is very versatile adding new components using dojo.require. when all dojo components are loaded dojo.addOnLoad callback is fired.

dojo.require("dojo.io.script");
dojo.require("dojo.data.ItemFileReadStore");
dojo.addOnLoad(function(){
    console.log('all is ready');
});

dojo.require is great. It also alloy us to create nested onLoad callbacks

dojo.require(“dojo.io.script”);
dojo.require(“dojo.data.ItemFileReadStore”);

dojo.addOnLoad(function(){ // <------------ console.log('all is ready1'); dojo.require("dijit.TitlePane"); dojo.require("dijit.Dialog"); dojo.addOnLoad(function(){ // <------------ console.log('all is ready 2'); }); }); [/sourcecode] google API uses his own loader google.load. [sourcecode language='js'] google.load("jquery", "1.3.2"); google.load("feeds", "1"); google.setOnLoadCallback(function() { console.log('all is ready'); }); [/sourcecode] If your application uses both libraries you must take care about onLoad callback of dojo and google because they are not the same. You can create your own dojo widget for loading google api and forget google.setOnLoadCallback but I want to use libraries as standard as I can (without hacking code every time I have a problem). So I prefer to live with both callbacks. You can try to do something like this: [sourcecode language='js'] google.load("dojo", "1.3"); google.load("feeds", "1"); dojo.require("dijit.layout.BorderContainer"); dojo.require("dijit.layout.TabContainer"); dojo.require("dijit.layout.ContentPane"); dojo.addOnLoad(function(){ // start dojo application }); [/sourcecode] This code will work but sometimes will crash. Then you press F5 and all works. As far as I know you can't do nested onLoad callbacks with google (it's a pity), so first you must load google api and load dojo components when google api is ready So it's better to use this other version of code: [sourcecode language='js'] google.load("dojo", "1.3"); google.load("feeds", "1"); google.setOnLoadCallback(function() { dojo.require("dijit.layout.BorderContainer"); dojo.require("dijit.layout.TabContainer"); dojo.require("dijit.layout.ContentPane"); dojo.addOnLoad(function(){ // start dojo application }); }); [/sourcecode]

Advertisement

2 thoughts on “mixin dojo and google api libraries

  1. Hi Gonzalo,

    I just faced this issue today and found this post.

    It seems that there is a problem if you use together ‘google.setOnLoadCallback’ and ‘dojo.addOnLoad’, but if you use the parameter ‘callback’ in ‘google.load’ everything work properly.

    Couple of examples:

    // Ex. 1 ================================
    dojo.addOnLoad(function(){
    // This is not executed 😦
    });

    google.load(‘visualization’, ‘1’, { ‘packages’: [“corechart”] } );

    google.setOnLoadCallback(function() {
    // This is executed
    });
    // ======================================

    // Ex. 2 ================================
    dojo.addOnLoad(function(){
    // This IS executed : )
    });

    google.load(‘visualization’, ‘1’, { ‘callback’: tururu, ‘packages’: [“corechart”] } );

    function tururu() {
    // Executed as well : )
    }
    // ======================================

    SaludoS desde Portugalete!!
    Txemanu

  2. I’m a out of dojo framework time ago. I know dojo has changed a lot since I used to work with (adm, …) I’m now sure what is the correct way to invoke a callback when js is ready with dojo right now 😦

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 )

Connecting to %s

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