Creating a Wizard
ウィザードの作成
Many applications use wizards to help the user through complex tasks. XUL provides a way to create wizards easily.
多くのアプリケーションでは, 複雑な作業に渡ってユーザを助けるウィザードを 使っています。XUL はウィザードを簡単に作る方法を提供しています。
The Wizard
ウィザード
A wizard is a special type of dialog that contains a number of pages. Navigation buttons appear on the bottom of the dialog to switch between pages. The wizards are usually used to help the user perform a complex task. Each page contains a single question or a set of related questions. After the last page, the operation is carried out.
ウィザードは多くのページを含んだ特別な形のダイアログです。 ページ間をスウィッチするために、ナビゲーションボタンがダイアログ下部に 現れます。通常ウィザードは、ユーザが複雑な作業を行うのを手助けするのに 使用されます。各ページには、単一の質問または一セットの関係ある質問が 含まれています。最後のページの後, 操作が実行されます。
XUL provides a wizard element which can be used to create wizards. The contents inside the wizard element include all the content of every page of the wizard. Attributes placed on the wizard are used to control the wizard navigation. When creating a wizard, use the wizard tag instead of the window tag.
XUL は、ウィザードを作成するのに使う wizard 要素を提供して います。wizard 要素内の コンテンツは、ウィザードの各ページのコンテンツを全て含んでいます。 このウィザードの属性はウィザードナビゲーションを制御するために使われます。 ウィザードを作成するときには、 window タグの代わりに wizard タグを使います。
Note that wizards currently only work properly from chrome URLs.
現在ウィザードは、chrome URL からのみ適切に動作することに注意してください。
The wizard consists of several sections, although the exact layout will vary for each platform. The wizard will generally be displayed like those on the user's platform. A typical layout will include a title across the top, a set of navigation buttons across the bottom and the page contents in between.
正確なレイアウトはプラットフォームごとに異なりますが、幾つかのセクション からウィザードはできています。一般的にウィザードはユーザのプラットフォーム のものと同じように表示されます。典型的なレイアウトには、上端のタイトルと 下端のナビゲーションボタンのセット、それにその中間のページコンテンツが あります。
The title across the top is created using the title attribute, much like one would do for regular windows. The navigation buttons are created automatically. The pages of the wizard are created using the wizardpage element. You can place whatever content you want inside each wizardpage. Here is an example wizard:
上端のタイトルは、普通のウィンドウでするのと同じように title 属性で作ります。 ナビゲーションボタンは自動的に作られます。ウィザードのページは wizardpage 要素で 作ります。各 wizardpage 内に欲しいコンテンツは何でも入れることができます。 次はウィザードの例です:
<?xml version="1.0"?>
<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
<wizard id="example-window" title="Select a Dog Wizard"
xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
<wizardpage>
<description>
This wizard will help you select the type of dog that is best for you."
</description>
<label value="Why do you want a dog?"/>
<menulist>
<menupopup>
<menuitem label="To scare people away"/>
<menuitem label="To get rid of a cat"/>
<menuitem label="I need a best friend"/>
</menupopup>
</menulist>
</wizardpage>
<wizardpage description="Dog Details">
<label value="Provide additional details about the dog you would like:"/>
<radiogroup>
<caption label="Size"/>
<radio value="small" label="Small"/>
<radio value="large" label="Large"/>
</radiogroup>
<radiogroup>
<caption label="Gender"/>
<radio value="male" label="Male"/>
<radio value="female" label="Female"/>
</radiogroup>
</wizardpage>
</wizard>
This wizard has two pages, one that has a drop-dowm menu and the other with a set of radio buttons. The wizard will be formatted automatically, with a title across the top and a set of buttons along the bottom. The user can navigate between the pages of the wizard with the Back and Next buttons. These buttons will enable and disable themselves at the appropriate moments. In addition, on the last page, the Finish button will appear. All of this is automatic, so you don't have to do anything to manipulate the pages.
このウィザードには二つのページがあり、一つはドロップダウンメニューで もう一つはラジオボタンのセットです。ウィザードは自動的に、上端にタイトルを 下端にボタンセットを持つように定型化されます。ユーザは戻る (Back) ボタンと 進む (Next) ボタンでウィザードのページ間を移動できます。 この 2 つのボタンは適時、有効または無効になります。 加えて最後のページでは、完了 (Finish) ボタンが現れます。 これら全てが自動的で、ページの操作に何もする必要がありません。
The description attribute may optionally placed on a wizardpage element to provide a sub-caption for that page. In the example above, it has been placed on the second page, but not the first page.
そのページの副見出しを与えるために、 wizardpage 要素に description 属性がオプションとして置かれるかも しれません。上の例では 2 ページ目にありますが、 1 ページ目にはありません。
Handling Page Changes
ページ変更を扱う
You will generally want to do something once the Finish button is pressed. You can set an attribute onwizardfinish on the wizard element to accomplish this. Set it to a script which performs whatever task you want and then returns true. This script might be used to save the information that the user entered during the wizard.
一般的に完了 (Finish) ボタンが押されると、何かが起きて欲しいでしょう。 これを行うために、 wizard 要素に onwizardfinish 属性を置くことができます。 この属性を、して欲しい作業を行って true を返すスクリプトにセットします。 このスクリプトは、ユーザがウィザード中に入力した情報を保存するのに 使ってもいいです。
For example:
例えば:
<wizard id="example-window" title="Select a Dog Wizard" onwizardfinish="return saveDogInfo();" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
When the user clicks the Finish button, the function 'saveDogInfo' will be called, which would be defined in a script file to save the information that was entered. If the function returns true, the wizard closes. If it returns false, then the wizard does not close, which might occur if the function 'saveDogInfo' encountered invalid input, for example.
ユーザが完了ボタンを押したとき、 'saveDogInfo' 関数が呼ばれます。 これは入力された情報を保存するようスクリプトファイルに定義されているでしょう。 関数が true を返せばウィザードは閉じます。もし false を返したのなら、例えば 不適切な入力が 'saveDogInfo' 関数に入れられた場合のように、ウィザードは閉じま せん。
There are also related onwizardback, onwizardnext and onwizardcancel attributes, which are called when the Back, Next and Cancel buttons are pressed. These functions are called regardless of which page is currently displayed.
関連するものに onwizardback、 onwizardnext や onwizardcancel 属性があります。これらはそれぞれ 戻る (Back)、進む (Next)、キャンセル (Cancel) ボタンが押されたときに呼ばれます。 これらの関数は、現在どのページが表示されているかに関係なく呼ばれます。
To have different code called depending on which page you are on, use the onpagerewound or onpageadvanced attributes on a wizardpage element. They work similar to the other functions except that you can use different code for each page. This allows you to validate the input entered on each page before the user continues.
今どのページにいるかによって異なるコードが呼ばれるようにするには、 wizardpage 要素の onpagerewound 属性か onpageadvanced 属性を使います。 各ページに異なるコードを使うことができることを除いて、これらは他の関数と 同じように動作します。これでユーザが続いて操作を行う前に、各ページに 入力された値を検証することができます。
A third method is to use the onpagehide and onpageshow attributes on the wizardpage element. They will be called when the page is hidden or shown, regardless of which button was pressed (except when Cancel is pressed -- you need to use onwizardcancel to check for this.)
3 番目の方法は、 wizardpage 要素の onpagehide 属性と onpageshow 属性を使うことです。 どのボタンが押されたかに関係なく、ページが隠されたり現れたりするときに これらは呼ばれます (ただし、キャンセルボタンが押されたときを除く -- この場合は onwizardcancel を使う必要があります)。
These three methods should provide enough flexibility to handle navigation as you need to. The following is a summary of attribute functions that are called when the user presses Next, in the order that they will be checked. As soon as one returns false, the navigation will be cancelled.
これら 3 つの方法で、必要となるナビゲーションを扱うのに十分な柔軟性がある はずです。次は進む (Next) を押したときに呼ばれる属性関数をチェックされる順に 一覧にしたものです。 false を返すとすぐにナビゲーションはキャンセルされます。
| Attribute | Place on Tag | When it is Called |
| pagehide | wizardpage | Called on the page that the user is leaving. |
| pageadvanced | wizardpage | Called on the page the user is leaving. |
| wizardnext | wizard | Called on the wizard. |
| pageshow | wizardpage | Called on the page that the user is entering. |
| 属性 | 含まれるタグ | いつ呼ばれるか |
| pagehide | wizardpage | ユーザがそのページから去るとき。 |
| pageadvanced | wizardpage | ユーザがそのページから去るとき。 |
| wizardnext | wizard | ウィザードで。 |
| pageshow | wizardpage | ユーザがそのページに入るとき。 |
A similar process occurs for the Back button.
同じような処理が戻る (Back) ボタンでもあります。
(Next) In the next section, we'll see some additional features of wizards.
(進む) 次のセクションでは、ウィザードの機能についてもっとみていきます。
Examples: 12.4.1