このセクションでは、プログレスメーターの作り方を見ていきます。
プログレスメーターを追加する
プログレスメーターは、実行中の操作がどのくらい進んだかを表示するためのバーです。
このメーターを見かける典型的な場面は、ファイルをダウンロードしているときや、時間のかかる操作を実行しているときです。
XUL には、こういったメーターを作るために使える、
プログレスメーター (progressmeter) 要素があります。
プログレスメーターには 2 種類あり、1 つは「既定 (determinate) 」、もう 1 つは「未定 (undeterminate) 」プログレスメーターになります。
既定プログレスメーターは、操作に必要な時間が判明しているときに使用します。 このプログレスメーターは、操作の進み具合に応じて増えていき、端まで一杯になったときには、操作が完了しているはずであることを示します。 このメーターは、サイズがわかっているファイルを、ダウンロードするダイアログなどで利用できます。
未定プログレスメーターは、操作にかかる時間が不明な場合に使用します。 このプログレスメーターは、使用しているプラットフォームやテーマに応じて、「理髪店の回転灯」や「箱が左右にスライドする」ようなアニメーションをします。
既定プログレスメーター:
未定プログレスメーター:
プログレスメーターの文法は以下の通りです。
<progressmeter
id="identifier"
mode="determined"
value="50"/>
各属性は以下の通りです。
-
id - プログレスメーターの一意な識別子です
- mode
- プログレスメーターの種類です。この属性を
determinedと指定すると、そのプログレスメーターは、端まで達したことで処理の完了を示す、既定プログレスメーターになります。この属性をundeterminedに指定すると、そのプログレスメーターは、処理にかかる時間が不明な場合に使う、未定プログレスメーターになります。この属性を指定しない場合、デフォルトの値は既定 (determined) になります。 -
value - プログレスメーターの現在の値です。 この属性は既定プログレスメーターでのみ意味があります。 設定値は 0 から 100 の間の割合を示す整数で指定しなければなりません。 設定値は処理の進行に合わせてスクリプトから変更していきます。
ファイル検索ダイアログの例
それでは、作成中のファイル検索ダイアログにプログレスメーターを追加してみましょう。 普通なら、検索にかかるファイルがいくつなのか、検索にどれだけ時間がかかるかのかは、事前にわからないため、未定プログレスメーターを使うところです。 でも、開発中にずっとアニメーションしているのは気が散りますから、とりあえずは普通のやつを追加することにします。 通常、プログレスメーターは、検索を実行している間だけ表示されると思います。プログレスメーターを出したり消したりするスクリプトは後のセクションで追加する予定です。
<hbox>
<progressmeter value="50" style="margin: 4px;"/>
<spacer flex="1"/>
</hbox>
ウィンドウ上でメーターが見えるように、value 属性を 50% と指定してあります。
また、ウィンドウの端にくっつかないようにマージンを 4 ピクセルに指定しています。
既に述べたように、検索が行なわれている間だけプログレスバーを表示させたいので、必要に応じて、スクリプトで表示したり隠したりします。
var el = env.locale; ここまでのファイル検索ダイアログの例 : ソース 表示
次のセクションでは、ウィンドウに、HTML を使って要素を追加する方法について学びます。