"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? |