ウィザードの作成

多くのアプリケーションでは, 利用者が複雑な作業を行っていく場合の補助のためにウィザードを利用しています。 XUL では、ウィザードを簡単に作る方法を提供しています。

ウィザード

ウィザード (wizard) は、いくつかのページを含む、特殊な種類のダイアログで、 その下辺には、ページを切り替えるためのナビゲーションボタンが配置されています。 通常、ウィザードは、利用者が複雑な作業を行うのを補助するために使用され、 各ページには、1 つ、または相関するいくつかの質問が含まれています。 また、最後のページが終わったあと、その操作が実行されることになります。

XUL では、ウィザードの作成に使用可能な wizard 要素を提供しています。 この wizard 要素の中には、ウィザードの各ページに置くコンテンツが全て含まれることになります。 また、wizard に置かれる属性によって、ウィザードのナビゲーションを制御することが可能です。 ウィザードを作成する場合には、wizard タグを window タグに代えて使用します。

ウィザードはいくつかの部分から構成されていますが、 その厳密なレイアウトはプラットフォームごとに異なっています。 通常は利用者のプラットフォームのものと同じように表示されることになりますが、 典型的なレイアウトは、上辺に沿ってタイトルが、下辺に沿っていくつかのナビゲーションボタンが置かれ、その間にページのコンテンツが置かれる形になります。

上辺に置かれるタイトルは、通常のウィンドウと同じように title 属性によって作成されます。 また、ナビゲーションボタンは自動的に生成され、 ウィザードの各ページは wizardpage 要素によって作成されます。 各 wizardpage には、必要ならばどんなコンテンツを置いても構いません。

ウィザードの例

以下にウィザードの例を示します。

例 1 : ソース

<?xml version="1.0"?>

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

<wizard id="example-window" title="Select a Dog Wizard"
  xmlns="https://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>

このウィザードには 2 つのページがあり、1 つはドロップダウンメニューが、もう 1 つはラジオボタンが含まれています。 ウィザードは、上辺にはタイトル、下辺にはボタンが並ぶように自動的にレイアウトされます。 利用者は「戻る (Back)」ボタンと「次へ (Next)」ボタンでウィザードのページ間を移動できます。 これらの 2 つのボタンは必要に応じて、有効化または無効化されます。 加えて最後のページには、「完了 (Finish)」ボタンが表示されます。 これらの処理は全て自動的に行われるため、開発者はページの操作に関して何も記述する必要はありません。

また、wizardpage 要素にページに、オプションの description 属性を置くことで、そのページに 小見出しを設定することが可能です。 上記の例で、小見出しは、1 ページ目にはなく、2 ページ目のみに置かれています。 【訳注: ただし画像では小見出しが追加されているようです】

ページの切り替え処理

通常、ウィザードで「完了」ボタンが押された場合には、何か処理を行う必要があるはずです。 このために、wizard 要素には onwizardfinish 属性を置いて、 スクリプトが設定できるようになっています。 このスクリプトでは、実行する必要がある処理を全て行って、true を返すようにします。 例えば、以下のようにして、利用者がウィザードで入力した情報を保存するために使用することが可能です。

<wizard id="example-window" title="Select a Dog Wizard"
  onwizardfinish="return saveDogInfo();"
  xmlns="https://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">

利用者が完了ボタンを押したときには、saveDogInfo() 関数が呼ばれることになります。 この関数は、スクリプトファイルで定義されており、入力された情報の保存を実行します。 この関数が true を返した場合は、ウィザードは閉じますが、 false を返した場合は、ウィザードは閉じません。 これは、例えば saveDogInfo() 関数が不正な入力を検出したような場合に行われることになります。

また、関連する属性としては、onwizardback、onwizardnext、onwizardcancel があり、 これらに設定したスクリプトは、それぞれ「戻る」「次へ」「キャンセル」ボタンが押されたときに呼ばれることになります。 なお、これらのスクリプトは、そのときどのページが表示されているかとは関係なく呼び出されます。

そのとき表示されているページによって異なるコードが呼び出されるようにしたい場合には、wizardpage 要素に対して、 ページが戻された (rewound) 場合のために、onpagerewound 属性を、 ページが進められた (advanced) 場合のために、onpageadvanced 属性を設定します。 これらは、各ページに異なるコードを使用できることを除いて、他の関数と同じように動作します。 これらを使用すれば、利用者が次の操作に移る前に、各ページに入力された値を検証することが可能になります。

また、第 3 の方法として、wizardpage 要素に対して、 ページが表示された (show) 場合のために、onpageshow 属性を、 ページが非表示になった (hide) 場合のために、onpagehide 属性を設定することも可能です。 これらは、どのボタンによってページが変更されたかには関係なく呼び出されることになります。 (ただし、キャンセルボタンが押された場合は例外で、この場合は onwizardcancel を使う必要があります)

これらの 3 種類の方法によって、必要となるナビゲーションの処理は、十分柔軟に記述することが可能になっています。

以下の表は、「次へ」ボタンが押された場合に、呼び出される属性関数をまとめたものです。 これらの属性は、表に記載された順番でチェックされることになります。 これらのどれかで false が返された場合、その時点でナビゲーションはキャンセルされます。

また、「戻る」ボタンの場合も、同様の処理が発生することになります。

 <wizardpage pageadvanced='return funcName()'></wizardpage></code>

次のセクションでは、いくつかのウィザードの付加的な機能について見ていきます。