Introduction to XUL Thuha Nguyen

Overview What is XUL? Benefits of using XUL XUL syntax XUL package XUL elements XUL examples –Menu, menubar –Button –Text field –HTML elements More information

What is XUL ? XML-based User interface Language (“zool”) Makes UI building easier and faster Cross-platform support Entire Mozilla/Nav5 UI built in XUL Uses W3C standards: HTML 4.0, XML, XML Namespaces, CSS1/2, DOM1/2

Why XUL? Provides flexibility and ease of use –Ready-made widgets –Incorporation of W3E standards Offers enough power to build application UI Less expensive than building separate front ends using Windows GUI and Mac GUI. Benefits both developers and consumers

XUL Benefits Web/client application developers –Cross-platform UI easily –Cross-device UI quickly –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 –Conclusion: throw away your books on Windows, Mac, and Motif or GTK UI development and use lightweight web standards and markup languages instead

XUL Benefits (cont.) Consumers: –XUL applications are small, downloaded quickly and therefore save user time –Increase freedom of choice of platform and device –Increase ability to tailor application appearance to own preferences

XUL, XPToolkit, XPFE XUL is used to create interface. It is a universe of elements, attributes, syntax, rules and relationships XPToolkit is the finite set of interface-specific elements created in XUL XPFE (cross platform front end) is the front end created from XPToolkit

XUL User Interface Elements can be created using XUL: –Input controls (text fields) –Toolbars with buttons or any content –Menus on a menu bar or pop up menus –Tabbed dialogs –Trees for hierarchical or tabular information –Keyboard shortcuts –Progress meter, scrollbar, etc.

XUL File Writing a XUL window description is basically the same as writing an HTML content description, except: –Syntax is XML –Unique elements: Widgets Infrastructure

XUL Syntax and Rules XUL is case sensitive: all events and attributes must be written in lower case All strings must be double quoted Every XUL widget must use close tags to be well- formed All attributes must have a value XUL file extension:.xul

XUL Package A chunk of UI machinery used to create a single window Has five parts: –content: XML description of UI –appearance: look customized with CSS –behavior: defined with JavaScript or C++ –locale: all localizable strings in external DTD –platform: platform specific info

XUL Elements Widgets –Small components used to make an interface –Largely self-contained –Window, box, menu, menubars, toolboxes, toolbars, checkbox, scrollbar, titled buttons … Infrastructure –JavaScript event handlers within a widget –Tie widgets together using JavaScript and broadcaster nodes (communicate the changes of state between widgets)

XUL and JavaScript XUL interface is a collection of disconnected widgets until programmed JavaScript and/or C++ JavaScript included in XUL or a separate file function InitWindow() { var checkbox = document.getElementByID(“remember”); if (checkbox) checkbox.checked = true; }

Building an XUL file XUL file preamble <window id=“simple_window” title=“A Simple Window” xmlns:html= xmlns=" ………..

Element Root element in a XUL file and top level of the interface, similar to the tag in HTML Each window is described in a separate file Attributes: –title: name appears in the title bar of window –id: used as identifier so that window can be refered to by scripts –xmlns: xml namespace declaration

Element onclick – JavaScript event handler within a widget

Element <button id="find-button" class="dialog" value="Find" default="true“ style="list-style-image: url('find.png')"/>

Attributes id: unique identifier a button is identified with class: the style class of the button src: URL of the image to appear on the button orient: determines whether the image appears to the left of the text or above disabled: disable the button if true; switch state using JavaScript

Text Entry Fields <button id="find-button" class="dialog" value="Find" default="true“ style="list-style-image: url('find.png')"/>

Adding HTML Elements Examples: Java applets and table Declaration: Remember: –Add a html: prefix to the beginning of each tag –Tags must be entered in lowercase. –Quotes must be placed around all attribute values. – XML requires a trailing slash at the end of tags that have no content

HTML Elements (cont) Example: Click the box below to remember this decision. Remember This Decision

Other Widget Components Dialog, overlay, box, radio menu Toolbox, toolbar, image element, grid Content widget, spring, broadcaster and observer Tab, popup, tree, deck and stack Keyset and key, color picker Progress meter, scrollbar More examples at

Future Development Easy customization of UI XUL Fragments to add components to UI Server-cached XUL to dynamically update an application’s UI at startup

More Information XUL tutorial XUL Programmer’s Reference Manual XUL Developer Central Mozilla XUL