タブボックス

設定ダイアログでは、タブ付きページを使用したものをよく見かけると思います。 ここでは、その作り方を見ていきます。

タブボックス

タブボックスは、アプリケーションの設定ウィンドウでよく利用されます。 タブボックスでは、ウィンドウの上部にタブが並んで表示されます。 利用者は、個々のタブをクリックすることで、異なったオプション設定を表示させることが可能です。 これは、1 つの画面に収まらないほどオプションがあるような場合に使用すると便利です。

XUL では、こうしたダイアログを作るための方法を提供しています。 このために、5 つの新しい要素を使用します。 その概要を以下に示した後、詳細の説明に移ります。

tabbox

上部のタブとタブページ全体を含む外側のボックスです。

tabs

個々のタブを含んだ内部のボックス。言い換えれば、タブの並びの部分です。

tab

特定の 1 つのタブです。タブをクリックすると、タブページが前面に表示されます。

tabpanels

一連のページを含むコンテナになります。

tabpanel

特定の 1 ページの本文です。ページの内容はこの要素内に置きます。最初の tabpanel は最初のタブに対応し、2 番目の tabpanel は 2 番目のタブに対応するという具合になります。

tabbox は、タブボックス全体を含む、最も外側に位置する要素です。 これは、タブの並びの部分を含む tabs 要素と、 タブ付けされたページ部分を含む tabpanels 要素の、 2 つの子要素からなっています。

以下に、タブボックスの一般的な構文を示します。

<tabbox id="tablist">
  <tabs>
    <!-- tab 要素をここに記述 -->
  </tabs>
  <tabpanels>
    <!-- tabpanel 要素をここに記述 -->
  </tabpanels>
</tabbox>

tab 要素は tabs 要素の内部に置かれます。 tabs 要素は、機能的には通常のボックスとほとんど同じです。 tabs 要素自身は、tabbox 要素の内部に置かれます。 また、tabbox には、tabpanels 要素も含まれています。 タブボックス全体は垂直配置であるため、tabpanels　要素は、tabs 要素の下に表示されます。

実際のところ、タブ関係の要素と通常のボックスの違いで、特殊なものは 1 つもありません。 ボックスと同様に、タブの内容にも任意の要素を含めることが可能です。 違いとしては、タブの部分が少々異なった風に描画されるということと、 タブのパネル部分の内容は、デッキ (deck) と同様、一度に 1 つしか可視化されないということです。

個々のタブページの内容は、tabpanel 要素の中に入れる必要があります。 tab 要素の方ではありません。 こちらには上部に並ぶタブの内容 (見出し文字列) が入ります。

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

tabbox のサイズを決めるために、一番大きいページのサイズが使われます。 具体的には、あるタブページに 10 個のテキスト入力欄があり、別のタブページには 1 個しかない場合、 10 個の方がより多くのスペースを必要とするため、1 個の方も 10 個の方に合わせたサイズに拡大されるということです。 タブボックスにより占められる領域は、利用者が新しいタブのページに切り替えても変化しません。

タブボックスの例

それでは、以下にタブボックスの例を示します。

var el = env.locale; 例 1 : ソース 表示

<tabbox>
  <tabs>
    <tab label="Mail"/>
    <tab label="News"/>
  </tabs>
  <tabpanels>
    <tabpanel id="mailtab">
      <checkbox label="Automatically check for mail"/>
    </tabpanel>
    <tabpanel id="newstab">
      <button label="Clear News Buffer"/>
    </tabpanel>
  </tabpanels>
</tabbox>

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

現在選択されている tab 要素には、true に設定された selected 属性が付加されます。 これは、現在選択されているタブを、選択されていることがわかる外見に変更するために使われます。 この属性に true が設定されるのは、一度に 1 つのタブだけです。

タブの表示位置

最後に、タブの位置を変更して、タブページの任意の辺に沿って表示させる方法について説明します。 といっても、このために特別な構文があるわけではありません。 単純に、必要に応じて、orient 属性と dir属性を設定するだけです。 タブ関連の要素は、レイアウトという点では通常のボックスとほとんど同じであるということを思い出してください。 もう少し詳しく述べると、tabbox 要素は、垂直配置がデフォルトの通常のコンテナ用ボックスとほとんど同じであり、tabs 要素は、水平配置がデフォルトのコンテナ用ボックスとほとんど同じであるということがいえます。

例えば、タブを左側に並べるには、まず、tabs の orient 属性を垂直配置に変更して、縦に積み上げるように表示させます。 さらに、tabbox も合わせて水平配置に変更します。 これで、タブはタブページの上ではなく左に表示されるようになるはずです。 tabpanel の orient 属性を変更しても、タブの表示位置には何の影響も無いことを補足しておきます。これは、タブページが (タブ関係の要素の包含関係を層構造ととらえたとき) 一番上の層に位置するためです。

tabs 要素を移動して tabpanels の後に置くことによって、タブを右側や下側に置くことができます。 もしくは、tabbox 要素の dir 属性を reverse に設定しても、同様になります。 このように、タブは任意の辺に配置可能ではありますが、できるだけ上部に置いたほうが無難です。それ以外では、一部のテーマで見栄えがよくならない可能性があります。

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

<vbox flex="1">

<tabbox selectedIndex="1">
  <tabs>
    <tab label="Search"/>
    <tab label="Options"/>
  </tabs>

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

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

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

    <groupbox orient="horizontal">
      <caption label="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>

次のセクションでは、内容をグリッド状に並べる方法を見ていきます。