不確定型のプログレスメーター:
このセクションでは、プログレスメーターの作り方を見ることにしましょう。
プログレスメーターとは、タスクがどの程度終わったかを示すバーのことです。ファイルをダウンロードする場合や時間のかかる操作を行なうときにそれを目にすることが多いでしょう。XUL には、それを作るのに使えるプログレスメーター要素があります。プログレスメーターには 2 種類あります。確定 (determinate) 型と不確定 (undeterminate) 型です。
確定型のプログレスメーターは、操作に要する時間が分かっている場合に使います。プログレスメーターは、徐々に埋まっていき、一杯になると、操作が終了したことを示します。これは、ダウンロードファイルダイアログで、ファイルのサイズが分かっている場合に使えます。
不確定型のプログレスメーターは、操作に要する時間が分からない場合に使います。Mozilla では、プログレスメーターは、理髪店の回転するポールに似たもので、それと同じ様にアニメートします。
確定型のプログレスメーター:
不確定型のプログレスメーター:
プログレスメーターは、水平方向が一般的ですが、水平方向にも垂直方向にも置くことができます。
プログレスメーターのシンタックスは、次の通りです。
<progressmeter
id="identifier"
mode="determined"
value="0%"
align="horizontal"
label="Loading"/>
|
属性は次の通りです。
「ファイル検索」ダイアログにプログレスメーターを追加しましょう。ファイルを幾つ検索するのか、また、検索にどれだけ時間がかかるのか分からないので、通常は、不確定型のプログレスメーターを置きます。しかし、ここでは、開発の間、気晴らしができるように、通常のアニメートする方を加えることにします。プログレスメーターは、普通、検索が行なわれている間だけ表示されます。これを有効にしたり無効にしたりするスクリプトを後で追加することにします。
<box orient="horizontal"> <progressmeter value="50%" style="margin: 4px;"/> <spacer flex="1"/> |
値は 50% に設定されています。そのため、ウィンドウでメーターを見ることができます。マージンは、4 ピクセルになっています。そのため、メーターは、ウィンドウの端から離れています。既に述べたように、検索が行なわれている間だけプログレスバーを表示させたいので、スクリプトを使って、必要に応じて、それを表示したり隠したりします。
(進む) 次は、スクロールバーの作り方を見ることにしましょう。