Difference between revisions of "XUL"

From CDOT Wiki
Jump to: navigation, search
 
(8 intermediate revisions by 2 users not shown)
Line 1: Line 1:
 
=Description=
 
=Description=
−
XUL which is pronounced zool stands for <b>X</b>ML <b>U</b>ser Interface <b>L</b>anguage is a Mark-up language used primarily in Mozilla applications.  It allows for the creation of feature rich visually appealing cross platform applications to be easily created and maintained for online or offline use.
+
XUL which is pronounced zool stands for <b>X</b>ML <b>U</b>ser Interface <b>L</b>anguage is a Mark-up language used primarily in Mozilla applications.  XUL is used to define what the user interface will look like such as buttons and other widgets but it is not used to define how those item will look.
  
 
=Discussion=
 
=Discussion=
−
XUL is an [http://en.wikipedia.org/wiki/Xml XML] language and thus has the advantages of being cross-platform also allows for the insertion of other XML languages into it such as [http://en.wikipedia.org/wiki/Xhtml XHTML], [http://en.wikipedia.org/wiki/MathML MathML] and [http://en.wikipedia.org/wiki/Svg SVG]. Also because of its localized structure it can be easily translated into other languages.
+
XUL is an [http://en.wikipedia.org/wiki/Xml XML] based language and thus has a similiar set of advantages.  One of the biggest being that it that its completly cross-platform. It accomplishes  this by defining the locations and type of each widget but not defining what it will look like.  Because of this the user-interface will use the systems native componets to build the GUI and thus looks like a native application.  XUL also allows for the insertion of other XML languages into it such as [http://en.wikipedia.org/wiki/Xhtml XHTML], [http://en.wikipedia.org/wiki/MathML MathML] and [http://en.wikipedia.org/wiki/Svg SVG]. Also because of its structure all the GUI componets and tezt is localized which makes it easy translate into other languages.  
  
−
XUL is often used for creating Mozilla extensions, such as [http://chatzilla.hacksrus.com/ ChatZilla].  Web applications can and do utilize XUL, but these are rare (typically proof-of-concept, such as the [http://faser.net/mab/chrome/content/mab.xul Mozilla Amazon Browser]).  These XUL-based web applications can be confused for a native desktop application as they share many similar graphical widgets (text box, button, label, list box, check box, tree, menu, toolbar and more).
+
Currently, an application named [[XULRunner]] is being developed to offer a runtime environment for XUL applications.
−
 
 
−
Tip: If a web application is the goal, it is wise to use XUL with the XMLHttpRequest JavaScript object to make a responsive, "snappy" application that not only looks like a desktop application, but acts likes one speed-wise.
 
−
 
 
−
Standalone XUL applications are more popular than web-based ones as the browser restricts operations (due to security concerns).  When developers seek to add more functionality, a XUL application can be installed locally and will utilize [[Chrome]] so that it may be granted elevated privileges.
 
−
 
 
−
Currently, an application named [[XULRunner]] is being developed that will offer a runtime environment for XUL applications.
 
  
 
==Common Usages==
 
==Common Usages==
−
* Textboxes and inputs
+
* Chrome
−
* Toolbars and buttons
+
* Firefox Extension's GUI
−
* Navigation menus
 
−
* Tabbed windowing systems
 
−
* Keyboard Mnemonics and input handling
 
  
 
==Supported Technologies==
 
==Supported Technologies==
Line 40: Line 31:
 
* GIF, JPG, PNG, BMP, ICO images
 
* GIF, JPG, PNG, BMP, ICO images
 
* HTTP 1.1
 
* HTTP 1.1
 +
 +
==Technical Details (Technologies XUL relies on)==
 +
===eXtensible Bindings Language ([[XBL]])===
 +
* Allows for additional, custom tags
 +
* Can provide new event handlers and  methods for existing elements
 +
 +
===Overlays===
 +
* Used to customize applications
 +
* Gets around NPL & MPL licensing
 +
 +
===[[XPCOM]]===
 +
* A means of calling upon the underyling C/C++ libraries for heavylifting
 +
 +
===XPInstall===
 +
* Provides an install tool for distributing XUL applications
  
 
=Sample Code=
 
=Sample Code=
Line 45: Line 51:
 
  <?xml-stylesheet href="chrome://global/skin" type="text/css" ?>
 
  <?xml-stylesheet href="chrome://global/skin" type="text/css" ?>
 
  <window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
 
  <window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
−
         align="center" pack="center" flex="1">
+
         align="center" pack="center">
 
   <description>Is XUL cool or what?</description>
 
   <description>Is XUL cool or what?</description>
 
   <radiogroup>
 
   <radiogroup>
Line 53: Line 59:
 
   <button id="dpsbutton" label="DPS909 is fun" />
 
   <button id="dpsbutton" label="DPS909 is fun" />
 
  </window>
 
  </window>
 +
Paste the above sample code inside your favourite editor and save it with a file extension of .XUL. Open the file in a Mozilla-based browser to view it.
  
 +
* Line 1: Declares that it is an XML file
 +
* Line 2: Used to reference the stylesheets. In this case, the global/skin chrome directories' default global.css file is used. global.css is used to declare all of the XUL elements.
 +
* Line 3: Describes a new window to be drawn, using the namespace http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul. All children of this window are XUL.
 +
* Line 5: Description tag is like a label, but can wrap many lines.
 +
* Lines 6-9: Describes a radio button group.
 +
* Line 10: Draws a button.
  
 
=Example Applications=
 
=Example Applications=

Latest revision as of 11:21, 6 October 2006

Description

XUL which is pronounced zool stands for XML User Interface Language is a Mark-up language used primarily in Mozilla applications. XUL is used to define what the user interface will look like such as buttons and other widgets but it is not used to define how those item will look.

Discussion

XUL is an XML based language and thus has a similiar set of advantages. One of the biggest being that it that its completly cross-platform. It accomplishes this by defining the locations and type of each widget but not defining what it will look like. Because of this the user-interface will use the systems native componets to build the GUI and thus looks like a native application. XUL also allows for the insertion of other XML languages into it such as XHTML, MathML and SVG. Also because of its structure all the GUI componets and tezt is localized which makes it easy translate into other languages.

Currently, an application named XULRunner is being developed to offer a runtime environment for XUL applications.

Common Usages

  • Chrome
  • Firefox Extension's GUI

Supported Technologies

  • HTML 4.0 and XHTML
  • CSS2 and some of CSS3
  • DOM2 and some of DOM3
  • XML
  • MathML
  • RDF
  • XSLT
  • XPath
  • Simple XLinks
  • XPointer
  • XML Base
  • FIXPtr
  • XML-RPC
  • SOAP (Simple Object Access Protocol)
  • WSDL (Web Services Description Language)
  • ECMAScript/Javascript
  • XBL (eXtensible Bindings Language)
  • GIF, JPG, PNG, BMP, ICO images
  • HTTP 1.1

Technical Details (Technologies XUL relies on)

eXtensible Bindings Language (XBL)

  • Allows for additional, custom tags
  • Can provide new event handlers and methods for existing elements

Overlays

  • Used to customize applications
  • Gets around NPL & MPL licensing

XPCOM

  • A means of calling upon the underyling C/C++ libraries for heavylifting

XPInstall

  • Provides an install tool for distributing XUL applications

Sample Code

<?xml version="1.0"?>
<?xml-stylesheet href="chrome://global/skin" type="text/css" ?>
<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
        align="center" pack="center">
  <description>Is XUL cool or what?</description>
  <radiogroup>
    <radio id="yes" selected="true" label="Yes!"/>
    <radio id="no" label="No wai"/>
  </radiogroup>
  <button id="dpsbutton" label="DPS909 is fun" />
</window>

Paste the above sample code inside your favourite editor and save it with a file extension of .XUL. Open the file in a Mozilla-based browser to view it.

  • Line 1: Declares that it is an XML file
  • Line 2: Used to reference the stylesheets. In this case, the global/skin chrome directories' default global.css file is used. global.css is used to declare all of the XUL elements.
  • Line 3: Describes a new window to be drawn, using the namespace http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul. All children of this window are XUL.
  • Line 5: Description tag is like a label, but can wrap many lines.
  • Lines 6-9: Describes a radio button group.
  • Line 10: Draws a button.

Example Applications

  • Mozilla Amazon Browser (MAB) - Rich web application that allows for searching of Amazon's content across their 6 websites (US, Canada, UK, Japan, Germany and France). Can be used through the web or downloaded to the desktop.
  • XUL Periodic Table - Demonstrates many of the visual capabilities of XUL.

Newsgroups, Mailinglists, IRC Channels

Resources

Retrieved from "https://wiki.cdot.senecapolytechnic.ca/w/index.php?title=XUL&oldid=4888"