Skinning Your Custom XUL Applications - Register or Not
(Page 3 of 4 )
The great thing about XUL (one of the great things), is that while you can register skins with the chrome and reference them in your XUL file, you can also just use a simple XML stylesheet directive and a file path. This means that you can loosely associate the CSS file while you tweak it and experiment with it, then register it when you feel it is ready for general consumption. To use a basic stylesheet in this way, just add an xml-stylesheet directive:
<?xml-stylesheet href="default.css" type="text/css"?>
To register your stylesheet with the chrome, you're going to need a contents.rdf file and a pointer in the installed-chrome file, just like the locale and main content files. But before you do that, you need to do a spot of organization and create a skin directory structure.
Create a folder in your package directory called skin, then create a folder with the same name as your skin, and finally create a folder with the same name as your application. Into this folder will go your CSS file(s), the contents.rdf file and any other skin resources such as images used by the skin:
To create the rdf file, open a text editor and add the following code:
<?xml version="1.0"?>
<RDF:RDF xmlns:RDF="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:chrome="http://www.mozilla.org/rdf/chrome#">
These statements form the cornerstone of any nutritious RDF document and are mandatory requirements consisting of the XML declaration and the opening RDR container, which holds the required namespace attributes. Next, we define the skin as a Mozilla resource:
<RDF:Seq about="urn:mozilla:skin:root">
<RDF:li resource="urn:mozilla:skin:silver/1.7"/>
</RDF:Seq>
Now, we can give Mozilla some information about the skin that can be used within Mozilla and the chrome registry.
<RDF:Description about="urn:mozilla:skin:silver/1.7"
chrome:displayName="Silver"
chrome:author="Dan Wellman"
chrome:description="A basic silver skin with heavy text."
chrome:name="silver">
<chrome:packages>
<RDF:Seq about="urn:mozilla:skin:silver/1.7:packages">
<RDF:li
resource="urn:mozilla:skin:silver/1.7:interface"/>
</RDF:Seq>
</chrome:packages>
</RDF:Description>
We also list the package that the skin is to be used with; in this case it's the XUL Edit application from previous articles, but it could be any other XUL based application, including any of the Mozilla suite of applications. If you wanted to design an alternative skin for Mozilla itself, you'd go through very similar steps to do it, except your CSS file would be called navigator.css and it would be probably be packaged into a JAR file. You would also need to install it correctly. However, as we aren't restyling Mozilla, we're creating a skin for a standalone application, we don't need to worry about this. Finally, you just need to state the version of your skin and close off the RDF container:
<RDF:Description about="urn:mozilla:skin:silver/1.7:interface"
chrome:skinVersion="1.0"/>
</RDF:RDF>
Now all you need to do is register the skin with the chrome registry and link the new skin to your application. To do this, you'll first need to add the following stylesheet directive to your mail application XUL file:
<?xml-stylesheet href="chrome://interface/skin/" type="text/css"?
>
You now need to add a pointer to the installed-chrome file, which is in Mozilla's chrome folder, to tell Mozilla where your skin located:
skin,install,url,file:///C|/XUL/XULEditLite/skin/silver/
interface/
Now save this file, and from the same directory, delete the chrome.rdf file. Open Mozilla now to recreate the chrome.rdf file and register the skin. While Mozilla is open, take a moment to open the preferences panel and take a look in the Themes section. Your skin should be shown alongside any other registered skin packages, and you'll see information from the contents.rdf file such as the Skin name, author and description:
Next: The Moment of Truth >>
More XML Articles
More By Dan Wellman
