SOS

Shane O'Sullivan's technical blog… really ties the room together

Archive for January, 2007

Second beta of DojoBuilder released

Posted by Shane O'Sullivan on January 29, 2007

The second beta of DojoBuilder has just been released. DojoBuilder is an Eclipse RCP based tool for generating customised builds of the Dojo Ajax toolkit. It provides a number of useful utilities for working with Dojo, including checking out the source code from source control (Subversion), configuring the build, and running the build. For information on what it can do, check out my first post on the subject.

Suffice to say, this is all you should need to create custom builds of Dojo – no need to install Subversion, Ant, hacking away at a command line interface with arcane “build targets”. It’s all been wrapped with a simple UI, while still providing you with access to all the complexities of Ant if you want them. For the impatient and enthused, you can download the application from http://www.skynet.ie/~sos/dojobuilder/downloads/DojoBuilder.zip.

This second beta release has a number of improvements over the original release.

  • Compression of all Javascript files in the build. While the usual Dojo build process only compresses the main dojo.js file, you are now given the option to compress all files in the source tree using a very quick compressor.
  • Dojo Profile Builder. Rather than a user having to manually write a JavaScript profile file describing what files they would like to be baked into their main dojo.js file, the new Dojo Profile Builder will now do this for them. Not only that, it will show you all the files actually included in the build (which are pulled in via dojo.require() calls) including the size of each, preview the dojo.js file that would be generated, and even compress that for you. This means you can quickly and easily find the right balance between runtime speed (via cached JavaScript) and first time download performance issues (dojo.js tends to get very, very big if you’re not careful).
  • Works as a perspective in Eclipse 3.2. The initial release only worked in standalone mode, meaning users had to download both the DojoBuilder plugins (~2.4 megs) and the Eclipse framework (~22 megs), even if they already had it. This new release can be added to an existing Eclipse 3.2 installation from the update site http://www.skynet.ie/~sos/eclipse/updatesite . However, DojoBuilder uses a Subversion plugin to work its magic, so you’ll have to install it first. See here for Subclipse, the Eclipse Subversion plugin. So, if you already have Eclipse 3.2 and Subclipse installed,
    • Click Help/Software Updates/Find And Install
    • Select “Search for new features to install” and click Next
    • Click “New Remote Site” and add the URL http://www.skynet.ie/~sos/eclipse/updatesite
    • Click “Finish” and step through the prompts to install the plugin.
    • Restart Eclipse, and to open the tool, click “Window/Open Perspective/Other/Ant Builder”

If you had downloaded the first beta of DojoBuilder, to update it you can simply download the ZIP file at http://www.skynet.ie/~sos/dojobuilder/downloads/DojoBuilderPlugins.zip into the DojoBuilder folder and restart the application.

The standalone DojoBuilder application for Windows can be downloaded from http://www.skynet.ie/~sos/dojobuilder/downloads/DojoBuilder.zip. Make sure you read the blog post here describing the prerequisites for running the application. Don’t worry, they’re not all that bad! That post also describes most of the capabilities of the application and how to use it, so I’ll just describe the new features here (proper help documentation is on the way, which I think should be the Dojo mantra at this stage :-) Update: documentation is now available at http://dojobuilder.skynet.ie ).

To create a new profile file,

  • Choose a Dojo build to use, either “nightly” or “4.1” will do, and click the “Use customized Build Source”
  • In the “General Dojo Options” section, chooses a Dojo click the “New” button. This presents you with a window detailing the files you can use.
  • Double click on the files you’d like to include in the build. They are added to the list on the right.
  • To preview the final file, click “Update Preview”. This shows you the generated dojo.js file, and a list of all the files it is made up of.
  • If you want to compress the preview dojo.js file, click “Compress Preview”.
  • You can then save the Profile file (to use when doing a full build later) or the Preview dojo.js file.

To edit or remove a profile file,

  • Click “Window/Preferences/Ant Builder/General Dojo Settings”
  • Choose a profile file and click either “Edit Profile” or “Remove Profile”

Incidentally, you can also create a new profile from this dialog, and also import an existing profile file you may have handwritten previously.

To compress all files in a build

  • Choose a Dojo build to use, either “nightly” or “4.1” will do, and click the “Use customized Build Source”
  • In the “Compression Options” section, select the “Quick Compress” and “Apply to All files” checkboxes.
  • Choose the “release” target set in the “General Dojo Options” section.
  • Click the “Build” button.

Still to do:

  • Multi-platform builds of the standalone application. I’m working on it, but don’t have the ability to test right now. However, if you have Eclipse already downloaded for your platform, you should be able to get DojoBuilder from the update site and use it without any problems. Let me know if this is not the case.
  • Performing builds without checking out the entire code base from source control.
  • Mac OSX support. There is some obscure bug occurring with Mac OSX that causes builds to fail.. Testing this could be tricky (I develop on Win XP), as it is unclear whether the fault lies in my code, Ant’s or Dojo’s. However, I will get to it somehow.

As always, please keep the feedback coming, it helped greatly in debugging this release.

Posted in Ajax, compression, Dojo, eclipse, Javascript, open source, Rich Client, Technical | 26 Comments »

Greasemonkey script to turn on Firebug debugging for Dojo

Posted by Shane O'Sullivan on January 12, 2007

Enabling debugging in Dojo is a relatively simple thing to achieve, you simply put

djConfig={isDebug:true};

into a script block before including the dojo.js file, and that’s it. If you want to use Firebug to display your debug statements, put the code:

dojo.require(“dojo.debug.console”)

somewhere on the page. However, this is not always as straightforward as it seems. For simple html or PHP pages, sure, it’s easy. But what if you want to debug multiple pages and you’re using static html? You’ll have to put this code on all of them, and remove it when you’re done. Or what, as is the case in my current position, you are working with a very large framework that doesn’t easily allow you to change the template of a page without a long rebuild step?

The solution is to use a Greasemonkey script to enable Dojo/Firebug debugging on any page you visit, or only for pages in a given list of domains (not that this only works for Firefox, poor old IE doesn’t have anything nearly as cool as Greasemonkey available). The steps to use this script are as follows:

  1. Install Greasemonkey from http://greasemonkey.mozdev.org/
  2. Install Firebug from http://www.getfirebug.com
  3. Go to http://userscripts.org/scripts/show/9424 and click the “Install this Script” button. Greasemonkey should prompt you to install it.

That should be all that’s necessary. Now, every page you visit will print it’s debug output to the Firebug console, regardless of whether the page has debugging switched on or not. Obviously you don’t always want this script to run, so to disable it, in Firefox to to “Tools/Greasemonkey/Manage User Scripts”, select the script and uncheck the “Enabled” checkbox whenever you don’t want to use it. Even simpler, if this is the only script you use with Greasemonkey, you can enable/disable Greasemonkey completely by clicking on the monkey icon at the bottom-left of the Firefox window.

Posted in Ajax, Dojo, greasemonkey, Javascript, Technical | 7 Comments »

First beta release of Dojo build tool

Posted by Shane O'Sullivan on January 8, 2007

Update: A second beta release of DojoBuilder is now available, click here.

Following on from my earlier post about the Eclipse RCP based tool I was building for Dojo, the first beta release is now available. You should read my first post on the subject for an overview on what it is, why it exists and what capabilities it has.

Steps to use the tool (Windows only for the moment, other builds coming soonish):

  1. Make sure you have Java 5 or greater installed on your machine. You can get it from http://java.sun.com/javase/downloads/index_jdk5.jsp , click on the download button next to “Java Runtime Environment (JRE) 5.0 Update 10“. Once it’s installed, make sure that you your PATH variable is set correctly by opening a command prompt (Start/Run/cmd) and typing “java -version”. It should print out a version of 1.5 or higher.
  2. Download my tool from http://www.skynet.ie/~sos/dojobuilder/downloads/DojoBuilder.zip .
  3. Extract the zip file and click on the DojoBuilder.exe file. This opens the application with four view panes.
    1. Ant Builder Control – This is used to specify the Ant build file to use
    2. Ant Settings – This contains the Dojo-specific tooling, e.g. Subversion tooling to download builds, selecting specific build targets, doing extra compression on the Javascript files etc.
    3. Ant Properties – Lists the user editable properties on the Ant build project. Usually you shouldn’t have to touch these if you don’t want to, the Dojo tooling should take care of it.
    4. Ant Targets – Lists the available Ant targets. You shouldn’t have to touch these if you don’t want to, just use the “Target Set” combo box in the “Ant Settings” pane.
  4. Choose a Dojo build you want to use in the “SVN Repository” combo box (only nightly and 0.4.1 have been tested so far).
  5. Click the “Use customized Build Source” checkbox.
  6. Choose a Target Set you want to build. “Release” is the most common.
  7. Choose a “Build Profile” you want to build, or just leave it at the default.
  8. Click the “Build” button.

This should result in a Dojo build being created in the “release” folder of your checked out source files. By default, these are placed in your home directory, as shown in the “Svn Dir” text box. You can change this if you like. You can also change where you want the built files to be placed by changing the “Build Dest” text box.

There is an additional option to “Super Compress” the files. This uses the Packer compressor to compress either the dojo.js file (your main Dojo file) or even all files in the Dojo tree (note that compressing all files may not be very reliable at the moment). To use this, check one or both of the “Super Compress” and “Compress All Files” checkboxes. Note that while these are extremely effective and result in very (very!) small javascript files, this step is very slow and should usually only be used before deploying the code to your application.

As this is the very first beta release, it is of course not yet perfect. If you have any issues, please reply to this post with details.

Update: A second beta release of DojoBuilder is now available, click here.

Posted in Ajax, Ant, compression, Dojo, eclipse, Javascript, open source, Rich Client, Technical | 33 Comments »

Listing the dependancies of a Dojo widget

Posted by Shane O'Sullivan on January 4, 2007

The Dojo Javascript toolkit has a very cool packaging system that allows a developer to simply use the dojo.require function to pull in all the Javascript files needed for a widget. However, while this works perfectly well, the fact that it uses synchronous XmlHttpRequests to retrieve the files can be a nasty performance hit as browsers don’t cache these Javascript files, unlike files included using <script> elements. So, if at all possible it’s best to include the required files via <script> tags, and the user will only have to download them once.

The problem with this approach is that you have to include these script files in exactly the right order, otherwise Dojo’s packaging system will remotely load these files for you. I list three solutions below, skip to the last one if you’re lazy and just want the easiest way to solve the problem :-)

One way to figure out the correct order is by trial and error, using Firebug to see which combination results in zero Ajax requests. This is how I originally approached the problem, but obviously this is labour intensive, and has to be redone for every release of Dojo.

A second approach is to use Dojo’s build system to figure this out for you. To do this, open a command window in the /buildscripts folder (um, I should have said that you have to have a build of Dojo checked out from Subversion for this, and Java 5 installed), and type

java -jar lib/custom_rhino -opt -1 -e “var dependencies = [‘dojo.widget.FilteringTable’]; load(‘getDependencyList.js’);”

This will output all the files you need, unfortunately including all of the base files that are only supposed to be baked into the dojo.js file, and you don’t want them. So, to find out what files to subtract from the first list, type:

java -jar lib/custom_rhino -opt -1 -f profiles/minimal.profile.js

This gives you a smaller list of files. Subtract these from your original list, and those are the files you need for your widget.

Finally, the third method is that you download an XML file which contains all the dependancies listed on a per widget basis. The files that you need are dependant on what profile of Dojo you use, as some of the required files are probably baked into the base dojo.js file. So, here’s some I created earlier:

  • Dependancies for the “minimal” build – click here
  • Dependancies for the “ajax” build – click here
  • Dependancies for the “widget” build – click here
  • Dependancies for the “kitchen_sink” build – click here

Posted in Ajax, Dojo, open source | Leave a Comment »

Setting the working directory for an Ant Java task

Posted by Shane O'Sullivan on January 3, 2007

Just a tiny Ant tip – I’ve been fooling around with Apache Ant for the first time, and needed to change the working directory so that, rather than it being the folder in which the build.xml file is located, it be somewhere else. This enables files in other directories (which I don’t control) to use relative paths to other files. I tried setting the System’s “user.dir” and “basedir” properties, but these didn’t work.

So, the solution is very simple, in your <java> task, set “fork” to true, and then set the “dir” property to the folder you want to use as a working directory.

e.g.

<target name=”doMyBidding”>

<java fork=”true” dir=”c:\work\lib”>

……..

</java>

</target>

No doubt this has been documented somewhere else, but a quick search on Google didn’t readily find it for me, so here you go. Enjoy!

Posted in Ant, Apache, open source | 10 Comments »

 
Follow

Get every new post delivered to your Inbox.

Join 533 other followers

%d bloggers like this: