Introduction%20to%20XUL

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
• lthtmlscriptgt
• function InitWindow()
• var checkbox document.getElementByID(remember
  )
• if (checkbox) checkbox.checked true
• lt/htmlscriptgt
• lthtmlscript languagejavascript
  srcmyscript.js/gt

14
Building an XUL file

• XUL file preamble
• lt?xml version"1.0"?gt
• lt?xml-stylesheet href"chrome//global/skin/xul.cs
  s type"text/css"?gt
• lt!DOCTYPE windowgt
• ltwindow
• idsimple_window
• titleA Simple Window
• xmlnshtmlhttp//www.w3.org/1999/xhtml
• xmlns"http//www.mozilla.org/keymaster/gatekeeper
  /there.is.only.xul"gt
• ..
• lt/windowgt

15
ltwindowgt Element

• Root element in a XUL file and top level of the
  interface, similar to the ltBODYgt 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
ltmenubargt Element

• ltwindow.gt
• ltmenubargt
• ltmenu nameFilegt
• ltmenuitem nameHello World!
  onclickdump(Hello World!\n)/gt
• lt/menugt
• lt/menubargt
• lt/windowgt
• onclick JavaScript event handler within a widget

17
ltbuttongt Element

• ltbutton id"find-button" class"dialog"
  value"Find" default"true
• style"list-style-image url('find.png')"/gt
• ltbutton id"cancel-button" class"dialog"
  value"Cancel"/gt
• ltbutton value"Left" src"chrome//navigator/skin/
  images/stop.jpg" class"left"/gt
• ltbutton value"Right" src"chrome//navigator/skin
  /stop.gif" class"right"/gt
• ltbutton value"Top" src"chrome//navigator/skin/s
  top.gif" orient"vertical" class"left"/gt
• ltbutton value"Bottom" src"chrome//navigator/ski
  n/stop.gif" orient"vertical class"right"/gt

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

• lttext value"Search for" for"find-text"/gt
• lttextfield id"find-text"/gt
• ltbutton id"find-button" class"dialog"
  value"Find" default"true
• style"list-style-image url('find.png')"/gt
• ltbutton id"cancel-button" class"dialog"
  value"Cancel"/gt

20
Adding HTML Elements

• Examples Java applets and table
• Declaration
• ltwindow xmlnshtmlhttp//www.w3.org/1999/xhtml/gt
• 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
• lthtmlpgt
• Click the box below to remember this decision.
  
• lthtmlpgt
• lthtmlinput id"rtd" type"checkbox"/gt
• lthtmllabel for"rtd"gtRemember This
  Decisionlt/htmllabelgt
• lt/htmlpgt
• lt/htmlpgt

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/Mozi
  llaTutorial/General/book.html

23
Future Development

• Easy customization of UI
• XUL Fragments to add components to UI
• Server-cached XUL to dynamically update an
  applications UI at startup

24
More Information

• XUL tutorial http//www1.xmlw.ie/tutorials/xultu/i
  ndex.html
• XUL Programmers Reference Manual
  http//www.mozilla.org/xpfe/xulref/XUL_Reference.h
  tml
• XUL Developer Central http//developer.iplanet.com
  /tech/xul/xul.html
• Mozilla XUL
• http//www.oreillynet.com/topics/mozilla/xul