XUL チュートリアル - 単純なメニューバー

このセクションでは、メニューをもつメニューバーの作り方を見ることにしましょう。

メニューを作る

XUL には、多くの異なったメニュー作成方法があります。最も基本的な方法は、多くのアプリケーションにあるような一行中にメニューをもつメニューバーを追加することです。ポップアップメニューを作ることもできます。XUL のメニュー機能は、多くの異なった要素からなり、それらを使ってメニューバーやポップアップメニューが作れます。メニュー上の項目は、非常に簡単にカスタマイズできます。menulist を使ったメニューの作り方の一部は、既に見ました。このセクションは、それに基づいて組み立てられています。

メニューバーは、通常、ツールバーと同様に作られます。メニューバーは、toolbox の内部に置くことができ、その左端にグリッピーが表示されます。それを使って、折りたたむことができます。メニューは、他のあらゆるツールバーと同様に働きます。XUL には、特殊なメニュー要素が幾つかあり、それは、メニューに典型的な特殊機能を提供しています。

メニューバーとそのメニューを作ることに関連する 5 つの要素があります。ここでは、それを簡単に説明し、後で詳細に述べることにします。

• menubar
  メニュー行のためのコンテナ。
• menu
  名前に反して、これは、実際は、メニューバー上のメニューのタイトルにすぎない。この要素は、メニューバー上に置くことも、個別に置くこともできる。
• menupopup
  メニュータイトルをクリックすると現われるポップアップメニュー。このボックスはメニューコマンドのリストを含む。
• menuitem
  メニュー上の個々のコマンド。これは、menupopup 上に置かれる。
• menuseparator
  メニュー上のセパレートバー。これは、menupopup に置かれる。

これらの要素は、必要な場合、本来ある場所の外側に置くことができます。その場合もそれらは機能しますが、外見が異なる場合があります。例えば、menu は、menubar の外に置くことができ、その場合のメニューとして働きます。

メニューは、Macintosh 以外のあらゆるプラットフォームで、メニューにもたせたいすべてのものをもつようカスタマイズできます。これは、Macintosh には、システムがコントロールするそれ自身の特殊なメニューがスクリーン上に並んでいるからです。カスタムメニューを作ることができますが、そこでは、特殊なスタイルルールが適用されなかったり、メニュー上に置くメニュー以外の要素は使えない場合があります。メニューを作る場合には、このことを心に留めておくべきです。

次は、簡単なメニューバーの例です。

<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 要素は、メニューバーに表示されるメニュー上にタイトルを作ります。しかし、これは、ポップアップを作りません。

ポップアップは、menupoup 要素を使って作ります。これは、ユーザーが親のメニュータイトル上でクリックしたときにポップアップします。ポップアップは、その内部のコマンドに適したサイズになります。コマンド自身は、menuitem 要素を使って作られます。menuitem の各々は、メニューポップアップ上のコマンドを表します。

menuseparator 要素を使って、メニュー上にセパレーターを作ることもできます。これは、メニュー項目のグループを区切るために使われます。

メニューバーは、メニューを含むボックスです。フレキシブルな toolbox の内部に置かれている点に注意して下さい。メニューバーには特殊属性はありません。それは、一種のボックスです。このため、orient 属性を vertical に設定することによって、垂直方向のメニューバーを作ることができます。

menu 要素は、通常、メニューバーの上に置かれますが、必ずしもそうでなければならないという訳ではありません。しかし、そうすると、異なった外見になります。このイメージは、メニューバーがなければ、前の例がどのように見えるかを示しています。

menu 要素は、button 要素と同様に働きます。それは、ボタンと同じ属性の幾つかと追加属性を受け付けます。

• id
  メニュータイトルボタンの一意な識別子。
• label
  File や Edit のようなメニュー上に表示されるテキスト。
• disabled
  この boolean 属性は、メニューが無効かどうかを決定する。これは可能であるが、メニュー全体を無効にする必要はほとんどない。多くのユーザーインターフェースでは、機能が利用できない場合には、そうする代わりに、メニュー全体を取り除くにすぎない。この属性は、true か false のいずれかに設定できる。もちろん、後者がデフォルトである。
• accesskey
  これは、ユーザーがメニュー項目を有効にするため、押すことのできるキーである。この文字は、メニュータイトルに下線付きで表示される。Mozilla は、label 属性を見て、ここで指定された文字に下線を追加する。この理由から、テキスト上に存在する文字を指定すべきである。(そうでなくとも、キーは働く。)
• open
  これは、メニューを開くかどうかを指定する。通常、これを自分で設定することはないが、スクリプトはメニューを開くかどうかを決めるため、この値をチェックする場合がある。
• menuactive
  これは、メニューが有効化どうかを指定する。一般的には、メニューがフォーカスをもつということである。通常、これを自分で設定することはないが、スクリプトはメニューがフォーカスされているかどうかを判断するため、この値をチェックする場合がある。

menupopup 要素は、メニューコマンドをもつポップアップウィンドウを作ります。これは一種のボックスで、デフォルトは垂直方向です。これは、必要な場合、水平方向に変更することができます。こうすると、メニュー項目は、一行中に置かれます。通常、メニュー項目とメニューのセパレーターは、menupopup 上に置かれます。menupopup にはどんな要素でも置くことができます。しかし、それらは、Macintosh では無視されます。

menuitem 要素は、同じ属性の幾つかを共有している点で、menu 要素と非常によく似ています。

• id
  メニュータイトルボタンの一意な識別子。
• label
  Open や Save などメニュー項目上に表示されるテキスト。
• disabled
  この bealean 属性は、メニュー項目が無効かどうかを決定する。この属性は、true か false のいずれかに設定できる。後者がデフォルトである。
• accesskey
  これは、ユーザーがメニュー項目を有効にするため、押すことのできるキーである。この文字は、多くの場合、メニュータイトルに下線付きで表示される。Mozilla は、label 属性を見て、ここで指定された文字に下線を追加する。この理由から、テキスト上に存在する文字を指定すべきである。
• acceltext
  これは、メニューコマンドの隣に表示されるショートカットキーテキストを指定する。しかし、キーアクションをメニュー項目と関連付けることはない。これを行なう方法は後で見ることにする。

menuseparator には、特殊属性はありません。これは、隣り合うメニュー項目間に水平方向のセパレーターを作るにすぎません。

ボタンにも、accesskey 属性を使うことができます。これは、メニューの場合と同じ様に働きます。ユーザーが accesskey で指定したキーを押すと、その要素はフォーカスを得ます。

現在ハイライトされているか選択されている menuitem は、menuactive 属性を与えられます。これは、boolean 値で、メニュー項目がハイライトされているかどうかを識別します。この情報は、CSS でハイライトにスタイルを与えるのに使うことができます。

menu は、メニューバー上になければならないということはない点を思い出して下さい。これを別のところに置いても、それは動作しますし、選択すべき項目リストもポップアップします。menu 要素内部に何を置いても、使用されるポップアップとなる menupopup 要素とは関係なく、メニューが表示されるときに使われます。例えば:

<menu>
  <button label="Click Me"/>
  <menupopup>
    <menuitem label="Choice 1"/>
    <menuitem label="Choice 2"/>
    <menuitem label="Choice 3"/>
  </menupopup>
</menu>

これは、関連付けられたポップアップメニューをもつ 'Click Me' というラベルのボタンを表示します。これは、多くの場合、ナビゲーターの back ボタン上のドロップダウンを作るのに使われます。ドロップダウンリストのために使われる menulist は、実際には、特殊な型の menu 要素であることに注意して下さい。

(進む) 次は、メニューの機能の幾つかを学ぶことにしましょう。

例: 5.1.1 5.1.2