XUL チュートリアル - イベントハンドラーを追加する

次は、XBL で定義された要素にイベントハンドラーを追加する方法を見ることにしましょう。

イベントハンドラー

ご存知のように、マウスクリックやキーの押し下げ、その他のイベントは、内容の中にある個々の要素に送られます。イベントをトラップし、特殊な方法で処理したいかもしれません。必要な場合には、内容の中にある要素にイベントハンドラーを追加することができます。前のセクションの最後の例は、このことを示しています。その例では、onclick ハンドラーをボタンの幾つかに追加しました。

しかし、イベントハンドラーを内容全体に追加したいかもしれません。つまり、content タグ内に定義されたすべての要素に対してです。これができれば、フォーカスイベントやブラー (blur) イベントをトラップする場合に役立つでしょう。イベントハンドラーを定義するには、handler 要素を使います。その各々には、イベントハンドラーそれぞれのためのアクションを記述します。必要な場合、複数のハンドラーを使うことができます。イベントが handler イベントのどれともマッチしない場合、それは、いつものように、内側の内容に送られるだけです。

一般的なハンドラーのシンタックスは次の通りです。

<binding id="binding-name">
  <handlers>
    <handler event="event-name" action="script"/>
  </handlers>
</binding>

ハンドラーはすべて、handlers 要素の中に置きます。個々の handler 要素には、event 属性で指定した特定のイベントのためのアクションを定義します。妥当なイベント型は、click や focus など、XUL と JavaScript がサポートしているものです。始まりに 'on' のないイベント名を使います。例えば、'onmousedown' イベントのイベント型は 'mousedown' です。

ハンドラーを設定するよくある理由は、イベントが起こったとき、カスタムプロパティーを変更するためです。例えば、カスタムチェックボックスには、ユーザーがチェックボックスをクリックしたとき、変更する必要のある checked プロパティーがあるかもしれません。

<handlers>
  <handler event="mouseup" action="this.checked=!this.checked"/>
</handlers>

ユーザーがチェックボックス上でマウスボタンをクリックしてそれを放すと、mouseup イベントがチェックボックスに送られ、ここで定義したハンドラーが呼び出されます。その結果、checked プロパティーの状態が反転します。

マウスやキーボードからの入力が要求する場合にはいつでも、プロパティーを調整するハンドラーを追加する必要があります。同様に、要素がフォーカスされた場合、プロパティーを変更したい場合があるかもしれません。

マウスイベントの場合、あるボタンで起こったイベントだけをトラップするハンドラーにするために、button 属性が使えます。この属性がなければ、ハンドラーは、押されたボタンに関わりなくすべてのイベントをトラップします。button 属性は、left、right、middle のいずれかに設定します。これは、チェックしたいボタンがどれなのかによります。

<handlers>
  <handler event="click" button="left" action="alert('Left button pressed');"/>
  <handler event="click" button="right" action="alert('Right button pressed');"/>
  <handler event="mouseup" button="middle" action="alert('Middle button pressed')"/>
</handler>

キーイベントの場合、指定のキーにマッチさせるためや、ある変更子 (modifier) キーが押された時だけマッチさせるために、charcode 要素がもつ属性に似た数多くの属性が使えます。前の例を拡張して、スペースバーが押されたら、チェックボックスの checked プロパティーが変更されるようにすることができます。

<handlers>
  <handler event="keypress" key=" " action="this.checked=!checked"/>
</handlers>

文字で表すことのできないキーをチェックするため、keycode 属性を使うこともできます。キーボードショートカットに関するセクション にはもっと詳しい情報があります。変更子は、modifiers 属性を追加することによりチェックできます。これは、以下の値のいずれかに設定します。

• alt
  ユーザーは、Alt キーを押さなければならない。
• control
  ユーザーは、Control キーを押さなければならない。
• meta
  ユーザーは、Meta キーを押さなければならない。
• shift
  ユーザーは、Shift キーを押さなければならない。
• accel
  ユーザーは特殊な変更子キーを押さなければならない。これは、通常、プラットフォームのキーボードショートカットのために使われる。

これを設定した場合、ハンドラーは、変更子が押された時だけ呼び出されます。複数の変更子キーは、スペースで区切ることによって指定できます。

ハンドラー内のコードがもっと複雑な場合は、次のような別のシンタックスを使うことができます。

<binding id="binding-name">
  <handlers>
    <handler event="event-name">
      -- ハンドラーのコードがここに来る --
    </handler>
  </handlers>
</binding>

ハンドラーの例

次の例は、クリップボード操作の非常に原始的なフォームをテキストボックスに追加しています。

<binding id="clipbox">
  <content>
    <xul:textbox/>
  </content>
  <implementation>
    <property name="clipboard"/>
  </implementation>
  <handlers>
    <handler event="keypress" key="x" primary="true"
      action="this.clipboard=document.getAnonymousNodes(this)[0].value; document.getAnonymousNodes(this)[0].value='';"/>
    <handler event="keypress" key="c" primary="true"
      action="this.clipboard=document.getAnonymousNodes(this)[0].value;"/>
    <handler event="keypress" key="v" primary="true"
      action="document.getAnonymousNodes(this)[0].value=this.clipboard ? this.clipboard : '';"/>
  </handlers>
</binding>

内容は、テキストボックスが一つです。プロパティー clipboard を、クリップボードの内容を保存するために追加しました。これは、クリップボードの操作がこのテキストボックス一つに限られるということです。しかし、個々のクリップボードには、それ自身のバッファーがあります。

ハンドラーを 3 つ追加しました。一つは切り取りのためのもの、もう一つはコピーのためのもの、最後は貼り付けのためのものです。それぞれには、それを呼び出すためのキーストロークがあります。最初のハンドラーは切り取り操作のもので、主変更子キー (これはプラットフォームによって異なります) とともに x キーが押されると呼び出されます。action 属性内のスクリプトは、テキストボックスのテキストを切り取り、それを clipboard プロパティーに入れるのに使われます。簡単にするため、テキスト全体を切り取るだけで、選択されたテキストを切り取るようにはなっていません。コードは次のように動作します。

1. this.clipboard=document.getAnonymousNodes(this)[0].value;

   無名内容配列の最初の要素が検索される。これは、content 要素内の最初 (そして、ただ一つ) の要素である textbox 要素へのリファレンスを返す。value プロパティーが検索され、テキストボックス内のどこにテキストがあるか知る。次に、この値は、clipboard プロパティーに割り当てられる。その結果、テキストボックス内のテキストがこの特殊なクリップボードにコピーされる。
   

2. document.getAnonymousNodes(this)[0].value=''

   次いで、textbox のテキストにヌル文字列を割り当てる。これにより、実質上、テキストボックスのテキストがクリアされることになる。
   

コピー操作も同様ですが、処理後、テキストをクリアしない点が違います。貼り付けは逆の操作です。テキストボックスの値が、clipboard プロパティーから割り当てられます。こうしたクリップボードのキーボードショートカットを実際に実装する場合は、おそらく、実際のクリップボードインターフェースを実装し、現在選択されているテキストも処理することになるでしょう。

バインディング貼り付けと取り外しイベント

XBL は、handler タグで使用できる 2 つの追加イベントをサポートしています。最初は bindingattached で、これはバインディングが要素に張り付けられるといつでも呼び出されます。その逆の bindingdetached は、バインディングが要素から削除される場合に呼び出されます。これらのイベントハンドラーの主目的は、バインディングに結び付けられた要素を初期化することです。

バインディングを要素に貼り付ける場合、ポイントが 2 つあります。最初のポイントは、ウィンドウが表示されるときに起こります。XBL に結び付けられた内容をもつ要素はすべて、その bindingattached ハンドラーを呼び出します。それが呼び出される順序を当てにすべきではありません。それらは様々なファイルからロードされるからです。ウィンドウの onload ハンドラーは、バインディングすべてが貼り付けられるまで呼び出されません。バインディングを貼り付ける場合の第 2 のポイントは、要素の -moz-binding スタイルプロパティーを変更する場合です。既にあるバインディングは、その bindingdetached ハンドラーが呼び出された後で削除されます。次いで、別のバインディングがその場所に追加され、その bindingattached ハンドラーが呼び出されます。

(進む) 次のセクションでは、XBL で定義されたウィジェットにスタイルを付ける方法を見ることにしましょう。

例: 11.6.1