XML MATTERS #35: GUIs and XML Configuration Data The Mozilla Project and XUL David Mertz, Ph.D. Browser, Gnosis Software, Inc. May 2004 Over time, XML seems to permeate many niches. One area where XML is used increasingly is in the configuration of GUI interfaces. The Mozilla project has, to some degree, revived the Netscape slogan "The browser is the OS"--at least inasmuch as you can write custom applications using Mozilla's XML-based User Interface Language (XUL) that run without any particular dependency on the choice of underlying operating system. INTRODUCTION ------------------------------------------------------------------------ Both the entire Mozilla application suite and associated spin-offs such as Firefox and Thunderbird are, at heart, applications written using XUL, and XML language for defining user interfaces. The Mozilla project as a whole is built in several layers. At the bottom, is the Gecko Runtime Engine that renders visual elements on screen--especially HTML tags and their associated attributes, children and URL-referenced resources. Many Mozilla applications use XPToolkit as a next layer, which is where XUL is supported; but some applications like the Camino browswer for MacOSX choose instead to use native widgets as an interface to the Gecko engine. Let me back up for a moment, the last paragraph threw out a number of acronyms and funny words that not all readers will be familiar with. To make it simple, what Mozilla does is simply render XML and HTML--really not much more or less than this. All the controls you are use to in a web browser (back button, URL field, bookmarks bar, menus, etc) as well as the content area(s) are, in Mozilla, just renderings of some XUL or HTML data. The same applies to Mozilla's applications for reading news, mail, chat sessions, or editing HTML--it is all simply some rendered XML. Mozilla provides collections of "chrome" in its default applications, but the framework lets you create your own applications or extensions to the Mozilla-provided ones by writing a bit of extra XUL XML. Applications, of course, need program logic to do much. It is quite possible to write an entire Mozilla application using exclusively Javascript for the program logic, with each XUL control activating some configured Javascript function, perhaps passing arguments based on that control (i.e. controls like text fields, pick lists, or scrollbars are used to select specific values rather than merely trigger single actions). But for more advanced applications, the XPCOM interface is a way to let XUL configured interfaces call components written in other programming languages--primarily component written in C++, but other programming languages like Python also have XPCOM bindings. XPCOM, by the way, stands for "Cross Platform Component Object Module" and is analogous to COM on Windows, or to CORBA. Having described the overall framework for developing Mozilla interfaces--XUL makes call to Javascript; Javascript might call C++ components via XPCOM--the rest of this article will look only at the XUL piece of the puzzle. This is a column about XML, after all. In examples, trivial calls to the Javascript 'alert()' function and friend will be used where a more realistic application would call custom functionality. A TOY APPLICATION ------------------------------------------------------------------------ Just to get a feel for XUL code, I wrote the customized Mozilla application 'SimpleApp'. 'SimpleApp' consists of the one XUL file 'SimpleApp.xul' and one external Javascript file 'SimpleApp.js'. All this application does is put a few menus and a few toolbar buttons on the screen, and display an HTML document in the remainder of the screen area. Most of the actions configured in 'SimpleApp' are merely popping up some alert boxes; but one of the toolbar buttons lets you choose the HTML document URL to display. Within the HTML area, you can navigate just as you would in a regular browser: follow links, fill in forms, etc. Let us take a look first at choosing an HTML URL: {Choosing a URL in SimpleApp: http://gnosis.cx/publish/programming/SimpleAppToolbar.png} 'SimpleApp' uses several different types of menus. For a real application, this probably is not the best design. But I wanted to show off the use of both native menus created with '' tags and XUL menus created with '' tags. The latter menus can go anywhere within an applications, including in nested regions or as "popup menus" attached to visible content. However, XUL also lets you create system-style popups using '', which is not demonstrated here (system-style popups are activated with a right-click or shift-click, typically, a '' is attached to text that is displayed in frame). Here is an example of activating an alert dialog from a native Mac OSX menu: {Native Menus in SimpleApp: http://gnosis.cx/publish/programming/SimpleApp.png} The items 'Foo' and 'Bar' behave like regular pull-down menus with child items, though this is not shown in the screenshots. CHECKING OUT THE XUL ------------------------------------------------------------------------ Next thing is to take a look at the XUL that makes up 'SimpleApp'. Like most applications, its root element is ''. However, utilities that are meant simply to enhance the functionality of an existing application such as the Mozilla browser will have a root of ''. One application can contain many overlays. I will break the XUL file into several parts, each with a pretty clear function. You can assemble the pieces back together if you wish. #----------- SimpleApp.xul headers and scripts ------------------# The external file 'SimpleApp.js' just defines one trivial Javascript function 'eye()' that is activated by the toolbar icon of an eye. But in a real application, you would be likely to put a library of useful Javascript functions into such an external file. I also define two simple Javascript functions within the body of the XUL file. #----------- SimpleApp.xul system menu configuration ------------# Next thing, 'SimpleApp' defines a 'File' menu with the child item 'Hello'. One of the screenshots above showed the result of invoking this menu. Now lets see how the window contents are placed: #-------- SimpleApp.xul placement boxes and menu list -----------# A useful way to control the geometry of XUL controls is by nesting them inside variations on boxes, '' and '', or also '' or '' elements. Not shown here is the use of '' elements, that can obtain similar effect. A '' always arranges its content in a common vertical box, the box itself is invisible. Likewise for horizontal '' elements. If you wish, you can add attributes 'height' and 'width' to explicitly size these containers and/or attributes like 'flex', 'autosize' and 'equalsize' to effect the arrangement of boxes within other elements (e.g. inside other boxes). Specifically, the controls for 'SimpleApp' are all put inside a controlling '', with one child '' for the 'Foo' and 'Bar' menus, and another '' to hold the toolbar: #-------- SimpleApp.xul placement boxes and toolbar -------------# The toolbar code is interesting to look at. Mozilla XUL allows for modern toolbar styles that include both direct activation and child pulldowns. The button attached to 'note.gif' is of the pulldown sort, and is in one of the above screenshots. Another thing worth noting is that the actual images on the toolbar are pulled off remote URLs. This is a very simple example of a fully networked application--the application as a whole integrates resources from all over the web (albeit quite simple ones in this case). The final piece of the puzzle is the HTML content we display. To do this, we create an '