Developing GUIs with XUL

Eitan Suez
Programmer
eitan@uptodata.com
http://www.uptodata.com
Purpose

To Get Acquainted with XUL

Learn what it is, what can one do with it,

what's it good for, and how to use it

Developing GUIs with XUL 2

 About the Speaker
„ Eitan Suez is a Java Programmer living and working
in Austin, Texas
„ Recently took up interest in XUL
„ Enjoy attending and participating in Austin JUG and
XML Austin activities
„ Pet project is Ashkelon (on sourceforge at
sf.net/projects/ashkelon), a Java Documentation
Management System

Developing GUIs with XUL 3

 Agenda
„ Overview
„ Why XUL?
„ Mini-Tutorial
„ Overlays & XBL
„ Dev Tools in Mozilla
„ XUL Implementations
„ Analysis, Resources, & Summary

Developing GUIs with XUL 4

 XUL Defined
An XML Application
for describing user interfaces

„ A technology produced by the Mozilla project and

supported in the Mozilla browser
„ Richness of widgets at par with Swing and other
windowing toolkits
„ A relative of (and sometimes substitute for) xhtml

Developing GUIs with XUL 5

 Is XUL a Standard?

„ Not an official standard

„ A XUL Spec is available at
http://www.mozilla.org/projects/xul/xul.html
but it doesn't appear to be complete
„ No official DTD or Schema!
„ Has a namespace..
http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul

Developing GUIs with XUL 6

 Agenda
9 Overview
Î Why XUL?
„ Mini-Tutorial
„ Overlays & XBL
„ Dev Tools in Mozilla
„ XUL Implementations
„ Analysis, Resources, & Summary

Developing GUIs with XUL 7

 Why use XUL?
„ Is there a problem that XUL solves?
„ Existing GUI Frameworks fall into two camps:
„ Programming Frameworks (Swing, SWT, AWT,

MFC, etc..)
„ Web (HTML, CSS, DHTML, JavaScript)

„ It turns out that XUL falls almost directly in the middle

dhtml xul swing

imaginary line

Developing GUIs with XUL 8

 Frameworks (Swing, etc..)

„ Require skill and experience

„ Take longer to develop (compared to markup-based
ui's)
„ Code that lays out a page can become difficult to
read quickly, hard to maintain..

Developing GUIs with XUL 9

Interesting Comparison to Swing
(taken from luxor page)
Java version:

JMenuItem mi = new JMenuItem( "New Application..." );

mi.addActionListener( cmdNewApplication );
mi.setMnemonic( 'A' );
mi.setAccelerator( KeyStroke.getKeystroke( "control A" ) );
mi.setIcon( new ImageIcon( "images/newApplication.gif" ) );

XUL version:

<menuitem action="newApplication" label="New Application..."

mnemonic="A" accel="control A" icon="newApplication" />

Developing GUIs with XUL 10

More on Swing..
„ Swing programmers naturally gravitate to externalizing
information to a resource. This resource is typically loaded
and bound to a widget such as a menu on startup.
„ This design method in some way validates the XUL approach
„ In XUL (and markup in general), the containment
relationships between elements are more apparent because
they're reflected in the natural form of representing the UI in
the first place. In Swing, it's not so apparent (a series of
method calls, one must read the semantics of the calls to
understand the containment)

Developing GUIs with XUL 11

Web (DHTML, etc..)

„ Rapid Development
„ GUI is not as rich
„ Need to be careful to avoid JavaScript "code-
creep"
„ Requires discipline to keep clean and organized

Developing GUIs with XUL 12

XUL Value Proposition
„ Combine the best of both worlds:
„ Use markup to define a GUI (like xhtml)

„ Markup language provides access to many rich

widgets, at par with programmatic frameworks

„ Abandons HTML page-based layout

„ Can this combination provide rapid development,

rich GUIs, and maintainable, easily modifiable
front-ends?

Developing GUIs with XUL 13

 XUL Value Proposition
Rich
Quality of GUI Componentry

XUL
MFC
Swing

HTML
Poor

Easy Hard
(markup) (code)

Developing GUIs with XUL 14

 Agenda
9 Overview
9 Why XUL?
Î Mini-Tutorial
„ Overlays & XBL
„ Dev Tools in Mozilla
„ XUL Implementations
„ Analysis, Resources, & Summary

Developing GUIs with XUL 15

XUL Tutorial
„ Hello XUL
„ Understanding Layout
„ Boxes, Containers, and more

„ Widgets
„ Buttons, Toolbars, StatusBars, Lists

„ More Widgets..
„ Grids, Tabbed Panes, Buttons

Developing GUIs with XUL 16

 Hello XUL
<?xml version="1.0"?>
<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
<window
xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
xmlns:html="http://www.w3.org/1999/xhtml"
title="Hello XUL">
<description style="font-size: 24pt;">Hello XUL</description>
</window>

produces..

Developing GUIs with XUL 17

 Representing Text
Several ways..

<description value="some text" />

<description>some text</description>
<label value="some text" />

all three are equivalent

Developing GUIs with XUL 18

Layout, General Principles
„ Page-based metaphor abandoned!
„ Goal is similar to Java AWT Layout Managers in
that location of elements is not fixed, but adapts
to the size of the containing window
„ Main container tag is the "Box"
„ Two main types of boxes
„ hbox, vbox
„ Many specialized boxes:
„ groupbox, listbox, tabbox, tabbox, toolbox

Developing GUIs with XUL 19

 Layout, Practice
Basic Usage:

<box>
<description>hello world</description>
</box>

„ hbox is equivalent to: <box orient="horizontal" />

„ vbox is equivalent to: <box orient="vertical" />
„ box's default orientation is "horizontal"

So basically you never use box

„ Boxes are nested inside each other to produce more complex layouts.

Developing GUIs with XUL 20

 Layout, more than meets the eye
„ To be able to layout UIs in XUL, you really have to
understand all of these container attributes:
„ orient
„ flex
„ align
„ pack
„ And sometimes these help:
„ spacer
„ CSS min-width, min-height, max-width, and max-height

Developing GUIs with XUL 21

 Layout Rules
1. positioning of child elements within a box are controlled by the
box, using pack and align attributes
2. whether a box expands to occupy the entire space of its
container is controlled via flex and align
3. the meaning of these attributes are all relative to orientation.
this is very confusing. the fact that align doubles for positioning
and expansion doesn't help make things clearer
4. for a horizontally-oriented container, align controls vertical
position and pack controls horizontal position (& vice versa)
5. for a horizontally-oriented container, align controls expansion
vertically, while flex controls expansion horizontally
6. So, the rule is: pack and flex go along the grain, while align
goes against the grain.
7. while orient, pack, and align are specified in a container and
apply to children, flex is specified in the child and applies to the
child itself

Developing GUIs with XUL 22

 Layout Rules, illustrated
1. valid values for align and pack are: start, center, end
2. additional valid value for align: stretch
3. flex is either not specified or specified with a value of 1

<window
xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
xmlns:html="http://www.w3.org/1999/xhtml" title="Basic Layout"
orient="vertical" align="center" pack="center">

<box orient="vertical" flex="1">

<description style="font-size: 24pt;">Hello XUL</description>
<description style="font-size: 24pt;">Basic</description>
<description style="font-size: 24pt;">Layout</description>
</box>

</window>
Developing GUIs with XUL 23
 A typical layout..
let's practice by building a typical gui
layout together..

Developing GUIs with XUL 24

 Layout, one last comment..

ƒ If contents of a box exceed the box's size, the

box will not automatically scroll!

ƒ Fortunately, it's pretty easily rectified using

CSS:
<box style="overflow: scroll;">

Developing GUIs with XUL 25

 Building the Header
ƒ Images
ƒ Toolboxes
ƒ Commands

Developing GUIs with XUL 26

Building the Header
<vbox id="header" pack="center" align="stretch">
<hbox align="start">
<image src="images/eitan.jpg" width="40" height="36" />
<description style="font-size: 24pt; color: darkgreen;"
value=" Eitan's XUL UI" />
</hbox>
<toolbox>
<toolbar id="mytoolbar">
<toolbarbutton label="Say Hi" command="say-hi" />
<toolbarbutton label="News" />
<toolbarbutton label="Contact" />
<label control="urltext" value="Visit URL:" />
<textbox id="urltext" flex="1" />
<spacer style="width: 25px;" />
<toolbarbutton label="Help" />
</toolbar>
</toolbox>
</vbox>

Developing GUIs with XUL 27

Adding a statusbar in the footer..
<statusbar id="footer">
<statusbarpanel id="main-status"
label="Welcome to my XUL talk.." flex="1"/>
<statusbarpanel id="copyright" style="font-style: italic;"
label="&#169; Copyright Eitan 2003" />
</statusbar>

ƒ A statusbarpanel is simply a message area (it doesn't do much

else).
ƒ It inherits the look and feel of the current 'skin'

Developing GUIs with XUL 28

 Sidebar - A ListBox
- multi-column capable
- stylabe, as are all XUL widgets

Developing GUIs with XUL 29

Sidebar - A ListBox
<listbox id="sidebar" style="margin: 0px;">
<listhead>
<listheader label="Ch#" />
<listheader label="Lesson" />
</listhead>
<listcols>
<listcol flex="1" />
<listcol flex="5" />
</listcols>
<listitem>
<listcell label="1" />
<listcell label="Tabbed Panels" />
</listitem>
<listitem>
<listcell label="2" />
<listcell label="Grids" />
</listitem>
</listbox>

Developing GUIs with XUL 30

 Attacking the Body: Tabbed Panes

ƒ Very simple to
implement & use
ƒ legible, clear,
maintanable
ƒ compare this to the
kludges we usually
implement in dhtml :-)

Developing GUIs with XUL 31

Tabbed Panes: The Markup..
<tabbox flex="1">
<tabs>
<tab label="Curtain #1" />
<tab label="Curtain #2" />
<tab label="Curtain #3" />
</tabs>
<tabpanels style="min-height: 150px;">
<tabpanel>
<description>je ne sais pas quois inventer</description>
</tabpanel>
<tabpanel align="center" pack="center">
<button label="you may click on me but i won't do a thing" />
</tabpanel>
<tabpanel style="background-color: white; border: thin solid black;"
align="end" pack="center">
<description>coucou</description>
</tabpanel>
</tabpanels>
</tabbox>

Developing GUIs with XUL 32

 Grids

ƒ Useful for lining things up, like captions and form elements

Developing GUIs with XUL 33

Grid markup..
<grid>
<columns>
<column style="max-width: 100px;" />
<column flex="1" />
</columns>
<rows>
<row>
<label control="firstname" value="First Name: " />
<hbox>
<textbox id="firstname" size="20" />
</hbox>
</row>
<row>
<label control="lastname" value="Last Name: " />
<hbox>
<textbox id="lastname" size="30" />
</hbox>
</row>
</rows>
</grid>

Developing GUIs with XUL 34

 Buttons

ƒ Very rich, varied, and versatile..

ƒ And they look so much nicer in
Camino!

Developing GUIs with XUL 35

Buttons Sampler
<button label="Simple Button" onclick="show('hello');"/>

<button orient="horizontal" onclick="show('hello again');">

<image src="images/Realm.gif" />
<vbox style="border-left: thin solid black;">
<description>A Simple</description>
<description>Button?</description>
</vbox>
</button>

<button id="number3" disabled="true" label="a disabled button" />

<button label="toggle enabled state of previous button"
onclick="document.getElementById('number3').disabled=!document.getElementBy
Id('number3').disabled;" />

<button style="width: 100px;" crop="end" label="cropped text coming up!" />

<button type="checkbox" label="checkbox type" />

Developing GUIs with XUL 36

 Agenda
9 Overview
9 Why XUL?
9 Mini-Tutorial
Î Overlays & XBL
„ Dev Tools in Mozilla
„ XUL Implementations
„ Analysis, Resources, & Summary

Developing GUIs with XUL 37

 Overlays

ƒ Basically a fancy name for an <include> tag

ƒ Well designed and thought through
ƒ May not work unless working with a locally installed chrome application
ƒ How it works:
ƒ included page is just like any other page except that top level
<window> element is replaced with an <overlay> element.
ƒ overlay may include more than one item to include. label each item
with an id attribute so it can be referenced from the containing page
ƒ in containing page, must include processing instruction <?xul-overlay
href="someoverlay.xul"?>
ƒ somewhere in the page, include something by referencing its id in an
empty element. mozilla does the rest.
Developing GUIs with XUL 38
 XBL

ƒ A mechanism for writing custom widgets using any combination of

javascript, xhtml, xul, css, etc.. you wish to use
ƒ similar to microsoft's element behaviors (htc's) but open
ƒ a powerful client-side taglib-like mechanism
ƒ basically, you can define your own tags and use them in a xul page, after
having bound their definition to a specific binding file
ƒ the B in XBL stands for Binding
ƒ Let's look at a very simple example..

Developing GUIs with XUL 39

 Simple XBL Example

ƒ Need three things:

ƒ A binding file that defines the widget
ƒ A file that uses the widget
ƒ Some way to bind them

Developing GUIs with XUL 40

 The Binding File
<?xml version="1.0"?>
<xbl:bindings id="mybindings"
xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
xmlns:html="http://www.w3.org/1999/xhtml"
xmlns:xbl="http://www.mozilla.org/xbl">

<xbl:binding id="fancytitle">
<xbl:content>
<hbox flex="1" class="header">
<description class="h1">
<xbl:children />
</description>
</hbox>
</xbl:content>
</xbl:binding>

</xbl:bindings>

Developing GUIs with XUL 41

 Usage
<?xml version="1.0"?>
<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
<?xml-stylesheet href="global.css" type="text/css"?>

<window
xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
xmlns:html="http://www.w3.org/1999/xhtml"
title="">

<vbox flex="1">

<fancytitle>This is My Test</fancytitle>
<spacer style="height: 25px;" />
<fancytitle>Another fancy title</fancytitle>

</vbox>

</window>

Developing GUIs with XUL 42

 Binding specified in CSS..
fancytitle
{
-moz-binding: url('bindings.xbl#fancytitle');
}

Developing GUIs with XUL 43

 XBL Possibilities

ƒ Widgets can inherit features and behavior from existing

widget (using inherits attribute)
ƒ Stylesheets can either be inherited from containing
document or they can be referenced as a resource in
the binding file
ƒ Behavior of widget can be specified in an
<implementation> section. Methods can be defined
that belong to the widget and can be called from
javascript in the containing document

Developing GUIs with XUL 44

 Agenda
9 Overview
9 Why XUL?
9 Mini-Tutorial
9 Overlays & XBL
Î Dev Tools in Mozilla
„ XUL Implementations
„ Analysis, Resources, & Summary

Developing GUIs with XUL 45

 Developer Tools & Aides in Mozilla

ƒ Ability to add debug="true" attribute to any container

to get Mozilla draw borders around it and its children;
very helpful with layout
ƒ DOM Inspector is way cool
ƒ JavaScript debugger (called 'venkman') (i personally
have yet to gain experience with it)
ƒ Availability of methods such as dump() for outputing
debug statements to stdout
ƒ Other nifty things like XULKit for deploying chrome
apps (i have not used this) and a JavaScript shell to try
out various XPCOM interfaces

Developing GUIs with XUL 46

 JavaScript Miscellany

ƒ A good idea to wrap your javascript code in CDATA

sections to avoid inequality operators to be mistaken
for tag openers & closers:
<script type="application/x-javascript">
<![CDATA[
function sayHi()
{
alert('hi');
}
]]>
</script>

ƒ An even better idea to reference a separate javascript

source file as in:
<script type="application/x-javascript" src="somecode.js" />

Developing GUIs with XUL 47

 Agenda
9 Overview
9 Why XUL?
9 Mini-Tutorial
9 Overlays & XBL
9 Dev Tools in Mozilla
Î XUL Implementations
„ Analysis, Resources, & Summary

Developing GUIs with XUL 48

XUL Implementations
„ Mozilla
„ Maker
„ Main implementation, most robust
„ Luxor
„ XUL Engine implemented using Java Swing
„ Fairly new project, one main developer
(Gerald Bauer)
„ Very promising

Developing GUIs with XUL 49

 Agenda
9 Overview
9 Why XUL?
9 Mini-Tutorial
9 Overlays & XBL
9 Dev Tools in Mozilla
9 XUL Implementations
Î Analysis, Resources, & Summary

Developing GUIs with XUL 50

Should I Adopt XUL?
„ Advantages:
„ Cross-Platform (with minor caveats)
„ Rapid Development
„ Rich
„ Getting standardized
„ Already familiar with CSS, JavaScript, DOM
„ Disadvantages:
„ Although relatively mature, far from pervasive
„ Not fully standardized
„ Most folks have little to no previous experience
with XUL
Developing GUIs with XUL 51
 Analysis
„ Very innovative technology, holds much promise
„ Not just another spec, can start building right away
„ Produces clean, readable, maintainable front-ends
„ In many ways, leapfrogs internet explorer in
abilities
„ Evolutionary, not revolutionary

Developing GUIs with XUL 52

Issues
„ No equivalent to html <form> element. it would be really cool if
mozilla sported xul+xforms support (probably just a matter of
time)
„ Databinding with RDF is not easy to grasp
„ Designed with too much emphasis on locally-installed apps. I
think the real value is in delivering apps remotely
„ A number of features do not work unless application is locally
installed. Not clear for example why XBL reserved to local apps
„ Need better documentation & a schema
„ Setting up xul apps as local apps accessible via the chrome:
requires some setup (XULKit), can't refresh xul pages from local
apps, must quit & restart browser

Developing GUIs with XUL 53

 Things I did not talk about
„ Data binding with RDF (practically a topic in
itself)
„ XPCOM Interfaces
„ The mechanics of locally installed apps (chrome)
„ Localization (DTD Entities and Stringbundles)
„ CSS (really a topic in itself)

Developing GUIs with XUL 54

Resources
„ http://xulplanet.com/
„ a terrific xul tutorial + xul reference
„ complements the o'reilly mozilla book nicely
„ http://mozilla.org/catalog/architecture/xul/
„ xul doc page on mozilla.org (includes a number of links to various articles on xul too)
„ http://luxor-xul.sourceforge.net/
„ luxor's home page on sourceforge. promising alternative platform, though not nearly
as far along as mozilla (can't really blame him)
„ http://thinlet.com/
„ the xml they show definitely is not xul but for all practical purposes it's the same idea;
their demo is interesting
„ The Book: Mozilla, published by O'Reilly
„ Not strictly related to XUL, but for MacOS X fans, you should check out Camino
(formerly known as Chimera) at http://www.mozilla.org/projects/camino/

Developing GUIs with XUL 55