XUL チュートリアル

XUL は、ツリーを使って、テーブル状のリストや階層構造をもつリストを作る方法を提供しています。

ツリー要素 (Tree Element)

XUL で比較的複雑な要素の一つにツリーがあります。ツリーは、項目のリストを作るのに使われます。ツリー要素は、階層構造をもつリストやテーブルを作るのにも使われます。例えば、メールアプリケーションのメッセージリストや Mozilla の「ブックマーク編集」ウィンドウは、ツリーを使って作ることができます。

ツリーの内容を作るのには 2 つの方法があります。一番簡単なのは、ツリー項目を直接ツリーに入れることです。この方法は、このセクションで見ることにしましょう。もう一方の方法の方が、実際には、もっと一般的で役立ちます。それを使うと、ツリーの内容をデータソースから作り出すことができます。これは、ツリーをユーザーのブックマークリストやディスク上のディレクトリー、検索結果、他の多くの場所にある情報で満たすことができるということです。

ツリーは、tree 要素を使って作ることができます。これは、引き続くセクションで説明します。関連する要素を使って、カラムと行を指定します。ツリーの 2 番目のクラスは、outliner 要素を使って作ることができます。これについては、後のセクションで説明しましょう。ツリーは、複雑なデータを表示したり、ツリーが機能する方法を正確にコントロールしたい場合に、かなりのフレキシビリティーを発揮します。アウトライナー (outliner) はもっと単純で、それが表示できるデータの型については制約されていますが、その内容をツリーよりもはるかに高速に表示できます。アウトライナーは、テキストだけからなる大量の行がある場合に最善の働きをします。

ツリーには、多くの新しい要素があります。メニューの場合と同様に、個々の要素は、互いにネストします。ツリー要素は、HTML の table タグと非常によく似ています。それは、実際には、特殊用途向けのグリッドです。ツリーを構成する要素を、以下に、簡単に説明します。

多数のカラムからなるテーブルの作り方を見ることから始めましょう。これは、メールメッセージのリストを作るのに使えるでしょう。これは、送り手、主題、日付など、多数のカラムからなる場合があります。

最初に、テーブル全体を tree 要素で囲みます。これは、テーブルやツリーとして使われる要素の宣言です。ここでは、テーブルのように使うことにします。

ツリーのシンタックスは、3 つの部分からなります。最初の部分は、ツリーの内容を宣言するのに使います。HTML のテーブルと同様に、データは行に配置されます。テーブルデータは、データ行 (1 行であれ、複数行であれ) を、treechildren に置くことによって作られます。ツリーの 2 番目の部分は、オプションのヘッダー行を宣言するのに使います。テーブルヘッダーは、treehead 要素にデータ行を置くことによって作られます。3 番目の部分は、treecolgroup タグを使って、ツリー内にどのようなカラムが必要なのかを指定するのに使用します。

ツリーの最も外側の treechildren 要素は、フレキシブルにすべきです。そうすることにより、ツリーの行は、常に、ツリーに適した大きさになります。flex 属性を加えない場合は、ツリー内の項目は正しく表示されないでしょう。

ヘッダーも本体ももつことができるものという点では似ていますが、描画は異なります。また、幾分異なった機能をもちます。これらの要素内に、データ行を置きます。データ行は、treerow 要素を使って作ります。例えば、テーブルに treerow を 5 つ置けば、データ行が 5 つテーブル内に表示されます。この要素は、HTML の tr テーブルタグと同じものと考えてよいでしょう。

行の内部には、個々のツリーセルを置きます。これらは、treecell 要素を使って作ります。ツリーセルに何を置いても、それは、テーブルのデータとして表示されます。最初の treecell によって、最初のカラムに表示される内容が決められます。2 番目の treecell によって、次のカラムに表示される内容が決められるというようになります。

treecell 要素は、その内部に何を置きたいのかに応じて 2 つの異なった方法で宣言できます。最初の方法は、ボタンに似たシンタックスを取り、セル内に表示されるテキストを指定するため label 属性を使います。このシンタックスは、セルがテキストだけの場合に役立つでしょう。

ツリーセルは、シンタックス上、ボタンに似ていますが、同じという訳ではありません。下の例は、treecell 要素が一つの場合のシンタックスを示しています。

ツリーセルで使えるシンタックスには、もう一つのシンタックスがあります。これは、テキスト以外の別の型の内容を取り込みたい場合に役に立つでしょう。これは、ツリーにイメージやチェックボックスを取り込む場合によく使われます。このためには、treecell の開始タグと終了タグの内部に別の要素を置きます。下の例は、ツリーにチェックボックスを追加する方法を示しています。

ここでは、label 属性を使う代わりに、HTML のチェックボックスをセルの内容として宣言しています。しなければならないことに適したシンタックスを使うべきでしょう。しかし、2 つのシンタックスを組み合わせるべきではありません。どちらか一方しか使えないからです (2 番目のシンタックスは、label を上書きしてしまいます)。また、align など treecell の別の属性は、最初のシンタックスだけに適用可能です。

以下の例は、これまでに説明したシンタックスを使って作ったツリーです。

上の例は、たとえどんなにフォーマットがまずいにせよ、表示可能です。個々のセルのテキストは、カラム内にではなく、互いの右横に表示されてしまいます。これを直すには、treecol 要素を使って、カラムを幾つか追加します。

(tree 要素の直接の子供として) このコードをツリー内に置くことによって、2 つのカラムが定義されます。そこでは、2 番目のカラムは、最初のカラムより広い場所を占めます。カラムはいつでもフレキシブル指定すべきです。それによって、個々のカラムのサイズが決められます。幅は、width 属性を使って指定することもできます。ツリーには、カラムと同数の treecol 要素をインクルードすべきです。そうしないと、奇妙なことになります。

以下の例は、ツリーを使って作った簡単なメッセージリストを示しています。

イメージから分かるように、ツリーは、2 行のデータから作られています。カラムを追加すると、セルデータは、そろえられます。次に、個々のカラムのタイトルを表示するため、ヘッダー行を追加しましょう。

ヘッダー行のシンタックスは、本体部に似ています。1 行加えて、treechildren 要素を treehead 要素で置き換えます。もちろん、ヘッダー行は、通常、一つであるべきです。但し、ヘッダー行が複数あっても妥当です。

上のコードは、データ行とヘッダー行の類似性を示しています。treerow 要素を後ろに加えることによって、テーブルに別の行を追加することもできます。また、個々の行に 3 番目の treecell を加えることによって、ヘッダー行を含め、別のカラムを追加することもできます。

HTML に精通しているのなら、ツリーと HTML テーブルのシンタックスの類似性に気が付いたことでしょう。こうした構造を作るのに HTML テーブルを使うこともできますが、XUL ツリーには、もっとパワフルな追加機能があります。

選択可能な行

前の例のメッセージリストはきれいに表示されましたが、追加機能を加えたいと思います。最初に、行を選択可能にしましょう。ユーザーが行をクリックすると、行全体が選択されるようにしたいと思います。これは、新しい要素を使えば、簡単にできます。

treeitem 要素内に行を置くことによって、行全体が選択可能になります。以下の例はこの例を示しています。

個々の行の周りをツリーアイテムで囲むことによって、行全体が選択可能になります。実際には、treeitem 要素内にあるものすべてが選択可能になります。一つのツリーアイテム内に 2 つのツリー行を置くこともできます。その場合は、2 つの行の両方が同時に選択可能になります。もっとも、こんなことはしないでしょうが。

もちろん、ヘッダー行内に treeitem を置くことはしません。それを選択可能にはしたくないからです。

ユーザーは、マウスでクリックするか、キーボードからハイライトすることによって、ツリーアイテムを選択できます。デフォルトでは、同時に一つの項目しか選択できません。しかし、同時に複数の項目が選択できるようにする方法があります。ユーザーがシフトキーかコントロールキーを押したまま別の行をクリックすると、複数行が選択できます。複数の選択ができるようにするには、下の例のように、multiple 属性を追加します。

コントロールキーを押したまま個々の行をクリックすると、それは選択に加えられます。選択からはずすには、行をもう一度クリックします。

ツリーの例

「ファイル検索」ウィンドウに検索結果を表示するツリーを追加しましょう。以下のコードは、iframe の場所に追加します。

<tree>
  <treecolgroup>
    <treecol flex="1"/>
    <treecol flex="2"/>
    <treecol flex="1"/>
  </treecolgroup>

  <treehead>
    <treerow>
      <treecell label="Filename"/>
      <treecell label="Location"/>
      <treecell label="Size"/>
    </treerow>
  </treehead>
  <treechildren flex="1">
    <treeitem>
      <treerow>
        <treecell label="mozilla"/>
        <treecell label="/usr/local"/>
        <treecell label="2520 bytes"/>
      </treerow>
    </treeitem>
  </treechildren>
</tree>

<splitter collapse="before" resizeafter="grow"/>

ファイル名、場所、ファイルサイズのための 3 つのカラムをもつツリーを追加しました。2 番目のカラムは、他のカラムの 2 倍の大きさで表示されます。フレキシビリティーが大きいからです。ここでは、行をもつテーブルがどのように見えるか示すために、行を一つ追加しています。実際の実装では、行は、検索が実行されるとき、スクリプトが追加することになるでしょう。

(進む) 次は、もっと先進的なツリーの作り方を見ることにしましょう。