Mozilla XUL Application Development Notes, Micro Tutorial and Helper Scripts

I love Ghostbusters and I believe Tingo is Gozar the Carpathian, but thats not what I'm logging.

I've started experimenting with the Mozilla Toolkit (Toolkit API). Its a framework for building applications, extensions and themes for Mozilla; and it is awesome. Anyone with some basic web development skills ( xml (o,w), css, javascript) can build using the Mozilla Toolkit. They provide an nice UI markup language called XUL.

To get started I scoured the Mozilla Developer Center for documentation and tutorials and ended up spending 90% of my time with Mozilla's developer site resources. I did find 2 other tutorials and documents that helped a lot and if I can find them again I'll list them here:

Ryan's Work Blog: This post was great for a quick run down on how to set things up. I used Ryan's layout for my test app and it was REALLY useful to see how he setup his chrome.manifest with the file: reference. However, the same information can be found in the tutorial on Mozilla Developers Site by Mark Finkle...

MozDev: Getting Started with XULRunner by Mark Finkle

What I found was a nifty tool for running Mozilla Applications called XULRunner.

I started building... I had problems... I'm going to now provide some notes...

NOTES:
I am doing my development on Windows, but because of its XP (Cross Platform) design, I'll be testing and running on Windows XP 32/64, Vista Premium 32/64, FreeBSD 7.0, Fedora 8/9 and maybe Gentoo.

Windows:
1. Download XULRunner
2. Unzip and put somewhere easy: C:\xulrunner
3. Register path to xulrunner. Open cmd prompt and type: path=%PATH%;c:\xulrunner
4. Put source package in easily accessible directory. Something like c:\home\me\src\mozilla\myapp

I copied a batch file that automatically creates the base directory structure. I modified it to provide a little more default generation. All you have to do is create a batch file (right-click, select new, file, rename to xulgen.bat) in the source directory, paste the code below then execute the batch file (double-click). I actually keep xulgen.bat in my ~\src\mozilla dir so i can copy it into new folders.

xulgen.bat

cls
@echo off
echo About to create the XULRunner directory structure

SET def_company=mediaHACK
SET def_app=MyApp
SET def_version=0.0.0.1
SET def_build=%DATE:~10,4%%DATE:~4,2%%DATE:~7,2%
SET def_copyright=%DATE:~10,4%
SET def_app_id=xulapp@domain.tld

pause

touch application.ini

echo [App] > application.ini

SET /P cn=Enter Company Name (Default: %def_company% ):
if "%cn%"=="" SET cn=%def_company%
echo Vendor=%cn% >>application.ini

SET /P app=Enter App Name (Default: %def_app%):
if "%app%"=="" SET app=%def_app%
echo Name=%app% >>application.ini

SET /P vers=Enter Version (Default: %def_version%):
if "%vers%"=="" SET vers=%def_version%
echo Version=%vers% >> application.ini

SET /P buildid=Enter Build ID (Default: %def_build% ):
if "%buildid%"=="" SET buildid=%def_build%
echo BuildID=%buildid% >>application.ini

echo Copyright=Copyright (c) %def_copyright% >>application.ini

SET /P id=Enter App ID (Default: %def_app_id%):
if "%id%"=="" SET id=%def_app_id%
echo ID=%id% >> application.ini

echo [Gecko] >>application.ini
echo MinVersion=1.8 >>application.ini
echo MaxVersion=1.9.0.* >>application.ini


mkdir chrome
cd chrome

touch chrome.manifest
echo content %app% file:content/ > chrome.manifest

mkdir content
cd content
touch main.xul

echo ^<?xml version="1.0"?^> >main.xul
echo ^<?xml-stylesheet href="chrome://global/skin/" type="text/css"?^> >>main.xul
echo ^<window id="main" title="My App" width="300" height="300" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"^> >> main.xul
echo ^<caption label="Hello World"/^> >> main.xul
echo ^</window^> >> main.xul

cd ../..
mkdir defaults
cd defaults
mkdir preferences
cd preferences

touch prefs.js
echo pref("toolkit.defaultChromeURI", "chrome://%app%/content/main.xul"); > prefs.js

cd ../..

This script can easily be ported to *nix and I'll post it here when I port.

After that, the files it creates need to be edited:
/application.ini => Update the ini settings to your needs
/chrome/chrome.manifest => change the myapp to the name of your folder (which i usually name based on my application)
/defaults/preferences/prefs.js (if you don't want /chrome/content/main.xul to be your default launch page)

Below I recommended you manually edit the main.xul file. The batch file now creates this Hello World example for you. You'll also need to put some markup in the main.xul file (hello world xul): /chrome/content/main.xul:

main.xul

<?xml version="1.0"?>
<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>

<window id="main" title="My App" width="300" height="300"
xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
<caption label="Hello World"/>
</window>

After we've edited the files and are ready to run we need to test! In windows we can do this 3 ways:

1. Command Line
1. Start->Run->cmd
2. Type: xulrunner c:\path\to\xul\app\application.ini
   
   
2. Run
1. Start->Run
   
2. Type: xulrunner c:\path\to\xul\app\application.ini
   
   
3. A batch file
1. Create a batch file in the application directory. I found with my XP64 install I had to put the full path to XUL runner in my batch file even though i registered in the path env var.
   
2. c:\xulrunner\xulrunner.exe c:\path\to\xul\app\application.ini
3. Run your batch file.

I used the batch file method.