Tabboxes

タブボックス

It is common in preference dialogs for tabbed pages to appear. We'll find out how to create them here.

設定ダイアログで、タブ付きページを表示するというのはよくあることです。 ここでは、この作り方を見ることにしましょう。

Tabboxes

タブボックス

Tabboxes are typically used in an application in the preferences window. A series of tabs appears across the top of a window. The user can click each tab to see a different set of options. It is useful in cases when you have more options than will fit in one screen.

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

XUL provides a method to create such dialogs. It involves five new elements, which are described briefly here and in more detail below.

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

  • tabbox
    The outer box that contains the tabs along the top and the tab pages themselves.
  • tabs
    The inner box that contains the individual tabs. In other words, this is the row of tabs.
  • tab
    A specific tab. Clicking on the tab brings the tab page to the front.
  • tabpanels
    The container for the pages.
  • tabpanel
    The body of a single page. You would place the content for a page within this element. The first tabpanel corresponds to the first tab, the second tabpanel corresponds to the second tab and so on.
  • tabbox
    上部のタブとタブページそのものをもつ外側のボックス。
  • tabs
    個々のタブをもつ内部のボックス。言い換えると、これは、タブの並びである。
  • tab
    指定のタブ。タブをクリックすると、タブページが前面に表示される。
  • tabpanels
    ページのコンテナ。
  • tabpanel
    一つのページの本体。ページの内容は、この要素内に置く。 最初のタブパネルは最初のタブに対応し、2 番目のタブパネルは 2 番目のタブに対応するという具合である。

The tabbox is the outer element. It consists of two children, a tabs element which contains the row of tabs and a tabpanels elements which contains the tabbed pages.

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

Shown below is the general syntax of a tabbox:

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

<tabbox id="tablist">
  <tabs>
    -- tab elements go here --
  </tabs>
  <tabpanels>
    -- tabpanel elements go here --
  </tabpanels>
</tabbox>

The tab elements are placed inside a tabs element which is much like a regular box. The tabs element itself has been placed inside a tabbox. The tabbox also contains a tabpanels element which will appear below the tabs due to the vertical orientation on the whole tabbox.

tab 要素は、通常のボックスに非常によく似た tabs 要素の内部に置かれます。 tabs 要素自身は、 tabbox の内部に置かれています。 tabbox には、 tabpanels 要素もあります。 この要素は、tabbox 全体に垂直方向への配置のため、tabs の後に現れています。

There is really nothing special about the tab elements that make them different than boxes. The difference is that the tabs render slightly differently and only one tab panel's contents are visible at once, much like a deck.

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

The content of the individual tab pages should go inside each tabpanel element. It does not go in the tab element as that is where the contents of the tab along the top go (which could contain any elements itself).

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

Each tabpanel element becomes a page on the tabbed display. The first panel corresponds to the first tab, the second element inside the panel corresponds to the second element, and so on. There is a one-to-one relationship between each tab element and the tabpanel elements.

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

When determining the size of the tabbox, the size of the largest page is used. That means that if there are ten textboxes on one tab page and only one on another, the tab page will be sized to fit the one with the ten on it as this takes up more room. The area taken up by the tab area does not change when the user switches to a new tab page.

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

Let's look at an example:

例を見ることにしましょう。

Example 4.3.1: Source View
<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>

Here, two tabs have been added. The first one labeled Mail and the other labeled News. When the user clicks the Mail tab, the contents of the first tab page will be displayed. In this case, the box with the check box labeled 'Automatically check for mail' will appear in the first tab. The second tab, when clicked, will display the box containing the button labeled Clear News Buffer. In the code, the two tab pages have been labeled 'Mail' and 'News'.

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

The currently selected tab element is given an additional selected attribute on a tab element which is set to true. This is used to give the currently selected tab a different appearance so that it will look selected. Only one tab will have a true value for this attribute at a time.

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

Finally, you can change the position of the tabs so that they appear on any side of the tab pages. There is no special syntax to do this. You simply rearrange the position of the tabs and set the orient attribute as necessary. Remember that the tab elements are much like regular boxes in terms of layout. However, you should probably leave the tabs on top, otherwise they might not look very good under particular themes.

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

For example, to put the tabs along the left side, change the orientation of the tabs so that it is vertical. This is because you want the tabs to appear vertically stacked. Also, adjust the tabbox so it has horizontal orientation. This needs to be done because you want the tabs to appear beside the tab pages.

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

You can place the tabs on the right or bottom side by moving the tabs so that it is after the tabpanels.

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

Adding Tabs to the Find Files Dialog

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

Let's add a second panel to the find files dialog. We'll create an Options tab that will contain some options for searching. This may not be the best interface for doing this, but we'll use it to demonstrate tabs. The label across the top and the search criteria box will need to go on the first tab. We'll add some options on the second tab. The progress bar and the buttons can stay on the main dialog, outside of the tabs.

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

<vbox flex="1">

<tabbox>
  <tabs>
    <tab label="Search" selected="true"/>
    <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>

The tab elements have been placed around the main content of the window. You can see the two tabs, Search and Options. Clicking on each one will bring up the respective tab pages. As shown by the image, the two options appear on the second tab. The first tab looks pretty much like it did before, apart from the tabs along the top.

タブ要素がウィンドウの主内容の周りに置かれました。Search と Options という2 つの タブがあるのが分かります。個々のタブをクリックすると、各々のタブページが現われます。 画像に示すように、2 つのオプションが 2 番目のタブに表示されています。 最初のタブは、上に並ぶタブを除けば、以前のものと非常によく似ています。


(Next) Next, we'll look at how to create grids of content.

(進む) 次では、内容グリッドの作り方を見ることにしましょう。

Examples: 4.3.1

Find files example so far: Source View


Copyright (C) 1999 - 2004 XulPlanet.com
訳者: kmine
このドキュメントのオリジナルは XULPlanet において英語で公布されています。
またドキュメントの管理の言語は現在も英語です。この日本語訳は、
利用者の利便のために Mozilla Japan 翻訳部門によって提供されたものです。
フィードバックは英語で、元の著者に送って下さい。
翻訳された文書の一覧は、現在以下のURLで見ることが出来ます。
http://www.mozilla.gr.jp/jt/xul/progress.html