Developing GUIs with XUL Eitan Suez Programmer

Developing GUIs with XUL2 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 XUL3 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 XUL4 Agenda Overview Why XUL? Mini-Tutorial Overlays & XBL Dev Tools in Mozilla XUL Implementations Analysis, Resources, & Summary

Developing GUIs with XUL5 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 XUL6 Is XUL a Standard? Not an official standard A XUL Spec is available at but it doesn't appear to be complete No official DTD or Schema! Has a namespace..

Developing GUIs with XUL7 Agenda Overview  Why XUL? Mini-Tutorial Overlays & XBL Dev Tools in Mozilla XUL Implementations Analysis, Resources, & Summary

Developing GUIs with XUL8 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 dhtmlswingxul imaginary line

Developing GUIs with XUL9 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 XUL10 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)

Developing GUIs with XUL11 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 XUL12 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 XUL13 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 XUL14 XUL Value Proposition Quality of GUI Componentry Rich Poor Easy (markup) Hard (code) XUL Swing HTML MFC

Developing GUIs with XUL15 Agenda Overview Why XUL?  Mini-Tutorial Overlays & XBL Dev Tools in Mozilla XUL Implementations Analysis, Resources, & Summary

Developing GUIs with XUL16 XUL Tutorial Hello XUL Understanding Layout Boxes, Containers, and more Widgets Buttons, Toolbars, StatusBars, Lists More Widgets.. Grids, Tabbed Panes, Buttons

Developing GUIs with XUL17 Hello XUL <window xmlns=" xmlns:html=" title="Hello XUL"> Hello XUL produces..

Developing GUIs with XUL18 Representing Text Several ways.. some text all three are equivalent

Developing GUIs with XUL19 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 XUL20 Layout, Practice Basic 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.

Developing GUIs with XUL21 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 XUL22 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 XUL23 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=" xmlns:html=" title="Basic Layout" orient="vertical" align="center" pack="center"> <box orient="vertical" flex="1"> Hello XUL Basic Layout

Developing GUIs with XUL24 A typical layout.. let's practice by building a typical gui layout together..

Developing GUIs with XUL25 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:

Developing GUIs with XUL26 Building the Header  Images  Toolboxes  Commands

Developing GUIs with XUL27 Building the Header <description style="font-size: 24pt; color: darkgreen;" value=" Eitan's XUL UI" />

Developing GUIs with XUL28 Adding a statusbar in the footer.. <statusbarpanel id="main-status" label="Welcome to my XUL talk.." flex="1"/> <statusbarpanel id="copyright" style="font-style: italic;" label="© Copyright Eitan 2003" />  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 XUL29 Sidebar - A ListBox - multi-column capable - stylabe, as are all XUL widgets

Developing GUIs with XUL30 Sidebar - A ListBox

Developing GUIs with XUL31 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 XUL32 Tabbed Panes: The Markup.. je ne sais pas quois inventer <tabpanel style="background-color: white; border: thin solid black;" align="end" pack="center"> coucou

Developing GUIs with XUL33 Grids  Useful for lining things up, like captions and form elements

Developing GUIs with XUL34 Grid markup..

Developing GUIs with XUL35 Buttons  Very rich, varied, and versatile..  And they look so much nicer in Camino!

Developing GUIs with XUL36 Buttons Sampler A Simple Button?

Developing GUIs with XUL37 Agenda Overview Why XUL? Mini-Tutorial  Overlays & XBL Dev Tools in Mozilla XUL Implementations Analysis, Resources, & Summary

Developing GUIs with XUL38 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 id attribute 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 an empty element. mozilla does the rest.

Developing GUIs with XUL39 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 XUL40 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 XUL41 The Binding File <xbl:bindings id="mybindings" xmlns=" xmlns:html=" xmlns:xbl="

Developing GUIs with XUL42 Usage <window xmlns=" xmlns:html=" title=""> This is My Test Another fancy title

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

Developing GUIs with XUL44 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 section. Methods can be defined that belong to the widget and can be called from javascript in the containing document

Developing GUIs with XUL45 Agenda Overview Why XUL? Mini-Tutorial Overlays & XBL  Dev Tools in Mozilla XUL Implementations Analysis, Resources, & Summary

Developing GUIs with XUL46 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 XUL47 JavaScript Miscellany  A good idea to wrap your javascript code in CDATA sections to avoid inequality operators to be mistaken for tag openers & closers: <![CDATA[ function sayHi() { alert('hi'); } ]]>  An even better idea to reference a separate javascript source file as in:

Developing GUIs with XUL48 Agenda Overview Why XUL? Mini-Tutorial Overlays & XBL Dev Tools in Mozilla  XUL Implementations Analysis, Resources, & Summary

Developing GUIs with XUL49 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 XUL50 Agenda Overview Why XUL? Mini-Tutorial Overlays & XBL Dev Tools in Mozilla XUL Implementations  Analysis, Resources, & Summary

Developing GUIs with XUL51 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 XUL52 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 XUL53 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. 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 XUL54 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 XUL55 Resources a terrific xul tutorial + xul reference complements the o'reilly mozilla book nicely xul doc page on mozilla.org (includes a number of links to various articles on xul too) luxor's home page on sourceforge. promising alternative platform, though not nearly as far along as mozilla (can't really blame him) 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