Getting started with xul development

I had a cause the other day to get bizzy with some XUL development for Firefox. I normally do the java, j2ee, dhtml, javascript, ajax and some related stuff day-to-day so I felt up to the challenge. The only problem was what the heck do you use to for tools. Sure, there are some of those developers that are purists and I do recommend learning in a non-tool environment however they are tools and they are useful. After a brief search I came up with not a whole lot. Then it hit me use the tools I all ready use. BAM! So I cranked open my editor of choice eclipse with the myeclipse bolt-on.

Here are the steps I used to make my xul development a better experience.

Do the quick set-up according to mozillaZine.

One thing I do recommend is setting up a completely different profile for development this will give you a sane place to use your browser when not developing! Here is how you do this and maintain your bookmarks. This is completely optional. These steps were performed on Linux other operating systems may be different.

You can do this by staring Firefox like this 'firefox %u -profilemanager'. Do this on the command line and make sure firefox is closed. You should now see the profile manager window.
The other way is to manually edit the profiles.ini file in your .mozilla directory located in your home folder. I recommend the above for the first pass. If you are developing multiple plugins I would create a profile for each one.

Now that you have a development profile. Lets hack it up a bit. One of the things that got me hot was in my new profile all my bookmarks and preferences were gone! To work around the bookmark issue, I did the following. More indepth coverage about the profile manager is located here.

Created a bookmarks folder under my .mozzilla directory located in my home directory.
Moved my bookmarks from my regular profile to the bookmarks folder created above.
Then I created symbolic links in place of the other files. That way I can get to my bookmarks for whatever profile you are using. I'm not to sure how this works on windows if you know please email me and I will include it.

Now, it doesn't matter which profile I use I have all my bookmarks handy. You can do the same for the preferences

Setting up for use on MyEclipse

For this demonstration I am using the hello world stub files from the getting started with extension development. Get that zip file and extract it some where for use. Now the fastest way to get started is to use the extension developer plug-in you can find this here. This was also covered in getting started. Installing this plug-in will greatly simplify your development effort.

Open Firefox with your development profile.
Open the extension developer extension builder Tools > Extension Developer > Extension Builder
Browse to the place where you unpacked the helloworld.
Wait!!! If you are on the latest Firefox click edit rdf. Go down to target applications and change the Firefox max version to 2.0.0.* or whatever version you happen to be on.
Now click install for development and restart your browser.
If it worked you should see
Hello World!
under tools. If you click it will pop-up a small window stating hello world.
Now fire up MyEclipse. If you have never used eclipse tool you may want to stop here and take a closer look at these tools and then come back. MyEclipse is not a free tool but it is very reasonably priced editor. If you have Web Sphere Application Developer or Rational Application Developer you can follow along as it will be the same steps.
Create a a new simple project File > New > New Project name it what ever you want.
Now right click on the project you just created and create a new folder name the folder whatever you want. See the advanced button below where you named the folder, click that and then check the Link to a folder in the file system check box. Browse for the folder you unpacked the Hello World from Mozilla. Hit Finish.
What we have so far that we can use out of the box is the css editor, javascript editor and dtd editor. This is all well and good but we want to be able to open the xul files in MyEclipse.
XUL file type configuration. Go to Preferences then Preferences > General > Editors > File Associations hit the Add... button and add *.xul. Now click Add... for the Associated editors button and look for the following to add MyEclipse XML Editor. Hit OK and your done. Now you should be able to open xul files and edit them. If your really motivated you can start making a dtd for auto completion, to date I have not found a xul dtd online anywhere if you have one please send it. MyEclipse will pick up on the items in the document you are working on, so at least you can auto complete those items.
Now lets edit a file to see this in action. Go ahead and open the hello.xul file and add another button after the close button.
< button label="Foo" oncommand="alert('Foo')" / >
Save that file and test it out in the browser.