XUL Tutorial:Simple Menu Bars

出典: MDC

このセクションでは、複数のメニューを持つメニューバーの作成方法を見て行きます。

目次 1 メニューの作成 1.1 簡単なメニューバーの例 1.2 menubar 要素 1.3 menu 要素 1.4 menupopup 要素 1.5 menuitem 要素 1.6 menuseparator 要素

[編集] メニューの作成

XUL には、メニューを作る方法がいくつかあります。 最も基本的な方法は、他の多くのアプリケーションが持っているような、複数のメニューが 1 列に並んだメニューバーを追加することです。 また、ポップアップメニューも作成可能です。 XUL のメニュー機能は、いくつかの異なる要素で構成されており、これらを利用してメニューバーやポップアップメニューを作ることができます。 メニューの項目をカスタマイズするのはとても簡単です。 menulist を使用したメニュを作成する方法の一部については既に説明しています。 このセクションはそれを前提に構成しています。

メニューバーは、おおむねツールバーと同じように作成されます。 また、メニューバーはオプションで toolbox の中に置くことができます。 メニューは他のツールバーと同じように動作します。 XUL は、メニュー固有の特殊な機能を提供するために専用の要素をいくつか持っています。

メニューバーと、メニューの作成に関係する要素は 5 つあります。 以下で簡単に紹介した後、詳細な説明を行っていきます。

menubar

メニューの列を入れるためのコンテナです。

menu

「menu」という名前ですが、実際にはメニューバーに表示されるメニューのタイトルだけを持っています。この要素はメニューバーの中に置くことが可能です。またはメニューバーとは別の場所に置くこともできます。

menupopup

メニューのタイトルをクリックした時に、ポップアップして表示されるボックスです。このボックスには、利用者に提示する操作項目のリストが含まれます。

menuitem

メニュー上の個々の操作項目です。 この要素は menupopup の中に置かれます。

menuseparator

メニューを分割するための線です。この要素は menupopup の中に置かれます。

[編集] 簡単なメニューバーの例

簡単なメニューバーの例を以下に示します。

例 1 : ソース 表示

<toolbox flex="1">
  <menubar id="sample-menubar">
    <menu id="file-menu" label="File">
      <menupopup id="file-popup">
        <menuitem label="New"/>
        <menuitem label="Open"/>
        <menuitem label="Save"/>
        <menuseparator/>
        <menuitem label="Exit"/>
      </menupopup>
    </menu>
    <menu id="edit-menu" label="Edit">
      <menupopup id="edit-popup">
        <menuitem label="Undo"/>
        <menuitem label="Redo"/>
      </menupopup>
    </menu>
  </menubar>
</toolbox>

この画像は、menubar 要素を使って作成した簡単なメニューバーです。 この要素は、メニューを置くための行部分を作ります。 2 つのメニュー、File と Edit が作られています。 menu 要素は、メニューの一番上にあるタイトルの部分を作り、メニューバーの所に表示されます。 ポップアップは menupopup 要素を使って作ります。 これは、利用者が親メニューのタイトルをクリックしたときにポップアップされます。 ポップアップのサイズは、その中にある操作項目に合わせて大きくなります。 操作項目自体は、menuitem 要素を使って作成されます。 それぞれが、メニューのポップアップ中の 1 つの操作項目を表しています。

menuseparator 要素を使って、メニューに分割線を作るも可能です。 この要素は、menuitem をグループに分割するために使用します。

[編集] menubar 要素

menubar 要素は、メニューを含んでいるボックスです。 例では、この要素が伸縮可能な toolbox の中に置かれていることに注目してください。 この要素には特別な属性はありませんが、これもボックスの一種です。 このことは、orient 属性に vertical を設定することで、垂直配置のメニューバーが作成可能であることを意味しています。

[編集] menu 要素

menu要素は、buttonに似たような動作をします。 menu は button と同じ属性と、いくつかの付加的な属性を受け付けます。

id

メニューのタイトルボタンのための一意な識別子。

label

File や Edit といったメニューに表示するテキスト。

disabled

この論理型の属性は、メニュー項目を無効にするかどうかを決めます。この設定は可能ですが、メニュー全体を無効にする必要があることは、めったにないと思います。この属性には true と falseが設定可能です。もちろん、初期値は後者になります。

accesskey

この属性は、利用者がメニューのアイテムをアクティブにするために押すキーです。この文字は、通常メニュータイトルに下線をつけて表示されます。Mozilla は label 属性の値を参照し、この属性で指定された文字に下線を付けて表示させます。このため、accesskey の値には label のテキストに存在する文字を指定するべきです。(そうしない場合でも、キーによる入力は依然動作します)。【訳注: 日本語の場合、英字がメニューのラベルに直接現れることはまれなので、「(キー)」をラベルに付加して置きます】

menu 要素は、通常は menubar 要素の中に配置されます。 しかしながら、このことは必須ではありません。 ただし、menubar 要素の中に置かない場合は、見た目が変わります。 この画像は、前の例からメニューバーを無くしたものを示しています。

[編集] menupopup 要素

menupopup 要素は、メニューの操作項目を含むポップアップウインドウを作成します。 この要素もボックスの一種で、デフォルトでは垂直配置になります。 必要なら水平配置に変更することも可能で、その場合 menuitem は、横一列に配置されます。 通常、menuitem と menuseparator のみが menupopup に配置されます。 それ以外のどんな要素でも menupopup に配置することも可能ではありますが、その場合は Macintosh を無視することになります。

[編集] menuitem 要素

menuitem 要素は menu 要素とよく似ており、同じ属性を持っています。

id

メニュー項目の一意な識別子。

label

Open や Save といったメニュー項目に加えるテキスト。

disabled

この論理型の属性は、メニュー項目を無効にするかどうかを決めます。この属性にはtrueとfalseが設定可能で、初期値は後者になります。

accesskey

この属性は、利用者がメニューのアイテムをアクティブにするために押すキーです。この文字は、通常メニュータイトルに下線をつけて表示されます。Mozilla は label 属性の値を参照し、この属性で指定された文字に下線を付けて表示させます。このため、accesskey の値には label のテキストに存在する文字を指定するべきです。

acceltext

ここには、メニューの操作項目のテキストの隣に表示されている (Ctrl+Zのような) ショートカットキーのテキストを指定します。これは (表示テキストの指定だけであり) メニュー項目をキーボード操作と関係づけるものではありません。メニュー項目とキーを関連づける方法は、後のセクションで説明する予定です。

[編集] menuseparator 要素

menuseparator には特別な属性はありません。 これは、単に次の menuitem との間に水平な線を作るだけです。

次のセクションでは、よりたくさんのメニューの機能を学びます。