XML Reference Guide

I'm not a Graphical User Interface kind of guy. Not that I don't like GUIs, (when they're done well) but I'm not the kind of person who wants to get bogged down in the intricacies of a particular operating system in order to determine where to put all the widgets that make up a GUI interface, such as menus, text boxes, tabs, and so on.

That was one of the things I've always liked about HTML; I didn't have to worry about all of that in order to put together some kind of coherent interface. Of course, there's only so much you can do with HTML. I mean, you couldn't build an interface as complex as, say, the mail program that comes with Mozilla with it. Or can you?

Well, no. But you can do it with Extensible User Interface Language, or XUL, an XML language that was used to build all of the interfaces for the Netscape browser (and its open-source basis, Mozilla). In fact, XUL is so powerful that it makes me think that perhaps the idea of a "weblication" isn't as far-fetched as it sounds. I mean, if we can avoid some of the pitfals and limitations of HTML, why not?>/p>

I'd need a whole book to explain everything there is about XUL, but let's take a look at a simple application that points out some of the differences between XUL and HTML, as well as some of the similarities.

What we're going to build here is a simple "image browser", in which the user can "scroll" through a list of books by yours truly. Like an HTML page, it will reside in the browser, and will use JavaScript to control much of the functionality. Unlike HTML, we will have the ability to easily lay out items on the page and add images to form buttons, among other things.

Let's start by creating the basic window:

<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">

    <button id="prev" style="font-size:large" label="Previous!" />
    <button id="next" style="font-size:large" label="Next!" />

</window>

In XUL, the window element replaces the html element as the root element; everything will be inside this element. Notice also that the namespace has been specifically set to the XUL namespace. (And for those of you who've noticed, yes, that is a Ghostbusters reference. And yes, it is pronounced "zool".) Using namespaces gives us another advantage: we can place HTML inside XUL, and vice-versa.

Within the window element, I've added two buttons. Notice that there is no form element; all of XUL is oriented towards one kind of form or another, so there's no need for one. Now, if you save this text in a file with an .xul extension and open it in a Mozilla-based browser, you'll see something different than you might expect from an HTML page, as you can see in Figure 1.

Figure 1

Notice that the buttons have stretched to fill the window. Notice also that they are on subsequent lines, even though we didn't add a line break between them. If we want to change both of those behaviors, we can put the buttons into a "horizontal box" element:

<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
  <hbox>
    <button id="prev" style="font-size:large" label="Previous!" />
    <button id="next" style="font-size:large" label="Next!" />
  </hbox>
</window>

Figure 2 shows the changes in their behavior.

Figure 2

Now let's add some images.

<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">

<vbox>
  <hbox>
    <image id="cover" height="350" width="283" 
      src="https://www.informit.com/ShowCover.asp?isbn=0672324229&type=a" />
  </hbox>
  <hbox>
    <button id="prev" style="font-size:large" label="Previous!"
      image="http://www.informit.com/ShowCover.asp?isbn=0789722615&type=e" />
    <button id="next" style="font-size:large" label="Next!" 
      image="http://www.informit.com/ShowCover.asp?isbn=0130310549&type=e" />
  </hbox>
</vbox>

</window>

Here I've added a regular image. Note that it's an image tag, and not an img tag as it would be in HTML. Note that I've also added images to the buttons using the image attribute. Doing it this way is handy because we can use the DOM setAttribute() method to change the image associated with the button.

I've also added an hbox around the image becuase if I don't, it'll get stretched just the way the buttons did. I've put both hboxes in a vbox, which stacks them vertically. It's also handy because we can use it to align the elements both horizontally and vertically by using the pack attribute:

<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">

<vbox pack="center" height="475">
  <hbox pack="center">
    <image id="cover" height="350" width="283" 
      src="https://www.informit.com/ShowCover.asp?isbn=0672324229&type=a" />
  </hbox>
  <hbox pack="center">
    <button id="prev" style="font-size:large" label="Previous!"
      image="http://www.informit.com/ShowCover.asp?isbn=0789722615&type=e" />
    <button id="next" style="font-size:large" label="Next!" 
      image="http://www.informit.com/ShowCover.asp?isbn=0130310549&type=e" />
  </hbox>
</vbox>

</window>

If we set the window to the same height as the vertical box, we can see the effects in Figure 3.

Figure 3

OK, so now we've got it set up, what do we do with it? Well, we create a script that enables us to change out the images when the buttons are clicked. Save the following in a .js file:

var thisPage = 2;

var coverSm = new Array(4);
var coverLg = new Array(4);

coverSm[1] = "http://www.informit.com/ShowCover.asp?isbn=0789722615&type=e";
coverSm[2] = "http://www.informit.com/ShowCover.asp?isbn=0672324229&type=e";
coverSm[3] = "http://www.informit.com/ShowCover.asp?isbn=0130310549&type=e";

coverLg[1] = "http://www.informit.com/ShowCover.asp?isbn=0789722615&type=a";
coverLg[2] = "http://www.informit.com/ShowCover.asp?isbn=0672324229&type=a";
coverLg[3] = "http://www.informit.com/ShowCover.asp?isbn=0130310549&type=a";

function next(){
   thisPage++;
   setImages();
}

function previous(){
   thisPage--;
   setImages();
}

function setImages(){

   if (thisPage > 1){
      document.getElementById("prev").setAttribute("image", coverSm[thisPage - 1]);
   } else {
      document.getElementById("prev").setAttribute("image", null);
   }
   if (thisPage < 3){
      document.getElementById("next").setAttribute("image", coverSm[thisPage + 1]);
   } else {
      document.getElementById("next").setAttribute("image", null);
   }
   document.getElementById("cover").setAttribute("src", coverLg[thisPage]);
}

and then add it to the page:

<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">

<script src="imagetestscript.js" />

<vbox pack="center" height="475">
  <hbox pack="center">
    <image id="cover" height="350" width="283" 
      src="https://www.informit.com/ShowCover.asp?isbn=0672324229&type=a" />
  </hbox>
  <hbox pack="center">
    <button id="prev" style="font-size:large" label="Previous!"
      image="http://www.informit.com/ShowCover.asp?isbn=0789722615&type=e"
      onclick="previous()" />
    <button id="next" style="font-size:large" label="Next!" 
      image="http://www.informit.com/ShowCover.asp?isbn=0130310549&type=e"
      onclick="next()" />
  </hbox>
</vbox>

</window>

The coding's pretty straightforward. When the user clicks one of the buttons, the current page is incremented or decremented, and the setImages() function sets appropriate values for the src and image attributes. In fact, if we call the setImages() function when the window loads, we don't need to set these values on the elements at all:

<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
    onload="setImages()">

<script src="imagetestscript.js" />

<vbox pack="center" height="475">
  <hbox pack="center">
    <image id="cover" height="350" width="283" />
  </hbox>
  <hbox pack="center">
    <button id="prev" style="font-size:large" label="Previous!"
      onclick="previous()" />
    <button id="next" style="font-size:large" label="Next!" 
      onclick="next()" />
  </hbox>
</vbox>

</window>

All of this should be pretty familiar. After all, most of it we could have done using HTML. But XUL has a more advanced and managable eventing system based on XML Events, and commands are easier to deal with. For example, we can take the actual actions off the buttons and instead refer to command objects:

<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
    onload="setImages()">

<script src="imagetestscript.js" />

<command id="xultest_previous" oncommand="previous()" />
<command id="xultest_next" oncommand="next()" />

<vbox pack="center" height="475">
  <hbox pack="center">
    <image id="cover" height="350" width="283" />
  </hbox>
  <hbox pack="center">
    <button id="prev" style="font-size:large" label="Previous!"
      command="xultest_previous" />
    <button id="next" style="font-size:large" label="Next!" 
      command="xultest_next" />
  </hbox>
</vbox>

</window>

This gives us several advantages. First off, we can refer to the same command from multiple locations. Second, we can dynamically change what command a button references. Third, the command is executed no matter how the user activates the button. Also, it's easy for us to disable a button, removing the command altogether:

...
function setImages(){

   if (thisPage > 1){
      document.getElementById("prev").setAttribute("image", coverSm[thisPage - 1]);
      document.getElementById("prev").setAttribute("disabled", "false");
   } else {
      document.getElementById("prev").setAttribute("image", null);
      document.getElementById("prev").setAttribute("disabled", "true");
   }
   if (thisPage < 3){
      document.getElementById("next").setAttribute("image", coverSm[thisPage + 1]);
      document.getElementById("next").setAttribute("disabled", "false");
   } else {
      document.getElementById("next").setAttribute("image", null);
      document.getElementById("next").setAttribute("disabled", "true");
   }
   document.getElementById("cover").setAttribute("src", coverLg[thisPage]);
}

This way, when we've reached the last book, we can simply disable the button, as you can see in Figure 4. Not only does the browser then represent it as "greyed out" but the command is also disabled.

Figure 4

This is just the tiniest tip of what XUL can do. For one thing, you have the advantage that all elements are part of the "chrome" system, in which you can specify themes that control the appearance of buttons, menus, and so on. I highly recommend you check out some of the resources and get a better handle on what this technology can do for you. Building web apps can actually be fun again!