XUL Tutorial:Toolbars

出典: MDC

ツールバーは、通常ウィンドウの上部に置かれ、よく使う機能を実行するための多数のボタンを持っています。 XUL では、ツールバーを作るための方法を提供しています。

[編集] ツールバーを追加する

XUL にはボックス型の要素がたくさんありますが、ツールバーもボックスの一種になります。 ツールバーには、ボタンが 1 行に並んで表示されるのが一般的ですが、どんな要素を置いてもかまいません。 例えば、 Mozilla のブラウザウィンドウのツールバーには、ページの URL を表示するテキスト入力欄があります。

ツールバーは、ウィンドウの任意のサイドに、水平・垂直どちらでも好きな向きで置くことが可能です。もちろん、普通はテキスト入力欄を垂直ツールバーに置くようなことはしませんが、 実際のところ、ツールバーはボックスにすぎないため、ウィンドウ内の好きな場所に置くことができます。 極端なことをいえば、ウィンドウの真中に置いてもかまいません。 といっても、たいていは、ツールバーはまとめてウィンドウの上部に置かれます。 1 つ以上のツールバーを並べて置く場合、通常はツールボックスと呼ばれるものでグループ化しておきます。

[編集] 単純なツールバー

以下は、ツールボックスに置かれた単純なツールバーの例です。

例 1 : ソース 表示

<toolbox>
  <toolbar id="nav-toolbar">
    <toolbarbutton label="Back"/>
    <toolbarbutton label="Forward"/>
  </toolbar>
</toolbox>

この例では、Back ボタンと Forward ボタンという 2 つのボタンを持つツールバーが 1 つ作られています。 そのツールバーは、ツールボックスの内に置かれます。 この例には、4 つの新しいタグが含まれています。 これらについて、以下に説明します。

toolbox

ツールバーを置くためのボックスです。

toolbar

1 つのツールバーです。ここには、ボタンなどのツールバーが持つアイテムが含まれます。

toolbarbutton

ツールバー内のボタンです。このボタンは、普通のボタンと機能的には同じですが、通常は異なった外見をしています。

toolbar は、実際にツールバーを生成する、主となる要素です。 その内部には、個々のツールバーアイテムが置かれます。 通常はボタンですが、他の要素でもかまいません。

上の例では、ツールバーは 1 つだけ作られています。 複数のツールバーを作ることも簡単で、 toolbar 要素を、元からあるものの後に追加していくだけです。

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

なお、toolbar 要素を、toolbox 内部に置くことは必須ではありません。

[編集] カスタマイズ可能なツールバー

Firefox などの Toolkit アプリケーションは、カスタマイズ可能なツールバーを持っています。 このため、多くの拡張機能ではツールバーボタンをツールバーに直接追加するのではなく、ツールバーパレットに追加しています。 カスタマイズ可能なツールバーについての詳細は、「ツールバーボタンの作成」を参照してください。

[編集] ファイル検索ダイアログの例

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

次のセクションでは、ウィンドウへのメニューバーの追加の仕方を見ていきます。