1 / 24

Introduction to XUL

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”)

erol
Download Presentation

Introduction to XUL

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Introduction to XUL Thuha Nguyen

  2. 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

  3. 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

  4. 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

  5. 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

  6. 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

  7. 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

  8. 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.

  9. 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

  10. 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

  11. 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

  12. 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)

  13. 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”/>

  14. 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>

  15. <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

  16. <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

  17. <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"/>

  18. <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

  19. 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"/>

  20. 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

  21. 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>

  22. 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

  23. 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

  24. 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

More Related