ポップアップメニュー

前のセクションでは、メニューバーを使ったメニューの作り方を見てきました。 加えて、XUL ではポップアップメニューを作る機能も持っています。 ポップアップメニューとしては、利用者がマウスの右ボタンを押したときに表示されるメニューが典型的です。

ポップアップメニューの作成

XUL には、3 種類の異なるポップアップがあります。 これらは、主にポップアップを表示させるための方法が異なっています。 以下に概要を示します。

プレインポップアップ

プレインポップアップ (plain popup) は、要素の上でマウスの左ボタンを押したときに表示されるポップアップウィンドウです。これはメニューバー上のメニューと似ていますが、任意の場所に配置できるここと、任意の内容を持つことができる点が異なります。ブラウザウィンドウで「戻る」や「進む」ボタンの右下にある、小さな下向き三角をクリックした時に表示されるドロップダウンメニューが、この良い例としてあげられます。

コンテキストポップアップ

コンテキストポップアップ (context popup) は、利用者がコンテキストメニューボタン (たいていは右マウスボタン) を押したときに表示されるポップアップウィンドウです。 厳密には、コンテキストメニューを開く方法はプラットフォームごとに異なります。 Macintosh を例にあげると、利用者は Control キーとマウスボタンを一緒に押すか、マウスボタンを数秒押したままにします。 また、コンテキストメニューをマウスを使用せずに、キーボードのメニューキーを押すといったような方法で開くことも可能であることを付け加えておきます。

ツールチップ

ツールチップ (tooltip) のポップアップウィンドウは、利用者がマウスカーソルを要素の上に移動したときに表示されます。この種類のポップアップは、主にボタン上の表示よりも、もっと詳しいボタンについての説明を提供するために使われます。

これら 3 つのポップアップは利用者が呼び出すときの方法が異なります。 また、ポップアップの種類は、ポップアップを呼び出す要素の側で指定されることになります。

ポップアップするコンテントの定義

ポップアップは menupopup 要素を使って記述されます。 この要素はボックスの一種で、特別な属性は存在しません。 ポップアップが呼び出されると、ウィンドウが表示され、そこには menupopup 要素の中に置かれた全てのものが含まれています。 また、menupopup 要素の id 属性は、ポップアップを、出したい要素と関連付けるのに必要なため、必ず設定する必要があります。 以下に例を示して、その後に意味を説明していきます。

<popupset>
  <menupopup id="clipmenu">
    <menuitem label="Cut"/>
    <menuitem label="Copy"/>
    <menuitem label="Paste"/>
  </menupopup>
</popupset>

この例は、3 つの操作項目を持つ、単純なポップアップメニューを生成します。 この例では、menupopup 要素は、3 つの menuitem 要素を囲っています。 また、menupopup 要素に id が設定されていることも確認してください。

popupset 要素は、ポップアップメニューの宣言全体を囲みます。 これは、ポップアップのための汎用的なコンテナですが、使用は必須ではありません。 この要素によって、画面上に何かが描画されることはありませんが、全てのポップアップを一箇所にまとめて宣言するための置き場所として使用します。 この popupset という名前は、複数のポップアップ宣言を内側に置くことができるということから付けられています。 また、別のポップアップの定義を追加する場合には、最初の menupopup 要素の後に置くだけで構いません。 複数の popupset をファイルに置いても構いませんが、通常は 1 つにまとめるようにします。

ポップアップを要素に関連付ける

これで、ポップアップの作成はできましたので、いよいよポップアップを表示させてみることにします。 このためには、ポップアップを出現させる要素と関係づける必要があります。 これは、ポップアップを、利用者がウィンドウのある一定のエリアをクリックした場合のみに出現させるために必要です。 ポップアップを表示させるエリアは、主にボタンかボックスを用いて指定します。

ポップアップと要素と関係付けるためには、次に示す 3 つの属性のうちの 1 つを要素に加えます。 どの属性を加えるかは、作りたいポップアップの種類に応じて決定されます。 プレインポップアップを作成するには、popup 属性を要素に加えます。 また、コンテキストポップアップには、context 属性を加えます。 最後に、ツールチップポップアップの場合は、tooltip 属性を加えます。

これらの属性の値として、表示させるポップアップの id 属性の値を指定する必要があります。 このために、menupopup 要素には、必ず id 属性を設定しなければなりません。 この仕様によって、簡単に複数のポップアップ宣言を 1 つのファイルにまとめておくことができるようになっています。

上記の例に追加して、コンテキストメニューのポップアップを作ってみることにします。 そのためには、 context 属性を使用する必要があります。 これは、ポップアップを関係づけたい要素の方に追加します。 以下に、適用した例を示します。

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

<popupset>
  <menupopup id="clipmenu">
    <menuitem label="Cut"/>
    <menuitem label="Copy"/>
    <menuitem label="Paste"/>
  </menupopup>
</popupset>

<box context="clipmenu">
  <description value="Context click for menu"/>
</box>

ここでは、menupopup 要素をボックスと関係づけています。 ボックス内部の任意の場所で、context-click (右クリック) をすれば、ポップアップメニューが表示されます。 ポップアップは、ボックスの子要素の上でクリックした場合であっても表示されます。 したがって、この例で description 要素の上でクリックした場合であっても、ポップアップは表示されます。 context 属性は、同じ id を持つmenupopup とボックスを結びつけるのに用いられています。 この例では、clipmenu という id を持つmenupopup が表示されることになります。 これによって、たくさんのポップアップを作成して、それぞれを異なる要素に結びつけることが可能になります。

1 つの要素に対して、ポップアップの種類が異なる属性を追加することで、複数のポップアップを結びつけることも可能です。 また、同じポップアップを複数の要素と結びつけることも可能です。(これは、このポップアップための構文を採用したことによる優位点のひとつです)。 なお、ポップアップは、XUL 要素にのみ結びつけることが可能で、HTML 要素と結びつけることはできません。

ツールチップ

ここでは、ツールチップを作るための簡単な方法を見て行きます。 ツールチップを作る方法は、2 つあります。 最も簡単な方法は、tooltiptext 属性を、ツールチップを設定したい要素に追加することです。(通常は、こちらの方が多く使われています)

2 つめの方法は、ツールチップに表示する内容を含めるために tooltip 要素を使用します。 この方法では、個々のツールチップの内容部分を分離するか、またはツールチップの内容を設定するようなスクリプトを用意する必要があります。 しかしながら、この方法を用いた場合、ツールチップにテキストだけでなく任意の内容を使用できます。

var el = env.locale; Example 2 : ソース 表示

<button label="Save" tooltiptext="Click here to save your stuff"/>

<popupset>
  <tooltip id="moretip" orient="vertical" style="background-color: #33DD00;">
    <description value="Click here to see more information"/>
    <description value="Really!" style="color: red;"/>
  </tooltip>
</popupset>

<button label="More" tooltip="moretip"/>

この例にある 2 つのボタンは、それぞれツールチップを持っています。 最初のボタンは、デフォルトのツールチップのスタイルを使用します。 2 つ目のボタンは、背景色とテキストのスタイルを変更した、カスタムツールチップを使用します。 More ボタンには tooltip 属性が使われていて、対応する tooltip 要素の id の値が設定されています。 なお、tooltip 要素も、他のポップアップ系の要素と同様に popupset の中に配置可能です。

ポップアップの表示位置

デフォルトでは、プレインとコンテキストポップアップのウィンドウは、マウスポインタの位置に表示されます。 また、ツールチップは、マウスポインタと重なって隠されることが無いように、要素の少し下に表示されます。 しかしながら、ポップアップの表示位置を、もっと詳細に指示したい場合もあると思います。 例えば、ブラウザのバックボタンをクリックした時に出現するポップアップメニューは、「バックボタンの下」に表示されるべきですが、それはプレインポップアップのデフォルトの表示位置である「マウスポインタの位置」とは異なります。

ポップアップの表示位置を変更するためには、menupopup に付加的な属性である position を使うことで可能です。 また、position 属性は、menupopup 要素にも設定可能です。 この属性は、ポップアップの表示位置と、ポップアップの呼び出し元の要素の位置関係を指示するために使用します。 ここには、いくつかの値が設定可能です。以下に概要を示します。

after_start

ポップアップは、要素の下に、要素とポップアップウィンドウの左端を揃えて表示されます。ポップアップウィンドウが要素よりも大きい場合は、右の方に広がります。この値は、ブラウザの「戻る」と「進む」ボタンに結びついているドロップダウンメニューに使われています。

after_end

ポップアップは、要素の下に、要素とポップアップウィンドウの右端を揃えて表示されます。

before_start

ポップアップは、要素の上に、要素とポップアップウィンドウの左端を揃えて表示されます。

before_end

ポップアップは、要素の上に、要素とポップアップウィンドウの右端を揃えて表示されます。

end_after

ポップアップは、要素の右に、要素とポップアップウィンドウの下端を揃えて表示されます。

end_before

ポップアップは、要素の右に、要素とポップアップウィンドウの上端を揃えて表示されます。

start_after

ポップアップは、要素の左に、要素とポップアップウィンドウの下端を揃えて表示されます。

start_before

ポップアップは、要素の左に、要素とポップアップウィンドウの上端を揃えて表示されます。

overlap

ポップアップは、要素と同じ位置に重なって表示されます。

at_pointer

ポップアップはマウスポインタの位置に出現します。

after_pointer

ポップアップはマウスポインタと水平位置は同じで、要素の下に表示されます。これはツールチップの表示に使われます。

position 属性を popup 要素に加えることで、ポップアップの表示位置を正確に指定することができます。 ポップアップに対して、位置指定を直接ピクセル値で行うことはできません。 position 属性は、3 種類の全てのポップアップで使うことが可能です。 もっとも、ツールチップでは、ほとんど値を変える状況はないと思います。

以下に、ポップアップメニューを持った戻るボタンを作る例を示します。

var el = env.locale; Example 3 : ソース 表示

<popupset>
  <menupopup id="backpopup" position="after_start">
    <menuitem label="Page 1"/>
    <menuitem label="Page 2"/>
  </menupopup>
</popupset>

<button label="Pop Me Up" popup="backpopup"/>

ファイル検索ダイアログにポップアップを追加

<popupset>
  <menupopup id="editpopup">
    <menuitem label="Cut" accesskey="t"/>
    <menuitem label="Copy" accesskey="c"/>
    <menuitem label="Paste" accesskey="p" disabled="true"/>
  </menupopup>
</popupset>

<vbox flex="1">
.
.
.

<tabpanel id="searchpanel" orient="vertical" context="editpopup">

次のセクションでは、どのようにスクロールメニューを作るかを見て行きます。