Table of Contents

Copyright

Preface

1. Mozilla Background

2. The State of Mozilla

3. Who Should Read This Book

4. Platform and Applications

5. Structure of the Book

6. How This Book Was Written

7. Mozilla Licensing Information

8. Conventions

9. Comments and Questions

10. Acknowledgments

1. Mozilla as Platform

1.1. Visualizing Mozilla's Front End

1.1.1. XPFE Framework

1.1.2. Comparing XPFE and DHTML

1.1.3. Components of a Mozilla Application

1.2. Setting Up Your System

1.3. Mozilla Applications

1.3.1. Applications as Web Pages

2. Getting Started

2.1. Simple XUL Example

2.2. Basic XUL Concepts

2.2.1. The XUL File Format

2.2.2. Conventions

2.2.3. The XUL Namespace

2.2.4. Basic XUL Layout

2.2.5. Using XUL Windows

2.3. Making Mozilla Work for You

2.3.1. Importing Resources from Mozilla

2.4. Displaying XUL Files as Chrome

2.5. Creating a Package

2.5.1. Architecture of a Chrome Package

2.5.2. Package Components

2.5.3. Directory Structure

2.5.4. Package Manifests

2.5.5. Separating the Files

2.5.6. Registering a Package

2.6. Launching the Application

2.6.1. Windows launch

3. XUL Elements and Features

3.1. The XUL Document Object

3.1.1. XUL Parsing and the Document Object Model

3.2. Application Windows

3.2.1. Dialogs

3.2.2. Pages

3.2.3. Wizards

3.3. Application Widgets

3.3.1. The Toolbox

3.3.2. Selection Lists

3.4. Tabular and Hierarchical Information

3.4.1. List Boxes

3.4.2. High Performance Trees

3.4.3. Grid

3.5. Words and Pictures

3.5.1. Text Input

3.5.2. Text Display

3.5.3. Images

3.6. Form Controls

3.6.1. Radio

3.6.2. Checkbox

3.6.3. Buttons

3.7. Widget Interaction

3.7.1. Broadcaster and Observers

3.7.2. Commands

3.8. Content Panels

3.8.1. Browser and IFrame

3.8.2. Editor

3.9. The Box Model

3.9.1. Box Attributes

3.9.2. Box-Like Containers

3.9.3. Additional Box Features

3.9.4. Stacks and Decks

3.10. XUL Attributes

3.10.1. Stretchiness

3.10.2. Style

3.10.3. Persistence

3.10.4. The debug Attribute

3.11. Overlays

3.11.1. How to Use Overlays

3.11.2. Content Positioning

3.12. The Extras

3.12.1. Tooltips

3.12.2. Progress Meter

3.12.3. Links

3.13. Building the Application Shell

4. CSS in Mozilla Applications

4.1. Interface Basics

4.1.1. Skins Versus Themes

4.1.2. Limitations of a Skin

4.1.3. Theme Abstraction (or Building Good Skins)

4.1.4. Cross-Platform Interface Considerations

4.2. Introduction to CSS in Mozilla

4.2.1. Basic XUL + CSS Interaction

4.2.2. Stylesheet Syntax

4.2.3. Special Mozilla Extensions

4.2.4. Referencing Images in CSS

4.2.5. Menu Skinning

4.3. Mozilla Skins

4.3.1. CSS and Skin Hierarchies

4.3.2. Basic Skin Structure

4.3.3. The Modern and Classic Themes

4.3.4. Skin Files

4.4. Creating New Skins

4.4.1. Importing the Global Skin

4.4.2. Getting Started with Custom Styles

4.4.3. Creating Styles for the xFly Buttons

4.4.4. Describing the Skin in RDF

4.5. What Is Possible in a Skin?

4.5.1. Binding New Widgets to the Interface Using XBL

4.5.2. User Stylesheets

4.5.3. Theme Security Restrictions

5. Scripting Mozilla

5.1. Faces of JavaScript in Mozilla

5.2. JavaScript and the DOM

5.2.1. What Is the DOM?

5.2.2. The DOM Standards and Mozilla

5.2.3. DOM Methods and Properties

5.3. Adding Scripts to the UI

5.3.1. Handling Events from a XUL Element

5.3.2. Events and the Mozilla Event Model

5.3.3. Changing an Element's CSS Style Using JavaScript

5.3.4. Creating Elements Dynamically

5.3.5. Sharing Data Between Documents

5.4. XPConnect and Scriptable Components

5.4.1. What Is XPConnect?

5.5. JavaScript Application Code

5.5.1. JavaScript Libraries

6. Packaging and Installing Applications

6.1. Packaging and Installing Overview

6.2. Packaging Mozilla Applications

6.2.1. Package Manifests

6.2.2. Registering Packages

6.2.3. Creating a Package

6.2.4. The Chrome Registry

6.3. Installing Mozilla Applications

6.3.1. The XPI File Format

6.3.2. Installation Scripts

6.3.3. XPInstall

6.3.4. Uninstalling Applications

6.4. Finishing Things Up

6.4.1. Creating the xFly XPI

6.4.2. Adding the Installation Script

6.4.3. Web Page Installer

6.5. Extra Tricks for Customizing an Application

6.5.1. Icons

6.5.2. Splash Screen

7. Extending the UI with XBL

7.1. What Is XBL?

7.1.1. XBL Terminology

7.1.2. An XBL Document

7.1.3. Namespaces and XBL

7.1.4. XBL and HTML

7.2. Anatomy of a Binding

7.2.1. CSS Attachment

7.2.2. The XBL Content Element

7.2.3. The Implementation Element

7.2.4. Handlers

7.2.5. Style

7.3. Adding Behavior to Bindings

7.3.1. Binding Methods

7.3.2. Binding Properties

7.4. XBL and the DOM

7.4.1. The XBL DOM Interfaces

7.4.2. Binding Parents

7.4.3. Accessing Anonymous Nodes

7.4.4. Extra Binding Content and Insertion Points

7.5. Inheritance

7.5.1. Binding Inheritance

7.5.2. Attribute Inheritance

7.5.3. Implementation Inheritance

7.6. Event Handling

7.6.1. The Time and Venue

7.7. Resources for Bindings

7.7.1. Stylesheets in XBL

8. XPCOM

8.1. What Is XPCOM?

8.1.1. What Is a Component?

8.1.2. XPConnect and the Component Object

8.1.3. XPCOM Interfaces and the IDL

8.1.4. XPCOM Type Libraries

8.1.5. XPCOM Identifiers

8.1.6. Component Manager

8.1.7. Getting and Using XPCOM

8.2. Creating XPCOM Components

8.2.1. Creating a JavaScript XPCOM Component

8.2.2. Compiling the Component

8.2.3. Testing the Component

8.2.4. Useful C++ Macros and Types

8.2.5. C++ Implementation of nsISimple

8.2.6. The nsSimple module code

8.2.7. Other Languages for XPCOM

8.2.8. XPCOM as an Open Cross-Platform Solution

9. XUL Templates

9.1. Understanding XUL Templates

9.1.1. Basic template structure

9.2. Enhancing XUL Templates

9.2.1. Nested Content Sample

9.2.2. Using Data for Style

9.2.3. Tree Template

9.2.4. Multiple Rules Tree

9.2.5. Multiple Rules Menubar

9.3. Using Other XUL Tags for Templates

10. RDF, RDF Tools, and the Content Model

10.1. RDF Basics

10.1.1. RDF Data Model

10.1.2. RDF Syntax

10.1.3. Building an RDF File from Scratch

10.2. The Mozilla Content Model

10.2.1. Datasources

10.3. RDF Components and Interfaces

10.3.1. What Is an RDF Component?

10.3.2. What Are RDF Interfaces?

10.3.3. nsIRDFService

10.3.4. nsIRDFCompositeDataSource

10.3.5. nsIRDFDataSource

10.3.6. nsIRDFRemoteDataSource

10.3.7. nsIRDFPurgeableDataSource

10.3.8. nsIRDFNode, nsIRDFResource, and nsIRDFLiteral

10.3.9. nsIRDFContainerUtils

10.3.10. nsIRDFContainer

10.3.11. nsIRDFXML Interfaces

10.4. Template Dynamics

10.4.1. Template Dynamics in XBL

10.5. JSLib RDF Files

10.6. Manifests

10.6.1. RDF and Dynamic Overlays

11. Localization

11.1. Localization Basics

11.1.1. For the Developer

11.1.2. Files and File Formats

11.1.3. UI Aesthetics and Principles

11.2. DTD Entities

11.2.1. Inserting Entities

11.2.2. External and Inline Entities

11.3. String Bundles

11.3.1. Inside a Bundle

11.3.2. String Bundle Methods and Properties

11.3.3. Creating Your Own Bundle

11.4. Programming and Localization

11.4.1. Naming Conventions

11.4.2. Breaking Up the Text

11.4.3. Anonymous Content and Locale

11.4.4. Localizable Resources in HTML

11.4.5. Localizable Resources in RDF

11.5. The Chrome Registry and Locale

11.5.1. The Directory Structure

11.5.2. Interaction with the Chrome Registry

11.5.3. Distribution

11.6. Localization Issues

11.6.1. XPFE and Unicode

11.6.2. Language Quirks

12. Remote Applications

12.1. Directions in Remote Application Development

12.2. Basic Remote Application Example

12.2.1. Case Study: Snake (a.k.a. Hiss-zilla)

12.3. Setting Up XPFE for Remote Applications

12.3.1. Server Configuration

12.4. Generated Content

12.4.1. Generating Content with Scripting Languages

12.4.2. Generating Content from a Database

12.4.3. Localizing Remote Applications

12.5. Certificate Authorities and Digital Signatures

12.5.1. Mozilla Network Security Services (NSS)

12.5.2. CA Certificates, Signing Certificates, and the Certificate Chain

12.5.3. Setting Up a Certificate Authority

12.5.4. Issuing Signing Certificates

12.5.5. Distributing Distribution Certificates

12.6. Creating Signed Remote Applications

12.6.1. certs.mozdev.org CA Certificate

12.6.2. Signing Certificates

12.6.3. Creating and Signing the Application

12.6.4. Receiving a Signed Application

12.7. Expanded Privileges in Mozilla

12.8. Signed Remote Snake Game

12.8.1. How to Expand Mozilla to Full Screen

12.9. Mozilla's XML Extras and SOAP

12.9.1. Mozilla, SOAP, and .NET

12.9.2. Setting Up a .NET Web Service

12.9.3. .NET WSDL

12.9.4. SOAP Call XML Formats

12.9.5. Adding SnakeService SOAP to Snake

12.9.6. Make SOAP Functions Work in XUL Documents

12.9.7. Examining SOAP Functions for Snake

12.10. Looking Forward

A. Getting and Building the Mozilla Source

A.1. Getting the Source Code

A.1.1. Downloading the Source with FTP

A.1.2. Downloading the Source with CVS

A.1.3. Working with Branching

A.2. Building the Source Code

A.2.1. Unix Environment

A.2.2. Windows Environment

A.2.3. Macintosh Environment

B. Development Tools

B.1. XULKit

B.1.1. new-from-template.pl Script

B.1.2. makexpi.pl Script

B.1.3. Using XULKit

B.2. Patch Maker 2.0

B.2.1. CVS Mode

B.2.2. Build Mode

B.3. The DOM Inspector

B.4. The Component Viewer

B.5. Venkman: The JavaScript Debugger

B.6. MozillaTranslator

B.7. Missing Parts

B.7.1. Visual XUL Editors

B.7.2. Toolkits and Libraries

B.7.3. Integrating the Pieces

C. Programmer's Reference

C.1. XUL Element Set

C.2. XBL Element Set

C.3. Event Attributes

Colophon

List of Tables

3-1. Main features of the tree

3-2. Tree views

3-3. Button types

3-4. Common box attributes

4-1. Relational selectors

4-2. CSS spacing and layout properties

4-3. The position property

4-4. Mozilla CSS extensions

5-1. JSLib classes

6-1. Install object methods

6-2. InstallTrigger interface showing the role of the InstallTrigger object in the overall installation process

8-1. The IUnknown interface

8-2. The nsISupports interface

8-3. Special XPCOM attributes in Python

9-1. Output of each template iteration

9-2. Scenarios used for building template rules

10-1. Synonyms in RDF

10-2. Types of datasources

10-3. Mozilla's built-in RDF interfaces

11-1. Entity definitions for the XUL menu

12-1. Expanded privileges available to signed scripts

12-2. Expanded privileges available to signed scripts

A-1. Platform tools used to build the Mozilla source code

A-2. Windows environment variables used to build Mozilla

A-3. Make flags

B-1. Options for the new-from-template.pl script

B-2. Options for the makexpi.pl script

B-3. Patch Maker's CVS mode commands

C-1. Common XUL element attributes

List of Figures

1-1. XPFE framework

1-2. Comparison of DHTML and XPFE

1-3. ChatZilla, an IRC chat client created by using Mozilla

1-4. The Mozilla browser rendering itself

2-1. The first Hello xFly example

2-2. The second Hello xFly example loaded in the browser

2-3. The second Hello xFly example launched in its own window

2-4. A sample package layout in the directory system

2-5. xFly package directory structure

2-6. Modified shortcut properties

3-1. Preferences panel loaded as a page

3-2. Application menu bar

3-3. Visual comparison of menu widgets

3-4. Listbox

3-5. Multilevel tree hierarchy

3-6. Autocomplete for Open Web Location

3-7. Checkbox widget

3-8. menu-button for browser's back functionality

3-9. Default box positioning

3-10. Box packing and alignment effects

3-11. Text stacked on an image

3-12. xFly example viewing application

4-1. Scrollbars on Windows and on the Macintosh

4-2. The Open Web Location dialog in Windows and the Macintosh

4-3. The different states for buttons in the Modern theme

4-4. Composite styles for the reload button

4-5. The contents of the modern.jar file

4-6. XUL file and skin loading

4-7. Classic and Modern Navigation toolbars

4-8. Stylesheet additions to a XUL file

4-9. XUL button with no style

4-10. Modern menu button

5-1. Scripting in Mozilla

5-2. Toggling the state of menu items in xFly

5-3. Event capturing

5-4. How XPConnect fits into the application model

6-1. Mozilla packaging components

6-2. Package interaction overview

6-3. xFly item in Tools menu

6-4. Installation process overview

6-5. Simplest XPI archive

6-6. Windows taskbar with Mozilla icon

6-7. Mozilla's splash screen

7-1. Mozilla XBL binding structure

7-2. CSS binding attachment components

7-3. The inputfield alone in the XUL document

9-1. DOM representation of XUL template generation

9-2. View of XUL tree in Mozilla

9-3. Listbox and tree template

9-4. Tree template with hyphen rule

9-5. Menubar template with menus

10-1. Simple labeled-directed graph

10-2. Resource to literal relationship

10-3. RDF Graph with five nodes

10-4. Namespaces applied to Figure 10-3

10-5. The first statement of the graph, with labeled parts

10-6. The second statement of the graph, with labeled parts

10-7. The third statement of the graph, with labeled parts

10-8. The full graph

10-9. Diagram of Mozilla's content model

11-1. Localized menus in English and Spanish

11-2. Locale's placement in typical chrome layout

12-1. Distributed remote Mozilla application

12-2. Remote XUL file-accessing skin

12-3. Hiss-zilla, a remote game

12-4. A Netscape Object Signing certificate chain

12-5. Downloading a certificate window

12-6. Certificate manager with a certs.mozdev.org CA certificate

12-7. SignTool's processes for creating a signed application

12-8. Receiving a signed application

12-9. Snake game in full-screen mode on Windows

12-10. Result of using the GetScore function

A-1. Mozilla Cross Reference code browsing tool

B-1. The DOM inspector interface

B-2. An interface displayed in the Component Viewer

B-3. The JavaScript Debugger

B-4. Chrome view in MozillaTranslator

List of Examples

2-1. Hello xFly

2-2. The XUL namespace declaration

2-3. Mixed namespaces in an XML document

2-4. Sample XUL window

2-5. chrome/xfly/content/contents.rdf file

2-6. chrome/xfly/skin/contents.rdf file

2-7. chrome/xfly/locale/contents.rdf file

2-8. The contents of the xfly.css file

2-9. XUL using external style data

2-10. XUL using an external script

2-11. The contents of the xfly.js file

2-12. The contents of the xfly.dtd file

2-13. XUL using an external DTD file

2-14. Tree structure of a completed sample xFly package

2-15. Additions to the installed-chrome.txt file

3-1. XUL dialog

3-2. XUL page

3-3. A XUL wizard

3-4. Toolbar with buttons and spacing

3-5. Application menu bar

3-6. A sample menu

3-7. Context menu using pop up

3-8. XUL menu list

3-9. Listbox widget

3-10. Tree base model

3-11. Multilevel tree content view

3-12. XUL grid

3-13. Text autocomplete

3-14. A radio group choice of options

3-15. Shortcut keys with command observers

3-16. Tabbed panels

3-17. A deck with three image layers

3-18. Deck layer switching

3-19. Content positioning in a stack

3-20. Flexible buttons

3-21. Positioning attributes

3-22. xFly application main workspace

3-23. Example tree in the xFly application

4-1. Class selector in CSS

4-2. Attribute selector in CSS

4-3. !important keyword in CSS

4-4. Image in CSS

4-5. Mixing CSS and XUL

4-6. CSS for print button in navigator skin

4-7. CSS Import statements in global skin

4-8. CSS information from communicator.css

4-9. CSS rules for xFly window

4-10. Custom styles for buttons

4-11. Skin manifest for the xFly sample

4-12. Manifest for the communicator package of the modern skin in Mozilla

4-13. CSS and XBL example

4-14. userChrome.css style rules

5-1. Printing element properties to the console

5-2. Printing the window properties

5-3. Adding toggle functionality to xFly

5-4. Adding Toggle menus to xFly

5-5. Basic event handler attributes

5-6. Getting event handler attributes from an element

5-7. Event propagation

5-8. stopPropagation( ) event function

5-9. Dynamic menu generation

5-10. Scriptable component example

5-11. Scripting components from HTML

6-1. Package installation script

6-2. Simple theme package manifest

6-3. Locale package manifest

6-4. manifest.rdf describing the XMLTerm extension

6-5. The xFly overlay

6-6. Overlay information in the manifest

6-7. Overlays in navigator.xul

6-8. Top level of the browser.xpi archive

6-9. Simple install script

6-10. Script that explicitly prefixes the Install object

6-11. A more complicated install script

6-12. Trigger script on a web page

6-13. Scriptless install of a JAR

6-14. Getting the operating system in an install script

6-15. install.log

6-16. Common XPInstall functions

6-17. Install script callback

6-18. Non-Mozilla software installation script

6-19. Package metadata in the xFly manifest

6-20. xFly installation script

6-21. Web page trigger

7-1. XBL implementation element

7-2. An XBL property setting and getting a value

7-3. Performing a Google search when setting a property

7-4. Accessing a bound document from a binding

7-5. Selective inclusion of child content in a binding

7-6. Binding inheritance

7-7. Inheriting XUL widget characteristics using extends

7-8. XBL attribute inheritance

7-9. Inheritance of behavior between bindings

8-1. Using an XPCOM object in script

8-2. progIDs

8-3. QueryInterface method for nsISimple interface

8-4. JavaScript implementation of nsISimple

8-5. Scripting the “simple” component in xpcshell

8-6. Reference implementation of QueryInterface

8-7. Platform macros in xpcom/base/nscore.h

8-8. NS_IMETHOD macro

8-9. Manual reference counting using raw pointers

8-10. Using nsCOMPtr in your code

8-11. nsISimple header file generated by xpidl compiler

8-12. The component header file nsSimple.h

8-13. nsSimple.cpp

8-14. nsSimpleModule.cpp

8-15. Sample Makefile

8-16. Sample use of component in xpcshell

8-17. Example 8-17: Testing for nsresults from component methods

8-18. Sample Python component implementation

8-19. IDL for the Python component

8-20. Using the Python component in script

9-1. Simple XUL template in a listbox element

9-2. Basic structure of a XUL template

9-3. Hardcoded representation of generated XUL

9-4. XUL tree template in Figure 9-3

9-5. Simplified version of 10-4 RDF data

9-6. Tree template code of Figure 9-3

9-7. Tree template with rules

9-8. Menubar template with three rules

9-9. Template implemented in a box with buttons as content

10-1. Simple RDF file with “fly” namespace

10-2. RDF root sequence

10-3. The Horse sequence

10-4. Entire RDF file

10-5. Content model of email datasources

10-6. RDF-specific components built into Mozilla

10-7. Creating a root node

10-8. Manipulating datasources

10-9. Parse an RDF/XML string into a datasource

10-10. Setup nsIRDFXMLSink with event handlers

10-11. Binding with in-memory datasource and <listbox> template

10-12. Creating and modifying an RDF file using JSLib

10-13. Initialization

10-14. Data updating

10-15. Skin manifest

10-16. Overlay for a sample application menu

10-17. Overlay for an xFly menu item in the browser

11-1. XUL menu with entity references for text and accesskeys

11-2. The Editor's Doctype definitions

11-3. String bundles used by the Mozilla browser

11-4. Creating the bundle via XPConnect

11-5. Using multiple <description> elements

11-6. Using the HTML break tag

11-7. Binding with attribute inheritance

11-8. RDF Description node with localizable text

11-9. The locale XPI install script, install.js

11-10. Locale-switching script

12-1. Remote XUL example

12-2. Enabling universal XPConnect

12-3. A sample static XUL file

12-4. Using PHP to generate the correct XUL MIME type

12-5. A simple Perl-generated XUL file

12-6. A Python-generated dynamically updated form

12-7. SQL script with User and Project data

12-8. XUL generated from database

12-9. Creating a root certificate

12-10. Creating a distribution certificate

12-11. Create a signing certificate

12-12. Sample redirect into a signed application

12-13. Function for switching screen modes

12-14. Minimal .NET web service

12-15. Abbreviated WSDL as produced by .NET web service.

12-16. XML format for SOAP calls of Mozilla

12-17. .NET format for SOAP calls of Mozilla

12-18. Preloading scores.js into cache with an HTML association

12-19. SaveScore SOAP function

12-20. Code for GetScore and GetHighScores

B-1. Sample application template

B-2. Sample XPCOM component template

B-3. makexpi.conf file

Get Creating Applications with Mozilla now with the O’Reilly learning platform.

O’Reilly members experience live online training, plus books, videos, and digital content from nearly 200 publishers.