XUL チュートリアル - タブボックス

プレファレンスダイアログで、多数のタブを表示するというのはよくあることです。ここでは、この作り方を見ることにしましょう。

タブボックス (Tabbox)

タブボックスは、プレファレンスウィンドウ内のアプリケーションでよく使われます。一連のタブがウィンドウの上部に表示されます。ユーザーは、個々のタブをクリックして、異なったオプションセットを見ることができます。これは、一つのスクリーンに収まりきらないオプションがあるような場合に、役立ちます。

XUL は、こうしたダイアログを作るための方法を提供しています。これには、5 つの新しい要素が含まれます。ここで、それについて簡単に説明し、後でもっと詳細に述べることにします。

tabbox は、外側の要素です。これは、2 つの子供、つまり、タブの並びをもつ tabs 要素とタブ付きのページをもつ tabpanels 要素からなります。

通常、タブは、タブ付きパネルの上部に来ます。しかし、タブは、パネルのどこの側に来ても構いません。tabbox は一種のボックスですから、これをコントロールするのに、orient 属性が使えます。しかし、これは、おそらく、行なうべきではありません。スキンによっては、あまり見栄えがよくないからです。

以下に示したのは、2 つのタブをもつ基本的なタブパネルの典型的なシンタックスです。

タブ要素は、通常のボックスに非常によく似た tabs 要素の内部に置かれます。これは水平方向に配置されています。タブを一行に並べて表示したいからです。tabs 要素自身は、tabbox の内部に置かれています。tabbox には、tabpanels もあります。これは、タブボックス全体で垂直方向に配置されるため、タブの下に表示されます。

実際には、ボックスとは違ったものにするタブ要素には、特殊なものは何もありません。違いは、タブが少々異なった風に描かれるということと、deck の場合とよく似て、タブパネルの内容が一度に一つしか見えないということです。

個々のタブページの内容は、tabpanels 要素内の tabpanel の中に来るべきです。それは、上部に並ぶタブの内容が来る場所である tab 要素の中には来ません (これは、どんな要素でももつことができます)。

個々の tabpanel 要素は、タブ付きで表示されるページになります。最初のパネルは、最初のタブに対応します。ペーン内の 2 番目のパネルは、2 番目の要素に対応するといった具合です。個々の tab と tabpanel 要素の間には、1 対 1 の関係があります。

tabbox のサイズを決める場合には、一番大きいページが使われます。これは、あるタブページに 10 のテキストボックスがあり、別のタブページにはそれが一つしかない場合、タブページは、10 のテキストボックスをもつタブページに適したサイズになるということです。これは、そのタブページがもっと多くのスペースを必要とするためです。そのタブエリアによって取られたエリアは、ユーザーが新しいタブページに切り替えても、変化しません。

ここには、タブを 2 つ追加しました。Mail というラベルを付けたタブと News というラベルを付けたタブです。ユーザーが Mail タブをクリックすると、最初のタブページの内容が表示されます。この場合は、'Automatically check for mail' というラベルを付けたチェックボックスのあるボックスが、最初のタブに、表示されます。2 番目のタブをクリックすると、'Clear News Buffer' というラベルを付けたボタンをもつボックスが表示されます。コードでは、2 つのタブは、'mailtab' と 'newstab' というラベルを付けられています。

最初のタブが、いつもデフォルトで表示されるタブです。しかし、最初に表示されるタブとして別のタブを設定したい場合は、tabpanels に index 属性を追加することができます。その値は、最初に表示させたいタブの番号を設定します。1 が最初のタブのものです。以下の例は、2 番目のタブをデフォルトに設定する方法を示しています。

現在選択されているタブは、tab 要素が true に設定された selected 追加属性を与えられます。これは、現在選択されているタブに、それが選択されていることを示す別の外見を与えるために使われます。一つのタブだけが、一度に、この属性の true 値をもちます。

最後に、タブの位置を変更して、タブをタブページのどの側にも表示させることができます。このための特別なシンタックスはありません。タブの位置を再配置して、必要に応じて、orient を設定します。タブ要素は、レイアウトという点では通常のボックスに非常によく似ていることを思い出して下さい。

例えば、タブを右側に置くには、tabs の向きを変更して、垂直方法になるようにします。これは、タブを垂直方向にスタックして表示させたいからです。また、tabbox を調整して、水平方向になるようにします。これは、タブをタブページに並べて表示させたいために必要です。

tabs が tabpanels の後に来るように移動することによって、タブを右側や下側に置くことができます。

「ファイル検索」ダイアログにタブを追加する

2 番目のパネルを「ファイル検索」ダイアログに追加しましょう。検索オプションを含むオプションタグを作ります。これは、検索オプションの指定を行なう上で、最善のインターフェースではないかもしれません。しかし、タブの例を示すためにやってみることにします。最初のタブには、上部のラベルと検索条件ボックスが必要です。2 番目のタブには、オプションを幾つか追加します。プログレスバーとボタンが、タブの外側のメインダイアログにあるようにします。

<box orient="vertical" flex="1">

<tabbox orient="vertical">
  <tabs orient="horizontal">
    <tab label="Search" selected="true"/>
    <tab label="Options"/>
  </tabs>

  <tabpanels>
   <tabpanel id="searchpanel" orient="vertical">

    <html>
     Enter your search criteria below and select the Find button to begin
     the search.
    </html>

    <spacer style="height: 10px"/>

    <groupbox orient="horizontal">
      <label control="searchtype" value="Search Criteria"/>

      <menulist id="searchtype">
        <menupopup>
          <menuitem label="Name"/>
          <menuitem label="Size"/>
          <menuitem label="Date Modified"/>
        </menupopup>
      </menulist>
      <spacer style="width: 10px;"/>
      <menulist id="searchmode">
        <menupopup>
          <menuitem label="Is"/>
          <menuitem label="Is Not"/>
        </menupopup>
      </menulist>

      <spacer style="height: 10px"/>
      <textbox id="find-text" flex="1" style="min-width: 15em;"/>

    </groupbox>
   </tabpanel>

   <tabpanel id="optionspanel" orient="vertical">
    <checkbox id="casecheck" label="Case Sensitive Search"/>
    <checkbox id="wordscheck" label="Match Entire Filename"/>
   </tabpanel>

 </tabpanels>
</tabbox>

タブ要素がウィンドウの主内容の周りに置かれました。Search と Options という2 つのタブがあるのが分かります。個々のタブをクリックすると、各々のタブページが現われます。イメージが示しているように、2 つのオプションが 2 番目のタブに表示されています。最初のタブは、上に並ぶタブを除けば、以前のものと非常によく似ています。selected 属性が最初のタブに追加されています。そのため、それがデフォルトで選択されます。

(進む) 次に、ツールバーの作り方を見ることにしましょう。