Friday, August 20, 2010

Custom dojo builds

Most of us would like to extend dojo widgets/make changes to dojo code and rebuld our widgets along with rest of the dojo code. Another reason would be to optimize load times for your dojo widgets. Given that the widgets are loaded lazily, you would want to load a compressed javascript dojo file which contains all the widgets you need in a compressed format.
Here is how you could go about doing a custom dojo build.

Download the dojo source from the dojo download site. 
 Unzip it, and you should find a util directory in there. Go to util/buildscripts/profiles .
Now you need to create your own profile file which you will give it as an input to the build process.
Lets call it foo.profile.js.
It could look something like this:

dependencies = {
    layers: [
        {
            name: "customdojo.js",
            dependencies: [
                "dijit.Dialog",
                "dijit.layout.ContentPane",
                "dijit.form.CheckBox",
                "dijit.form.ComboBox",
                "dijit.form.TextBox",
                "dijit.ProgressBar",
                "foo.widget.button",
                "foo.widget.table",
            ]
        }
    ],
    prefixes: [
        [ "dijit", "../dijit" ],
        [ "dojox", "../dojox" ],
        ["foo","../../web/javascript/foo"]
    ]
}

You would notice that the contents of this file are in json format. The first thing of importance is the attribute layers.name which defines the name of the output file that is produced as a part of the dojo build process. right now it is called as customdojo.js . This is followed by a list of widgets that you want to be a part of the customdojo.js file. You should notice a couple of custom widgets too as a part of the build.
Note that the prefixes define where to find the dojo widgets specified above. They point to the directories path relative to the "util" directory. Hennce, dijit resides in "../dijit" and my foo widgets reside in the "../../web/javascript/foo".
Now , the next thing is your build command.
After you have saved the above file as say foo.profile.js, go to one level above to util/buildscripts/ and run the "build.bat" or the "build.sh" file depending on which platform you are in.

If you are in linux you could do something like

build.sh profile=foo mini=true action=release version=x.x.x optimize=shrinksafe
 copyTests=false cssOptimize=comments

This should produce a "release" directory containing the customized dojo build. You could probably also gzip your resultant output as discussed in one of the blog entries earlier.
It would be much more convenient if we actually automated this whole build process with an ant task. I'll try to talk about that in my next blog entry.

No comments: