Creating Applications with Mozilla

Using XUL, JavaScript, and CSS Creating Applications with Mozilla David Boswell, Brian King, Ian Oeschger, Pete Collins & Eric Murphy Creating Applications with Mozilla David Boswell, Brian King, Ian Oeschger, Pete Collins, and Eric Murphy Beijing • Cambridge • Farnham • Köln • Paris • Sebastopol • Taipei • Tokyo Chapter 2 CHAPTER 2 Getting Started To help you start creating applications as quickly as possible, this chapter presents two “Hello World” examples that demonstrate the beginning stages of Mozilla application development. The first example is a simple XUL file that is loaded into the browser window. This example is then expanded on by adding additional features to the XUL file, such as imported stylesheets and JavaScript functions. The second “Hello World” example shows how to turn files like these into packages, which are the modular, bundled sets of files that fit together to make Mozilla applications or new modules for the Mozilla browser. These examples provide a context for discussing the development of Mozilla applications. The first example focuses on creating and editing the basic file types, and the second focuses on the organization and distribution of applications on the Mozilla platform. Simple XUL Example Like all good “Hello World” applications, Example 2-1 shows one of the simplest possible examples of XUL. Although it is small, it demonstrates some important aspects of XUL programming, including the use of event handlers to add behavior and the use of a box to lay out elements properly within the window. This example also provides a context for discussing more general features of the language, such as the file format, the namespace, and some XUL programming conventions. Example 2-1. Hello xFly <?xml version="1.0"?>  <window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <box align="center"> <button label="hello xFly" onclick="alert('Hello World');" /> </box> </window> 9 This is the Title of the Book, eMatter Edition Copyright © 2002 O’Reilly & Associates, Inc. All rights reserved. Use your text editor to save the code in Example 2-1 in a file called hello.xul and then load the file in Mozilla (you can do this by using File ➝ Open File from the browser window and browsing to where you saved the file). You should see a button in the upper-left corner of the browser window that brings up an alert box when clicked. Figure 2-1 shows an example of the alert pop-up window that appears. Figure 2-1. The first Hello xFly example The next few sections describe this sample file in more detail. The covered topics include the file itself, the syntax of the markup, XUL namespaces, and the basic layout of a XUL file. The xFly Examples The best way to understand the possible uses of the Mozilla framework is to look more closely at a number of various existing applications. This book highlights several Mozilla development projects, such as ChatZilla and JSLib, as examples of how some people have already started using Mozilla’s XPFE technologies. Along with these applications, you’ll note the use of the name “xFly” in many examples in this chapter and elsewhere in this book. The xFly examples are used throughout Chapter 2 to Chapter 6 to show how to create and package a simple Mozilla application. This simple application is useful because it provides a place to start exploring the new information that you will learn about in this book. As you read more about XUL, CSS, JavaScript, and the other parts of Mozilla’s development framework, you can create and edit the xFly files to see how these technologies work in practice. 10 | Chapter 2: Getting Started This is the Title of the Book, eMatter Edition Copyright © 2002 O’Reilly & Associates, Inc. All rights reserved. Basic XUL Concepts You have already seen many of XUL’s basic features at work. When you load the example in the previous example, the browser identifies it as a XUL file, parses the data, creates a new window and draws the button widget, and executes the function you’ve defined when the button is clicked. These activities are part of the basic and often transparent interaction between your application files and Mozilla. However, the format of your XUL files, their syntax and namespace, the XUL layout, and the windowing system are all basic to success- ful XUL programming. The XUL File Format A XUL file is a simple text file that contains proper XML syntax and has a .xul file extension. Mozilla expects to draw UI widgets when it encounters a file with a .xul extension or when it encounters the XUL namespace in other markup files that it rec- ognizes, including HTML and XML. The MIME type registered for XUL files is application/vnd.mozilla.xul+xml. When editing and using XUL files locally, you shouldn’t need to worry about setting this on your computer; however, sometimes you may need to set the MIME type, such as when you host XUL files on a server. Chapter 12 provides additional information about how you can set the correct file type for your system. Conventions XUL has to follow certain conventions (as does XHTML or any other XML-based file) in order to be valid. Mozilla generates an error when it encounters an invalid XUL file. The first thing required in a XUL document is the XML declaration. <?xml version="1.0"?> Any comments used to introduce your file can begin on the line after the declaration. Comments in XUL follow the same format used in HTML and XML, delimited by . All tag sets must be closed. Empty tags are allowed for some elements, such as the <label> element, that are used without nested elements or content. Note that a trail- ing slash at the end of the tag is required to denote an empty element. <label value="Getting Started" /> Another thing to remember is that XUL is case-sensitive. Closing a XUL <window> tag with </Window> renders it invalid. Basic XUL Concepts | 11 This is the Title of the Book, eMatter Edition Copyright © 2002 O’Reilly & Associates, Inc. All rights reserved. These conventions ensure that the rendering engine can parse the XUL file success- fully and display the elements defined there. Mozilla does not validate XML files, such as XUL, and it does not resolve externally parsed entities, but it does check for document well-formedness. Following the XML specification, Mozilla ignores well-formed tags that it does not recognize, which can give your applications extra flexibility, particularly as you begin to use technologies such as XBL. But it can also make debugging a little more diffi- cult, as when you create an element named <botton> and don’t see why your XUL button doesn’t have the typical borders or three-dimensional style. A good practice to follow when creating XUL files is to use comments, copious whitespace, indentations (but not tabbed indentations where you can avoid them), and XUL widgets you are familiar with. The XUL Namespace Like other markup vocabularies, XUL uses a namespace declaration to define the particular elements that may be included in a valid file. Example 2-2 shows a sample of the required namespace declaration. The namespace is an attribute of the root window element. The lack of any suffix on the XML namespace declaration (i.e., xmlns:xul) indicates that XUL is the default namespace for this file. Example 2-2. The XUL namespace declaration <window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" /> <description>Illustrating the XUL namespace</description> </window> If you want to include XUL content in documents that use other types of markup, you need to declare more than one namespace. Common namespace declarations for getting other language elements into your code include HTML and RDF, but you can invent your own as well. If you wanted to put the button from Example 2-1 into a vanilla XML file, for example, you could place it into an XML document by using the xmlns:xul attribute, as shown in Example 2-3. Example 2-3. Mixed namespaces in an XML document <flies:flies xmlns:flies="http://www.flies.com/come.fly.with.me.xml#" xmlns:html="http://www.w3.org/1999/xhtml" xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <flies:wings> <xul:box align="center"> <xul:button label="hello xFly" onclick="alert('hello.');" /> </xul:box> <html:img src="wings.jpg" /> </flies:wings> </flies:flies> 12 | Chapter 2: Getting Started This is the Title of the Book, eMatter Edition Copyright © 2002 O’Reilly & Associates, Inc. All rights reserved. This file has three types of content: XUL, HTML, and customized markup called flies. When you use mixed namespaces, you have to prefix the XUL elements with xul: to distinguish them from markup in other namespaces, as with the xul:box and xul:button shown in Example 2-3. Basic XUL Layout Example 2-1 features some very common XUL elements. In this section, each element is dissected to show what it does and how it interacts with other elements. The <window> element is the root of individual primary XUL documents (in contrast to dialogs that pop up from windows, which can use <dialog> as the root, and XUL documents loaded within other XUL containers, which can use <page>). As in HTML, the root element defines the document into which all elements are drawn, but in XUL, that document is a piece of an application interface and not a web page. We’ll have more to say about the window and some of its features in the second example.

Load more