ツールバー

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

ツールバーを追加する

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

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

単純なツールバー

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

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

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

画像:toolbar1.jpg

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

toolbox: ツールバーを置くためのボックスです。
toolbar: 1 つのツールバーです。ここには、ボタンなどのツールバーが持つアイテムが含まれます。
toolbarbutton: ツールバー内のボタンです。このボタンは、普通のボタンと機能的には同じですが、通常は異なった外見をしています。

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

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

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

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

カスタマイズ可能なツールバー

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

ファイル検索ダイアログの例

それでは、ファイル検索ダイアログにツールバーを追加してみましょう。実際の機能としては必要ありませんが、例を示すという目的で追加することにします。 2 つのボタン、Open ボタンと Save ボタンを追加します。これらのボタンは、利用者が検索結果を保存し、後でそれを再び開くような機能を想定しています。

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

この例では、2 つのボタンを持つツールバーが追加されています。画像から、これらが上辺にそって水平に表示されているのが分かると思います。グリッピーも、ツールバーの左端に表示されています。ツールバーを、タブボックス (tabbox) のすぐ上に、垂直ボックスで囲って置いている点に注意して下さい。ツールバーを、それ以外の全てのものの上に表示させるためには、垂直配置が必要になります。

画像:toolbar5.png

var el = env.locale; ここまでのファイル検索ダイアログの例 : ソース表示

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

« 前のページ次のページ »

ツールバー