Creating Applications with Mozilla-Chapter 4. CSS in Mozilla Applications-P5

Chapter 4. CSS in Mozilla Applications-P5

4.4.3. Creating Styles for the xFly Buttons
Now that you have created a single custom style for the xFly application,
you can see how easy it is to associate cascading style rules with any
element in your interface. The next logical step is to style the buttons in the
xFly sample application, since they make up such a large portion of the
interface itself.
When you use the button widget without any extra style information, you
already get a lot of the button-like presentation and behavior. The button has
different looks, for example, when you hover over it and when you click it,
and it has a basic three-dimensional shape as seen in Figure 4-9
.
Figure 4-9. XUL button with no style

A common update to regular XUL buttons is to give them images, like the
navigation buttons in the main Mozilla browser window. Adding the class-
based style rule in Example 4-10
to the xFly stylesheet (and, of course, the
GIF image itself to the skin subdirectory) will give all the "fly" buttons
background images with flies in them.
Example 4-10. Custom styles for buttons
button.fly {
list-style-image:
url("chrome://xfly/skin/btnfly.gif");
}
button.fly[disabled="true"] {
list-style-image: url("chrome://xfly/skin/btnfly-
dis.gif ");
}
button.fly#hover {

list-style-image: url("chrome://xfly/skin/btnfly-
hov.gif ");
}
4.4.4. Describing the Skin in RDF
As described in Chapter 6
, a manifest must accompany and describe the skin
so it can be found and registered. The manifest is an RDF file called
contents.rdf that sits at the highest level of the skin (i.e., at the top of
the JAR or immediately under the modern directory when extracted to
disk). Since the content, skin, and locale of an application are considered
different packages, each must have its own manifest.
The listing in Example 4-11
shows the contents.rdf manifest that
accompanies the xFly skin resources in the xfly.jar!/skin/ directory.
Example 4-11. Skin manifest for the xFly sample
<?xml version="1.0"?>
<RDF:RDF xmlns:RDF=" />rdf-syntax-ns#

xmlns:chrome="
<RDF:Seq about="urn:mozilla:skin:root">
<RDF:li resource="urn:mozilla:skin:classic/1.0"
/>
</RDF:Seq>
<RDF:Description
about="urn:mozilla:skin:classic/1.0">
<chrome:packages>
<RDF:Seq
about="urn:mozilla:skin:classic/1.0:packages">
<RDF:li
resource="urn:mozilla:skin:classic/1.0:xfly"/>

</RDF:Seq>
</chrome:packages>
</RDF:Description>
</RDF:RDF>
As you can see, the basic form of the manifest is something like, "This is the
classic skin we have (given as a direct child of the RDF root element), which
applies to the following packages: xfly." The second group of RDF in this
manifest provides a list of packages to which the skin should apply. In the
case of the xFly application, all XUL code is a single package. In Mozilla, a
contents.rdf file in a package subdirectory of the modern.jar, for
example, would describe the communicator package in a similar way, but it
would be a composite of other package manifests in the theme to create a
single, overarching manifest for the whole theme. Example 4-12 shows the
manifest for just the Mozilla communicator package.
Example 4-12. Manifest for the communicator package of the modern
skin in Mozilla
<?xml version="1.0"?>
<RDF:RDF xmlns:RDF=" />rdf-syntax-ns#"

xmlns:chrome="
<!-- List all the skins being supplied by this
theme -->
<RDF:Seq about="urn:mozilla:skin:root">
<RDF:li resource="urn:mozilla:skin:modern/1.0"
/>
</RDF:Seq>
<!-- Modern Information -->
<RDF:Description
about="urn:mozilla:skin:modern/1.0">
<chrome:packages>

<RDF:Seq
about="urn:mozilla:skin:modern/1.0:packages">
<RDF:li
resource="urn:mozilla:skin:modern/1.0:communicator"
/>
</RDF:Seq>
</chrome:packages>
</RDF:Description>
</RDF:RDF>
This RDF/XML file describes a skin to the chrome registry so it can be
registered properly. All new packages must be accompanied by these sorts
of RDF-based descriptions if they will be made available to users.
4.5. What Is Possible in a Skin?
In this final section, we describe a few things that make CSS in Mozilla
particularly powerful and cases when this power is curtailed because of the
security restrictions.
4.5.1. Binding New Widgets to the Interface Using XBL
A description of skins wouldn't be complete without a mention of binding
widgets by using XBL, a very powerful feature of CSS in Mozilla. The -
moz-binding keyword described in Table 4-4
is the key to binding
special, prefabricated widgets to your XUL. The language in which these
widgets are defined is another XML-based language called the Extensible
Bindings Language. Chapter 7
describes this language in more detail.
To see how XBL works, go back and look at the first style rule for "print-
button" in Example 4-6
. The first style statement in that block has a property
called -moz- binding. This property defines a binding for the XUL
element styled by this style rule. The chrome URL that the -moz-

binding property points to is where an XBL-based definition of a print
button is located.