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 <html:script> function InitWindow() { var checkbox = document.getElementByID(“remember”); if (checkbox) checkbox.checked = true; } </html:script> <html:script language=“javascript” src=“myscript.js”/>
Building an XUL file • XUL file preamble <?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/xul.css“ type="text/css"?> <!DOCTYPE window> <window id=“simple_window” title=“A Simple Window” xmlns:html=http://www.w3.org/1999/xhtml xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> ……….. </window>
<window> Element • Root element in a XUL file and top level of the interface, similar to the <BODY> 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
<menubar> Element <window….> <menubar> <menu name=“File”> <menuitem name=“Hello World!” onclick=“dump(‘Hello World!\n’)”/> </menu> </menubar> </window> onclick – JavaScript event handler within a widget
<button> Element <button id="find-button" class="dialog" value="Find" default="true“ style="list-style-image: url('find.png')"/> <button id="cancel-button" class="dialog" value="Cancel"/> <button value="Left" src="chrome://navigator/skin/images/stop.jpg" class="left"/> <button value="Right" src="chrome://navigator/skin/stop.gif" class="right"/> <button value="Top" src="chrome://navigator/skin/stop.gif" orient="vertical" class="left"/> <button value="Bottom" src="chrome://navigator/skin/stop.gif" orient="vertical” class="right"/>
<button> 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 <text value="Search for:" for="find-text"/> <textfield id="find-text"/> <button id="find-button" class="dialog" value="Find" default="true“ style="list-style-image: url('find.png')"/> <button id="cancel-button" class="dialog" value="Cancel"/>
Adding HTML Elements • Examples: Java applets and table • Declaration: <window xmlns:html=http://www.w3.org/1999/xhtml/> • 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: <html:p> Click the box below to remember this decision. <html:p> <html:input id="rtd" type="checkbox"/> <html:label for="rtd">Remember This Decision</html:label> </html:p> </html:p>
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 http://www.zvon.org/HTMLonly/MozillaTutorial/General/book.html
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 http://www1.xmlw.ie/tutorials/xultu/index.html • XUL Programmer’s Reference Manual http://www.mozilla.org/xpfe/xulref/XUL_Reference.html • XUL Developer Central http://developer.iplanet.com/tech/xul/xul.html • Mozilla XUL http://www.oreillynet.com/topics/mozilla/xul
