Mozilla and XML - A Thriving Relationship

1. XML in Mozilla

XML touches nearly every part of the Mozilla application. The Mozilla source code was released in March of 1998, at a time when XML was beginning to emerge as a technology that was being taken seriously in the web world. In this paper I will discuss some of the standards that are implemented in Mozilla, and how they relate to the XML. However, not all of the XML syntaxes are W3C approved. There was a need within the project to create new ones, most notably the eXtensible User-interface Language (XUL), the cornerstone of the Cross Platform Front End (XPFE).

2. XML Features and Syntaxes

There is full support for the XML 1.0 specification for the display of XML documents. This includes namespaces, stylesheet association, CDATA sections and Entities. The parser integrated into Mozilla is James Clark's Expat parser, which is only checks if the document is well formed, but does not validate.

To have a presentable display to your document, you are limited to a CSS stylesheet, though much progress has been made with the XSLT project. Other syntaxes recognised are SVG, MathML and RDF, and XML is used extensively in the internal workings of the application, including the chrome registry. Chome is another term used to describe a user interface package.

3. Gecko

Gecko is the name for Mozilla's layout rendering engine. It supports HTML, XML, CSS1, some of CSS2, DOM Level 1, and most of DOM Level 2. What is unique about Gecko is that it is not just used to layout pages in the browser view, but to render the user interface. XUL provides an abstract layer for developers to mark-up their widgets, which will interface with the cross-platform code to draw the UI. Currently the source code is being maintained for the Windows, Linux and Macintosh platforms, with successful ports to SunOS, HP-UX, BeOS and AIX among others.

Jumping right in with an example, this will illustrate what a simple XUL window will look like in the Mozilla framework.

<?xml version="1.0"?> <!DOCTYPE window> <window title="Hello World!" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" width="250" height="200"> <vbox flex="1" orient="horizontal" align="center"> <label style="font-weight: bold;" value="Hello World!" /> <image src="chute.gif" /> </vbox> </window>

The first thing you will notice is the very familiar XML syntax, but look closer at the element names. The names of the tabs to describe the interface are very descriptive. Here you see that there is a text label and an image laid out in a vertical box.

4. XPFE Architecture

The XPFE architecture takes a popular goal and puts it into practice. This is the separation of components, and promotion of greater modularisation. You can think of the components as layers, or as a drawer. Each component can be slid out, changed, and slid back in again, independent of the other layers.

The four basic layers are content, behaviour, appearance and locale, as illustarted in figure 2. The content is the XML mark-up, or more specifically the XUL and XBL. The behaviour can be characterised as the glue between the content and the implementation of the various interfaces that make the application to work. Currently this glue is in the form of JavaScript. Appearance is handled by Cascading Style Sheets (CSS) accompanied by supporting images. The locale is partially handled by another accompanying format to the XML specification, Document Type Definition (DTD). Within the DTD is contained the entities that contain the strings which hold the text used in the UI widgets.

5. Benefits of XUL

The benefits of XUL, and of the toolkit as a whole, are immense. Some are inherent to the syntax itself, and for the developer it opens up new doors to utilise your skills. Perhaps the greatest draw for XUL is the fact that it is cross platform. No longer do you need to fork your UI code for all platforms that your application runs on. As already discussed there is the separation of content, functionality and style. This makes code management and sharing easier. Another effect of this is that the strings are more easily localisable.

For the developer, there are the following attractions:

• Uses technology that is familiar. If you are coming from the web world, there is very little new to learn, excepting certain concepts.

• Faster development time

• No compilation of code

• Multiple developers working in separate areas, yet with a common goal

• It promotes customisibility

Picking up on the last point, customisation is highlighted in features in Mozilla such as sidebar panels, new themes and language packs.

6. XUL Features

XUL has many of the common features and elements that you would expect in a user interface toolkit. This includes widgets and controls such as buttons, menus, trees, text boxes, tabs and grids. Central to the layout of widgets on the screen is the box model within which you place your elements and many of the core elements inherit box-like behaviour such as <tabbox>, <group-box>, and <stack>. XUL templates harness the power of RDF to populate items with information from dynamic datasources and to save data back to those locations. Source management is an important consideration. If your UI becomes involved, the amount of mark-up in the XUL document will increase. This is where XUL overlays come into play. Overlays allow for the storing of content in multiple files, which can be pulled in by the main window at runtime for rendering as a whole. <?xml version="1.0"?> <overlay id="myOverlay" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <toolbarbutton id="newButton" class="toolbarbutton-1" tooltiptext="New File" tooltip="aTooltip" oncommand="doFileNew()" label="New"/> </overlay> This example is an overlay file that contains the full definition of a toolbar button. To use this button in your UI, you need to do two things in your XUL document; include the overlay file: <?xul-overlay href="myOverlay.xul"?> and to include the widget by placing the element where you want it and including it using the id attribute: <toolbarbutton id="newButton" /> And due to Mozilla's roots as a browser, there are some content widgets that allow you to display web content in whatever places you choose to use there widgets. There is the <iframe>, <browser> and <editor> elements, the latter exposing interfaces into the Mozilla Editor code for rich HTML and text editing. <browser type="content" id="" flex="1"> This element could be used for such things as a help viewer, an HTML/XML previewer, advanced text display or popups

7. Extensible Bindings Language (XBL)

If you are concerned about the limitations of the finite element set that XUL provides, you can overcome this by creating your own widgets with XBL, where the possibilities are endless. XBL allows you to 'bind' content, layout and behaviour to a XBL is currently under review as a note by the W3C.

<binding id="header"> <content> <xul:hbox align="center" flex="1"> <xul:image inherits="src=data"/> <xul:spacer flex="1"/> <xul:text class="header-text" inherits="value=text"/> </xul:hbox> </content> <implementation> <property name="text"> <setter> <![CDATA[ this.setAttribute('text',val); return val; ]]> </setter> <getter> <![CDATA[ return this.getAttribute('text'); ]]> </getter> </property> </implementation> </binding> This binding is contained in an external file that has a .xml extension, and this file can contain one or more bindings. There are two ways to attach the binding to your document. The first and most common is via CSS, and the second is through a special DOM method addBinding() which is designed for dynamic attachment. <hbox id="header" data="foo.png" text="" class="bindingheader"/> The important attribute here is the class attribute, because in this case, this is the rule we will be applying to the attacj the binding. The CSS looks like: .bindingheader { -moz-binding : url("myBinding.xml#header"); } The -moz-binding property has the url value of the file, and the binding that is attached is searched for in that file, where the id of the binding has to match the string associated with the '#' notation after in the CSS value. You are not limited to existing element names for your bindings. Thus the widgets you create can be as descriptive as you want to meet your needs. So go ahead, create your <greenField> or your <iceCube> and the only limit is your imagination

8. Localising Mozilla's UI

For locale, one of the main formats chosen was Document Type Definition (DTD), that fits into the XML framework that is central to Mozilla's front end. Entities in XUL work the same way as they do in any other XML application. There are used to reference data that has been abstracted from the content.

DTD Entity <!Entity windowTitle.label "World Flies"> Accessed in XUL <window title="&windowTitle.label;">

This encourages re-use of data but in this case the main reason for use is to separate any visible text in interface widgets. This ensures that the content can remain untouched during the localization process.

9. Resource Description Framework (RDF)

"Metadata makes it possible" is a mantra that you will hear if you hang around in the web world for a short time. RDF has become popular to deal with metadata, for the storing and dynamic retrieval of

Here is an example of RDF usage internally in the chrome registry in the file, all-packages.rdf. <RDF:Description about="urn:mozilla:package:komodo" c:baseURL="resource:/chrome/komodo/content/" c:locType="install" c:displayName="Komodo" c:author="activestate.com" c:name="komodo" /> This holds crucial information such as the package name, and base url that is used to find files to use in the in the UI.

10. More XML

Mozilla has some more tricks up it's sleeve when it comes to XML. There are other projects, both internal and external, that strive to provide support for other XML technologies and syntaxes. These include SVG and MathML and there is an integrated and standalone XSLT tool based on TransforMiiX module that has still to fully mature in the Mozilla content

For users who wish to handle XML as a data format, and not just as a document for display, there are utilities available under the umbrella of XML Extras. These include and XML Serializer, XML Parser (string and stream input source), XMLHttpRequest and SOAP-based RPC. Some are transient and will be phased out by DOM Level 3 implementations.

11. Why Use Mozilla?

The advantages that XML brings to Mozilla are separation of content, functionality and style. It is cross-platform and easily localizable and based on open standards. For the developer, it uses technologies that are familiar to them enabling faster development time with no compilation for UI development. To the user, it promotes customizability, which manifests itself in each of the components including new content, e.g., sidebar panels in the browser, new themes and multiple locales / language packs for your application.

It is being used by many companies and individuals, including the Netscape 6 Browser Suite, the Nokia Media Terminal as an embedded application, ActiveState's Komodo scripting IDE and OEone who have created a full Linux Desktop Environment using the Mozilla framework. There are up to 50 projects on mozdev.org, a site dedicated to the hosting of Mozilla related projects.

12. Resources

Mozilla and XML

• http://www.mozilla.org/newlayout/xml/

• http://www.mozilla.org/projects/xslt/

• http://www.mozilla.org/rdf/doc/

• http://www.mozilla.org/xpfe/

Newsgroups - news.mozilla.org

Supporting Sites

• http://www.mozdev.org

• http://www.mozillazine.org

• http://www.oreillynet.com/mozilla

• http://www.xulplanet.com

Tools - Bonsai. Tinderbox, LXR, Bugzilla

Chat - irc.mozilla.org

Books

• Creating Applications With Mozilla (O'Reilly)

• Essential XUL Programming (Wiley)

Design and Development by deepX Ltd.