Eitan Suez XUL

8/8/2019 Eitan Suez XUL

1/55

Developing GUIs with XUL

Eitan Suez

Programmer

[email protected]

http://www.uptodata.com


2/55

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


3/55


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 andXML Austin activities

Pet project is Ashkelon (on sourceforge at

sf.net/projects/ashkelon), a Java DocumentationManagement System


4/55Developing GUIs with XUL 4

Agenda Overview

Why XUL?

Mini-Tutorial

Overlays & XBL Dev Tools in Mozilla

XUL Implementations

Analysis, Resources, & Summary



XUL DefinedAn XML Application

for describing user interfaces

A technology produced by the Mozilla project andsupported 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.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



Agenda Overview

Why XUL?

Mini-Tutorial


XUL Implementations



8/55


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

xul swingdhtml

imaginary line


9/55


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 toread quickly, hard to maintain..


10/55


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:


11/55


More on Swing.. Swing programmers naturally gravitate to externalizing

information to a resource. This resource is typically loadedand 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 containmentrelationships 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 tounderstand the containment)


12/55


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


13/55


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?


14/55


XUL Value Proposition

Qua

lityofGUICo

mponentry Ric

h

Poor

Easy(markup)

Hard(code)

XUL

Swing

HTML

MFC


15/55


Agenda Overview

Why XUL?

Mini-Tutorial


XUL Implementations



16/55


XUL Tutorial

Hello XUL Understanding Layout

Boxes, Containers, and more

Widgets Buttons, Toolbars, StatusBars, Lists

More Widgets..

Grids, Tabbed Panes, Buttons


17/55


Hello XUL

Hello XUL

produces..


18/55


Representing Text

Several ways..

some text

all three are equivalent


19/55


Layout, General Principles Page-based metaphor abandoned!

Goal is similar to Java AWT Layout Managers inthat 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


20/55


Layout, PracticeBasic Usage:

hello world

hbox is equivalent to: vbox is equivalent to:

box's default orientation is "horizontal"

So basically you never use box

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


21/55


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


22/55


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

box, usingpackand align attributes

2. whether a box expands to occupy the entire space of itscontainer is controlled via flexand 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 clearer4. for a horizontally-oriented container, align controls vertical

position andpackcontrols horizontal position (& vice versa)

5. for a horizontally-oriented container, align controls expansionvertically, while flex controls expansion horizontally

6. So, the rule is: packand flexgo along the grain, while aligngoes against the grain.

7. while orient, pack, and align are specified in a container andapply to children, flexis specified in the child and applies to the

child itself


23/55


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

Hello XULBasicLayout


24/55


A typical layout..

let's practice by building a typical gui

layout together..


25/55


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:


26/55


Building the Header

Images

Toolboxes Commands


27/55


Building the Header


28/55


Adding a statusbar in the footer..

A statusbarpanel is simply a message area (it doesn't do muchelse).

It inherits the look and feel of the current 'skin'


29/55


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


30/55


Sidebar - A ListBox


31/55


Attacking the Body: Tabbed Panes

Very simple to

implement & use

legible, clear,maintanable

compare this to the

kludges we usuallyimplement in dhtml :-)


32/55


Tabbed Panes: The Markup..

je ne sais pas quois inventer

coucou


33/55


Grids

Useful for lining things up, like captions and form elements


34/55


Grid markup..


35/55


Buttons

Very rich, varied, and versatile..

And they look so much nicer inCamino!


36/55


Buttons Sampler

A SimpleButton?


37/55


Agenda Overview

Why XUL?

Mini-Tutorial


XUL Implementations



38/55


Overlays

Basically a fancy name for an 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 element is replaced with an element.

overlay may include more than one item to include. label each item

with an idattribute so it can be referenced from the containing page in containing page, must include processing instruction

somewhere in the page, include something by referencing its id in anempty element. mozilla does the rest.


39/55


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, afterhaving bound their definition to a specific binding file

the B in XBL stands for Binding

Let's look at a very simple example..


40/55


Simple XBL Example

Need three things:

A binding file that defines the widget

A file that uses the widget

Some way to bind them


41/55


The Binding File


42/55


Usage

This is My Test

Another fancy title


43/55


Binding specified in CSS..

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

}


44/55


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 inthe binding file

Behavior of widget can be specified in an section. Methods can be definedthat belong to the widget and can be called from

javascript in the containing document


45/55


Agenda Overview

Why XUL?

Mini-Tutorial

Overlays & XBL

Dev Tools in Mozilla

XUL Implementations



46/55


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 personallyhave 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 tryout various XPCOM interfaces


47/55


JavaScript Miscellany

A good idea to wrap your javascript code in CDATA

sections to avoid inequality operators to be mistakenfor tag openers & closers:

function sayHi()

{alert('hi');

}]]>

An even better idea to reference a separate javascriptsource file as in:


48/55


Agenda Overview

Why XUL?

Mini-Tutorial

Overlays & XBL


XUL Implementations



49/55


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


50/55


Agenda Overview

Why XUL?

Mini-Tutorial

Overlays & XBL


XUL Implementations



51/55


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


52/55


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


53/55


Issues No equivalent to html 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. Ithink the real value is in delivering apps remotely

A number of features do not work unless application is locallyinstalled. 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 localapps, must quit & restart browser


54/55


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)


55/55


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/
http://xulplanet.com/http://mozilla.org/catalog/architecture/xul/http://luxor-xul.sourceforge.net/http://thinlet.com/http://thinlet.com/http://luxor-xul.sourceforge.net/http://mozilla.org/catalog/architecture/xul/http://xulplanet.com/http://xulplanet.com/

Documents

Eitan Suez XUL