Chapter 2. Getting Started- P2
2.3. Making Mozilla Work for You
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
<?xml version="1.0"?>
<?xml-stylesheet href="chrome://global/skin"
type="text/css"?>
<!DOCTYPE window>
<window title="Hello xFly"
xmlns:html="http://www.w3.org/1999/xhtml"

xmlns="http://www.mozilla.org/keymaster/gatekeeper/
there.is.only.xul"
style="background-color: white;"
width="300"
height="215"
onload="centerWindowOnScreen( )">
<script type="application/x-javascript"
src="chrome://global/content/dialogOverlay.js" />
<vbox align="left">

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.
2.3.1.1. Loading stylesheets
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 >

[1]
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.
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