ダイアログの作成

XUL アプリケーションでは、しばしばダイアログを表示する必要があります。 このセクションでは、ダイアログの作り方について説明します。

ダイアログを作成する

ウィンドウを開くのに使われる open() 関数と関連する関数に、openDialog() 関数があります。 open() と比較すると、openDialog() 関数にはいくつかの相違点があります。 まず、ウィンドウではなくダイアログを表示する点で、 これは、この関数が利用者に対して何か問い合わせを行うために使用されることを意味しています。 また、これ以外にも利用者に対して行われる動作や表示の方法に微妙な違いがあるかもしれません。 これらの違いは、アプリケーションを実行するプラットフォームに強く依存することになります。

加えて、openDialog() 関数は、最初の 3 つ以外にも追加の引数を取ることができます。 これらの引数は、新しいダイアログに渡されて、作成された window の arguments プロパティに配列として保存されます。 openDialog() 関数には、必要であればいくつでも引数を渡すことができます。 この方法は、ダイアログのフィールドにデフォルト値を渡すために利用すると便利です。

var somefile=document.getElementById('enterfile').value;

window.openDialog("chrome://findfile/content/showdetails.xul","showmore",
                  "chrome",somefile);

この例は、「showdetails.xul」ダイアログを表示します。 このダイアログには、enterfile という ID をもつ要素の値から得られた somefile という引数が 1 つ渡されます。 また、ダイアログで使われているスクリプトからは、window の arguments プロパティを使用して引数を参照することが可能です。 以下に例を示します。

var fl = window.arguments[0];

document.getElementById('thefile').value = fl;

この方法により、新しいウィンドウに効率的に値を渡すことができます。 また、開いたウィンドウから元のウィンドウに値を返すためには 2 つの方法があります。 1 つ目は、ダイアログから、開き元のウィンドウを保持している window.opener プロパティにアクセスする方法です。 2 つ目は、ダイアログ作成時に、関数またはオブジェクトを引数の 1 つとして渡しておき、 開いたダイアログ側でその関数を呼び出すか、オブジェクトを変更する方法です。

ダイアログ要素

ダイアログを作るときには、window 要素の位置に、代わりに dialog 要素を使うことが推奨されます。 この要素は、ダイアログの下部に置く、OK や Cancel などの 4 つのボタンを作成するために役に立つ機能を提供します。 このとき、明示的に XUL の button 要素を置く必要はありませんが、 利用者がボタンを押したときに行うべき処理のためのコードは用意する必要があります。 このメカニズムは、プラットフォームによってボタンの表示順序が異なることに対応するために必要になります。

ダイアログの例

ソース 表示

<?xml version="1.0"?>
<?xml-stylesheet href="chrome://global/skin/global.css" type="text/css"?>

<dialog id="donothing" title="Dialog example"
        xmlns="https://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
        buttons="accept,cancel"
        ondialogaccept="return doOK();"
        ondialogcancel="return doCancel();">

<script>
function doOK(){
  alert("You pressed OK!");
  return true;
}

function doCancel(){
  alert("You pressed Cancel!");
  return true;
}
</script>

<description value="Select a button"/>

</dialog>

ダイアログには、必要ならば任意の要素を置くことが可能です。 dialog 要素には、ウィンドウには無い、追加の属性がいくつかあります。 まず、buttons 属性では、ダイアログにどのボタンを表示するかを指定します。 ここには、以下の値をコンマで区切って指定します。

• accept - OK ボタン
• cancel - キャンセル ボタン
• help - ヘルプ ボタン
• disclosure - 詳細ボタン。さらに詳細な情報を表示ために使用します。

これらのボタンが押されたときに実行されるコードは、 ondialogaccept、ondialogcancel、ondialoghelp、ondialogdisclosure の各属性に設定することが可能です。 先述の例を試した場合、OK ボタンを押したときには doOK 関数が呼ばれ、 Cancel ボタンを押したときには doCancel 関数が呼ばれることがわかるはずです。

これら 2 つの関数 doOK() と doCancel() は、 ダイアログを閉じることを指示するために true を返しています。 また、false を返した場合は、ダイアログは開いたままになります。 これは、ダイアログの入力欄に不正な値が入力されていたような場合に使うことができます。

ダイアログが持っている、それ以外の有用な属性を以下に示します。

• buttonlabelaccept - accept ボタンに表示するラベル (例: Save) を指定します。
• buttonaccesskeyaccept - accept ボタンに使用するアクセスキー (例:S) を指定します。
• defaultButton - Enter キーが押されたときに活性化されるボタンを指定します。

追加の機能を利用したダイアログの例

<?xml version="1.0"?>
<?xml-stylesheet href="chrome://global/skin/global.css" type="text/css"?>

<dialog id="myDialog" title="My Dialog"
        xmlns="https://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
        onload="window.sizeToContent();"
        buttons="accept,cancel"
        buttonlabelaccept="Set Favourite"
        buttonaccesskeyaccept="S"
        ondialogaccept="return doSave();"
        buttonlabelcancel="Cancel"
        buttonaccesskeycancel="n"
        ondialogcancel="return doCancel();">

<script>
function doSave(){
 //doSomething()
 return true;
}
function doCancel(){
  return true;
}
</script>

<dialogheader title="My dialog" description="Example dialog"/>
<groupbox flex="1">
  <caption label="Select favourite fruit"/>
  <radio id="orange" label="Oranges because they are fruity"/>
  <radio id="violet" selected="true" label="Strawberries because of colour"/>
  <radio id="yellow" label="Bananna because it pre packaged"/>
</groupbox>

</dialog>

ダイアログのボタン要素には、以下の JavaScript によってアクセス可能です。

// the accept button
var acceptButt = document.documentElement.getButton("accept")

さらなる例

これ以外にも Code snippets の Dialogs and prompts にいくつかの例があります。

次のセクションでは、ファイルダイアログを開く方法について見ていきます。