Remote Application Development with Mozillaby Brian King, coauthor of Creating Applications with Mozilla and Myk Melez
Editor's Note: This article will explore the uses for remote XUL (loaded from a Web server), contrast its capabilities with those of local XUL (installed on a user's computer), explain how to deploy remote XUL, and give examples of existing applications. This will give you a firm grasp on the potential uses for remote XUL, its current limitations, and how to start using it to enhance your Web sites and applications.
Web sites and applications have traditionally used HTML to construct their user interfaces, but HTML has a limited set of features for building UIs. The language's basic form controls (text fields, drop-down menus, buttons), hyperlinks, and content-centric layout model are adequate for many Web interfaces, but they do not provide the same level of usability as GUI toolkits designed for building applications. HTML was designed for content, not interactivity.
XUL, on the other hand, was designed specifically for creating application interfaces. It was originally used to build the interface for Mozilla, a desktop application, but because Mozilla can load XUL files from a remote Web server, it can also be used to build Web applications and sites. XUL has a comprehensive widget set and an application-centric layout model well-suited to organizing UI widgets in application interfaces. These features make XUL an attractive alternative to HTML for building Web applications and adding interactivity to Web sites.
Remote vs. Local: Similarities and Differences
Remote XUL is similar to local XUL in a number of key ways. In both
cases the XUL files are identified by URLs, and Mozilla, when given
such a URL, renders it identically regardless of where it is located.
This means you can use Mozilla's
command-line option to start both local and remote XUL applications
in the same way:
./mozilla -chrome chrome://navigator/content/
(starts the Mozilla browser)
./mozilla -chrome http://bugzilla.mozilla.org/duplicates.xul
(starts a remote XUL application)
chrome:// URL is a Mozilla-specific protocol for files
chrome directory, which stores files related
to the Mozilla application interface. You can also type these URLs
into the location bar of the Mozilla browser. In both cases, the browser
will load and render the application within its content pane.
Loading an instance of the browser within another browser window
isn't very useful, of course, but the point is that Mozilla treats
these two very different XUL applications the same when loading
and rendering them.
For development purposes, you can overcome this limitation by manually adding the following line to the prefs.js file in your Mozilla profile directory, which will enable scripts to gain access to the services without being signed:
Make sure you edit the preferences file while Mozilla isn't running (or else it will overwrite your changes when you quit), and remember that when you deploy your XUL application you should sign it to ensure your users' security.
Mozilla also doesn't support loading DTD files remotely, so you can't use them to localize your Web application. You can, however, load a DTD by including it in the content of the XUL file itself, so you could use HTTP 1.1 content negotiation to serve different localized versions of your remote XUL file depending on the user's locale preferences.
Finally, local XUL has been used much longer and received much wider testing and deployment than remote XUL, which is a relative newcomer to the Mozilla and Web development scenes. Local XUL has been used to build and deploy major applications like the Mozilla suite itself, the Komodo IDE, and the Crocodile Maths educational application, while there are no known major deployed remote XUL applications. Remote XUL is thus less mature and more prone to bugs (of which the known ones are tracked in the Bugzilla meta-bug report).
Still, remote XUL is already a viable approach to building applications, and a good example of this is the mozdev.org games project, which hosts a number of games including Snake, Solitaire, and Xulmine. All games on the site can be installed on your local machine or loaded into your browser and run remotely with installation. In both cases the games have the same functionality.
Serving It Up
Serving XUL files remotely is almost as simple as putting them on a Web
server and pointing your users to them. However, you have to make sure
your Web server identifies the files as the appropriate MIME type,
which for XUL files is
If your application uses RDF files, make sure those are identified as
mozilla.org's duplicate bugs report is an example of a XUL file served remotely.
mozilla.org duplicates report
In addition to serving XUL files themselves, you can also insert fragments of XUL into HTML files. This could be useful, for example when providing XUL-based navigation for an HTML Web site. To use XUL this way, you must define it in an XBL file and then use CSS to bind the XBL file to the HTML file, thus inserting the XUL into the HTML document's DOM.
Here's an example of XUL in HTML, an experimental version of the mozilla.org home page with a new XUL-based navigation bar instead of the existing HTML-based sidebar.
mozilla.org website w/XUL navigation bar
Note that you can't bind the XBL to an arbitrary element like you can with XBL in XUL. You must bind it to a regular HTML element like a SPAN or a DIV. The code that binds the XBL is as simple as the following line from that experimental home page:
<div style="-moz-binding: url('menu.xml#menu');"></div>
You should also be able to insert XUL directly into XHTML files, but a bug in Mozilla currently prevents this from working. See the bug report for the details.
Pages: 1, 2