XUL Tutorial:Styling a Tree
出典: MDC
このセクションでは、ツリーに対してスタイルを設定する方法を説明します。
目次 |
[編集] ツリーにスタイルを設定する
ツリーにスタイルを設定する場合、枠か列の見出しについて設定したいのであれば、他の要素と同じ方法で行うことが可能です。
tree 要素に設定されたスタイルは、ツリー全体 (枠) に適用されることになり、
treecol 要素に設定れたスタイルは、
列全体には適用されず、列の見出しの部分に対してのみ適用されることになります。
そして、ツリーの本体へのスタイル設定は、他の要素とは若干異なる方法で行う必要があります。
これは、ツリー本体が他の要素とは異なった方法で格納されていることに起因する制約になります。
つまり、ツリー本体では最も外側の treechildren 要素のみが実在する要素で、
内側の要素は直接表示されるわけではなく、単にツリーに供給するデータを定義するために置かれているに過ぎないからです。
[編集] プロパティの設定
このために、まず、行またはセルに対して properties 属性を使用して、名前の付いたプロパティを設定する必要があります (属性の値がプロパティの名前になります)。
これは、ツリーが静的なコンテントを利用する場合はもちろん、RDF から生成されたコンテントや、カスタムビューを使用する場合でも利用可能です。
それでは、例として、特定の行の背景色を青色にしてみることにしましょう。
これは Mozilla メールのラベルに関する機能の実装にも利用されています。
ここでは「makeItBlue」と呼ばれるプロパティを使用することにしますが、好きな名前を使っても構いません。
なお、複数のプロパティを設定したい場合は、空白文字で区切って設定することが可能です。
以下に、行またはセルにプロパティを設定する例を示します。
<treerow properties="makeItBlue">
[編集] ツリーに対する CSS セレクタ
スタイルシートからは、このプロパティを目印に使って、未読メッセージやラベルに対応する行の外観を変更することになります。 つまり、この場合のプロパティとは、スタイルクラスとよく似た働きをするものだと考えてもよいでしょう。 ただし、プロパティの方は、セルなどのツリーを構成するたくさんのパーツに対して、個別にスタイルを指定できるようにする必要があるため、 スタイルシートから指定するときには、スタイルクラスより若干複雑な構文が必要になります。 また、スタイルは、セルやその中のテキストだけでなく、ツイスティに設定したりインデントの設定のために使用することも可能です。 具体的には、以下のような構文が必要になります。
treechildren::-moz-tree-row(makeItBlue)
{
background-color: blue;
}
このスタイルは、複雑なセレクタを持っていて、「makeItBlue」プロパティを持つ行に、スタイルとして背景色を設定するために使用されます。
この特別な構文は、それぞれのセルが独立した要素ではないために必要になります。
つまり、ツリー本体部分に含まれている全てのコンテントは、treechildren 要素により描画されることになりますが、
CSS が持つ、要素の一部分だけを、疑似要素とみなしてアクセスするというコンセプトを利用して、
このセレクタは、treechildren 要素に含まれているいくつかの行を、疑似要素とみなして選択します。
このため、このスタイルは、表示されている要素の特定の部分に対してのみスタイルルールを設定することになります。
したがって、上のスタイルルールは treechildren 要素の中の 「makeItBlue」プロパティを持つすべてのツリー行の背景色を青色に設定することを意味します。
このセレクタに含まれる文字列 ::-moz-tree-row は、どのコンテント領域を選択するかを指定するもので、この場合は行になります。
ここに指定可能な値を以下に示します。
- ::-moz-tree-cell: セルに対応し、境界と背景色を設定するために利用します。
- ::-moz-tree-cell-text: セルに含まれるテキストに対応し、フォントやテキストの色を設定するために利用します。
- ::-moz-tree-twisty: 対応するツイスティの外観の設定をします。ツイスティとは子の行を開閉するための「+」のアイコンのことです。
- ::-moz-tree-image: セルの画像に対応します。画像は list-style-image プロパティで設定することができます。
- ::-moz-tree-row: 行に対応し、行の背景色を設定するために利用します。
- ::-moz-tree-indentation: 子の行の左側のインデントに対応します。
- ::-moz-tree-column: 列に対応します。
- ::-moz-tree-line: 親子の行を結ぶ線に対応します。
- ::-moz-tree-separator: ツリーに置かれたセパレータに対応します。
- ::-moz-tree-progressmeter: プログレスメーターセルのコンテントに対応します。列の
type属性をprogressmeterに設定することで、プログレスメーターの列を作成することができます。 - ::-moz-tree-drop-feedback: ドラッグ＆ドロップからのフィードバックに対応します。
- ::-moz-tree-checkbox: チェックボックスの列で使用する画像に対応します。
また、コンマで区切って指定することで、複数のプロパティをチェックすることも可能です。
以下の例は、「readonly」と「unread」プロパティを持つ行の背景色を灰色に設定します。
加えて、「readonly」プロパティを持つ行に対しては、赤い枠線が描画されます。
なお、最初のルールは、「readonly」が設定されている全ての行に対し適用され、
「unread」など他のプロパティの設定の有無には影響を受けないことを注記しておきます。
treechildren::-moz-tree-row(readonly)
{
border: 1px solid red;
}
treechildren::-moz-tree-row(readonly, unread)
{
background-color: rgb(80%, 80%, 80%);
}
[編集] デフォルトのプロパティ
ツリー関連の要素が持つプロパティのリストには、いくつかのデフォルトで設定されるプロパティが含まれており、これらもスタイルシートから利用することが可能です。 以下に示す特別なプロパティは、コンテナや選択された行の外観を設定するために利用できます。 これらのプロパティは、必要に応じて自動的に設定されます。
- focus
- このプロパティは、ツリーが現在フォーカスを得ているときに設定されます。
- selected
- このプロパティは、行やセルが選択されているときに設定されます。
- current
- このプロパティは、カーソルがその行にあるときに設定されます。このプロパティが設定される行は、一度に 1 行だけになります。
- container
- このプロパティは、子を持つことが可能な行やセルに対して設定されます。
- leaf
- このプロパティは、子を持つことができない行やセルに対して設定されます。
- open
- このプロパティは、展開されている行やセルに対して設定されます。
- closed
- このプロパティは、畳まれている行やセルに対して設定されます。
- primary
- このプロパティは primary 属性が設定された列のセルに対して設定されます。
- sorted
- このプロパティは、現在ソート対象になっている列のセルに対して設定されます。
- even
- このプロパティは、偶数番目の行に対し設定されます。
- odd
- このプロパティは、奇数番目の行に対し設定されます。例えば、このプロパティと
evenプロパティを使用して、行ごとに交互に行の色を変えることができます。 - dragSession
- このプロパティは、何かがドラッグされているときに設定されます。
- dropOn
- このプロパティは、ツリー上で何かがドラッグされているときに、そのときマウスポインタが重なっている行に対して、重なっている間を通して設定されています。
- dropBefore
- このプロパティは、何かがドラッグされているときに、その行にマウスポインタが重なる直前にだけ設定されます。
- dropAfter
- このプロパティは、何かがドラッグされているときに、その行にマウスポインタが重ならなくなった直後にだけ設定されます。
- progressNormal
- このプロパティは、プログレスメーターセルで通常のプログレスメータの場合に設定されます。
- progressUndetermined
- このプロパティは、プログレスメーターセルで未定 (undeterminate) のプログレスメータの場合に設定されます。
- progressNone
- このプロパティは、プログレスメーターセルでプログレスメータが表示されていない場合に設定されます。
これらのプロパティは、行や行に含まれるセルに対して、状態の変化に応じて設定されます。
加えて、列とセルに対しては、プロパティとして、その列あるいはセルの属する列の id が設定されます。
[編集] RDF 生成ツリーに対するプロパティの設定
RDF から構築されているツリーに対しても、静的なコンテントの場合と同じ構文が利用できます。 しかしながら、プロパティはデータソースの値を基にして設定することが多いと思います。
[編集] カスタムビューでのプロパティの設定
カスタムビューから構築されているツリーについても、ビューに getRowProperties()、getColumnProperties()、getCellProperties() 関数を実装して応答することによりプロパティを設定できます。
これらは、それぞれ個々の行、列、セルについての情報を返します。
これらの関数への引数には、対象となる行か列 (セルに対しては行と列) が設定されます。
また、それぞれの関数の最後の引数は出力用で、ビューでは返すべきプロパティのリストを設定する必要があります (後の例で詳述します)。
なお、getColumnProperties() 関数では、引数として対象となる列の treecol 要素に対応する TreeColumn オブジェクトも設定されます。
getRowProperties : function(row,prop){}
getColumnProperties : function(column,columnElement,prop){}
getCellProperties : function(row,column,prop){}
それでは、特定のセルの表示を変更する例を見てみましょう。
以前のセクションの例を、4 行に 1 回、テキストが青色になるようにしてみましょう。
このためには、getCellProperties() 関数にコードを追加して、4 行に 1 回、セルに対して「makeItBlue」プロパティを設定する必要があります。
(注:テキストの色は行からセルへ継承されないので、getRowProperties() を使うことはできません）
getCellProperties() への最後の引数として渡されているプロパティオブジェクトは、nsISupportsArray インターフェイスを実装した XPCOM オブジェクトです。
これは、単に配列の XPCOM 版で、この配列に要素を追加するために使用する AppendElement() 関数を持っています。
また、プロパティとして使用する文字列アトムを構築するために nsIAtomService インターフェイスを利用します。
getCellProperties: function(row,col,props){
if ((row %4) == 0){
var aserv=Components.classes["@mozilla.org/atom-service;1"].
getService(Components.interfaces.nsIAtomService);
props.AppendElement(aserv.getAtom("makeItBlue"));
}
}
この関数は、ビューオブジェクトの一部として定義されることになります。
まず、何行目が要求されているかをチェックして、4 行に 1 回、セルに対するプロパティを設定します。
引数で渡されるプロパティのリスト (props) では、アトムオブジェクト (文字列定数だと考えてもらって構いません) の配列が要求されます。
このため、XPCOM の nsIAtomService インターフェイスを利用して作成した後、 AppendElement() 関数を使用してその配列に追加します。
ここでは、アトムとして「makeItBlue」を作成しています。
必要なら、さらに AppendElement() を呼び出して、他のプロパティを追加することも可能です。
[編集] スタイルシートの例
treechildren::-moz-tree-row(selected) { background-color: #FFFFAA; }
treechildren::-moz-tree-row(odd) { background-color: #EEEEEE; }
treechildren::-moz-tree-row(odd, selected) { background-color: #FFFFAA; }
treechildren::-moz-tree-cell-text(selected) { color: #000000; }
treechildren::-moz-tree-cell-text(odd, selected) { color: #000000; }
次のセクションでは、デフォルトのスキンを変更する方法について見ていきます。