XULファイルにスキンを適用する方法には,

XULファイルと同じディレクトリにCSSファイルを置く.

XULファイルには以下のように記述する.

<?xml-stylesheet href="myxkin.css" type="text/css"?>

もっとも簡単な方法だが,スキンを変更するにはXULファイル中のCSS指定を修正する必要がある.

skinパッケージの作成

XULアプリケーション本体とスキンの分離が可能.XULファイルの変更なしにスキンを変更できる.

サンプル,電卓XULアプリケーションにスキンを導入してみた.これ.サンプルのためのinstalled-chrome.txtの記述は以下.

content,install,url,jar:resource:/chrome/mycalculator.jar!/content/mycalculator/
skin,install,url,jar:resource:/chrome/mycalculator.jar!/skin/mycalculator/
locale,install,url,jar:resource:/chrome/mycalculator.jar!/locale/en-US/mycalculator/
locale,install,url,jar:resource:/chrome/mycalculator.jar!/locale/ja-JP/mycalculator/

"skin"で始まっている行がスキン用の記述である.

サンプルパッケージは,content,locale,skinの三つのディレクトリに大きくわかれる.

$> jar tvf mycalculator.jar 
     0 Fri Feb 25 00:09:24 JST 2005 content/
     0 Sat Feb 26 12:57:24 JST 2005 content/mycalculator/
  1196 Fri Feb 25 00:09:24 JST 2005 content/mycalculator/mycalculator.js
   498 Fri Feb 25 00:15:54 JST 2005 content/mycalculator/contents.rdf
  1886 Sat Feb 26 12:57:24 JST 2005 content/mycalculator/mycalculator.xul
     0 Fri Feb 25 00:09:24 JST 2005 locale/
     0 Fri Feb 25 00:09:24 JST 2005 locale/en-US/
     0 Fri Feb 25 00:09:24 JST 2005 locale/en-US/mycalculator/
   644 Fri Feb 25 00:09:24 JST 2005 locale/en-US/mycalculator/mycalculator.dtd
   530 Fri Feb 25 00:09:24 JST 2005 locale/en-US/mycalculator/contents.rdf
     0 Fri Feb 25 00:09:24 JST 2005 locale/ja-JP/
     0 Fri Feb 25 00:09:24 JST 2005 locale/ja-JP/mycalculator/
   530 Fri Feb 25 00:09:24 JST 2005 locale/ja-JP/mycalculator/contents.rdf
   682 Fri Feb 25 00:09:24 JST 2005 locale/ja-JP/mycalculator/mycalculator.dtd
   767 Fri Feb 25 00:09:24 JST 2005 locale/ja-JP/mycalculator/mycalculator.native.dtd
     0 Sat Feb 26 12:02:52 JST 2005 skin/
     0 Fri Feb 25 07:35:40 JST 2005 skin/classic/
     0 Sat Feb 26 13:04:24 JST 2005 skin/classic/mycalculator/
   704 Fri Feb 25 07:36:26 JST 2005 skin/classic/mycalculator/contents.rdf
   193 Sat Feb 26 13:03:46 JST 2005 skin/classic/mycalculator/mycalculator.css
   698 Sat Feb 26 13:04:14 JST 2005 skin/classic/mycalculator/button_red.png
     0 Sat Feb 26 12:57:30 JST 2005 skin/mycalculator/
   684 Sat Feb 26 12:02:52 JST 2005 skin/mycalculator/button_blue.png
   229 Sat Feb 26 12:57:30 JST 2005 skin/mycalculator/mycalculator.css
   656 Sat Feb 26 12:04:28 JST 2005 skin/mycalculator/contents.rdf

contentとlocaleの下については今まで見てきた.そしてskinの下にスキン用のファイルがある.

skin/パッケージ名/

サンプルでは以下の構成もある.

skin/スキン名/パッケージ名/

サンプル中において具体的には前者が

skin/mycalculator/

後者が

skin/classic/mycalculator/

である.伝統的に後者の構成をとってスキン名にはclassicとmodernがよく使用されるようだが,前者の構成でも動作する.実際サンプルでは前者のディレクトリ配下のファイルを使用している(※).後者のものを使用したい場合は,installed-chrome.txtのskin指定を以下のように書き換える.

skin,install,url,jar:resource:/chrome/mycalculator.jar!/skin/classic/mycalculator/

パッケージ名.css(サンプルではmycalculator.css)が,スタイルシートファイルである.これがskinディレクトリ配下再深部にある.

skin/mycalculator/mycalculator.css

mycalculator.cssを以下に示す. まず最初に今までXULファイルから直接指定していたグローバルスキンをimportする.

@import url(chrome://global/skin/);

さらに他のcssをimportするときも,上記と同様の書式を使用する.

@import url(クロームURL);

これ以降はHTML用のCSSと同様の記述が続く.スタイルの指定方法には以下がある.

要素名

button,windowなど,XUL要素名.

#id

属性idの値.

.クラス名

クラス名(XUL要素の属性classの値).

要素名.クラス名

要素名と属性class.

親要素名 > 要素名

親要素名と要素名.

親要素名 > 要素名.クラス名

親要素名と要素名と属性classの値.

要素名.クラス名:イベント

要素名とクラス名と発生中のイベント.

要素名#id:イベント

要素名と属性idの値と発生中のイベント.

要素名[属性="属性値"]

属性の値が属性値である要素.

例えばサンプルCSSでは以下がある.

button.operand {
  color: blue;
  list-style-image: url("chrome://mycalculator/skin/button_blue.png");
}

これはクラスoperandの要素buttonである.list-style-imageはボタンに張り付ける画像の指定で,画像の場所を上ではchromeULRにて指定している.サンプルの様に画像ファイルがCSSファイルと同じディレクトリにある場合は,以下のようにも記述できる.

  list-style-image: url("button_blue.png");

サンプルのXULファイルを以下にしめす. XULファイルではまずスキンを指定する.

<?xml-stylesheet href="chrome://mycalculator/skin/" type="text/css"?>

あとは,該当する要素にてCSSのルールがマッチするようにする.以下はクラスoperandの要素buttonの例である.

<button label="&button7:label;" oncommand="setNumber(7)" class="operand"/>

例によってスキンにもcontents.rdfが必要である. まず最初のRDF:Seq,RDF:liで定義するスキンの種別を記述する.

  <RDF:Seq about="urn:mozilla:skin:root">
    <RDF:li resource="urn:mozilla:skin:classic/1.0" />
  </RDF:Seq>

サンプルで適用しているスキンのディレクトリ構成はskin/パッケージ名/だが,上記属性resourceの値にはclassic/1.0やmodern/1.0がないとうまく動作しないようだ.次にスキン種別内のパッケージを記述する.

  <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:mycalculator"/>
      </RDF:Seq>
    </chrome:packages>
  </RDF:Description>

このあたりはいつものパターンである.最後にスキンのバージョンを指定する.

  <RDF:Description about="urn:mozilla:skin:classic/1.0:mycalculator"
    chrome:skinVersion="1.5"/>

バージョンの値はglobalスキンと同じ値にしないとうまく継承できないようだ.chromeディレクトリにchrome.rdfがあるので,そこからglobalスキンのバージョンを調べる(※).また,contentのcontents.rdfもこれに合わせてスキンバージョンを記述する.