「ファイル検索」ダイアログは、これまでのところ、見た目は良好です。さしたる整形はしませんでしたが、単純なユーザーインターフェースを簡単に作ることができました。しかし、「ファイル検索」ダイアログには、重大な欠落点が一つあります。それは何もしないということです。
「ファイル検索」ダイアログを機能的なものにするには、色々なことが起きると、実行されるスクリプトを追加する必要があります。Find ボタンと Cancel ボタンを処理するスクリプトを追加し、個々のメニューコマンドを処理したいとしましょう。これは、JavaScript を使って書きます。これは、HTML の場合と非常によく似ています。
HTML を知っていれば、ボタンやその他の XUL 要素にイベントに応答させる方法が推測できるかもしれません。要素に onclick などのイベントハンドラーを追加するだけでそれができます。次に、その機能を実行するスクリプトを書きます。
XUL ファイルにスクリプトを加えるには、HTML の script タグを使うことができます。スクリプトのコードは、直接、XUL ファイルの script の開始タグと終了タグの間に埋め込むことができますが、別のファイルにコードを置く方がはるかによいでしょう。XUL ウィンドウは、それを高速にロードします。また、そうしないと、XUL (と XML) は、スクリプトを XUL 自身の一部であるかのようにパースします。「より小さい (<)」 などの文字は問題を引き起こします。
外部のスクリプトファイルをリンクするには、src 属性を使います。
「ファイル検索」ダイアログにスクリプトを追加することにしましょう。どんなスクリプトファイルが呼ばれるかは問題ではありませんが、通常は、XUL ファイルと同じ名前にして、拡張子を js にします。この場合は、findfile.js を使います。window の開始タグの直後、他の要素の前に、以下の行を追加します。
<script src="findfile.js"/> |
スクリプトファイルは、後で、それをどのようなものにしたいか分かってから作ることにします。ファイルの機能を定義し、イベントハンドラーからそれを呼び出すことができます。
XUL のイベントハンドラーは、HTML のものと非常によく似ています。HTML と同じものが使えますが、それ以外にも幾つか追加されています。イベントを処理するには、下のテーブルにある属性を要素に追加するだけです。使用できるイベントハンドラーはこれ以外にも数多くあります。それらは後のセクションで見ることにします。
| onclick | 要素上で、マウスが押され離されたときに呼び出される。ユーザーがボタンをクリックした場合に応えるのにこのイベントが使える。しかし、これはどの要素でも使用可能である。 | ||
| onmousedown | 要素上で、マウスボタンが押されたときに呼び出される。イベントハンドラーは、マウスボタンが押されるとそれががまだ離されていなくとも、直ちに呼び出される。 | ||
| onmouseup | 要素上で、マウスボタンが離されると、呼び出される。 | ||
| onmouseover | マウスポインターが要素上に移動すると、呼び出される。これは、要素を強調するのに使用できる。しかし、CSS にはこれを自動的に行なう方法があるので、イベントでこれを使うべきではない。しかし、ステータスバー上にヘルプテキストを表示するのにこれを使いたい場合があるかもしれない。 | ||
| onmousemove | 要素上にあるマウスポインターが移動すると呼び出される。ユーザーがマウスを動かすと、イベントは何度も呼び出される。そのため、このハンドラーはなるべく使うべきではない。 | ||
| onmouseout | マウスポインターが要素から外に移動すると呼び出される。要素の強調をなくし、ステータステキストを削除するのに使うことができる。 | ||
| oncommand | このイベントは、メニュー項目が選択された場合に呼び出される。このイベントハンドラーは menuitem 要素に追加する。このイベントハンドラーは、ユーザーがマウスやアクセスキー、キーボードショートカットを使ってメニュー項目を選択したとき、自分でマウスを処理するのに使うのではなく、メニューで使うべきである。 | ||
| onkeypress | 要素にフォーカスがあるとき、キーが押され離されると呼び出される。これは、追加的なショートカットキーの処理を加えたり、あるフィールドで許される文字かチェックするのに使うことができる。後のセクションで、キーボードショートカットの作り方を見ることにする。 | ||
| onkeydown | 要素にフォーカスがあるとき、キーが押されると呼び出される。イベントは、キーが押されるとそれががまだ離されていなくとも、直ちに呼び出される点に注意すること。他のキーイベントの方が適切なので、おそらく、このイベントを使うことはあまりないだろう。 | ||
| onkeyup | 要素にフォーカスがあるとき、キーが離されると呼び出される。 | ||
| onfocus | マウスクリックや TAB キーによって、要素がフォーカスを得たとき、呼び出される。このイベントは、要素を強調したり、ヘルプテキストを表示する場合に使用できる。 | ||
| onblur | ユーザーが別の要素をクリックしたり TAB キーを押すことによって、要素がフォーカスを失ったとき、呼び出される。これは、情報を検査したり、ポップアップを閉じるのに使用できる。しかし、OK ボタンがクリックされたとき、フィールドを検査するのは望ましいことである。 | ||
| onload | あるウィンドウが最初に開かれたときに呼び出される。通常、このイベントハンドラーは、ウィンドウを初期化するために、window タグに加える。これを使うと、スクリプト内の条件に基づいて、フィールドにデフォルト値を設定できる。 | ||
| onunload | ウィンドウが閉じられるときに呼び出される。通常、これは、ウィンドウが閉じる前に情報を記録するため、window タグに追加する。 | ||
onclick ハンドラーは、HTML の対応部と同じ動作をします。ユーザーが要素をクリックした場合に実行されるコードをここに置くことができます。これは、多くの場合、ボタンで使われますが、ほとんどの要素で使うことができます。
onclick ハンドラーは、「ファイル検索」ダイアログの Find ボタンと Cancel ボタンに置くことができます。Find ボタンをクリックすると、検索を開始します。この部分は実装しないので、そのままにしておきます。しかし、Cancel ボタンをクリックすると、ウィンドウを閉じなければなりません。下のコードは、この方法を示しています。ここでは、Close メニュー項目にも同じコードを追加することにしましょう。
<menuitem label="Close" accesskey="c" oncommand="window.close();"/>
...
<button id="cancel-button" label="Cancel"
style="width: 8ex" onclick="window.close();"/>
|
ここでは、2 つのハンドラーを追加しました。oncommand ハンドラーが Close メニュー項目に加えられています。このハンドラーを使うことによって、ユーザーは、メニュー項目をクリックするかキーボードからそれを選択することによって、ウィンドウを閉じることができます。onclick が Cancel ボタンに加えられています。これは非常に単純ですが、HTML でするのとまったく同じことをします。
同様に、マウスやキーイベントハンドラーを使って、他のマウスイベントやキーボードの押し下げに応答することができます。あるイベントに対するイベントハンドラーを指定しない場合、要素は自分でそれを処理します。これは、通常、そうであって欲しいと思うものです。ほとんどの XUL 要素は、マウスとキーボードイベントに対して、固有な応答をします。例えば、メニュー項目は、アクセスキーに応答し、ポップアップは、適切なタイミングで表示されます。
イベントに応答させたい要素にイベントハンドラーを置く必要はありません。要素の上にある親要素に置くこともできます。例えば、イベントハンドラーを menuitem に置く代わりに、menu 要素に置くことができます。
マウスクリックなどのイベントが起きるといつでも、イベントは、まず、イベントが起きた要素に渡されます。その要素がイベントを処理しない場合、それは、「浮き上がって」親要素に渡されます。親要素がイベントを処理しない場合、また浮き上がって次に高いレベルの親要素に渡されます。最終的に、ウィンドウに届きます。何もイベントを処理しない場合、デフォルトのイベント処理が実行されます。
要素に onclick や onkeydown などのイベントハンドラーを置くことによって、イベントの処理ができます。ハンドラーは、イベントが処理された場合は true を返し、イベントが処理されなかった場合は false を返すようにします。false を返すことによって、自分のイベント処理の他に、デフォルトのイベント処理を行なわせることができます。このプロセスは、 HTML でイベントが処理される方法に似ています。
event オブジェクトの target プロパティーを取得することによって、最初にイベントが渡された要素を取得することができます。例えば、次のイベントハンドラーをウィンドウに追加すると、ウィンドウ内の要素をクリックするたびに、アラートボックスが現われます。アラートは、どの要素がクリックされたか表示します。
<window
onclick="alert(event.target.tagName); return false;"
.
.
.
>
|
(進む) 次は、XUL 要素でドキュメントオブジェクトモデルを使う方法を見ることにしましょう。