XUL チュートリアル - ツールバー

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

ツールバーを追加する

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

ツールバーは、ウィンドウのどの側にも、水平方向か垂直方向で置くことができます。もちろん、普通、テキストボックスを垂直方向のツールバーに置くことはないでしょう。実際、ツールバーはボックスにすぎないので、ウィンドウ内のどこに来ることもできます。たとえそれがウィンドウの真中であっても構いません。

しかし、多くの場合、ツールバーセットは、ウィンドウの上部に配置されます。複数のツールバーを互いに並べて置く場合、たいていは、ツールボックスと呼ばれるものでグループ化します。

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

モダンスキンは、スタイルシート 'chrome://communicator/skin/' もインクルードしなければ、ツールバーにグリッピーをインクルードしません。しかし、クラシックスキンは、デフォルトでグリッピーをインクルードします。

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

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

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

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

toolbox には、ツールバーの親である以外の追加的な用法があります。それは、また、ツールバーの端にあるツールバーを隠すためのグリッピーを提供します。多数のツールバーが一つの toolbox に置かれると、グリッピーは、小さなスペースに折り畳まれます。必ずしも、toolbar 要素を、toolbox 内部に置く必要はありません。

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

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

<box orient="vertical" flex="1">
  <toolbox>
    <toolbar id="findfiles-toolbar">
      <button id="opensearch" label="Open"/>
      <button id="savesearch" label="Save"/>
    </toolbar>
  </toolbox>
  <tabbox orient="vertical">

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

(進む) 次は、ツールバーの他の機能の幾つかを見ることにしましょう。