More Wizards


This section describes some additional features of wizards.


More Complex Navigation


Normally, a wizard displays each wizardpage in the order that you place them in the XUL file. In some cases however, you may want to have different pages of the wizard appear depending on what the user selects in earlier pages.

ウィザードは通常、XUL ファイルに書かれた順に wizardpage を表示します。 しかし場合によっては、ユーザが前のページで選択した内容によって、ウィザードの 別のページが現れるようにしてもよいでしょう。

In this case, place a pageid attribute on each of the pages. This should be set to an indentifer for each page. Then, to navigate to a page, use one of two methods:

こういった場合には、各ページに pageid 属性を 入れます。これで各ページに対する識別子を設定することができます。 そして、あるページに移動するにあたっては、次の二つの方法のうちのいずれかを 使います:

  1. Set the next attribute on each page to the page ID of the next page to go to. You can change these attributes as needed to navigate to different pages.
  2. Call the wizard's goTo method. It takes one argument, the page ID of a page to go to. You might call this method in the onpageadvanced or onwizardnext handlers. Remember to return false in this case, because you have already changed the page yourself. Note that the goTo method, because it causes a page change, will fire the events again, so you'll have to make sure you handle this case.
  1. 各ページの next 属性を、次に移るページの ページ ID として設定します。必要に応じて、こうした属性を変更して 異なるページへと移動できるようにすることもできます。
  2. ウィザードの goTo メソッドを呼び出します。これは 1 つの引数、移るページの ページ ID を取ります。このメソッドを onpageadvancedonwizardnext ハンドラで呼ぶこともできます。 既に自分でページを変更しているので、この場合には false を返すことを 覚えておいてください。goTo メソッドはページ変更を引き起こすため、 イベントを再度引き起こすことを覚えておいてください。そのため、こうした 場合も確実に処理するようにしてください。

For example, here are a set of wizard pages (the inner content has been omitted):

例えば、次はウィザードページの 1 セットです (内部コンテンツは除いてあります):

<wizardpage pageid="type" next="font">
<wizardpage pageid="font" next="done">
<wizardpage pageid="color" next="done">
<wizardpage pageid="done">

The wizard always starts at the first page, which in this case has the page ID type. The next page is the one with the page ID font, so the wizard will navigate to that page next. On the page with the page ID font, we can see that the next page is done, so that page will be displayed afterwards. The page with the page ID done has no next attribute, so this will be the last page. A script will adjust the next attributes as necessary to go to the page with the page ID color when needed.

ウィザードは常に最初のページから始まります。例の場合にはページ ID type を持っています。次のページはページ ID font を持つページで、ウィザードは次にそのページに 移ります。ページ ID font のページでは、次のページが done であるので、そのページがその後に表示される でしょう。ページ ID done のページは next 属性を持っていないので、これが最後のページです。 要求されてページ ID color のページに行く必要が あるときには、スクリプトは next 属性を調整 するでしょう。

Wizard Functions


The wizard works much like a tabbed panel, except that the tabs are not displayed and the user navigates between pages by using the buttons along the bottom. Because all of the pages are part of the same file, all of the values of the fields on all pages will be remembered. Thus, you do not have to load and save information between pages.

ウィザードはタブ付きパネルのように動作します。ただしタブは表示されず、 ユーザは下部にあるボタンを使ってページ間を移動します。 全ページが同じファイルの一部であるので、全ページのフィールドの値全てが記憶 されます。このためページ間で情報をロードしたりセーブしたりする必要がありません。

However, you may want to do some validation of each field on each page. For this, use the handlers described in the previous section. If a field is invalid, you might display an alert. In some cases, it would be more convenient to disable the Next button until valid input has been entered.

しかし、各ページのフィールドを検査したいかもしれません。このためには、 前のセクションで述べたハンドラを使います。フィールドが不適当であれば、 警告を表示したいかもしれません。幾つかの場合には、妥当な入力がされるまで、 Next ボタンを無効にしておくのがよいでしょう。

The wizard has a property canAdvance, which can be set to true to indicate that the Next button should be enabled. If set to false, the Next button is disabled. You can change the property when invalid or valid data has been entered.

ウィザードは canAdvance プロパティを持っていて、 これを true にセットすると Next ボタンが有効であると指示できます。 false にセットすると Next ボタンは無効になります。 不当なデータあるいは妥当なデータが入力されたときにプロパティを変更することが できます。

In the following example, the user must enter a secret code into a textbox on the first page of the wizard. The function checkCode is called whenever the first page is shown as indicated by the onpageshow attribute. It is also called whenever a key is pressed in the textbox, to determine whether the Next button should be enabled again.

次の例では、ウィザードの最初のページでユーザはテキストボックスに秘密コードを 入力しなければなりません。 onpageshow 属性で示されて いるように、最初のページが表示されるときは常に checkCode 関数が呼ばれます。 この関数はテキストボックスでキーが押される度にも呼ばれ、Next ボタンを再び有効に するかどうかを決定します。

Example 12.5.1: Source
<?xml version="1.0"?>

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

<wizard id="theWizard" title="Secret Code Wizard"

     function checkCode()
         (document.getElementById('secretCode').value == "cabbage");

     <wizardpage onpageshow="checkCode();">
       <label value="Enter the secret code:"/>
       <textbox id="secretCode" onkeyup="checkCode();"/>

       <label value="That is the correct secret code."/>


There is also a corresponding canRewind property that you can use to enable or disable the Back button. Both properties are adjusted automatically as you switch pages. Thus, the Back button will be disabled on the first page so you don't have to set it yourself.

Back ボタンを有効にしたり無効にしたりする際に利用できる canRewind プロパティという canAdvance に対応するプロパティもあります。 両方のプロパティとも、ページを移動するたびに自動的に調整されます。それで、 Back ボタンは最初のページでは無効であり、自分で設定する必要はありません。

Another useful property of the wizard is currentPage, which holds a reference to the currently displayed wizardpage. You can also modify the current page by changing this property. If you do change it, the various page change events will still be fired.

ウィザードにはもう一つ便利なプロパティである currentPage があります。これは現在表示されている wizardpage への参照を持っています。 このプロパティを変更すれば、現在のページを変えることができます。 もし実際にこのプロパティを変更した場合でも、種々のページ変更イベントは 依然として引き起こされます。

(Next) Next, we'll see how to use overlays to handle common content.

(進む) 次のセクションでは、共通のコンテンツを扱うオーバーレイの使い方をみていきます。

Examples: 12.5.1

Copyright (C) 1999 - 2004
訳者: kmine
このドキュメントのオリジナルは XULPlanet において英語で公布されています。
利用者の利便のために Mozilla Japan 翻訳部門によって提供されたものです。