Print
Creating Applications with Mozilla

Remote Application Development with Mozilla, Part 2
A Case Study of the Mozilla Amazon Browser (MAB)

by Brian King, coauthor of Creating Applications with Mozilla and Myk Melez
05/02/2003

In our first article we talked about the benefits of remote application development using Mozilla technologies such as XUL and web services support. In this article we present a case study of one such application, the Mozilla Amazon Browser (MAB), a tool for searching Amazon's catalogs.

The Mozilla Amazon Browser is an interesting case study for a number of reasons. First, it's a working prototype application, not an example constructed solely for the purpose of demonstrating the technology. Second, it exercises many areas of Mozilla's support for remote development and thus shows off the capabilities, potential, and limitations of remote XUL applications. Finally, it demonstrates Mozilla's support for web services, an important emerging technology for web application development.

In this article, we will give an overview of MAB (version 0.98, the latest version available at the time of this writing), discuss the steps that author Fabio Serra took to get it running remotely, and outline its structure and organization. We will also explain how the MAB uses Mozilla's built-in web services support to submit a search to the Amazon web service, retrieve the search results, and display them to the user.

Overview

The MAB is a tool for searching the Amazon catalogs and browsing their products. It lets users search for products (by keyword, ASIN/ISBN, UPC code, author/artist, and so on) and retrieve information about each product found, including its title, author/artist, and release date (the latter two for books/music), along with its suggested retail price, Amazon's price, and the price of a used copy sold through Amazon (if available). It also displays comments from other Amazon users about the product.

Related Reading

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

Users can also save and reload searches -- although saved searches do not persist across sessions because the application does not have access to the user's hard drive, and a mechanism for saving searches to a remote server has not been implemented -- and aggregate the results of multiple consecutive searches into a single list.

The UI comprises:

  • A menu bar with options for saving/reloading searches, starting a new search, setting preferences, and getting help.

  • A search form with a menu for selecting the catalog to search, another for selecting the search type (keyword, title, and so on), and a text field for entering the search string.

  • A table of results with columns for product name, catalog, Amazon price, rating, and year released.

  • A series of fields showing detailed information about the selected product, such as manufacturer and prices.

  • An embedded browser widget for displaying user comments.

  • A button for opening the Amazon web page for the selected product.

  • A status bar that displays meta-information about the search, including total products found and the number retrieved.


Main Amazon Browser window

The MAB can be run either in its own window or as a page in a browser window. It can also be installed and run locally, although the local version doesn't currently take advantage of the additional capabilities of local applications, such as persisting information across sessions by saving it to the user's hard drive.

Getting the MAB to Run Remotely

Getting the MAB to run remotely was relatively straightforward. First, since Mozilla does not recognize remote DTDs (used in Mozilla applications for localization), localized strings had to be added to the MAB's XUL file by embedding ENTITY elements into an inline DOCTYPE declaration in the file:

<!DOCTYPE window [
 <!ENTITY windowTitle.label "M A B">
 <!ENTITY file.label "File">
 ...
]
>

While not nearly as effective as encapsulating the strings in a separate DTD file, this approach does make it possible to localize the application by creating a copy of the XUL file for each localization and using HTTP content negotiation or explicit links to provide access to localized versions.

Second, because remote XUL cannot refer to supporting CSS and JS files using chrome URLs (URLs to local XUL application files installed into the browser's chrome/ directory), the MAB's XUL file uses relative URLs to refer to those files:

<?xml-stylesheet href="../skin/mab.css" type="text/css"?>
   ...
<script src="js/mab.js" type="application/x-javascript"></script>

The only server configuration necessary was to set the Apache web server on the site hosting the application to serve XUL files with the appropriate MIME type:

AddType application/vnd.mozilla.xul+xml .xul .XUL 

The application is distributed via a web page that offers a standard HTTP link to load the application as a page in a browser or a JavaScript URL with the special chrome flag (for indicating that the window is for a Mozilla-based application) to load the application in its own window:

javascript:window.open("content/mab.xul", "MAB", "chrome,centerscreen,resizable");

Both approaches for loading the application offer the same functionality but very different user experiences. The page-in-browser approach resembles a web application, while the separate-window approach is more like a client-server application. Mozilla supports both methods, and this flexibility allows application developers to choose the style that best suits their users. With the client-server-like approach, Mozilla even allows applications with the appropriate privileges to place an alias on the user's desktop for launching the application (although the MAB doesn't take advantage of this), for example, by specifying the following command line:

mozilla -chrome http://www.infodraft.com/~faser/mab/content/mab.xul

Application Structure

MAB application files are organized into a directory tree that is much like packages in the Mozilla chrome directory. A top-level mab/ directory contains content/, locale/, and skin/ subdirectories, with the XUL and JavaScript files in the content/ and content/js/ subdirectories and the CSS stylesheets in skin/:

mab/
  content/
    js/
  locale/
  skin/

Although the MAB has a locale/ directory, it does not use it to provide localized versions of the application, since Mozilla does not recognize remote DTD files.

The content of those files is also almost exactly like a local XUL application. The main XUL file, content/mab.xul, starts with the XML declaration, stylesheet processing instructions, and DOCTYPE declaration (for localization), which are common to most XUL files:

<?xml version="1.0" encoding="UTF-8"?>
   ...
<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
<?xml-stylesheet href="chrome://navigator/skin/" type="text/css"?>
<?xml-stylesheet href="../skin/mab.css" type="text/css"?>
<!DOCTYPE window [
   ...
]
>

The rest of the document comprises XUL tags that define the structure and functionality of the user interface. Here is the basic structure (reformatted, annotated, and with non-essential tags removed for clarity):

<window...> (container for all XUL; defines the application window or browser page)
  <script src="js/mab.js" type="application/x-javascript"></script> 
     (code that does the work)    
  <commandset>
     ...   (actions that can be triggered by user input) 
  </commandset>
  <keyset>
     ...   (keyboard shortcuts for various actions) 
   </keyset>
  <toolbox> (container for the menus and search toolbar)
     <menubar...>...</menubar> (menus)
     <toolbar>...</toolbar> (search form)
  </toolbox>    
  <hbox...> (main body of application; displays data about search results)  
     <vbox...>
        <tree...>...</tree> (search results as tree of products)
        <hbox>... 
           <grid>...</grid> (details--name, author, and so on--of selected product)
           <image/> ... (photo of selected product)
        </hbox>...
        <hbox...>...</hbox> (prices of selected product)
     </vbox>...
     <iframe.../> (HTML-formatted comments about the selected product)
  </hbox>...
  <statusbar...>...</statusbar> (search status)
</window>

The main JavaScript file, content/js/mab.js, contains the code that controls the MAB's behavior. It includes functions to:

  • Initialize and set the application state (main, changeLocale, changeStatus, setDebugMode, setFocusOnList, printDebug, setMeter).

  • Get data from the search form (getSearchBy, getProductLine, getInput).

  • Initialize and reset the user interface for a new search (removeRows, clearAll, clearTextBox, clearStatusBar, clearComment, clearImage, clearDebug).

  • Start/save/retrieve/print searches (newDoc, saveDoc, listSavedDoc, openDoc, printDoc).

  • Handle user requests (nextRecord, showDetail,getComment, search, goAmazon).

  • Communicate with Amazon (connection).

  • Store/display search results (AmazonResult.prototype..., .getLastPage, .setLastPage, .setPK, .checkPK, .getNrRecord, .getNrAmazonResult, .parseResponse, .createTree, .getDetail, .getAmazonUrl, .getReviews, .prettyPrint, .getRecordRef).

The MAB primarily uses the default browser stylesheets to style its appearance, so its own stylesheet is minimal and limited to tweaking the appearance of elements with minor changes to borders, margins, padding, colors, and fonts. In addition to these main files, there are a few other XUL, JavaScript, and CSS files to handle additional windows, such as the help and preferences windows.

Note that all of the XUL, JavaScript, and CSS used in the application is almost exactly the same as would be used to build a local XUL-based application, and in fact the MAB has been packaged for local installation without any changes to its file structure and code. Even the advanced features of the Mozilla framework that the MAB doesn't use, such as XBL, RDF, and XUL templates, work the same or similarly in remote applications as they do in local ones, although there are a few bugs specific to remote applications. Unless an application needs to save data to the local hard drive or otherwise get access to restricted system resources, getting it to work remotely requires little modification.

Pages: 1, 2

Next Pagearrow