前のセクションで、メニューバー上にメニューを作ることについて見ました。XUL では、ポップアップメニューを作ることもできます。ポップアップメニューは、多くの場合、ユーザーがマウスの右ボタンをクリックすると表示されます。
XUL には、以下で説明するように、3 種類の異なったポップアップがあります。その主な違いは、それらが表示される方法にあります。
3 種類のポップアップはどれも、ユーザーがそれを呼び出す方法が異なります。プレーンポップアップとコンテキストポップアップではメニューが一般的で、ツールチップの場合は単純なテキスト文字列が一般的ですが、それらはどんな内容でも構いません。ポップアップを作る要素がその型を指定するのではなく、ポップアップを呼び出す要素がその型を決定します。
ポップアップは、popup 要素を使って記述します。その要素には特殊な属性はなく、そこで指定するのはボックスの型です。それが呼び出されると、何であれ popup 内に入れた内容をもつウィンドウが表示されます。しかし、ポップアップには、いつでも、id 属性を入れるべきです。ポップアップを要素と関連付けるのに使えるからです。これがどういう意味なのかはすぐに見ることにします。まず、例を示します。
<popupset>
<popup id="clipmenu">
<menuitem label="Cut"/>
<menuitem label="Copy"/>
<menuitem label="Paste"/>
</popup>
</popupset>
|
ここで分かるように、3 つのコマンドをもつ単純なポップアップメニューが作られています。popup 要素が 3 つのメニュー項目を囲んでいます。これは、menupopup 要素にとてもよく似ています。これはボックスの一種で、デフォルトは垂直方向です。ポップアップメニューはポップアップではかなり一般的なので、これは意味があります。id が、popup 要素自身に設定されていることにも気が付くことでしょう。
popupset 要素が、ポップアップメニューの宣言全体を囲んでいます。これは、ポップアップのための汎用的なコンテナで、オプションです。これはスクリーン上に描かれるものではなく、ポップアップのすべてを宣言するためのプレースホルダーとして使われます。popupset という名前が暗示しているように、その内部には多数のポップアップ宣言を置くことができます。最初の popup 要素の後に追加の popup を加えるだけです。一つのファイルに複数の popupset をもつことができますが、通常は、一つだけで十分でしょう。
さて、ポップアップができたので、ポップアップを表示させる番です。このためには、ポップアップを、それが表示する要素と関連させることが必要です。ユーザーがウィンドウのある領域をクリックしたときにだけポップアップを表示させることにします。多くの場合、これは、指定のボタンかボックスでしょう。
ポップアップを要素と関連付けるためには、要素に 3 つの属性の一つを追加します。追加する属性は、作りたいポップアップの種類によります。プレーンポップアップの場合、要素に popup 属性を追加します。コンテキストポップアップの場合、context です。ツールチップポップアップの場合、tooltip です。
属性の値は、表示したい popup の id 属性に設定します。これがポップアップに id を置かなければならない理由です。これによって、一つのファイルで、簡単に、多数のポップアップをもつことができます。
上の例のポップアップをコンテキストメニューにしたいと思います。このためには、context を使い、ポップアップを関連付けたい要素にそれを追加する必要があります。以下の例は、これをどうやって行なうかを示しています。
例 5.3.1
<popupset>
<popup id="clipmenu">
<menuitem label="Cut"/>
<menuitem label="Copy"/>
<menuitem label="Paste"/>
</popup>
</popupset>
<box context="clipmenu">
<description value="Click for menu"/>
</box>
|
ここでは、ポップアップは、ボックスと関連付けられています。ボックス内のどこでコンテキストクリック (右クリック) しても、いつもポップアップメニューが現われます。ポップアップは、ボックスの子供をクリックした場合でも、表示されます。そのため、description 要素をクリックした場合でも、これは機能します。context 属性は、ボックスを同じ id をもつポップアップと関連付けるために使われています。この場合は、ポップアップの clipmenu が表示されます。これによって、多数のポップアップをもち、それを異なった要素に関連付けることができます。
ある要素に異なった型の属性を複数指定することにより、多数のポップアップを同じ要素と関連付けることができます。同様に、同じポップアップを多数の要素に関連付けることもできます。これが、ポップアップのシンタックスを使う利点の一つです。
ポップアップは、XUL 要素とだけ関連付けることができます。HTML 要素と関連付けることはできません。上の例では、context 属性を、直接、div タグに指定することはできません。それは HTML 要素だからです。このため、前の例では、ボックスが必要だったのです。
ここで、ツールチップを作る簡単な方法を見ることにしましょう。すべての要素で使いたいため、ツールチップを作るのにスクリプトを使うかもしれません。個々の要素のためのツールチップを作りたくはないでしょう。ツールチップは他のポップアップと同じ方法で作ることができます。下の例はその方法を示しています。
例 5.3.2
<popupset>
<popup id="savetip" style="background-color: #FFFFC0;">
<description value="Click here to save your stuff"/>
</popup>
</popupset>
<button label="Save" tooltip="savetip"/>
|
ここで、ポップアップは、ツールチップとして、ボタンと関連付けられています。ユーザーがマウスをボタンの上に移動すると、ツールチップがポップアップで表示されます。背景色は黄色に設定されています。これはプラットフォーム幾つかで、ツールチップがそのように表示されるためです。
デフォルトでは、ポップアップとコンテキストウィンドウは、マウスポインターのある場所に表示されます。ツールチップは、マウスポインターが隠してしまわないよう、少しだけ要素の下に置かれます。しかし、ポップアップが表示される場所をもっと詳細に指定したい場合もあるでしょう。例えば、ブラウザーで Back ボタンをクリックしたとき現われるポップアップメニューを、マウスポインターのある場所ではなく、Back ボタンの下に表示させたいといった場合です。
ポップアップの位置を変えるには、追加属性 popup で position が使えます。これは、また、menupopup 要素にも追加できます。この属性は、ポップアップを呼び出す要素に対して相対的なポップアップの位置を示すのに使われます。
これには多くの値が設定できます。以下で簡単に説明します。
要素にこれらの属性の一つもしくは複数を追加することによって、どこにポップアップが表示されるか正確に指定できます。ピクセル位置を指定することはできません。position 属性は 3 種類のポップアップのどれでも使用できます。しかし、多分、ツールチップの場合の値を変更することはないでしょう。
下の例は、ポップアップメニュー付きの Back ボタンの例を示しています。
例 5.3.3
<popupset>
<popup id="backpopup" position="after_start">
<menuitem label="Page 1"/>
<menuitem label="Page 2"/>
</popup>
</popupset>
<button label="Pop Me Up" popup="backpopup"/>
|
単純なポップアップメニューを「ファイル検索」ダイアログに追加することにしましょう。簡単にするため、Edit メニューの内容を複製するだけにします。しかし、Cut、Copy、Paste オプションは、テキストボックスだけに適用します。ポップアップは、テキストボックス上でクリックした場合だけ、表示されるようにしましょう。
ここでは、編集メニューに似た単純なポップアップをテキストボックスに追加しました。テキストボックス上で右クリック (Macintosh ではコントロール - クリック) すると、ポップアップが表示されます。しかし、他の場所でクリックしても、ポップアップは表示されません。 (進む) 次は、スクロールするメニューの作り方を見ることにしましょう。 |