"Building with XUL"
Building with XUL
Ben Goodger
Software Engineer, Google Inc.

What is XUL?
XUL is a powerful language that lets you quickly develop client software
XUL is used by Mozilla Firefox, Thunderbird and other software projects.

What can XUL do?
Extensions (to Firefox, Thunderbird, other applications)
- BugMeNot, AdBlock, MiniT, Sage, Enigmail, etc.
Applications (like Firefox, Thunderbird, etc)

XUL Features
XML Syntax
Flexible Box Model
Wide array of application controls
Data binding
Rich set of platform services
Development supported across numerous platforms
Scripting and flexibility with implementation language
Tools for section 508 accessibility compliance
Localizability
Tested and deployed to millions of people

Where is XUL going?
XUL2.0 (API polish)
XULRunner
Standardization (via: WHATWG: datagrid, etc, W3C: XUL Box Model in CSS)

A Simple XUL Demo
What does XUL look like?
<?xml version="1.0"?>
<?xml-stylesheet href="chrome://global/skin/"?>
<window id="test"
        xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
        title="Hello, World!">
  <script type="application/x-javascript" src="test.js"/>
  <vbox flex="1">
    <listbox id="itemlist" flex="1">
      <listitem label="Item 1"/>
      <listitem label="Item 2"/>
    </listbox>
    <hbox>
      <textbox id="labelfield" flex="1"
               oninput="validateInput();"/>
      <button id="addButton" label="Add Item"
              disabled="true" oncommand="addItem();"/>
    </hbox>
  </vbox>
</window>

Making XUL Live
function addItem() {
  var listbox = document.getElementById("itemlist");
  var listitem = document.createElement("listitem");
  var labelfield = document.getElementById("labelfield");
  listbox.appendChild(listitem);
  listitem.label = labelfield.value;
  labelfield.value = "";
  validateInput();
  labelfield.focus();
}
function validateInput() {
  var field = document.getElementById("labelfield");
  var button = document.getElementById("addButton");
  button.disabled = field.value == "";
}

Adding Visual Panache
Visual style is added using CSS
Icons, colors, backgrounds
Themes

Making your XUL Application Live
Networking
File I/O
Preferences
Web Services
Extensions

Extending XUL
XBL is MozillaÕs Extensible Binding Language
Create new elements by using others
Develop element node apis
<binding id=ÒmytagÓ>
  <content>
    <xul:hbox>
     <xul:button label=ÒButton 1Ó/>
     <xul:button label=ÒButton 2Ó/>
    </xul:hbox>
  </content>
  <implementation>
   <constructor>
    alert(ÒfooÓ);
   </constructor>
  </implementation>
 </binding>

Building XUL Extensions
Changing the UI

- overlaying the DOM

- executing script

A XUL Extension to Firefox
Adds Session History Strip above browser
Thumb strip added using XUL overlays
Uses <canvas> to render page thumbnails

Packaging XUL Extensions
Extension Bundle
UI
Components
Defaults
Housekeeping

Packaging XUL Applications
Application Bundle
UI
Components
Defaults
Housekeeping

Resources
http://www.xulplanet.com
news://news.mozilla.org
irc://irc.mozilla.org  #developers
Rapid Application Development with Mozilla
Firefox Hacks

Why Use XUL
Rapid development
Easy to learn
Rich platform services especially for internet applications
Localizable, accessibility compliant
Small application size when targeting deployed XULRunner
Platform deployed to millions of users

Questions?