XulPlanet.com - Creating Dialogs

Creating Dialogs

ダイアログの作成

A XUL application will often require dialogs to be displayed. This section describes how one might construct them.

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

Creating a Dialog

ダイアログを作る

The open function is used to open a window. A related function is openDialog. This function has several main differences. It will display a dialog instead of a window which implies that it is asking something of the user. It may have subtle differences in the way it works and appears to the user. These differences will vary on each platform.

open 関数はウィンドウを開くのに使われます。関連する関数は openDialog です。この関数には大きな違いが幾つかあります。それは、ウィンドウではなくダイアログを表示することであり、ユーザに何かをするよう求めています。それがユーザーに対して動作し表示される方法には微妙な違いがあるかもしれません。こうした違いは、プラットフォームによって異なります。

In addition, the openDialog function can take additional arguments beyond the first three. These arguments are passed to the new dialog and placed in an array stored in the new window's arguments property. You can pass as many arguments as necessary. This is a convenient way to supply default values to the fields in the dialog.

更に、openDialog 関数は、最初の 3 つ以外に別の引数を取ることができます。これらの引数は、新しいダイアログに渡され、新しいウィンドウの arguments プロパティにある配列に保存されます。必要に応じて、幾つでも引数を渡すことができます。これは、ダイアログのフィールドにデフォルト値を渡す便利な方法です。

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

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

In this example the dialog 'showdetails.xul' will be displayed. It will be passed one argument, 'somefile', which was taken from the value of an element with the id enterfile. In a script used by the dialog, we can then refer to the argument using the window's arguments property. For example:

この例では、ダイアログ 'showdetails.xul' が表示されます。これには、'somefile' という一つの引数が渡されています。この引数は、enterfile という id をもつ要素の値から得られたものです。ダイアログで使われているスクリプトでは、ウィンドウの arguments プロパティを使って引数を参照することができます。例えば、次のようにします。

var fl=window.arguments[0];

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

This is an effective way to pass values to the new window. You can pass values back from the opened window to the original window in one of two ways. First, you could use the window.opener property which holds the window that opened the dialog. Second, you could pass a function or object as one of the arguments, and then call the function or modify the object in the opened dialog.

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

The Dialog Element

ダイアログ要素

The dialog element should be used in place of the window element when creating a dialog. It provides the useful capability to construct up to four buttons along the bottom of the dialog for OK, Cancel and so on. You do not need to include the XUL for each button but you do need to supply code to handle when the user presses each button. This mechanism is necessary because different platforms have a specific order in which the buttons appear.

ダイアログを作るときには、window 要素の代わりに dialog 要素を使うべきです。この要素は、ダイアログの下部に OK や Cancel といった 4 つのボタンを組み立てるのに役立つ機能を提供します。これらのボタン用の XUL は必要ありませんが、実際にはユーザがいつボタンを押したかをハンドルするコードを提供する必要があります。このメカニズムが必要なのは、プラットフォームによってボタンが表示される順序が異なるためです。

Example 12.2.1: Source View

<?xml version="1.0"?>

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

<dialog id="donothing" title="Do Nothing"
        xmlns="http://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>

You may place any elements that you wish in a dialog. The dialog element has some additional attributes that windows do not have. The buttons attribute is used to specify which buttons should appear in the dialog. The following values may be used, seperated by commas:

ダイアログ内には、置きたいどの要素でも置くことができます。 dialog 要素には、ウィンドウが持つわけではない属性があります。 buttons 属性は、ダイアログ内にどのボタンを表示するかを指定します。次の値をコンマで区切って用います:

accept - an OK button
cancel - a Cancel button
help - a Help button
disclosure - a disclosure button, which is used for showing more information.

accept - 了解 (OK) ボタン
cancel - キャンセル (Cancel) ボタン
help - ヘルプ (Help) ボタン
disclosure - 詳細 (disclosure) ボタン。これは情報をもっと表示するのに使われます。

You can set code to execute when the buttons are pressed using the ondialogaccept, ondialogcancel, ondialoghelp and ondialogdisclosure attributes. If you try the example above, you will find that the doOK function is called when the OK button is pressed and the doCancel function is called when the Cancel button is pressed.

属性 ondialogaccept, ondialogcancel, ondialoghelp, ondialogdisclosure を使うと、ボタンが押されたときに実行されるコードを設定することができます。上記例を試してみると、OK ボタンを押したときには doOK 関数が呼ばれ、Cancel ボタンを押したときには doCancel 関数が呼ばれることがわかるでしょう。

The two functions doOK and doCancel return true which indicate that the dialog should be closed. If false was returned, the dialog would stay open. This would be used if an invalid value was entered in a field in the dialog.

2 つの関数 doOK と doCancel は真を返します。これは、ダイアログを閉じることを表します。偽を返した場合には、ダイアログは開いたままです。これは、ダイアログのフィールドに妥当ではない値が入力された場合に使えるでしょう。

(Next) Next, we'll see how to open file dialogs.

(進む) 次では、ファイルダイアログの開き方をみていきます。

Examples: 12.2.1

Previous Next