Firefoxアドオンの開発手法ダイアログ要素
dialog要素
<?xml version="1.0"?>
<?xml-stylesheet type="text/css" href="chrome://global/skin/"?>
<dialog xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
<label value="Hello." />
</dialog>
ちなみに同じように記述をwindow要素で行うと次のようになり、
<?xml version="1.0"?>
<?xml-stylesheet type="text/css" href="chrome://global/skin/"?>
<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
<label value="Hello." />
</window>
これは次のように表示されます。
属性
buttons
ダイアログに表示するボタンを定義します。表示される位置は、ユーザーのプラットフォームに依存します。
buttons属性を指定しないと、既定のボタンが表示されます。
Windowsでの既定
表示するボタンを変更するには、buttons属性に下表の定数を指定します。
| 値 | Windowsでの表示 | 対応するイベント |
|---|---|---|
| accept | OK | ondialogaccept |
| cancel | キャンセル | ondialogcancel |
| help | ヘルプ | ondialoghelp |
| disclosure | 詳細情報 | ondialogdisclosure |
| extra1 | 任意の機能 | ondialogextra1 |
| extra2 | 任意の機能 | ondialogextra2 |
複数のボタンはカンマ区切りで指定します。このとき表示順は自動で決定されるため、記述する順番は無関係です。
<dialog xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
buttons="accept,cancel,help,disclosure,extra1,extra2"
buttonlabelextra1="SAMPLE1"
buttonlabelextra2="SAMPLE2">
スクリプトによる取得
ダイアログのボタンは、
var acceptButton = document.documentElement.getButton( 'accept' );getButton - XUL | MDN
のようにボタン名を指定することで、スクリプトから取得できます。
ondialogaccept
accept (OK) ボタンが押されたときに呼ばれます。このハンドラを抜けると通常ダイアログは閉じられますが、ハンドラがfalseを返すとそれを阻害します。
<dialog xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
ondialogaccept="return doOK()">
<script type="application/x-javascript"><![CDATA[
function doOK( e )
{
if( ! window.confirm( 'OK?' ) )
{
return false;
}
}
]]></script>
</dialog>
ちなみにこのコードは、DOMイベントリスナを用いると、
<dialog xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
<script type="application/x-javascript"><![CDATA[
function doOK( e )
{
if( ! window.confirm( 'OK?' ) )
{
e.preventDefault();
}
}
window.addEventListener( 'dialogaccept', doOK, false );
]]></script>
</dialog>
のように書き換えられます。
ondialogcancel
cancel (キャンセル) ボタン、または閉じるボタンが押されたときに呼ばれます。ハンドラからfalseを返すことで、ondialogacceptと同じ挙動を示します。
ダイアログを開く openDialog()
openDialog()はopen()を拡張したものです。挙動は基本的に同じですが、引数のfeaturesがサポートするパラメータと、追加の引数を受け取る点に違いがあります。
newWindow = window.openDialog(
url // ウィンドウで読み込むURL
[, name] // ウィンドウの名前
[, features] //
[, arg1]
[, arg2]
[, ... ] )
window.openDialog - Web API reference | MDN
urlとnameはopen()と同様です。featuresも基本的にopen()と同様ですが、下表の項目が追加で使用できます。
| 項目 | 説明 | 設定値 |
|---|---|---|
| all | yesのとき、初期状態でアクティブとする | yes、no |
open()と同様、openDialog()で開かれたウィンドウも既定でモードレスですが、featuresで'modal'を指定することでモーダルにできます。このパラメータを指定するのに制約はなく、この点はUniversalBrowserWrite特権を必要とするopen()と異なります。
open()との比較
たとえば、
<?xml version="1.0"?>
<?xml-stylesheet type="text/css" href="chrome://global/skin/"?>
<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
<label value="Hello." />
</window>
のXUL文書をそれぞれのメソッドから呼び出すと、次のように表示されます。
| open() | openDialog() |
|---|---|
 |
 |
開いたダイアログとのデータの受け渡し
openDialogの引数
openDialog()のargN引数で、開いたウィンドウに任意の値を渡せます。開かれた側のウィンドウでは、その値をwindow.argumentsで取得できます。
逆に開いたウィンドウからデータを受け取るには、openDialog()の戻り値から開いたウィンドウのプロパティへアクセスします。そのためには必ず'modal'を指定し、モーダルウィンドウとして開く必要があります。
var data1 = 123;
var url = 'chrome://myPackage/content/sample.xul';
var dialog = window.openDialog( url, '', 'modal', data1 );
dialog.data2; // 'ABC'が返される
開かれる側 [chrome://myPackage/content/sample.xul] のコードは、次のようになります。
<?xml version="1.0"?>
<dialog xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
<script>
var data2 = 'ABC'; // 返す値
if( window.arguments && ( 0 < window.arguments.length ) )
{
var data1 = window.arguments[ 0 ]; // 123が渡される
}
</script>
</dialog>
argN引数で関数を渡せば、開かれた側から開いた側を操作することも可能です。
また引数でオブジェクトを渡せば、そのオブジェクトのプロパティを介することで、データの受け渡しがより簡単に行えます。Returning values from the dialog - Window.openDialog - Web API Interfaces | MDN
window.opener
windowオブジェクトのopenerプロパティで、開いたウィンドウ (Windowオブジェクト) を取得できます。よってこのプロパティを介せば、開かれた側から能動的に開いた側を操作できます。