The Joy of XUL

  • Revision slug: The_Joy_of_XUL
  • Revision title: The Joy of XUL
  • Revision id: 182732
  • Created:
  • Creator: Satyr-wayfarer
  • Is current revision? No
  • Comment a minor grammar-related fix

Revision Content

Intended audience: Application developers and development managers who seek to better understand XUL and why the Mozilla platform is built with it.

Introduction

XUL (pronounced "zool") is Mozilla's XML-based User interface Language that lets you build feature-rich cross platform applications that can run connected or disconnected from the Internet. These applications are easily customized with alternative text, graphics and layout so they can be readily branded or localized for various markets. Web developers already familiar with Dynamic HTML (DHTML) will learn XUL quickly and can start building applications right away.

This document will describe the compelling reasons for application developers to leverage XUL and Mozilla technology for building cross platform applications. This same investigation will provide sufficient explanation of Mozilla's motivation to build XUL and why the Mozilla platform is constructed using it. The key features and benefits of XUL will be explored followed by an examination of supporting Mozilla technologies. Finally, a mini case study of a Calendar application written in XUL will reinforce the benefits of building applications with Mozilla.

Key Features and Benefits

</tr></tr></tr>
XBL The eXtensible Bindings Language (XBL) is a markup language that defines special new elements, or "bindings" for XUL widgets. With XBL, developers can define new content for XUL widgets, add additional event handlers to a XUL widget, and add new interface properties and methods. Essentially, XBL empowers developers with the ability to extend XUL by customizing existing tags and creating new tags of their own.

By using XBL, developers can easily build custom user interface widgets such as progress meters, fancy pop-up menus, and even toolbars and search forms. These custom components can then be used in XUL applications by specifying the custom tag and associated attributes.
Overlays Overlays are XUL files used to describe extra content for the UI. They are a general mechanism for adding UI for additional components, overriding small pieces of a XUL file without having to resupply the whole UI, and reusing particular pieces of the UI.

Overlays are a powerful mechanism for customizing and extending existing applications because they work in two related but highly different ways. In one respect, Overlays are synonymous with "include" files in other languages because an application may specify that an Overlay be included in its definition. But Overlays can also be specified externally, enabling the designer to superimpose them upon an application without changing the original source.

In practical terms, this enables developers to maintain one code stream for a given application then apply custom branding or include special features for customers with a completely independent code base. This leads to an overall solution that is easier and less costly to maintain in the long run.

There is an additional benefit to Overlays for software developers who intend to add features to Mozilla that they wish to keep proprietary. The Netscape Public License (NPL) and Mozilla Public License (MPL) require developers who alter original work (source code files that are provided with Mozilla) to release the source code for these changes to their customers. Overlays can be used to add features to Mozilla without contaminating the original open source code with proprietary alterations.
XPCOM/XPConnect XPCOM and XPConnect are complementary technologies that enable the integration of external libraries with XUL applications.

XPCOM, which stands for Cross Platform Component Object Model, is a framework for writing cross-platform, modular software. XPCOM components can be written in C, C++, and JavaScript, and they can be used from C, C++, JavaScript, Python, and with Perl extensions under development.

XPConnect is a technology which enables simple interoperation between XPCOM and JavaScript. XPConnect allows JavaScript objects to transparently access and manipulate XPCOM objects. It also enables JavaScript objects to present XPCOM compliant interfaces to be called by XPCOM objects.

Together, XPCOM and XPConnect enable developers to create XUL applications that require the raw processing power of compiled languages (C/C++) or access to the underlying operating system.
XPInstall XPInstall, Mozilla's Cross Platform Install facility, provides a standard way of packaging XUL application components with an install script that Mozilla can download and execute.

XPInstall enables users to effortlessly install new XUL applications over the Internet or from corporate intranet servers. To install a new application the user need only click a hypertext link on a web page or in an email message and accept the new package through a Mozilla install dialog.

todo: describe cool toolkit and xul runner features

Case Study: A Mozilla Calendar Application

This mini case study describes how OEone Corporation (http://www.oeone.com) integrated its Calendar application with the core Mozilla product. The Calendar application is comprised of a XUL front end and an XPCOM component that leverages libical, a native library written in C, for date operations and calendar data storage. The Calendar was initially developed exclusively for Linux but was successfully ported to both Macintosh and Windows within a week.

XUL provides a rich set of UI components. The user interface for the Calendar is written entirely in XUL, JavaScript, and CSS, which is a testament to the power and flexibility of this application building framework. It uses simple XUL components like boxes, grids, and stacks to compose views for the weeks, days, and months. The initial implementation of Calendar did not exploit XBL because the developers involved were not experienced with this complementary technology. But future plans for the Calendar include converting many of these UI components to XBL widgets to further simplify their implementation.

XPCOM/XPConnect enables integration of native code. A fully-featured open source calendar library, libical ( http://www.softwarestudio.org/libical/), was harvested for the Calendar project. Libical is an Open Source implementation of the IETF's iCalendar Calendaring and Scheduling protocols. (RFC 2445, 2446, and 2447). It parses iCal components and provides a C API for manipulating the component properties, parameters, and subcomponents. The library was initially integrated by writing an XPCOM wrapper to adapt its interface. To improve performance a greater proportion of application logic was migrated from JavaScript to the XPCOM component.

Separation of presentation from logic makes applications resilient to change. The original UI implementation made extensive use of graphics for rendering the month and week views. Later, as the developers learned more about XUL and the implementation of the basic components matured, better ways were identified to simplify the composition of the UI. This lead to increased screen drawing performance and reduced memory and disk footprint requirements of the application. The UI for the month and week views was practically rewritten while the application logic remained virtually unchanged.

Porting XUL applications to other platforms is trivial. The Calendar originated as a Linux application with no consideration given to porting it to other platforms. But later, when the original developer (OEone Corporation) contributed the source to the Mozilla project, the Calendar had to be migrated to the Windows and Macintosh platforms. The UI for the XUL application required zero porting effort because it worked with almost no alteration on both new platforms. Similarly, since the UI code is written in JavaScript, the interaction logic worked with no effort. However, since the libical library is written in C, more significant effort was required to migrate this component to the other platforms.

Fortunately an implementation of the libical library was already available for Macintosh so, with the cross platform nature of XPCOM, a Macintosh calendar implementation was working within a few days. However, there was no existing Win32 port available, so developers had to undertake a porting effort to migrate libical to Windows. Within a week this too was complete and Mozilla had a working calendar for all three primary platforms: Linux, Macintosh, and Windows.

XPInstall is easy for developers and for users. The Calendar is not a planned deliverable for the Mozilla 1.0 release, and therefore is not included as a standard component in regular nightly and milestone release builds. Developers who are equipped with the software and knowledge required to compile Mozilla can set an optional environment variable and build the Calendar themselves. But many Mozilla users who want to try out the Calendar can't afford this luxury. Using XPInstall it was easy for the developers to package a version of Calendar that could be installed directly over the Internet by clicking a link.

Conclusion

Mozilla, featuring XUL, delivers a compelling technology for developing cross platform applications with the same rich user interface and end user experience as native desktop applications. Designers who are experienced in building web applications using W3C standard technologies can leverage this experience from the browser directly to the desktop.

Before the web became the standard for delivering applications to users across disparate desktops, this problem was solved with cross platform client-server tools. But these offerings were invariably proprietary, cost a substantial amount of money per developer, and had runtime license fees that kept you humble and tightly tethered to the vendor. Mozilla delivers much of the same value as these cross platform tools, but with an open source license.

As a rapidly maturing cross platform technology, XUL could fill an interesting void for technologies such as Java J2EE and Microsoft .Net which focus on enabling network access to distributed objects. Dynamic application logic can benefit significantly from a UI presentation layer that is standards-based, scriptable, extensible, and similarly distributable over the Internet.

XUL blurs the distinction between desktop application and Internet browser apps because it is firmly entrenched in both worlds. Some web applications will benefit from being migrated to XUL because of the enhanced UI capabilities, consistent implementation of the specification across supported platforms, and access to native resources such as shared libraries and the local file system.

Whether you need to migrate an existing web application to the desktop, are looking for a technology that will enable you to easily port your applications to multiple platforms, or want to integrate your own cool features into the browser, XUL warrants serious consideration.

Reference Material

  1. XUL Planet - Samples, Tutorials and Language-References to XUL and XBL http://www.xulplanet.com/
  2. Introduction to a XUL Document, Dan Matejka <danm@netscape.com> http://www.mozilla.org/xpfe/xptoolkit/xulintro.html
  3. XBL - Extensible Binding Language 1.0, David Hyatt <hyatt@netscape.com> http://www.mozilla.org/projects/xbl/xbl.html
  4. XBL - XML Binding Language (W3C Note), David Hyatt < hyatt@netscape.com> http://www.w3.org/TR/xbl/
  5. XUL Overlays, Ian Oeschger <oeschger@netscape.com> and David Hyatt <hyatt@netscape.com> http://www.mozilla.org/xpfe/xptoolkit/overlays.html
  6. XPCOM Part 1: An introduction to XPCOM, Rick Parrish <rfmobile@swbell.net> http://www-106.ibm.com/developerworks/webservices/library/co-xpcom.html
  7. XPConnect (Scriptable Components), John Bandhauer <jband@netscape.com> http://www.mozilla.org/scriptable/
  8. Creating New Packages for Mozilla, Ian Oeschger <oeschger@netscape.com> http://www.mozilla.org/docs/xul/xulnotes/xulnote_packages.html
  9. Mozilla Calendar Project Page, maintained by Mike Potter <mikep@oeone.com> http://www.mozilla.org/projects/calendar/

Original Document Information

  • Author: Peter Bojanic

Revision Source

<p>
Intended audience: Application developers and development managers who seek to better understand XUL and why the Mozilla platform is built with it.
</p>
<h3 name="Introduction"> Introduction </h3>
<p><a href="en/XUL">XUL</a> (pronounced "zool") is Mozilla's XML-based User interface Language that lets you build feature-rich cross platform applications that can run connected or disconnected from the Internet. These applications are easily customized with alternative text, graphics and layout so they can be readily branded or localized for various markets. Web developers already familiar with Dynamic HTML (<a href="en/DHTML">DHTML</a>) will learn XUL quickly and can start building applications right away.
</p><p>This document will describe the compelling reasons for application developers to leverage XUL and Mozilla technology for building cross platform applications. This same investigation will provide sufficient explanation of Mozilla's motivation to build XUL and why the Mozilla platform is constructed using it. The key features and benefits of XUL will be explored followed by an examination of supporting Mozilla technologies. Finally, a mini case study of a Calendar application written in XUL will reinforce the benefits of building applications with Mozilla.
</p>
<h3 name="Key_Features_and_Benefits"> Key Features and Benefits </h3>
&lt;/tr&gt;&lt;/tr&gt;&lt;/tr&gt;<table class="standard-table">
  <tbody><tr>
    <td><a href="en/XBL">XBL</a></td>
    <td>The eXtensible Bindings Language (XBL) is a markup language that defines special new elements, or "bindings" for XUL widgets. With XBL, developers can define new content for XUL widgets, add additional event handlers to a XUL widget, and add new interface properties and methods. Essentially, XBL empowers developers with the ability to extend XUL by customizing existing tags and creating new tags of their own.<br><br>
By using XBL, developers can easily build custom user interface widgets such as progress meters, fancy pop-up menus, and even toolbars and search forms. These custom components can then be used in XUL applications by specifying the custom tag and associated attributes.</td></tr>
<tr><td><a href="en/Overlay">Overlays</a></td>
<td>Overlays are XUL files used to describe extra content for the UI. They are a general mechanism for adding UI for additional components, overriding small pieces of a XUL file without having to resupply the whole UI, and reusing particular pieces of the UI.<br><br>
<p>Overlays are a powerful mechanism for customizing and extending existing applications because they work in two related but highly different ways. In one respect, Overlays are synonymous with "include" files in other languages because an application may specify that an Overlay be included in its definition. But Overlays can also be specified externally, enabling the designer to superimpose them upon an application without changing the original source.<br><br>
</p><p>In practical terms, this enables developers to maintain one code stream for a given application then apply custom branding or include special features for customers with a completely independent code base. This leads to an overall solution that is easier and less costly to maintain in the long run.<br><br>
</p>
There is an additional benefit to Overlays for software developers who intend to add features to Mozilla that they wish to keep proprietary. The Netscape Public License (NPL) and Mozilla Public License (MPL) require developers who alter original work (source code files that are provided with Mozilla) to release the source code for these changes to their customers. Overlays can be used to add features to Mozilla without contaminating the original open source code with proprietary alterations.</td>
<td><a href="en/XPCOM">XPCOM</a>/<a href="en/XPConnect">XPConnect</a></td>
<td>XPCOM and XPConnect are complementary technologies that enable the integration of external libraries with XUL applications.<br><br>
<p>XPCOM, which stands for Cross Platform Component Object Model, is a framework for writing cross-platform, modular software. XPCOM components can be written in C, C++, and JavaScript, and they can be used from C, C++, JavaScript, Python, and with Perl extensions under development.<br><br>
</p><p>XPConnect is a technology which enables simple interoperation between XPCOM and JavaScript. XPConnect allows JavaScript objects to transparently access and manipulate XPCOM objects. It also enables JavaScript objects to present XPCOM compliant interfaces to be called by XPCOM objects.<br><br>
</p>
Together, XPCOM and XPConnect enable developers to create XUL applications that require the raw processing power of compiled languages (C/C++) or access to the underlying operating system.</td>
<td><a href="en/XPInstall">XPInstall</a></td>
<td>XPInstall, Mozilla's Cross Platform Install facility, provides a standard way of packaging XUL application components with an install script that Mozilla can download and execute.<br><br>
XPInstall enables users to effortlessly install new XUL applications over the Internet or from corporate intranet servers. To install a new application the user need only click a hypertext link on a web page or in an email message and accept the new package through a Mozilla install dialog.</td>
</tr></tbody></table>
<p><span class="comment">todo: describe cool toolkit and xul runner features</span>
</p>
<h3 name="Case_Study:_A_Mozilla_Calendar_Application"> Case Study: A Mozilla Calendar Application </h3>
<p>This mini case study describes how OEone Corporation (http://www.oeone.com) integrated its Calendar application with the core Mozilla product. The Calendar application is comprised of a XUL front end and an XPCOM component that leverages libical, a native library written in C, for date operations and calendar data storage. The Calendar was initially developed exclusively for Linux but was successfully ported to both Macintosh and Windows within a week.
</p><p><i>XUL provides a rich set of UI components.</i> The user interface for the Calendar is written entirely in XUL, JavaScript, and CSS, which is a testament to the power and flexibility of this application building framework. It uses simple XUL components like boxes, grids, and stacks to compose views for the weeks, days, and months. The initial implementation of Calendar did not exploit XBL because the developers involved were not experienced with this complementary technology. But future plans for the Calendar include converting many of these UI components to XBL widgets to further simplify their implementation.
</p><p><i>XPCOM/XPConnect enables integration of native code.</i> A fully-featured open source calendar library, libical ( http://www.softwarestudio.org/libical/), was harvested for the Calendar project. Libical is an Open Source implementation of the IETF's iCalendar Calendaring and Scheduling protocols. (<a class="external" href="http://tools.ietf.org/html/rfc2445" title="http://tools.ietf.org/html/rfc2445">RFC 2445</a>, 2446, and 2447). It parses iCal components and provides a C API for manipulating the component properties, parameters, and subcomponents. The library was initially integrated by writing an XPCOM wrapper to adapt its interface. To improve performance a greater proportion of application logic was migrated from JavaScript to the XPCOM component.
</p><p><i>Separation of presentation from logic makes applications resilient to change.</i> The original UI implementation made extensive use of graphics for rendering the month and week views. Later, as the developers learned more about XUL and the implementation of the basic components matured, better ways were identified to simplify the composition of the UI. This lead to increased screen drawing performance and reduced memory and disk footprint requirements of the application. The UI for the month and week views was practically rewritten while the application logic remained virtually unchanged.
</p><p><i>Porting XUL applications to other platforms is trivial.</i> The Calendar originated as a Linux application with no consideration given to porting it to other platforms. But later, when the original developer (OEone Corporation) contributed the source to the Mozilla project, the Calendar had to be migrated to the Windows and Macintosh platforms. The UI for the XUL application required zero porting effort because it worked with almost no alteration on both new platforms. Similarly, since the UI code is written in JavaScript, the interaction logic worked with no effort. However, since the libical library is written in C, more significant effort was required to migrate this component to the other platforms.
</p><p>Fortunately an implementation of the libical library was already available for Macintosh so, with the cross platform nature of XPCOM, a Macintosh calendar implementation was working within a few days. However, there was no existing Win32 port available, so developers had to undertake a porting effort to migrate libical to Windows. Within a week this too was complete and Mozilla had a working calendar for all three primary platforms: Linux, Macintosh, and Windows.
</p><p><i>XPInstall is easy for developers and for users.</i> The Calendar is not a planned deliverable for the Mozilla 1.0 release, and therefore is not included as a standard component in regular nightly and milestone release builds. Developers who are equipped with the software and knowledge required to compile Mozilla can set an optional environment variable and build the Calendar themselves. But many Mozilla users who want to try out the Calendar can't afford this luxury. Using XPInstall it was easy for the developers to package a version of Calendar that could be installed directly over the Internet by clicking a link.
</p>
<h3 name="Conclusion"> Conclusion </h3>
<p>Mozilla, featuring XUL, delivers a compelling technology for developing cross platform applications with the same rich user interface and end user experience as native desktop applications. Designers who are experienced in building web applications using W3C standard technologies can leverage this experience from the browser directly to the desktop.
</p><p>Before the web became the standard for delivering applications to users across disparate desktops, this problem was solved with cross platform client-server tools. But these offerings were invariably proprietary, cost a substantial amount of money per developer, and had runtime license fees that kept you humble and tightly tethered to the vendor. Mozilla delivers much of the same value as these cross platform tools, but with an open source license.
</p><p>As a rapidly maturing cross platform technology, XUL could fill an interesting void for technologies such as Java J2EE and Microsoft .Net which focus on enabling network access to distributed objects. Dynamic application logic can benefit significantly from a UI presentation layer that is standards-based, scriptable, extensible, and similarly distributable over the Internet.
</p><p>XUL blurs the distinction between desktop application and Internet browser apps because it is firmly entrenched in both worlds. Some web applications will benefit from being migrated to XUL because of the enhanced UI capabilities, consistent implementation of the specification across supported platforms, and access to native resources such as shared libraries and the local file system.
</p><p>Whether you need to migrate an existing web application to the desktop, are looking for a technology that will enable you to easily port your applications to multiple platforms, or want to integrate your own cool features into the browser, XUL warrants serious consideration.
</p>
<h3 name="Reference_Material"> Reference Material </h3>
<ol><li> XUL Planet - Samples, Tutorials and Language-References to XUL and XBL http://www.xulplanet.com/
</li><li> Introduction to a XUL Document, Dan Matejka  &lt;danm@netscape.com&gt;  http://www.mozilla.org/xpfe/xptoolkit/xulintro.html
</li><li> XBL - Extensible Binding Language 1.0, David Hyatt  &lt;hyatt@netscape.com&gt;  http://www.mozilla.org/projects/xbl/xbl.html
</li><li> XBL - XML Binding Language (W3C Note), David Hyatt &lt;  hyatt@netscape.com&gt; http://www.w3.org/TR/xbl/
</li><li> XUL Overlays, Ian Oeschger  &lt;oeschger@netscape.com&gt; and David Hyatt  &lt;hyatt@netscape.com&gt;  http://www.mozilla.org/xpfe/xptoolkit/overlays.html
</li><li> XPCOM Part 1: An introduction to XPCOM, Rick Parrish  &lt;rfmobile@swbell.net&gt;  http://www-106.ibm.com/developerworks/webservices/library/co-xpcom.html
</li><li> XPConnect (Scriptable Components), John Bandhauer  &lt;jband@netscape.com&gt;  http://www.mozilla.org/scriptable/
</li><li> Creating New Packages for Mozilla, Ian Oeschger  &lt;oeschger@netscape.com&gt;  http://www.mozilla.org/docs/xul/xulnotes/xulnote_packages.html
</li><li> Mozilla Calendar Project Page, maintained by Mike Potter  &lt;mikep@oeone.com&gt;  http://www.mozilla.org/projects/calendar/
</li></ol>
<div class="originaldocinfo">
<h3 name="Original_Document_Information"> Original Document Information </h3>
<ul><li> Author: Peter Bojanic
</li></ul>
</div>
Revert to this revision