Exploring XUL in Mozilla: The Bulletinboard Tag

by Andrew Wooldridge

If you've worked with XUL at all, you know it's a great language for creating user interfaces for applications. But you may have noticed that things tend not to move around much in XUL -- except for maybe dropdown menus or when you drag and drop a bookmark. What if, though, you wanted to create a chess game, or even a "virtual desktop" application where you needed visual elements to move from place to place?

If you did what I did, which is look in the existing Mozilla XUL code for something that might help you, I'm sure you probably came up a bit short. The reason for this is that the tag set I'm about to describe currently has no representation in the existing code, as it is relatively new. I'm sure that as later versions are created, and the need arises, you will see this aspect of XUL used more often. So what the heck am I talking about? It's the <bulletinboard> tag.

The implications for <bulletinboard> are huge! I could barely contain my excitement when I discovered that this had been added to the Mozilla codebase. Here are a few of the potential applications for <bulletinboard>:

  • A Mozilla-based "desktop" application with draggable windows, expandable icons, and embedded apps.
  • A drag-and-drop toolbar.
  • XUL-based games. Many games consist of just moving elements around on a screen while sounds are playing -- with some smidgen of internal logic to glue it all together. Now you can create XUL-based games like Tetris or Pong very easily.
  • Anything that involves animation, or moving elements from one location to another.

But ultimately, I keep pondering the implications <bulletinboard> has for gaming. Mozilla gives you the ability to play sounds, display images, connect to a network, fetch information remotely, etc., etc. All of which someone might tie together in novel ways to make some really interesting multiplayer games. Before <bulletinboard>, these applications would simply have been impossible or much more difficult to create.

Other examples of current XUL applications using <bulletinboard> can be found at DMOZ under XUL Applications, and especially in the subcategory, XUL Applications -- Games

Animation in Mozilla

Before <bulletinboard>, if you wanted to create animation in Mozilla, you'd have to use HTML and absolute positioning since XUL didn't support that. The reason is that the box model on which XUL is based uses flexibility and relative positioning of elements. (This gives you things like "intrinsic sizing" where the window arranges itself based on the size needs of all the widgets it contains.)

You can find many examples of animation using this CSS absolute positioning methodology in any DHTML book. (This is a big aspect of the "D" in DHTML.) Resorting to this method had many drawbacks, as you had to interleave HTML tags in XUL. This sometimes has undesirable side effects (like slowing down the browser due to the extra rendering baggage HTML tags bring along). You might also have tried to "fake" animation with animated gifs or Flash files.

Now, with the bulletinboard tag, you can position elements on the screen (and thusly move them around with scripting) in virtually the same way you might position them with DHTML.

Here's what you might do in DHTML:

Listing 1: HTML positioning.


   #firstone{ position:absolute; left:30px; top:30px; }

   #secondone{ position:absolute; left:100px; top:100px;} 
  <div id="firstone"  > 
   <img id="fooimage" src="foo.gif"> 
  <div id="secondone"  > 
   <img id="fooimage2" src="foo2.gif"> 

The equivalent of this in XUL might be:

<?xml version="1.0"?> 
<?xml-stylesheet href="chrome://global/skin/" type="text/css"?> 
<window id="main" align="center" valign="middle" autostretch="never" 
 xmlns:rdf="" >

<bulletinboard style="width:300px; height:300px;" > 
 <image id="firstone" 
  src="chrome://global/content/logo.gif" style="top:10px; left:100px;"/>

 <image id="secondone" src="chrome://global/content/logo.gif"
  style="top:100px; left:120px;"/> 


This example places two images inside a 300 by 300 pixel space and positions them according to the top and left style definitions.

Bulletinboard - a broader view

Let's take a moment and step back from the code and think about what's going on. Imagine that you were standing in front of a standard bulletin board on a wall -- say in a school or an office building. There are some features of a "real world" bulletin board that I think help illustrate its virtual XUL equivalent.

The "real world" bulletin board contains little snips of paper that folks have posted, usually by stick pins, that contain information you'd like to share. You also see that some newer pieces of paper might overlap other older notes that have been around longer, and some of the notes might be obscured completely by newer ones. You also see that -- for the most part -- all the little notes are contained by the frame of the bulletin board. We all know how hard it is to stick notes on a hard concrete wall with only stick pins at your disposal.

These "real world" features map quite closely to our XUL <bulletinboard>. Imagine that instead of pieces of paper you have XUL boxes (or other tags). Imagine that you "stick" these pieces of paper on the board with a push pin which is placed at the top left hand side of the paper. In XUL, this would be equivalent to the "top" and "left" attributes you place in a contained XUL tag.

Much in the same way you can rearrange slips of paper on a real bulletin board, you can do the same for our XUL equivalent. All you need to do is change the top and left attributes (either by setAttribute for each or via stylesheets).

Imagine as well that "newer" pieces of paper overlap "older" ones. This occurs in the XUL <bulletinboard> as well. "Older" elements, which are listed first inside the tag, are covered up by "newer" ones that are listed after them. Imagine if you shot an arrow upward from the bottom of the XUL code, the tags you "hit" first are the ones which will be topmost in the z-ordering. This is an important aspect of the bulletinboard tag.

Currently, <bulletinboard> only operates within two dimensions. Z-order isn't explicitly defined. But there is an implied z-order as I mentioned earlier. Elements listed after a given element appear above them on screen.

Pages: 1, 2

Next Pagearrow