Team LiB
Previous Section Next Section

Hack 68. Make Applications and Extensions with XUL

Make an application rather than a web page by filling a Firefox window with XUL.

Many books have been written on the craft of making web pages with HTML, and this hack won't cover that broad category. Crafting whole XUL applications (or extensions, which are application pieces) is a similar process. XUL can run standalone (as discussed in this hack) or mixed with HTML [Hack #60] . There is extensive source material on XUL development. Chapter 7 and Chapter 8 in this book explain how to deploy or install XUL content once it's created. This hack offers a first taste of the XUL tags that can go into such content.

XUL describes user interface elements such as menu bars and scrollbars, just as XHTML describes links and paragraphs of text. It addresses a problem space that HTML is not ideally designed for. It allows record management, content management, control systems, and other nontextual applications to run over the Web without having to bend hypertext content into shape to do it.

6.12.1. Make and Display an XUL Demo

The following document is the start of an XUL-based application. It should be stored in a file with a .xul extension, such as test.xul:

<?xml version="1.0"?>
<?xml-stylesheet href="chrome://global/skin/"?>
<?xul-overlay    href="chrome://example/content/extras.xul"?>
<window 
  xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
  title="Example App" 
>

  <script src="chrome://example/content/example.js"/>
  <stringbundle id="str-example"
     src="chrome://example/locale/example.properties"/>

  <command id="cmd_start" oncommand="doStart( );"/>
  <command id="cmd_stop" oncommand="doStop( );"/>

  <keyset id="hotkeys">
    <key id="key_start" key="A" command="cmd_start"/>
    <key id="key_stop"  key="Z" command="cmd_stop"/>
  </keyset>

  <toolbox id="top-controls">
    <menubar id="top-menubar">

      <menu label="File" accesskey="F">
        <menupopup id="menu1">
          <menuitem id="menu_start" label="Start" accesskey="A"
             command="cmd_start"/>
          <menuitem id="menu_stop"  label="Stop" accesskey="Z"
             command="cmd_stop"/>
        </menupopup>
      </menu>

      <box flex="1"/>

      <menu label="Help" accesskey="H">
        <menupopup>
          <menuitem id="menu_help" label="Get help" accesskey="H"
             command="cmd_help"/>
        </menupopup>
      </menu>
    </menubar>
  </toolbox>

  <hbox flex="1">
    <vbox flex="1"> 
      <description>Left</description>
    </vbox> 
    <scrollbar orient="vertical"/>
    <vbox flex="1"> 
      <description>Right</description>
      <tabbox>
        <tabs>
          <tab label="First"/>
          <tab label="Second"/>
        </tabs>
        <tabpanels>
          <tabpanel>
            <description>First Content</description>
          </tabpanel>
          <tabpanel>
            <description>Second Content</description>
          </tabpanel>
        </tabpanels>
      </tabbox>
    </vbox> 
  </hbox>

  <stack style="font-family: Arial" flex="1">
    <description style="color:red; font-size:48px;">Red</description>
    <description style="color:green; font-size:24px;">&#xA0;Green
    </description>
  </stack>
</window>

Notice in this listing how keystroke and menu items are tied to commands; the commands' ID values are put in those items' command attributes. Similarly <command> tag oncommand attributes specify specific JavaScript functions. That's how you get an XUL window to do any processingby hooking commands up to keystrokes and GUI features. The other tags show some typical XUL widgets that you can't easily create with plain HTML: a menu bar with two menus, a standalone scrollbar that isn't attached to anything, a tab box, and stacked text.

The bolded lines should be omitted or commented out with XML comments (<!-- and -->) if this file is created for ad hoc testing purposes. These lines, which include chrome: URLs, can only be used if the XUL document is bundled up into a chrome package [Hack #86] . You can put back the <script> tags if you use locally stored scripts, for example:

<script src="test.js"/>

To test the reduced file, just load its URL into a normal browser window, or start Firefox from the command line as follows. For Windows:

firefox -chrome file:///C:/tmp/test.xul

For Unix/Linux and the Mac OS X BSD command line:

firefox -chrome file:///tmp/test.xul

Figure 6-11 shows the resulting window halfway through a mouse menu-selection gesture.

Figure 6-11. Sample XUL window


6.12.2. Send XUL Application Data to a Server

XUL doesn't have the HTML concept of a form; the whole XUL window effectively is a form. To send data to the server that the .xul page came from, change the previous example as follows.

You must also have the server set up properly [Hack #27] .


Replace this line:

<script src="chrome://example/content/example.js"/>

with this line:

<script src="example.js"/>

Create the example.js file in the same directory as the .xul file. It contains this script:

function doStart(  ) {
  var req = new XMLHttpRequest(  ); 
  req.open("GET", "test.cgi?action=start", false);
  try {
    req.send("");
    if (req.status / 100 != 2 )
      alert("Server Failed! HTTP status: " + req.status);
  }
  catch (e) {
    alert("Request Failed! Error: " + e);
  }
}

The try wrapper block is required only if you are too lazy to look in the JavaScript Console for errors. Since the doStart() function is hooked up to the cmd_start command, you can run it by choosing Start from the File menu. Security restrictions prevent you from submitting data to servers other than to the one the .XUL file originated from. If you load the .xul file from an ad hoc local file, such form submissions have nowhere to go, and an error will result. To get around this, the file must be placed in the chrome [Hack #86] and a full chrome: URL must be used.

6.12.3. See Also

  • See Chapter 7 and Chapter 8 of this book for more on managing XUL content once it is created. For the theory and detail of XUL programming, see the remaining references in this list.

  • Rapid Application Development with Mozilla (Prentice Hall Professional Technical References) by Nigel McFarlane is a comprehensive description of and tutorial on XUL and many related Mozilla technologies. On the subject of XUL, it is the most systematic and popular work in print.

  • Creating Applications With Mozilla (O'Reilly) by Brian King et al is a shorter treatment that provides a speedy tour through the world of XUL.

  • XULPlanet (http://www.xulplanet.com) by Neil Deakin et al is a dictionary-like reference to XUL tags that also contains a paced but narrowly focused tutorial for beginner programmers.

  • Several older books also exist on Mozilla topics. In general, they are of little use when learning XUL, either due to age, incompleteness, or chosen approach.

    Team LiB
    Previous Section Next Section