Toolbars

ツールバー

A toolbar is usually placed along the top of a window and contains a number of buttons that perform common functions. XUL has a method to create toolbars.

ツールバーは通常、ウィンドウの上部に置かれ、共通の機能を行なう多数のボタンを もちます。XUL には、ツールバーを作る方法があります。

Adding a Toolbar

ツールバーを追加する

Like a number of elements, XUL toolbars are a type of box. Usually, a row of buttons would appear in the toolbar, but any element can be placed in a toolbar. For example, the Mozilla browser window contains a textbox that displays the page URL.

多くの要素と同様に、XUL のツールバーは一種のボックスです。通常、一行のボタンが ツールバーに表示されますが、ツールバーにはどんな要素でも置くことができます。 例えば、 Mozilla ブラウザウィンドウには、ページの URL を表示するテキストボックス があります。

Toolbars may be placed on any side of the window, either horizontally or vertically. Of course you wouldn't normally put a textbox in a vertical toolbar. Actually, because toolbars are just boxes they can actually go anywhere you want, even in the middle of a window. Typically, however, a set of toolbars would appear along the top of a window. When more than one toolbar is placed next to each other, they are typically grouped together in something called a toolbox.

ツールバーは、ウィンドウのどの側にも、水平方向か垂直方向で置くことができます。 もちろん、普通はテキストボックスを垂直方向のツールバーに置くことはないでしょう。 実際、ツールバーはボックスにすぎないので、ウィンドウ内のどこに来ることもできます。 たとえそれがウィンドウの真中であっても構いません。 しかし、多くの場合、ツールバーセットはウィンドウの上部に置きます。 1 つ以上のツールバーを互いに並べて置く場合、たいていは、ツールボックスと呼ばれる ものでツールバーをグループ化します。

Along the left side of the toolbar is a little notch which, if clicked, will collapse the toolbar so that only the notch is visible. The notch is called a grippy. When mutliple toolbars are all placed in the same toolbox, the grippies will collapse into a single row. This shrinks the total amount of space that is used. Vertical toolbars have their grippies along their top edge. The user will usually collapse the toolbar if they want more space for the main window.

ツールバーの左側には、小さなノッチがあります。これをクリックすると、ツールバーは 折り畳まれて、ノッチだけが見えます。ノッチはグリッピー (grippy) と呼ばれます。 複数のツールバーが同じツールボックスに置かれるた場合、グリッピーは一行に折り畳みます。 これは使用スペースの全量を減らします。垂直方向のツールバーでは、グリッピーは 上端にあります。メインウィンドウをもっと広くしたい場合、ユーザは通常、ツールバーを 折り畳みます。

Here is a example of a simple toolbar inside a toolbox.

次は、ツールボックス内の単純なツールバーの例です。

Example 5.1.1: Source View
<toolbox>
  <toolbar id="nav-toolbar">
    <toolbarbutton label="Back"/>
    <toolbarbutton label="Forward"/>
  </toolbar>
</toolbox>

This has created a toolbar containing two buttons, a Back button and a Forward button. The one toolbar has been placed inside the toolbox. This has involved four new tags, which are described here.

これによって、Back ボタンと Forward ボタンという 2 つのボタンをもつツールバーが 作られました。ツールバーが一つ、ツールボックス内に置かれています。 これには、4 つの新しいタグが関係しています。ここで、その説明をしましょう。

  • toolbox
    A box that contains toolbars.
  • toolbar
    A single toolbar that contains toolbar items such as buttons. Toolbars can be collapsed using the grippy on its left or top side.
  • toolbarbutton
    A button on a toolbar, which has all the same features of a regular button but is usually drawn differently.
  • toolbargrippy
    This element creates the notch that is used to collapse and expand the toolbar. You don't need to use it directly as it is added automatically.
  • toolbox
    ツールバーを含むボックス。
  • toolbar
    ボタンなどのツールバー項目を含む、一つのツールバー。ツールバーは、左側か 上側にあるグリッピーを使って折り畳むことができる。
  • toolbarbutton
    ツールバー内のボタン。このボタンは、通常のボタンと同じ機能を持っているが、 普通は別の外見をしている。
  • toolbargrippy
    この要素は、ツールバーを折り畳んだり展開するのに使われるノッチを作る。 このノッチは自動的に追加されるので、直接使う必要はない。

The toolbar is the main element that creates the actual toolbar. Inside it are placed the individual toolbar items, usually buttons, but they can be other elements. The toolbar should have an id attribute or the grippy won't be able to collapse or expand the toolbar properly.

toolbar は、実際のツールバー を作る主要素です。その内部には個々のツールバー項目が置かれます。通常はボタンですが、 他の要素であっても構いません。ツールバーには、id 属性を与えるべきです。そうでないと、グリッピーは、ツールバーを正しく折り畳んだり 展開したりすることができません。

In the example above, only one toolbar was created. Multiple toolbars can be created just as easily by adding more toolbar elements after the first one.

上の例では、ツールバーは一つだけ作られています。最初の toolbar 要素の後に更に toolbar 要素を追加することで、 複数のツールバーも簡単に作ることができます。

The toolbox is a container for toolbars. In some applications, you will have several toolbars along the top of the window. You can put them all inside a toolbox.

toolbox は、ツールバーのコンテナです。 アプリケーションには、ウィンドウの上部にツールバーが幾つかあるものもあります。 それら全てを、toolbox 内に置くことができます。

You do not have to put toolbar elements inside a toolbox.

必ずしも、toolbar 要素を、 toolbox 内部に置く必要はありません。

The grippies on the toolbox are created using another element, a toolbargrippy. It doesn't really make any sense to use it outside of a toolbar as it will have no special purpose as it will have nothing to collapse. However, you may wish to style it differently. You can hide the grippy by adding the grippyhidden attribute to the toolbar element, set to the value true.

ツールボックス上のグリッピーは、別の要素 toolbargrippy を使って作られます。実際には、これをツールバーの外で使っても何の意味もありません。 折り畳むべきものがない場合、それには何の特段の目的もないからです。 しかし、それに別なスタイルを付けたい場合があるかもしれません。 toolbar 要素に grippyhidden 属性を追加し、その値を true にセットすると、 グリッピーを隠すことができます。

A toolbox with three toolbars in it:

3 つのツールバーをもつツールボックスの例。

The same set of toolbars but two have been collapsed.

2 つのツールバーが折り畳まれた、上と同じツールバーセット。

Let's add a toolbar to the find files dialog. We don't really need one but we'll add one anyway to demonstrate its use. Two buttons will be added, an Open button and a Save button. Presumably, they would allow the user to save search results and re-open them later.

「ファイル検索」ダイアログにツールバーを追加しましょう。実際には必要ありませんが、 例を示すという目的で追加することにします。2 つのボタン、Open ボタンと Save ボタン を追加します。多分これによって、ユーザは検索結果を保存し、後でそれを再び開く ことができるでしょう。

<vbox flex="1">
  <toolbox>
    <toolbar id="findfiles-toolbar">
      <toolbarbutton id="opensearch" label="Open"/>
      <toolbarbutton id="savesearch" label="Save"/>
    </toolbar>
  </toolbox>
  <tabbox>

A toolbar with two buttons has been added here. In the image, you can see them appear horizontally along the top. The grippy also appears on the left side of the toolbar. Notice that the toolbar has been placed inside the vertical box just above the tabbox. This is because we need the vertical orientation so that the toolbar will appear above everything else.

この例では、2 つのボタンをもつツールバーが追加されています。画像で、上部に これらが水平方向に表示されているのが分かるでしょう。グリッピーも、ツールバーの 左端に表示されています。ツールバーを、垂直方向ボックス内でタブボックス (tabbox) のすぐ上に置いている点に注意して下さい。これは、ツールバーをそれ以外すべてのもの の上に表示させるためには、垂直方向が必要だからです。


(Next) Next, we'll find out how to add a menu bar to a window.

(進む) 次は、ウィンドウへのメニューバーの追加の仕方を見ることにしましょう。

Examples: 5.1.1

Find files example so far: Source View

今のところの「ファイル検索」の例: Source View


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