XUL は、アウトライナー (outliner) を使って、テーブル状のリストや階層的なリストを作る方法を提供しています。
XUL には、カラムやネストした階層を使ってテーブル状のデータを表示するための方法が 2 つあります。最初の方法は、以前に説明したツリーです。2 番目の方法は、アウトライナーです。これらは似ていますが、まったく異なった実装です。そして、機能も違っています。アウトライナーは、最初、Mozilla のメールメッセージウィンドウのために作られました。
ツリーもアウトライナーも、データを行からなるリストとして表示します。そこでは、個々の行は、複数のカラムで表示されます。そのどちらを使っても、行を階層として表示できます。これは、内部の行を表示するのに開いたり閉じたりできるということです。また、そのどちらを使っても、行を個別に選択したり、グループとして選択することができます。
ツリーはセル内にどんな型のデータでも表示できますが、アウトライナーには、テキスト (と、スタイルシートを使っている場合はイメージ) だけしか表示できないという制約があります。ツリーを使えば、個々の行の外見と内容を別々にフォーマットできます。これはアウトライナーを使ってもできますが、簡単にという訳にはいきません。アウトライナーには、ツリーにはない特別な機能があります。それには、右上端にポップアップを表示する機能があります。これを使うと、ユーザーは、個々のカラムを表示したり隠したりできます。ユーザーはカラムのヘッダーをクリックすることによってデータをソートすることもできます。
アウトライナーは、ツリーよりもはるかに高速です。それを使うと、何百何千という行を即座に表示できます。内容を個々の行やセル用のタグを使って定義するツリーとは違って、アウトライナーのデータは、スクリプトによって計算されます。
基本的なアウトライナーには、次に示す 3 つの新しいタグがあります。
以下の例は、どのようにアウトライナーを定義するのかを示しています。アウトライナーのデータはまだないので、これは何も表示しません。
<outliner id="my-outliner" flex="1"> <outlinercol id="namecol" label="Name" flex="1"/> <outlinercol id="datecol" label="Date" flex="1"/> <outlinerbody flex="1"/> </outliner> |
この例には、カラムが 2 つあります。一つは Name で、もう一つは Date です。アウトライナーには、2 つのカラムを使った Name と Date ヘッダーからなるヘッダー行があります。内容は、outlinerbody 要素がある位置に置かれます。要素がフレキシブルにされていることに注意して下さい。スタイルプロパティーによって指定のカラム幅を使うこともできますが、こうしないと、本体が正しく表示されない場合があります。
表示するデータをツリーに割り当てるには、スクリプトオブジェクトを作り、個々のセルの値、行の総数、その他のオプション情報を指示する必要があります。スクリプトオブジェクトは、次いで、アウトライナーに割り当てられます。アウトライナーは、この情報を取得するため、オブジェクトのメソッドを呼び出します。
アウトライナービュー (outliner view) と呼ばれるスクリプトオブジェクトは、XPCOM インターフェース nsIOutlinerView に従います。ビューがデータをもつアウトライナーを提供するためには、プロパティーとメソッドを 6 つ定義するだけで済みます。しかし、これ以外にも使えるものはあります。以下は、必須のプロパティーとメソッドの説明です。
これは、実装する必要のある最小限のメソッドです。以下は、オブジェクトなどの定義例です。これは、必要とするどんなものでも呼び出すことができます。
var outlinerView = {
rowCount : 10000,
setOutliner : function(outliner){},
getCellText : function(row,column){
if (column=="namecol") return "Row "+row;
else return "February 18";
},
getRowProperties : function(row,column,prop){},
getColumnProperties : function(column,columnElement,prop){},
getCellProperties : function(row,prop){},
};
|
この例は、10000 行からなるアウトライナーで使用できます。最初のカラム内のセルの内容は、'Row X' というテキストに設定されます。ここで、X は行番号です。2 番目のカラム内のセルの内容は、'February 18' に設定されます。getCellText 関数内の if 文は、カラムが 'namecol' というテキストであるか比較します。このテキスト (namecol) は、上の例では、最初の outlinercol の id に対応します。
最後のステップは、ビューオブジェクトをアウトライナーと関連付けることです。アウトライナーには、outlinerBoxObject プロパティーがあります。これは、アウトライナーを実装する XPCOM オブジェクトです。これには view プロパティーがあり、これを使って、上で宣言されたビューオブジェクトに関連付けることができます。ビューを設定するときや変更するときはいつでもこのプロパティーに値を割り当てます。
function setView()
{
document.getElementById('my-outliner').outlinerBoxObject.view=outlinerView;
}
|
以下は、例をひとまとめにしたものです。例を簡単にするため、ここでは、インラインスクリプトを使っています。通常は、外部のスクリプトファイルにスクリプトを追加します。
例 9.1.1
<?xml version="1.0"?>
<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
<window title="Outliner Example" id="outliner-window"
xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
onload="setView();">
<script>
var outlinerView = {
rowCount : 10000,
setOutliner : function(outliner){},
getCellText : function(row,column){
if (column=="namecol") return "Row "+row;
else return "February 18";
},
getRowProperties : function(row,prop){},
getColumnProperties : function(column,columnElement,prop){},
getCellProperties : function(row,column,prop){},
};
function setView()
{
document.getElementById('my-outliner').outlinerBoxObject.view=outlinerView;
}
</script>
<outliner id="my-outliner" flex="1">
<outlinercol id="namecol" label="Name" flex="1"/>
<outlinercol id="datecol" label="Date" flex="1"/>
<outlinerbody flex="1"/>
</outliner>
</window>
|
イメージから、カラムが 2 つあるのが分かります。その各々には、getCellText 関数から取得したデータがあります。青の矢印のあるボタンをクリックすると、カラムヘッダーのメニューをポップアップさせることができます。ユーザーはメニューから選択することにより、特定のカラムを隠したり表示させたりできます。
setView 関数は、ウィンドウのオンロードハンドラー内で呼び出されています。お望みなら、ビューは後で設定することもできます。ビューは、いつでも変更できます。
注意すべき点は、getCellText 関数は内容を表示する必要があるときだけ呼び出されるということです。上の 10000 行の例では、getCellText は、今から表示するセルのためだけに呼び出されます。ユーザーがスクロールすると、それはこれから表示する行のために呼び出されます。このため、アウトライナーは非常に効率的なのです。
(進む) 次は、アウトライナーの機能についてもっと見ることにしましょう。
例: 9.1.1