Developing GUIs with XUL Eitan Suez Programmer [email protected] .

Developing GUIs with XUL

Eitan Suez

Programmer

[email protected]

http://www.uptodata.com

Developing GUIs with XUL 2

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


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


Agenda

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


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


Is XUL a Standard?

Not an official standard

A XUL Spec is available at http://www.mozilla.org/projects/xul/xul.htmlbut 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


Agenda



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

swing

xul

imaginary line


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..


Interesting Comparison to Swing

XUL version:

<menuitem action="newApplication" label="New Application..." mnemonic="A" accel="control A" icon="newApplication" />

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" ) );

(taken from luxor page)


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)


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


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?


XUL Value PropositionQ

ualit

y o

f G

UI C

om

ponentr

y

Ric

hPoor

Easy(markup)

Hard(code)

XUL

Swing

HTML

MFC


Agenda



XUL Tutorial

Hello XUL Understanding Layout

Boxes, Containers, and more Widgets

Buttons, Toolbars, StatusBars, Lists More Widgets..

Grids, Tabbed Panes, Buttons


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..


Representing Text

Several ways..

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

all three are equivalent


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


Layout, PracticeBasic 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.


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


Layout Rules1. positioning of child elements within a box are controlled by the

box, using pack and align attributes2. whether a box expands to occupy the entire space of its

container is controlled via flex and align3. 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


Layout Rules, illustrated

1. valid values for align and pack are: start, center, end

2. additional valid value for align: stretch3. 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>


A typical layout..

let's practice by building a typical gui layout together..


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


Building the Header

Images Toolboxes Commands


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>


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="© 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'


Sidebar - A ListBox

- multi-column capable- stylabe, as are all XUL widgets


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>


Attacking the Body: Tabbed Panes

Very simple to implement & use

legible, clear, maintanable

compare this to the kludges we usually implement in dhtml :-)


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>


Grids

Useful for lining things up, like captions and form elements


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>


Buttons

Very rich, varied, and versatile..

And they look so much nicer in Camino!


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.getElementById('number3').disabled;" /> <button style="width: 100px;" crop="end" label="cropped text coming up!" /> <button type="checkbox" label="checkbox type" />


Agenda



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.


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..


Simple XBL Example

Need three things:

A binding file that defines the widget

A file that uses the widget

Some way to bind them


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>


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>


Binding specified in CSS..

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


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


Agenda



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


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


Agenda



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


Agenda



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


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


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


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)


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 Eitan Suez Programmer [email protected] .

Documents

Transcript of Developing GUIs with XUL Eitan Suez Programmer [email protected] .