Introducing XUL - The 'Net's Biggest Secret: Part 1

Back to School

One of the things that’s likely to make XUL a success is the fact that it makes use of existing technologies, and defines new elements and features only when there really is no alternative. From the point of view of those of us who are just starting out with the technology, this is good news! All we have to do is come to grips with XUL markup and the XPCom library. To build fully fledged applications, though, your knowledge of these technologies may be pushed to new limits.

Here are a few of the supporting cast you're likely to find yourself using with XUL:

1. CSS
   A large part of the job of customizing the look of an XUL application can be handled by CSS. If you haven't developed a strategy for keeping your CSS organized, now is the time. Develop a solid naming convention, and notes of what you did, and where, otherwise you'll quickly get lost and end up with an unexpectedly technicolored Website. SitePoint offers much useful information about CSS. Note that what you can't do with CSS, you can do with Overlays.

2. XML
   XUL is an XML format, so you'll certainly need to be happy working in it. If you're unsure, read Introduction to XML -- it's just text...

3. XML Namespaces
   You will need to be aware of how XML namespaces work, although you don't need to be a guru. Try XML Namespaces Explained, for a refresher.

4. JavaScript
   Bringing an XUL application to life is achieved by JavaScript. If you're not up to speed, make sure you've had a read of SitePoint's JavaScript library, especially Kevin Yank’s JavaScript 101 series, Ryan Frishberg's JavaScript Object Oriented Programming series, and The Rough Guide to the DOM. Did you know JavaScript supports inheritance and Java-like exception handling?

5. XML Document Type Definitions (DTD)
   Although you don't have to use DTD's, they can prove extremely useful to separate for the XUL elements certain information about your application, where that information is displayed. For example, the text that appears on a button could be defined by a DTD document ENTITY. This can be useful, for example, when you want to "internationalize" your application, and select a different DTD file for a different language. Conceptually it's similar to using a CSS file to store information about the appearance of an application, the difference being the DTD allows you to store specific pieces of content separately.

6. Additionally, a touch of Xlink might come in handy, and knowledge of RDF may also prove a good idea, as it’s one optional data source for XUL applications.

In other words, there's a lot you have to be aware of, but if you ever played with DHTML and gave up in frustration due to poor browser implementation, XUL is you chance to pick up where you left off. So don't panic (yet) -- to use XUL to spruce up a Web page, all you need is knowledge of a few XUL widgets, and a little JavaScript.

Here, I'll show you some simple examples that won't tax the brain. Don't expect to become an expert by the end of this article -- there's a lot you'll have to discover for yourself: explaining how to build your own version of Word with XUL, for example, is just a little beyond the scope of this article!

Warning: right now there isn't a great deal of material to help you get started with XUL. The best source I've found is O'Reilly's Creating Applications with Mozilla, with is available for reading online in HTML format, and is (thankfully) excellent. I've suggested further reading at the end of this series. Of course, this means great opportunities for you to put up an XUL resource site of your own...

Zool-ology

As I mentioned at the start of this article, XUL allows you to build both desktop and browser-based applications. Here, I'm going to narrow things down to the browser -- how you can "XULify" a Web page. Two things you'll need to get the examples provided here to work are:

Mozilla 1.0+ or Netscape 7.0+ - I used the latest release of Mozilla for these examples: Mozilla 1.3 Beta. Although XUL and XPCOM are pretty stable now, there's still work going on, so double check the version you're using.

PHP -- I'll be using PHP to "launch" the XUL apps. If you need a copy for Windows, an excellent place to start is Firepages phpdev, which will set you up with Apache, PHP and MySQL in one easy install. In your php.ini file, make sure you have "short_open_tag=Off" so that PHP will not mistake your XML tags for PHP tags. It may also be a good idea to tell Apache to handle XUL files with PHP, so that you can place PHP code in a .xul file. There's nothing stopping you simply using .php, though -- as long as you tell Mozilla the MIME type you're using (I'll get to that shortly).

Here's a .htaccess file that should solve your problems in a single stroke. Simply drop this into the Web directory from which you want to run XUL (this assumes you have AllowOverride All in httpd.conf for Apache):

php_flag short_open_tag Off  
<files *.xul>  
   ForceType application/x-httpd-php  
</files>

The other thing you’ll want to have at hand is XUL Planet's Element Reference, which is about the best place to get reference information on XUL and XPCom right now.