メインコンテンツへスキップ

 

ポップアップ コンテンツ (コンテキストメニューとツールチップ)

[目次] [前へ: キーバインド] [次へ: XULオーバレイ]

機能担当:
Dave Hyatt (コンテンツモデル 関係, 特に XUL ポップアップ)
Chris Saari (ポップアップ メニューとコンテキストメニュー)
Mike Pinkerton (ツールチップ, Making Things Suck Less)

XUL言語では開発者が宣言するXULサブツリーがポップアップコンテンツ であることを宣言するための手段を用意している。 これは、そのコンテンツがあるイベントは発生したときにそのウィンドウに表示される ことを示している(例えば,マウスの右ボタンをクリックするとコンテキストメニューが 表示される、もしくは左クリックでカラーピッカーポップアップがツールバーに表示される)。

ポップアップコンテンツには2種類ある:メニューとウィンドウである。 ポップアップメニューは各プラットフォームのネイティブメニューを使い、 menu と menuitemエレメントを 使って記述される(詳細は メニューとメニューバー を参照のこと)。 ポップアップウィンドウにはXUL独自のもの含めることができる.これは XULウィンドウそのものであり, window タグを使って宣言する. (詳細はウィンドウとダイアログ を参照されたし).

ポップアップコンテンツは popup タグの内側に置かれ, これはメインドキュメントの表示の際には除外される.このpopupタグは常に それにアタッチされるオブジェクトの識別子をもつ(id 属性を利用している).これはポップアップコンテンツをUIエレメントにアタッチするときに 利用する 
<popup id="replyMenu">
  <menu>
    <menuitem name="Reply to Sender">
    <menuitem name="Reply to All">
  </menu>
</popup>
                  

コンテンツを自動的にポップアップにアタッチする方法には3通りの異なる方法がある。 3つの方法ではどれもノードにアタッチされているポップアップコンテンツをもつ コンテンツノードに属性が設定されていなければならない。その属性とは popup, context, そして tooltip である. これらの属性のうちの1つの値は ポップアップコンテンツを構築するのに利用するポップアップエレメントの id である. 
<titledbutton value="Reply" popup="replyMenu"/>
                  

popup 属性は マウスの左ボタンが押されたときに ポップアップするコンテンツをアタッチするのに利用される. context 属性はコンテキストメニューイベントで ポップアップさせるコンテンツをアタッチするのに利用する (ユーザのためにクロスプラットフォームのための抽象化が行われている) tooltip属性はコンテンツがアタッチしてあるノード上に マウスポインタが入るとしばらくしてからポップアップされるような ポップアップコンテンツをアタッチするのに利用する (ツールチップは ポップアップウィンドウコンテンツといっしょにしか使えない ポップアップメニューコンテンツといっしょには利用できないことに注意.)

デフォルトではポップアップコンテンツはマウスが押された位置を左上にして表示される (ツールチップではコンテンツはマウスカーソルの高さまでコンテンツを移動させる) このレイアウト位置についてはpopupanchor と popupalign 属性で制御できる.

popupanchor と popupalign 属性には4種類の値: topleft, topright, bottomleft それと bottomright が設定できる. popupanchor 属性はポップアップコンテンツの4つの角のどこを マウスカーソルの位置に合わせるかを指定するのに使う(例えば, コンテンツをポップアップさせるボタン) これが省略されているとオブジェクトが固定されない.代わりにマウスイベントが発生した座標にポップアップ コンテンツが直接置かれる.この位置(マウスの位置に直接かあるいはアタッチされた4つのコーナのどれか)の ことをoriginating pointと呼ぶ.

popupalign 属性はポップアップコンテンツのどの角が originating pointと結びつけられるかを指定するのに利用する.もしこれが省略されると, デフォルトで左上が指定されたことになる.下記の例では左マウスボタンで表示されるメニューが アタッチされた伝統的なボタンを生成している.このメニューはコミュニケータ4.xにもあったものだ. 
<titledbutton value="Reply" popup="replyMenu" popupanchor="bottomleft"/>
                  

Windows 98では,固定されたメニューは(プロパティをオフにしない限り) popupalign属性で指定された角の反対側の角へアニメーションする. 上記の例では,この属性が省略されていたので、デフォルトは左上で,メニューはしたがって 右下の角へ向かってアニメーションする.

ポップアップコンテンツには普通のコンテンツと同じように イベントハンドラをアタッチすることができる.このイベントハンドラでは, ポップアップが起動されるエレメントを ドキュメントのpopupNode プロパティを調べることによって見つけることができる.このプロパティはポップアップが開かれている ときにしか設定されない. 
<popup id="toolbarContextMenu">
  <menu>
        ...
    <menuitem name="Delete" onclick="mailNewsCore.deleteButton(document.popupNode)">
        ...
  </menu>
</popup>
                  

よく似たプロパティ、 tooltipNode, は表示されるツールチップが設定されている エレメントに設定される。

ポップアップとして作成されたXUL独自のウィンドウと名前空間は 新しいウィンドウタグで再度宣言しなければならない.しかしながら スタイルシートは親のドキュメントから継承される.ポップアップXULウィンドウは openerプロパティを利用してこれを生成した 親のウィンドウにリンクされ, 関数を起動したりデータを調べたりするために 初めのドキュメントに返される。

XUL独自のポップアップは普通のウィンドウと同じようにwindow オブジェクトのメソッドを利用して閉じたり位置を動かしたりすることができる。 もっとも関係するメソッドは window.close() であり、 これを使うとポップアップを閉じることができる。 
<popup id="justifierPopup">
  <window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
    width="40" height="100">
     <titledbutton id="left" 
       onclick="opener.setJustification('left'); window.close();"/>
     <titledbutton id="center"
       onclick="opener.setJustification('center'); window.close();"/>
     <titledbutton id="right" 
       onclick="opener.setJustification('right'); window.close();"/>
  </window>
</popup>
...
<titledbutton popup="justifierPopup" popupanchor="bottomleft"/>
...
                  

ポップアップコンテンツは何らかのイベント (定義済の popup、context そして tooltip イベントとは異なる) に対するレスポンスの中でも生成することができる。 ポップアップコンテンツがプログラムによりインスタンス化される可能性のある windowオブジェクトには2つの新しいメソッドが用意されている。

createPopup には引数が6つある: ポップアップにアタッチするDOMエレメント、ポップアップのX座標、Y座標、ポップアップのタイプ (コンテキスト、ポップアップ、もしくはツールチップ)、ポップアップのアライメント (左上、右下、左下、右上)。

createAnchoredPopup メソッドはポップアップコンテンツを コンテンツオブジェクトの固定点を指定して生成するのに利用することができる このメソッドは5つの引数をとる: ポップアップにアタッチするエレメント、ポップアップコンテンツエレメント、 コンテンツの固定位置(左上, 右下, 左下, 右上)、ポップアップタイプ、 そしてポップアップアライメント。

これらのメソッドを使うことでポップアップインスタンスを適度に制御できるようになる。 例えば、あるポップアップは キーボードイベントに少し遅れて、あるいはキーボードイベント に対するレスポンスの中でポップアップさせることができる

ポップアップは動的に作ったり、あるいは表示する優先順位を変更したり、なんて ことも可能だ。create や destroy イベントはそれぞれ表示しないといけなくなったとき、フォーカスを失った後に ポップアップエレメント上で発火する。イベントリスナはoncreate や ondestroy属性を使ったり、DOMのaddEventListener 関数を使うことによってアタッチすることができる。

ツールチップ

ツールチップは基本的に定刻に動くxulポップアップである。 ユーザはこのポップアップの表示を完全にコントロールすることも Javascriptや標準の「テンプレート」ツールチップと組み合わせて 動作を速くすることもできる。

簡単な方法: 
<!-- this popup is in globaloverlay.xul. you don't need to duplicate it 
     it is included here as an example. -->
<popupset>
  <popup id="aTooltip" oncreate="return FillInTooltip(document.tooltipNode);">
   <window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
     width="200" height="20" style="border: thin solid black"> 
        <titledbutton id = "replaceMe" align="left" class="borderless paneltitle"/>
   </window>
  </popup>
</popupset>
                  
...
<toolbar tooltip="aTooltip">
  <titledbutton tooltiptext="Tip for Button One"/>
  <titledbutton tooltiptext="Tip for Button Two"/>
  <titledbutton tooltiptext="Tip for Button Three"/>
</toolbar>
...
                  

tooltiptext属性でこのアイテム用の ツールチップに表示するテキストを指定する。 あるボタンのツールチップに何か制御をしたかったらそのアイテムの tooltip 属性に直接指定して 新しいコンテンツを表示する別のポップアップにそのIDをセットする。

JavaScriptの FillInTooltip() という 便利なルーチン(globaloverlay.jsに用意されている)は 「replaceMe」という名前のポップアップのノードを用意しさえすればどこにでも 好きな場所で利用することができる.この方法だとそのボタンに表示するツールチップの テキストを指定するだけで好きなようにポップアップを利用することができる。

ツールチップが邪魔な場合にこれを抑止する方法として oncreateイベントハンドラからfalseを返す というのがある。これはXULポップアップであればどれにでも有効えあるが、 ツールチップに使うのがもっとも便利である。

既知の問題

  • HTMLエレメント - 現時点ではポップアップはXULエレメントにしか アタッチできず、HTMLエレメントには効きません。
  • 位置の固定 - まだpopupanchor属性を試すのはやめてください。 まだ完全にポップアップを表示することができないからです。他にも createAnchoredPopupメソッドもまだなにもしません。
  • XULポップアップ独自の問題 
    • XUL独自のポップアップを閉じる時にデストラクトイベントが発火しません。

[目次] [前へ: キーバインド] [次へ: XULオーバレイ]

我々にコンタクトを取りたいときは xptoolkitstaff@netscape.comへお願いします。 新しいドキュメントに不満がある人はDave Hyattにメールを下さい.