If you're new here, you may want to subscribe to my RSS feed. So that you can read the latest updates about Web2.0 tools, Making Money Online, Tips in SEO, Ajax and many more. Thanks for visiting ProgramimiCOM!

It is surprisingly easy to package and create an installer for a XUL application that you’ve written. Anyone who uses your application will thank you for it; it will save them a lot of time and effort. Keep reading to see how it’s done.You may have just finished working through our previous XUL tutorial, or you may have been creating applications for a while now, and find yourself in a position where you have a collection of files that when used together form a working application. You will recall that in order to use a XUL application, be that within the Mozilla browser, or as a standalone application, you need to modify certain core Mozilla files. This may be fine for you, but what about your market? Do you think people will want to download a collection of files, set up directories for them and then modify the Mozilla source files?

It’s unlikely that many people will, unless your application is targeted solely at developers that actually enjoy doing that kind of thing of course! What you need is a method of packaging all of the files needed to run your application into effectively one file that can be downloaded, double-clicked and then perform the install itself, putting the right files in the right places and updating the relevant Mozilla source files automatically.

Thankfully, XUL does provide a method of doing what we want natively; it’s called XPInstall which stands for Cross-Platform Install. The system involves the use of a JavaScript file that controls the copying of files to their destinations and the updating of the installed-chrome text file that forms part of the chrome registry. XPInstall files, that have an XPI extension, are typically deployed by a web page, which you navigate to using Mozilla and install by clicking on a link rather than by downloading an executable setup launcher. If you have downloaded an XPI file, you can also install it by dragging it into an instance of the Mozilla browser window.

Possibly the only thing that it isn’t possible for the install script to do is edit the environment variable, which is a shame, because it means that the application in this case isn’t completely automated. This can be achieved in other ways. Additionally, on systems successfully configured with XULRunner, users may not need this environment variable set anyway (I don’t know in all honesty as I haven’t tried myself). XULRunnner is a project aimed at making applications written in XUL run outside of Mozilla so that Mozilla doesn’t even need to be installed to run XUL applications. It’s still in its early stages at this point and can be tricky to configure, but it will improve. XUL programs designed to run within Mozilla don’t have the environment variable drawback.

Creating an XUL App Installer - Getting Started

I’ll be using the application created in the last XUL series as an example for this installer. If you’re not, you’ll need to adjust the file names and stuff accordingly, but the basic premise should be the same.

You will know from looking at the source files of Mozilla that most of the files needed to run any of the applications of the Mozilla suite are packed into JAR, or Java Archive, files. These archives then contain the standard directory structure of working XUL applications, making use of content, locale and skin folders. This means that your XPI file can be made up of just two files: the JAR file containing all of the XUL, RDF and other associated files, and the special JavaScript file that controls the install process.

This JavaScript file must be called install.js and is a surprisingly small and simple file when used with relatively small and simple applications. We will look at how to construct this file now. As usual when working with XUL, you’ll need nothing more complex than a text editor at this point.

First, we need to set a few variables:

appName = “XUL Edit Lite”;
author = “ProCOM”;
chromeName = “interface”;
version = “1.0″;

These variables represent information also found in the contents.rdf file located with your main application file. Next, create a variable to hold the name of the file that will be copied to the user’s system:

file = “xuleditlite.jar”;

Finally, we can save time later by creating variables to hold the information to be written to the installed-chrome file:

contentPath = “content/”+chromeName+”/”;
localePath = “locale/en-US/”+chromeName+”/”;

Creating an XUL App Installer - The Installation Process

To start the installation process, we need to initialize it and provide the chrome registry with the registry key:

initInstall(appName, “/”+author+”/”+chromeName, version);

The initInstall method takes the plain-text, or friendly, name of your application, followed by ‘/author name/application name/’ which should match the information in the main contents.rdf file.

To tell XPInstall where to copy your application files to, you use the getFolder method to obtain the target directory, and the setPackageFolder method to set it as the target directory:

installDir = getFolder(”Chrome”,”");
setPackageFolder(installDir);

The addFile method assigns a source file to be copied to the target directory. It takes just one parameter; the name of the source file:

addFile(file);

You can also use the addFolder method to assign the source files for the installation if your XPI archive contains a directory structure instead of a JAR file.

You now need to specify what information is added to the installed-chrome file, a key element of the chrome-registry. This is done using the registerChrome method which takes three parameters: what to install and how to install it, where the files can be found, and the path to the files:

registerChrome(CONTENT | DELAYED_CHROME, getFolder(”Chrome”,
file), contentPath);
registerChrome(LOCALE | DELAYED_CHROME, getFolder(”Chrome”,
file), localePath);

Note that skin packages normally reside within their own JAR archives, which is why I haven’t specified a SKIN| DELAYED_CHROME install. DELAYED_CHROME means that the new chrome will be installed once Mozilla has been restarted (when the chrome.rdf file is regenerated).

Finally, the performaInstall method is called, which actually performs the installation. This is the point where the specified files are actually copied, and the necessary file updates occur:

performInstall();

Creating an XUL App Installer - Packaging Your Files

To package your installation files into an XPI file, you can use standard archiving applications such the popular WinZip or WinRAR. You simply need to select the option to create a new archive, select an appropriate name that ends with .XPI then set the Files of Type listbox to All Files. Now choose the files to be packaged and hey presto! Your XPI archive should now exist.

As you’ll need to have a directory structure within the XPI file, I’d recommend using WinRAR as it is easier to create relative folder paths to set up the internal structure of the archive. Ensure that you set the archive type to Zip however, and not RAR or it won’t work; when you try to install it, you’ll get an error message stating “Not a valid installation package.” Note that the JAR file inside the XPI archive must also be in ZIP format or the application won’t work after the install. Once this has been done, your XPI package should appear like this:

The JAR file should contain folders for each element of the package, in this case, the content and locale directories:

Each of these folders should contain the relative paths to the application files:

Once your application is packaged, there is very little else that needs to be done; you just need to focus on deployment now, which is likely to be via a web page. To run the XPI file, all you need to do is create a hyperlink to it; when the hyperlink is selected with a Mozilla browser, the installation process will begin:

Click the following link to install XULEditLite: <a href=”xuleditlite.xpi”>Install</a>

This is all you need. Mozilla will handle the confirmation or error reporting, giving you either a success dialog when the installation is complete or an error message if things go wrong. The default, unconfigured messages don’t provide much information however, so it is advisable to create your own alerts, such as one that informs the user that Mozilla will need to be restarted before the new application will be available. It may also be wise to inform users that your application (if it is anything like this one) is best run stand-alone, and therefore, should perhaps also contain instructions on how to do this.

I like to run my XUL application as a stand-alone application in its own window, rather than within Mozilla itself. Mozilla still powers my program; it just doesn’t display anything on screen. The only problem that I’ve found with this is that I have to open a command window and type out a command that will launch my application every time I want to use it. One way that I’ve got around this is to create a batch file, which is pretty much just the same command to launch the program typed into a text file and saved with a .bat extension. Linux users will know these files as shell scripts.

Add the following code to a text file and save it appropriately:

START mozilla -chrome chrome://interface/content

This will effectively create an executable that will launch your application without the need for manual intervention. As part of the installation process, it would be relatively simple to assign this file to be installed to the desktop instead of the chrome directory to go that extra mile for the end user.

So you have seen how easy it is to package and create an installer for a XUL application that you have written. You’ll find that knowing about packing makes things easier when creating skins as well, as downloadable skins for Mozilla or other XUL applications are also packaged in this way and installed using XPInstall. All in all, the various elements that make up the packaging and installation medium are an excellent way of going about things. Everything is open source and relatively straight forward.