A Taste of XUL

Eric Krock
Senior Product Manager
Netscape Communicator
http://sites.netscape.net/ekrock/answers.html

What is XUL?
XML-Based User interface Language
A way to build the UI of a cross-platform software application using W3C standards: HTML 4.0, XML, XML Namespaces, CSS1/2, DOM1/2
Makes UI building easier
Makes cross-platform support easier
Entire Mozilla/Nav5 UI built in XUL

Why XUL?
Building separate front ends using Windows GUI, Mac GUI, and GTK is expensive
W3C standards now offer enough power to build an application user interface
Gecko has enough speed to render a software application UI in realtime
Using XML, you can create a language (XUL) for defining application UIs

XUL and Standards
Is XUL a standard? No. It’s an XML application Netscape invented. (Plan to submit for standardization in the future.)
Does XUL duplicate or compete with web standards? No. It answers a question no web standard now does: “How can you define a desktop application UI using standards?”
XUL uses XML as it was intended—as a way to define new markup languages (XML applications) for specific purposes.

XUL Benefits
web application (server-resident) and client application (locally-installable) developers
easy to build cross-platform, cross-device user interface quickly
XUL adds common UI metaphors (boxes, springs) that web standards lack
can build small, powerful, quickly-downloadable application by leveraging power of browser instead of duplicating it
throw away your books on Windows, Mac, and Motif or GTK UI development: use lightweight web standards and markup languages instead

XUL Benefits
consumers
because XPD web and client applications are now easier to write, they will proliferate, making useful functionality available to all
because XUL applications are small, they download quickly, saving user time
because XUL applications run on any platform, they increase consumer’s freedom of choice in selecting platform or device
ease of customizing UI increases ability to tailor application appearance to own preferences

Remember
You don’t have to use XUL to build on Gecko. You can build web and/or client applications using W3C standards alone.
XUL complements and builds on web standards. It doesn’t duplicate or compete.
XUL is a convenience, a tool for developers to use if they wish.

What is a Package?
a chunk of UI machinery
in Communicator, these are all packages: Navigator, Messenger, Preferences, Bookmarks, Composer
has five parts:
content: XML description of UI
appearance: look customized with CSS
behavior: defined with JS or C++, and AOM
locale: all localizable strings in external DTD
platform: platform specific info

Widgets
small components
examples: dialog buttons, mail inbox folders
control own drawing and user interaction
largely self-contained
usually a rectangular area
in principle, a person with a text editor can put together an application

Details
XML is case sensitive, so XUL is too
tag names and attributes should be lowercase
XUL file extension: .xul
MIME type: now, text/xul; future, probably text/x-xul

XUL File Preamble
<?xml version="1.0"?>
<?xml-stylesheet href="chrome://global/skin/xul.css" type="text/css"?>
<!DOCTYPE window>
<window xmlns:html=http://www.w3.org/TR/REC-html40 xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">

JavaScript in XUL Files
<html:script>
     // dialog initialization code
     function InitWindow() {
          var checkbox =    document.getElementByID("remember");
          if (checkbox)  checkbox.checked = true;
      }
</html:script>
<html:script language="javascript" src="our.js"/>

JavaScript in XUL as CDATA
<html:script>
             <![CDATA[
               function lesser(a,b) {
                 return a < b ? a : b;
               }
             ]]>
</html:script>

Example Window
<?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/xul.css“ type="text/css"?>
<!DOCTYPE window>
<window id="main-window“ xmlns:html=http://www.w3.org/TR/REC-html40 xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
 <menubar><menu name="File">
 <menuitem name="Hello World!" onclick="dump('Hello world!\n');"/></menu>
 </menubar> <html:iframe id="content-frame" src="contentframe.html" flex="100%"/>
 </window>

Some XUL Widgets
menus: menubar, menupopup, menuitem, menuseparator
toolbars: toolbar, toolbaritem, toolbox (holds toolbars and adds grippies for collapsing)
titledbutton, progressmeter, tri-state checkbox
tree: tree, treecaption, treecolgroup, treecol, treehead, treechildren, treeitem, treefoot, treerow, treecell
tab view: tabcontrol, tabbox, tab, tabpanel, titledbutton

Layout of UI
Boxes with:
horizontal or vertical layout
intrinsic sizing of children
flexible and inflexible children
settable flex
preferred, minimum, maximum sizes
nesting of boxes

XUL Future Directions
easy personalization of user interface (see http://www.mozillazine.org/chrome/ for current third-party experiments)
XUL Fragments to add components to user interface
server-cached XUL to dynamically update an application’s UI at startup

Where to Learn More
Cross-Platform Front End Home Page:
http://www.mozilla.org/xpfe/
MozillaZine ChromeZone: http://www.mozillazine.org/chrome/
netscape.public.dev.xul
netscape.public.dev.skins
My FAQ:
http://sites.netscape.net/ekrock/answers.html

XUL Summary
makes it easier to build cross-platform software user interfaces
uses W3C standards wherever possible
solves problem for which no standard currently exists: a W3C standards-based markup language for defining cross-platform software application UI
an XML application
entire Mozilla UI built using XUL
XUL is cool!