Remote Application Development with Mozilla, Part 2
by Brian King, coauthor of
Creating Applications with Mozilla and Myk Melez
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.
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.
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
ENTITY elements into an inline
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:
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
chrome flag (for indicating that the window is for a Mozilla-based application) to load the application in its own window:
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
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):
Initialize and set the application state (
Get data from the search form (
Initialize and reset the user interface for a new search (
Start/save/retrieve/print searches (
Handle user requests (
Communicate with Amazon (
Store/display search results (
Pages: 1, 2