Creating Applications with Mozilla

Roll Your Own Browser

by Brian King, coauthor of Creating Applications with Mozilla

The browser is dead. It's a two-dimensional piece of software that is slowing the evolution of the Web.

Are you shocked by these statements as you read this article from the comfort of your browser of choice? Well, you should be, because contrary to what some people lead you to believe, browsers will be around for a while longer. The purpose of this article is to introduce you to the concept of customizing, or creating, your own browser using the wonderful toolkit that is Mozilla.

Why Your Own Browser?

Before proceeding, you should know that this article focuses on the technical issues involved in getting a XUL browser up and running in the application framework. This is distinct from embedding Gecko, which was discussed in a previous article on the Mozilla DevCenter, Let One Hundred Browsers Bloom. Gecko is the Mozilla layout-rendering engine. The merits of having multiple browser projects has been touched on already, so let's look at some of the practical uses that an integrated browser can bring to your application, apart from its traditional use--for Web navigation:

Related Reading

Creating Applications with Mozilla
By David Boswell, Brian King, Ian Oeschger, Pete Collins, Eric Murphy

  • You can create HTML or XML help pages for your application and load them into a ready-made help browser.
  • You can use a previewer to test your XML, HTML, or CSS layout and styling in Gecko, one of the most standards-compliant browsers around.
  • For a slight variation on the last example, you could have miniature versions inline in dialogs to load examples that will change depending on the selection of the user. For example, a font previewer.
  • You can create pop-ups in a window to display Web content.

Of course, when you have the raison d'etre for your browser, you have to start putting the pieces in place to get it running. This will take the form of a full-blown Mozilla application, complete with the XPFE toolkit (XPFE is the user interface component of Mozilla) for building your own UI, or perhaps just to create an add-on to the existing suite, which can be distributed in the form of an XPI. The term "XPI" refers to cross-platform install, the native installer for Mozilla.

The Widgets

To get you started, let's look at two of the most straightforward content widgets available in the Mozilla toolkit, namely the browser and the iframe. These have tags with the same name, <browser> and <iframe>, and are placed in your XUL window or binding. Both are essentially designed for holding Web content, which can be anything from HTML and XML to just text and images in formats recognized by Gecko, such as jpeg, png, gif, and bmp. Here is a look at a browser in its simplest form:

<?xml version="1.0"?>
<?xml-stylesheet href="chrome://global/skin" type="text/css"?>
<window id="browser-window" title="Simple Browser Widget Display"
           width="640" height="480">
<browser src="" flex="1"/>

The code to look out for here is the line with the browser tag, which creates a content area. It is the sole markup in the XUL window. It takes up all the available space because of the flex attribute, and into it you'll load the index page. The result is a window with Web content.

Simple Browser Window

What is missing in the picture and the example code for it is some sort of context. It's lacking an application space and has no accompanying widgets to carry out any complementary functionality for the browser. In traditional browsers, including the Mozilla browser that comes with the application suite, there is a menubar and a toolbar, each containing easy access to functions such as Back, Forward, Reload, View Source, and so on.

The <iframe> widget is a more lightweight version of the <browser>, yet is also useful when your needs are just to display some simple Web content. It was designed to act much like the HTML iframe widget, to be an inner frame within a document. It too has a src attribute to specify the content. It is useful mainly for displaying one-off content such as a preview of content or a results page.

<iframe class="results" id="resultsframe" type="content" src="results.xul" flex="1"/>

Remember that XUL content can be loaded into the content areas, as is the case, for example, in the Mozilla suite global preferences, which has a right frame into which the various preferences panels are loaded when selected.

Pages: 1, 2

Next Pagearrow