ここでは、アウトライナーの機能をもっとカスタマイズする方法を説明します。
アウトライナーのカラムの幅は、自動的に計算されます。カラムにスタイルプロパティーを追加して、その幅を設定するか、制限できます。ユーザーがカラムの幅をリサイズできるようにしたい場合があるかもしれません。これは、ユーザーがマウスでカラムヘッダーのカラム間をクリックし、幅を新しいサイズにドラッグすることで可能です。
これは、個々のカラムの間に splitter を追加することで簡単に行なうことができます。前のセクションの例を次のように変更すればよいでしょう。
<outliner id="my-outliner" flex="1"> <outlinercol id="namecol" label="Name" flex="1"/> <splitter/> <outlinercol id="datecol" label="Date" flex="1"/> <outlinerbody flex="1"/> </outliner> |
イメージを見ると、2 つのカラムの間にノッチがあるのが分かります。(スプリッターは、別のテーマを使っていると、違って見えるかもしれません。) ユーザーはこのノッチをドラッグして、カラムの幅をリサイズできます。Date カラムが切り取られていることに注意して下さい。データを表示するのに十分な余地がないためです。outlinercol 要素の crop 属性を使うと、切り取るという振る舞いを別の要素に変更することができます。
カラムヘッダーに min-width か max-width スタイルプロパティーを使うと、カラムの最小幅と最大幅の設定ができます。
カラムの hidden 属性を true にすれば、デフォルトでカラムを隠すことができます。ユーザーは、ヘッダー行の端にあるドロップダウンから選択することにより、カラムを表示するかどうかを選べます。
アウトライナーに関連する要素すべてにスタイルプロパティーの設定ができます。これは、必要に応じて、境界や背景色を適用するのに使えます。outlinercol 要素にスタイルを追加しても、スタイルはヘッダーに適用されるだけで、カラムには適用されません。
XUL にはアウトライナー内の個々の行やセルのための要素がないので、通常の方法では、個々の行やセルにスタイルを付けることはできません。その代わり、ビューオブジェクトの一連の関数を使って、スタイル関連の情報の指定ができます。
関数 'getRowProperties'、'getColumnProperties'、'getCellProperties' は、個々の行、カラム、セルに関する情報を返します。これらの関数に与える引数によって、どの行そして/あるいはカラムなのかを指定します。これらの関数それぞれの最後の引数は、ビューが表現しているはずのプロパティーリストです。関数 'getColumnProperties' には、カラムの対応する outlinercol 要素も指定します。
getRowProperties : function(row,prop){}
getColumnProperties : function(column,columnElement,prop){}
getCellProperties : function(row,column,prop){}
|
個々のプロパティーは、行やカラム、セルの一意な特徴を表わす文字列アトムです。例えば、"new" プロパティーは、新しいメッセージや未読のメッセージを表示するように、アウトライナー内の行に指示するのに使えるかもしれません。スタイルシートはこのプロパティーを受け取り、未読メッセージのため、行の外見を変更するのにこれを使うことができるでしょう。
("new" などの) プロパティーは、スタイルクラスと同様に機能すると考えることができます。しかしながら、これには、スタイルシートで使うよりも幾分複雑なシンタックスが必要になります。これは、セルの多くの部分に個別にスタイルの指定ができるためです。セルやそのテキストだけでなく、ツイスティーやインデントにもスタイルを付けることができます。これについては、すぐに説明します。
指定のセルを変更する例を見ましょう。簡単にするため、前のセクションの例を使い、それを変更することにします。4 行ごとに、テキスト色を青にしましょう。4 行ごとのセルにプロパティー 'makeItBlue' を追加するためには、getCellProperties にコードを加える必要があります。(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"].
createInstance(Components.interfaces.nsIAtomService);
props.AppendElement(aserv.getAtom("makeItBlue"));
}
}
|
この関数は、ビューオブジェクトの一部として定義されます。それは、まず、どの行がリクエストされているのかチェックし、4 行ごとのセルにプロパティーを設定します。プロパティーリストには、アトムオブジェクトの配列が必要です。これは、定数文字列と考えることができます。XPCOM インターフェース nsIAtomService を使ってこれを作り、AppendElement 関数を使ってそれを配列に追加します。ここでは、アトム 'makeItBlue' を作ります。その他のプロパティーを追加するため、 AppendElement を再び呼び出すこともできます。
これによって、4 行ごとのセルに 'makeItBlue' プロパティーが追加されます。次に、セルの外見を設定するために、スタイルシートが使えます。次のようなシンタックスを使う必要があります。
outlinerbody:-moz-outliner-cell-text(makeItBlue)
{
color: blue;
}
|
この特別な擬似スタイル (pseudostyle) は、'makeItBlue' プロパティーをもつセルのテキストにスタイルを付けるのに使われます。この場合、テキスト色は青になります。この特別なシンタックスが必要になるのは、セルそれぞれが異なった要素ではないからです。アウトライナー本体内部にある内容はすべて、outlinerbody 要素が描画します。擬似スタイルは、それが表示する特定部分にスタイルルールを設定します。
':-moz-outliner-cell-text' というテキストによって、どの内容領域が必要なのかを指定します。この場合は、セルのテキストです。次の値も使うことができます。
カッコ内のテキストは、スタイルを適用するプロパティーです。上の例から作られたスタイルルールが、'makeItBlue' プロパティーをもつセルのテキストに適用されます。これはカンマで区切ることにより、複数のプロパティー用にすることができます。
下の例は、'readonly' と 'unread' プロパティーをもつ行の背景色をグレーに設定しています。'readonly' プロパティーには、行の周囲に赤の境界を追加します。'unread' などその他のプロパティーが設定されているかどうかに関わらず、2 番目のルールは、'readonly' の行すべてに適用されることに注意して下さい。
outlinerbody:-moz-outliner-row(readonly)
{
border: 1px solid red;
}
outlinerbody:-moz-outliner-row(readonly, unread)
{
background-color: rgb(80%, 80%, 80%);
}
|
getCellProperties と関連する関数に渡されるプロパティーリストには、スタイルシートでも使える少数のデフォルトプロパティーがあらかじめ埋め込まれています。これらの特別なプロパティーは、コンテナや選択された行の外見を設定するのに使えます。以下のプロパティーが、必要に応じて設定されます。
プロパティーは、該当する状態にある行や行内のセルに設定されます。カラムとセルには、別の属性である id も設定されます。これは、カラムや、セルを内部にもつカラムに付加されます。
(進む) 次は、アウトライナーを用いたテンプレートの使い方を見ることにしましょう。