2.4. Displaying XUL Files as Chrome

Figure 2-2 shows the XUL file in Example 2-4 loaded into the browser's main content area. The example features a label widget and an image, both situated within a vbox that lays them out properly in the available space. These widgets make up the chrome of your application, the Mozilla user interface that can refer to itself and its resources with the special chrome:// URL.

This example is starting to show off some of the nice features of XPFE programming, but it still isn't an application yet. Among other things, you probably don't want your code to live inside the browser window forever. As it grows, you may also want to divide it into sensible parts -- a XUL file, a separate stylesheet, and a script file, for example. The rest of this chapter explains how to organize and package the code in Example 2-4 and launch it as a standalone window by using the -chrome option when launching Mozilla.

Launching a XUL file by using the chrome switch requires that you register your application in the chrome registry so that Mozilla sees and recognizes it. The Section 2.5.6 section later in this chapter provides more information about the chrome environment and how to register this sample application.

Although this example hasn't been registered yet, we want to give you a preview of what it will look like when launched in a standalone window so you can compare it with how the same XUL file looks when loaded into the browser window. When you do launch the example by using the -chrome option (as described later in this chapter in the section Section 2.6), you will see the window displayed in Figure 2-3.

Using the -chrome option tells Mozilla to display the specified file (in this case, the code from Example 2-4) as a standalone application rather than as content within a browser window. The file itself is the same regardless of how it is loaded, but the results differ depending on what you tell Mozilla to do with the file.

Displaying a XUL file in its own chrome window makes it more independent and breaks the link to the browser content area that is present when you use the File > Open File... method. Launching standalone windows, accompanied by the JavaScript window.openDialog function explained later in this chapter, opens up much more flexible window display options for your application.