The second "Hello World" sample, shown in Example 2-4, adds some important application features and begins to take advantage of the resources that Mozilla provides for you. This section goes over the ways you can import stylesheets and Mozilla scripts to make your XUL more sophisticated and modular. It also prepares you to make an actual application.
You can see this example in action by saving the code in Example 2-4 to a file, hello2.xul, and then launching Mozilla and selecting File > Open File from the browser. This displays the example as content in the Mozilla browser, as shown in Figure 2-2.
Example 2-4. Sample XUL window
These extras make your XUL file work more like an application by giving you access to services and features that already exist in Mozilla. They can also help you organize your own work into reusable parts, such as application stylesheets, widgets, and script libraries, as described later in this chapter in the section Section 2.5.
The code in Example 2-4 uses scripts and styles that are already defined in Mozilla. As you'll see in examples in this book and in the Mozilla source code, the global.css stylesheet is where many basic styles are defined for XUL widgets. Most XUL widgets have some inherent style, as you can see in Example 2-1, where the button has a button-like look without any explicit style rules or stylesheet imports.
As the XPFE has evolved, XUL widgets have used XBL internally to define some of these inherent looks and behaviors, which has taken some of the responsibility away from global.css and other CSS files. But this stylesheet still contains important rules for displaying basic XUL widgets. It's usually a good idea to import this main stylesheet into your application, as described here, and see what it gets you in terms of presentation. If you load Example 2-4 with and without the global.css line, you can see the way that the rules in the stylesheet provide styles for the widgets in the XUL.
Similarly, scripts like globalOverlay.js, tasksOverlay.js, and dialogOverlay.js, imported in Example 2-4, provide basic functions you can use in your applications.
In the second line of Example 2-4, the stylesheet declaration uses a chrome:// URL to refer to and load the global.css file. The style rules in that file give the button widget its "widgetness." You can use the stylesheet processing instruction to load Mozilla stylesheets like global.css, navigator.css, and toolbar.css, or you can use it to load your own application stylesheet. In both cases, the chrome:// URL allows you to refer to packaged files in a flexible way.
<!--import the navigator.css stylesheet from the Mozilla navigator component--> <?xml-stylesheet href="chrome://navigator/skin" type="text/css"?> <!--import xfly.css stylesheet from the xFly package--> <?xml-stylesheet href="chrome://xfly/skin" type="text/css"?>
Also note the use of an inline style in Example 2-4. The style property on the label widget gives you a place to define CSS rules directly on widgets. In this case, the label is given a bold font so that it shows up better in the window. You could also define this style rule in an external stylesheet and make that stylesheet part of the package for your application, as we do later in this chapter in the section Section 2.5.5.
To access a script in XUL, use the script element and a URL value for its src attribute:
The dialogOverlay.js script imported into your XUL file in Example 2-4 provides access to the CenterWindowOnScreen( ) function. This function is made available to your XUL file with the line:
Unfortunately, no good reference exists for the functions defined in the various scripts files you can import. The functions and their locations within the files continue to change, so finding and using the right ones is sometimes a matter of luck, sometimes a matter of whom you know, and often a matter of testing, determination, and patience.