This guide is designed to introduce application developers and their managers to XUL so they can not only understand why Mozilla's platform is based on it, but how they might adopt it for their own use. XUL (pronounced "zool") is Mozilla's XML-based user interface language that lets you build feature rich cross-platform applications that can run connected to 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.
Also described are some reasons application developers might choose 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
| Powerful widget-based markup language | The goal of XUL is to build cross platform applications, in contrast with DHTML which is intended for developing web pages. For this reason, XUL is oriented toward application artifacts such as windows, labels, and buttons instead of pages, heading levels, and hypertext links.
In fact, many developers invest a significant amount of effort to achieve these results in their DHTML web applications but at the cost of complexity and performance and without any supporting standards. |
| Based on existing standards | XUL is an XML language based on W3C standard XML 1.0. Applications written in XUL are based on additional W3C standard technologies featuring HTML 4.0; Cascading Style Sheets (CSS) 1 and 2; Document Object Model (DOM) Levels 1 and 2; JavaScript 1.5, including ECMA-262 Edition 3 (ECMAscript); XML 1.0. |
| Platform portability | Like HTML, XUL is designed to be platform-neutral, making applications easily portable to all of the operating systems on which Mozilla runs. Considering the broad range of platforms that currently support Mozilla, this may be one of the most compelling features of XUL as a technology for building applications.
Since XUL provides an abstraction of user interface components, it delivers on the promise of write-once, run-anywhere. The user interface for all of Mozilla's core applications (Browser, Messenger, Address Book, etc.) is written in XUL with one single code base supporting all Mozilla platforms. |
| Separation of presentation from application logic | One of the major downfalls of most web applications is the tight coupling of user interface elements with client application logic. This poses a significant problem in team environments because the skills required to develop these two parts are often satisfied by different people.
XUL provides a clear separation among the client application definition and programmatic logic ("content" consisting of XUL, XBL, and JavaScript), presentation ("skin" consisting of CSS and images), and language-specific text labels ("locale" consisting of DTDs and string bundles in .properties files). The layout and appearance of XUL applications can be altered independently of the application definition and logic. Further, the application can be localized for different languages and regions independently of its logic or presentation. This degree of separation results in applications that are easier to maintain by programmers and readily customized by designers and language translators. The work flow of these interdependent activities is more easily coordinated than with HTML-based web applications, with less impact on the overall stability and quality of the system. |
| Easy customization, localization, or branding | Another highly practical benefit of the separation that XUL provides among application logic, presentation, and language text is the ease of customizing for different customers or groups of users.
A developer can maintain one primary code base for their application and customize the logo and branding for each of their customers by supplying different skins. An application that is written and deployed with an English language user interface can be translated to French for the same customer. While such changes are extensive and affect most (if not all) of the application, they are also isolated from one another, enabling the core XUL definition and application logic to be shared among all of the custom versions. |
Supporting Technologies
There are number of other technologies introduced by Mozilla that complement XUL for building cross platform web applications.
| 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, Java, and Perl. 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 (now part of HipPlay; this Calendar application is no longer listed on their site) 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, was harvested for the Calendar project. Libical is an Open Source implementation of the IETF's iCalendar Calendaring and Scheduling protocols (RFC 2445, RFC 2446, and RFC 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 led 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.
See also
- XUL documentation on MDC, including the XUL Tutorial and the XUL Reference
- XUL Overlays
- XBL documentation: XBL introduction, XBL reference
- XPCOM documentation
- XPConnect (Scriptable components) documentation. See also http://www.mozilla.org/scriptable/
- Extensions documentation, including the Building an Extension introductory tutorial
- Mozilla Calendar project page
Original Document Information
- Author: Peter Bojanic