Building with XUL

Ben GoodgerSoftware Engineer, Google Inc.

2

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.

3

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?