このセクションでは、いくつかのウィザードの付加的な機能について説明していきます。
複雑なナビゲーション
通常、ウィザードでは wizardpage
このためには、まず各ページに pageid 属性を置くことで、
それぞれに識別子を設定する必要があります。
次に、以下の 2 つの方法のいずれかを使用して、ページの移動を行います。
- 各ページに
next属性を置いて、次に移動するページのページ ID を設定します。 必要ならば、この属性を変更することで、移動するページを変更することも可能です。 - ウィザードの
goTo()メソッドを呼び出します。 このメソッドは、引数として移動するページのページ ID を 1 つ取ります。 このメソッドはonpageadvancedやonwizardnextのようなハンドラから呼び出すことも可能です。 ただし、この場合goTo()によるページ移動が上書きされないように、ハンドラには false を返して、デフォルトのページ移動を抑止する必要があります。 また、goTo()メソッドによるページ変更のために、イベントが再送出されることも覚えておいてください。 このため、ハンドラでは再送出されたイベントを適切に処理する必要があります。
以下に、一連のウィザードページの例を示します。 (内部のコンテンツは除いてあります)
<wizardpage pageid="type" next="font"> <wizardpage pageid="font" next="done"> <wizardpage pageid="color" next="done"> <wizardpage pageid="done">
- ウィザードは、常に最初のページから始まります。 この例の場合は、ページ ID が
typeのページです。 次のページには、ページ ID がfontのページが指定されているため、ウィザードは、次にそのページに移動します。 - ページ ID が
fontのページでは、次のページどしてdoneが指定されているため、次は、そのページが表示されることになります。 - ページ ID が、
doneのページはnext属性が設定されていないため、最後のページになります。
なお、ページ ID が、color のページに移動する必要があるときには、
スクリプトにより、必要に応じて next 属性の調整を行います。
ウィザード関数
ウィザードは、タブ付きパネルと良く似た動作をします。 主な相違点は、タブが表示されないことと、利用者が下部のボタンを使用してページ間を移動することぐらいです。 ウィザードは、全てのページが同じ XUL ファイル上に記述されることになるため、 表示時には、全てのページの全フィールド値が、常に保持されることになります。 このため、ページを移動するときに、情報をロードしたりセーブしたりする必要がありません。
しかしながら、いくつかのフィールドの検査については、各ページで行いたいと思うかもしれません。 このためには、前のセクションで説明したハンドラが使用できます。 これを利用して、フィールドの値が不適当だった場合には、アラートの表示を行うのが常套ではありますが、 場合によっては、正しい入力が行われるまで、「次へ (Next)」ボタンを無効にしておく方がよい場合もあると思います。
ウィザードのプロパティの canAdvance に true を設定することで「次へ」ボタンが有効であることを指示できます。
ここに false を設定すると「次へ」ボタンは無効化されます。
このプロパティは、ページに入力されたデータが不適切になったか、あるいは適切になったことを検出したとき、変更することが可能です。
ウィザードの例
以下の例では、利用者は、ウィザードの最初のページで、テキスト入力欄にシークレットコードを入力しなければなりません。
checkCode() 関数は、onpageshow 属性で指定されているため、最初のページが表示されるときには常に呼び出されます。
また、この関数はテキスト入力欄でキーが押されるたびにも呼び出されて、
「次へ」ボタンを再び有効にするかどうかの判定を行います。
var el = env.locale; 例 1 : ソース
<?xml version="1.0"?>
<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
<wizard id="theWizard" title="Secret Code Wizard"
xmlns="https://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
<script>
function checkCode(){
document.getElementById('theWizard').canAdvance = (document.getElementById('secretCode').value == "cabbage");
}
</script>
<wizardpage onpageshow="checkCode(); return true;">
<label value="Enter the secret code:"/>
<textbox id="secretCode" onkeyup="checkCode();"/>
</wizardpage>
<wizardpage>
<label value="That is the correct secret code."/>
</wizardpage>
</wizard>
また、関連するプロパティに、「戻る (Back)」ボタンの有効と無効を切り替えるための canRewind プロパティもあります。
どちらのプロパティも、ページを移動するたびに自動的に調整されます。
このため、最初のページで「戻る」ボタンを明示的に無効にする必要はありません。
さらに、ウィザードには、currentPage という便利なプロパティもあります。
このプロパティは、現在表示されている wizardpage の参照を持っています。
また、このプロパティを変更することで、現在のページを変更することも可能です。
なお、このプロパティの変更によりページを変更した場合であっても、
各種のページ変更イベントは、変わることなく送出されます。
次のセクションでは、共通のコンテントを扱うためのオーバーレイの使い方について見ていきます。