Post on 10-Apr-2018
8/8/2019 Eitan Suez XUL
1/55
Developing GUIs with XUL
Eitan Suez
Programmer
eitan@uptodata.com
http://www.uptodata.com
8/8/2019 Eitan Suez XUL
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
8/8/2019 Eitan Suez XUL
3/55
Developing GUIs with XUL 3
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
8/8/2019 Eitan Suez XUL
4/55Developing GUIs with XUL 4
Agenda Overview
Why XUL?
Mini-Tutorial
Overlays & XBL Dev Tools in Mozilla
XUL Implementations
Analysis, Resources, & Summary
8/8/2019 Eitan Suez XUL
5/55Developing GUIs with XUL 5
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
8/8/2019 Eitan Suez XUL
6/55Developing GUIs with XUL 6
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
8/8/2019 Eitan Suez XUL
7/55Developing GUIs with XUL 7
Agenda Overview
Why XUL?
Mini-Tutorial
Overlays & XBL Dev Tools in Mozilla
XUL Implementations
Analysis, Resources, & Summary
8/8/2019 Eitan Suez XUL
8/55
Developing GUIs with XUL 8
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
8/8/2019 Eitan Suez XUL
9/55
Developing GUIs with XUL 9
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..
8/8/2019 Eitan Suez XUL
10/55
Developing GUIs with XUL 10
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:
8/8/2019 Eitan Suez XUL
11/55
Developing GUIs with XUL 11
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)
8/8/2019 Eitan Suez XUL
12/55
Developing GUIs with XUL 12
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
8/8/2019 Eitan Suez XUL
13/55
Developing GUIs with XUL 13
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?
8/8/2019 Eitan Suez XUL
14/55
Developing GUIs with XUL 14
XUL Value Proposition
Qua
lityofGUICo
mponentry Ric
h
Poor
Easy(markup)
Hard(code)
XUL
Swing
HTML
MFC
8/8/2019 Eitan Suez XUL
15/55
Developing GUIs with XUL 15
Agenda Overview
Why XUL?
Mini-Tutorial
Overlays & XBL Dev Tools in Mozilla
XUL Implementations
Analysis, Resources, & Summary
8/8/2019 Eitan Suez XUL
16/55
Developing GUIs with XUL 16
XUL Tutorial
Hello XUL Understanding Layout
Boxes, Containers, and more
Widgets Buttons, Toolbars, StatusBars, Lists
More Widgets..
Grids, Tabbed Panes, Buttons
8/8/2019 Eitan Suez XUL
17/55
Developing GUIs with XUL 17
Hello XUL
Hello XUL
produces..
8/8/2019 Eitan Suez XUL
18/55
Developing GUIs with XUL 18
Representing Text
Several ways..
some text
all three are equivalent
8/8/2019 Eitan Suez XUL
19/55
Developing GUIs with XUL 19
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
8/8/2019 Eitan Suez XUL
20/55
Developing GUIs with XUL 20
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.
8/8/2019 Eitan Suez XUL
21/55
Developing GUIs with XUL 21
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
8/8/2019 Eitan Suez XUL
22/55
Developing GUIs with XUL 22
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
8/8/2019 Eitan Suez XUL
23/55
Developing GUIs with XUL 23
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
8/8/2019 Eitan Suez XUL
24/55
Developing GUIs with XUL 24
A typical layout..
let's practice by building a typical gui
layout together..
8/8/2019 Eitan Suez XUL
25/55
Developing GUIs with XUL 25
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:
8/8/2019 Eitan Suez XUL
26/55
Developing GUIs with XUL 26
Building the Header
Images
Toolboxes Commands
8/8/2019 Eitan Suez XUL
27/55
Developing GUIs with XUL 27
Building the Header
8/8/2019 Eitan Suez XUL
28/55
Developing GUIs with XUL 28
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'
8/8/2019 Eitan Suez XUL
29/55
Developing GUIs with XUL 29
Sidebar - A ListBox- multi-column capable- stylabe, as are all XUL widgets
8/8/2019 Eitan Suez XUL
30/55
Developing GUIs with XUL 30
Sidebar - A ListBox
8/8/2019 Eitan Suez XUL
31/55
Developing GUIs with XUL 31
Attacking the Body: Tabbed Panes
Very simple to
implement & use
legible, clear,maintanable
compare this to the
kludges we usuallyimplement in dhtml :-)
8/8/2019 Eitan Suez XUL
32/55
Developing GUIs with XUL 32
Tabbed Panes: The Markup..
je ne sais pas quois inventer
coucou
8/8/2019 Eitan Suez XUL
33/55
Developing GUIs with XUL 33
Grids
Useful for lining things up, like captions and form elements
8/8/2019 Eitan Suez XUL
34/55
Developing GUIs with XUL 34
Grid markup..
8/8/2019 Eitan Suez XUL
35/55
Developing GUIs with XUL 35
Buttons
Very rich, varied, and versatile..
And they look so much nicer inCamino!
8/8/2019 Eitan Suez XUL
36/55
Developing GUIs with XUL 36
Buttons Sampler
A SimpleButton?
8/8/2019 Eitan Suez XUL
37/55
Developing GUIs with XUL 37
Agenda Overview
Why XUL?
Mini-Tutorial
Overlays & XBL Dev Tools in Mozilla
XUL Implementations
Analysis, Resources, & Summary
8/8/2019 Eitan Suez XUL
38/55
Developing GUIs with XUL 38
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.
8/8/2019 Eitan Suez XUL
39/55
Developing GUIs with XUL 39
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..
8/8/2019 Eitan Suez XUL
40/55
Developing GUIs with XUL 40
Simple XBL Example
Need three things:
A binding file that defines the widget
A file that uses the widget
Some way to bind them
8/8/2019 Eitan Suez XUL
41/55
Developing GUIs with XUL 41
The Binding File
8/8/2019 Eitan Suez XUL
42/55
Developing GUIs with XUL 42
Usage
This is My Test
Another fancy title
8/8/2019 Eitan Suez XUL
43/55
Developing GUIs with XUL 43
Binding specified in CSS..
fancytitle{-moz-binding: url('bindings.xbl#fancytitle');
}
8/8/2019 Eitan Suez XUL
44/55
Developing GUIs with XUL 44
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
8/8/2019 Eitan Suez XUL
45/55
Developing GUIs with XUL 45
Agenda Overview
Why XUL?
Mini-Tutorial
Overlays & XBL
Dev Tools in Mozilla
XUL Implementations
Analysis, Resources, & Summary
8/8/2019 Eitan Suez XUL
46/55
Developing GUIs with XUL 46
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
8/8/2019 Eitan Suez XUL
47/55
Developing GUIs with XUL 47
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:
8/8/2019 Eitan Suez XUL
48/55
Developing GUIs with XUL 48
Agenda Overview
Why XUL?
Mini-Tutorial
Overlays & XBL
Dev Tools in Mozilla
XUL Implementations
Analysis, Resources, & Summary
8/8/2019 Eitan Suez XUL
49/55
Developing GUIs with XUL 49
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
8/8/2019 Eitan Suez XUL
50/55
Developing GUIs with XUL 50
Agenda Overview
Why XUL?
Mini-Tutorial
Overlays & XBL
Dev Tools in Mozilla
XUL Implementations
Analysis, Resources, & Summary
8/8/2019 Eitan Suez XUL
51/55
Developing GUIs with XUL 51
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
8/8/2019 Eitan Suez XUL
52/55
Developing GUIs with XUL 52
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
8/8/2019 Eitan Suez XUL
53/55
Developing GUIs with XUL 53
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
8/8/2019 Eitan Suez XUL
54/55
Developing GUIs with XUL 54
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)
8/8/2019 Eitan Suez XUL
55/55
Developing GUIs with XUL 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/