Here’s a question: what if I was to tell you that you can write your own version of Word using something like HTML and JavaScript? What if I added that you could run on your hard disk or launch it directly from your Web server and use it to update your site’s content? It sounds a little far fetched, I know, but it’s right here, right now — and it calls itself “Zool”.
Here’s what this three-part series will cover:
- The XUL Revolution: just who is Zool?
- Back to School: time to dust off that JavaScript…
- Zoolology: getting read to fire up your first XUL application
- 3D Browsing with XUL: straight in at the deep end.
- Desperately Seeking: the search is over.
- Takeaway Menu: with fries please!
- But no one uses Mozilla: back to browser detection.
- The Rise of the Rich Client: the future is XUL.
The XUL Revolution
In one of the Internet’s quieter corners, mozilla.org, a revolution has been taking place. A new XML format, called XUL (eXtensible User Interface Language), pronounced “Zool”, is on the way to re-shaping what we know about both the Internet, and desktop applications. A bold claim perhaps — but once you’ve finished reading this, you may just find yourself agreeing.
The conceptual leap that’s taken place at Mozilla is to think beyond the Web browser as simply being a tool for viewing Web pages, and instead, to look at it as a framework — a runtime environment for executing applications, just as you might run programs in the Java and .NET runtime environments.
While we were all watching .NET and Java fighting it for developer and corporate “mind share”, Mozilla have quietly made their revolution happen with little hype or attention; right now, a Google search for “XUL” yields only 103,000 results, for example.
Of course, Open Source projects rarely have money to advertise, and Mozilla (well, Netscape in fact) have to overcome the additional stigma of being the project that “lost” the browser wars. But, if you take a look at XUL today, you’ll be surprised at how little is being said about it. Something tells me that the real fun is only just beginning…
What’s fascinating about XUL and its sister technology, XPCom (Cross Platform Component Object Model), is that they have all the hallmarks of .NET and Java:
- a library of “widgets” for building applications (as with .NET WinForms and Java’s Swing)
- separation of presentation logic from application logic, the presentation logic being handled by JavaScript
- support for XML messaging protocols like SOAP and XML-RPC
- support multiple languages for building “code behind” components including C++, Python and Ruby, with Perl in progress — though, sadly, no PHP yet(!).
- truly cross platform; anywhere you can run Mozilla, you can run your XUL/XPCom applications.
But it doesn’t stop there — writing an application in XUL is like writing a Web page with DHTML, except that your XUL application will work, while your DHTML might…. XUL provides a markup that will be easy for anyone with HTML experience to pick up, and has all the advantages of a text-based markup language, such as being able to generate it “on the fly” with PHP.
Better yet, XUL allows for the use of existing technologies, such as CSS, to modify the look and feel of your XUL applications, and SVG, to add some visual flair. You can also mix HTML with XUL — you can put together hybrid pages, to, for example, bring a boring HTML page to life with some XUL widgets. Don’t expect to find XUL listed at w3.org, though — this is entirely Mozilla’s idea.
All you need in order to run XUL applications, is to have Mozilla installed, right? Well… almost. There are a number of projects that aim to bring XUL to other runtimes and environments, such as Mozilla’s Blackwood Project, Luxor XUL, jXUL and XULUX, all of which bring XUL to Java in some manner. It’s also possible to Embed Gecko, which could bring XUL to devices like mobile phones and PDAs.
Not that you need to worry about any of those today; all you need to run XUL applications is Mozilla (or a browser based on Mozilla such as a recent version of AOL or Netscape).
“All very good”, you might say, “but this looks as if it’s just going to be another poorly implemented technology that will do nothing but waste my time.”
Well how about this: ActiveState have already released Komodo, an IDE that was written using the Mozilla code base, and takes advantage of XUL. You’ll find many smaller projects listed at mozdev.org. Anyone for a game of XULMine? You can run it right off site (you’ll need Mozilla installed, of course)! Notice how it looks like any other windowed application? And see how quickly it loads…?
Now that you have a rough idea of what XUL is about, it’s time to brush of those dusty “Best viewed with …” signs from the last browser wars, and slap them back up on your Website. It’s time to get busy with XUL…
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:
- 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.
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…
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.
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?
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.
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.
3D Browsing with XUL…
Rather than build up slowly to your first XUL application, let’s jump straight in at the deep end!
<?php
header ( 'Content-type: application/vnd.mozilla.xul+xml' );
?>
<?xml version="1.0"?>
<!-- example1.xul -->
<?xml-stylesheet href="example1.css" type="text/css"?>
<window
title="XUL in Action"
xmlns:html="https://www.w3.org/1999/xhtml"
xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
<tabbox orient="vertical" flex="1">
<tabs>
<tab label="PHP & MySQL Interviews, News and Views" />
<tab label="PHP & MySQL Tips and Tutorials" />
<tab label="PHP & MySQL Apps and Reviews" />
</tabs>
<tabpanels flex="1">
<browser src="https://www.sitepoint.com/subcat/97"/>
<browser src="https://www.sitepoint.com/subcat/98"/>
<browser src="https://www.sitepoint.com/subcat/99"/>
</tabpanels>
</tabbox>
</window>What does this do? Open example1.xul from the code archive to see it in action — and hold on to your seat!
You’re still here? Haven’t fainted? Try clicking on some of the links in each tab and see what happens…
For those who aren’t viewing the file with Mozilla, you just missed out on an extra sensory Web experience. Should your curiosity get the better of you, you know what to do…
OK — it’s not really 3D browsing, but rather three “tabs”, each acting as an independent browser. The point is that all this is in control of you: the Webmaster — you’re able to give visitors a custom layout that’s geared specifically for browsing your site.
Let’s examine the above example in detail. First, I’ve used PHP’s header() function to instruct the browser (Mozilla) that the MIME type of this document is ‘application/vnd.mozilla.xul+xml‘, so that the browser knows how to deal with it. This is the only work being done by PHP (for now), and could be easily reproduced with Perl, JSP and ASP(.NET).
Next, there’s the usual declaration that any XML document requires <?xml version="1.0"?>. The preceding line is just a comment, so you know which file this is (and don’t worry — they’re all provided for you in this downloadable ZIP file).
The next line defines the CSS style sheet to be used with this XUL document. This is slightly different to the HTML format for including a style sheet, where you’d have
<link rel="stylesheet" type="text/css" href="example1.css" />I’ll look at the style sheet in a moment.
Following the style sheet, you have your first real XUL element(!): window. Aside from the title attribute, two namespaces are declared within <window />, the default being the XUL namespace, while an additional namespace for HTML is defined with xmlns:html. Although I haven’t made use of the HTML namespace in this example, I’ll be declaring it in all examples “just in case”. The window element is one of five root elements in an XUL document, and probably the one you’ll use most. Others are overlay, dialog, page and wizard.
Next up is the tabbox element. This is a “container” for “tab” elements, a bit like a filing cabinet where you place tabbed hanging folders. The attribute “orient” specifies the orientation of the tab box, while the flex element is used to make the tabbox fill up the available space in window.
Flex is defined by XUL Element, which is a “parent” element for many other XUL elements. If you’ve come across object oriented programming or DOM, XUL has a similar hierarchy that defines all elements as being descendants of parent nodes, the “grand daddy” being the node.
Next, come the tabs, which represent a container for defining tab elements. Each tab has a “label” attribute, which defines the text which appears on the tab.
Below the tabs element comes the tabbox, where I can define the elements that correspond to the tabs. I’ve used the browser element, which is similar to the iframe element in HTML, to specify three Web pages to display. To make things a little confusing, XUL also has an iframe element of its own, which is used in more of less the same way as you’d use an iframe element in HTML.
The example1.css document looks like this.
window
{
background-color: navy;
}
tab
{
font-family: verdana;
font-size: 13px;
font-weight: bold;
color: navy;
}It’s so easy…!
Harry FuecksHarry Fuecks is the Engineering Project Lead at Tamedia and formerly the Head of Engineering at Squirro. He is a data-driven facilitator, leader, coach and specializes in line management, hiring software engineers, analytics, mobile, and marketing. Harry also enjoys writing and you can read his articles on SitePoint and Medium.
