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

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="http://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 &amp; MySQL Interviews, News and Views" />  
    <tab label="PHP &amp; MySQL Tips and Tutorials" />  
    <tab label="PHP &amp; MySQL Apps and Reviews" />  
  </tabs>  
  <tabpanels flex="1">  
    <browser src="http://www.sitepoint.com/subcat/97"/>  
    <browser src="http://www.sitepoint.com/subcat/98"/>  
    <browser src="http://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...!