mozilla

Revision 179308 of プログレスメーター

  • リビジョンの URL スラグ: XUL_Tutorial/Progress_Meters
  • リビジョンのタイトル: プログレスメーター
  • リビジョンの ID: 179308
  • 作成日:
  • 作成者: Morishoji
  • 現行リビジョン いいえ
  • コメント NeedsEditorialReviewに Category:をつけていなかったのを修正

このリビジョンの内容

{{template.PreviousNext("XUL Tutorial:List Controls", "XUL Tutorial:Adding HTML Elements")}}

このセクションでは、プログレスメーターの作り方を見ていきます。

プログレスメーターを追加する

プログレスメーターは実行中の操作がどのくらい進んだかを表示するためのバーです。 このメーターを見かける典型的な場面は、ファイルをダウンロードしている時や、時間のかかる操作を実行している時です。 XUL には、こういったメーターを作るために使えるプログレスメーター要素があります。 プログレスメーターには2種類あり、一つは「既定(determinate)」、もう一つは「未定(undeterminate)」プログレスメーターです。

既定プログレスメーターは、操作に必要な時間が分かっている時に使います。 このプログレスメーターは、操作の進み具合に応じて増えていき、端まで一杯になったときには、操作が完了しているはずであることを示します。 このメーターは、サイズが分かっているファイルをダウンロードするダイアログなどで利用できます。

未定プログレスメーターは操作にかかる時間が分からないときに使います。 このプログレスメーターは、使用しているプラットフォームやテーマに応じて、「理髪店の回転灯」や「箱が左右にスライドする」ようなアニメーションをします。

既定プログレスメーター: 画像:prog-det.jpg

未定プログレスメーター: 画像:prog-udet.jpg

プログレスメーターの文法は以下の通りです:

<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>

画像:progress1.jpg]

ウィンドウ上でメーターが見えるように、value 属性を 50% と指定してあります。 また、ウィンドウの端にくっつかないようにマージンを 4 ピクセルに指定しています。 既に述べたように、検索が行なわれている間だけプログレスバーを表示させたいので、必要に応じて、スクリプトで表示したり隠したりします。

次のセクションでは、ウィンドウに、HTML を使って要素を追加する方法について学びます。

{{template.PreviousNext("XUL Tutorial:List Controls", "XUL Tutorial:Adding HTML Elements")}}

{{ wiki.languages( { "en": "en/XUL_Tutorial/Progress_Meters", "pl": "pl/Pomocnik_XUL/Paski_poste;pu" } ) }}

このリビジョンのソースコード

<p>
</p><p>{{template.PreviousNext("XUL Tutorial:List Controls", "XUL Tutorial:Adding HTML Elements")}}
</p><p>このセクションでは、プログレスメーターの作り方を見ていきます。
</p>
<h3 name=".E3.83.97.E3.83.AD.E3.82.B0.E3.83.AC.E3.82.B9.E3.83.A1.E3.83.BC.E3.82.BF.E3.83.BC.E3.82.92.E8.BF.BD.E5.8A.A0.E3.81.99.E3.82.8B"> プログレスメーターを追加する </h3>
<p>プログレスメーターは実行中の操作がどのくらい進んだかを表示するためのバーです。
このメーターを見かける典型的な場面は、ファイルをダウンロードしている時や、時間のかかる操作を実行している時です。
XUL には、こういったメーターを作るために使えるプログレスメーター要素があります。
プログレスメーターには2種類あり、一つは「既定(determinate)」、もう一つは「未定(undeterminate)」プログレスメーターです。
</p><p>既定プログレスメーターは、操作に必要な時間が分かっている時に使います。
このプログレスメーターは、操作の進み具合に応じて増えていき、端まで一杯になったときには、操作が完了しているはずであることを示します。
このメーターは、サイズが分かっているファイルをダウンロードするダイアログなどで利用できます。
</p><p>未定プログレスメーターは操作にかかる時間が分からないときに使います。
このプログレスメーターは、使用しているプラットフォームやテーマに応じて、「理髪店の回転灯」や「箱が左右にスライドする」ようなアニメーションをします。
</p><p>既定プログレスメーター:
<img alt="画像:prog-det.jpg" src="File:ja/Media_Gallery/Prog-det.jpg">
</p><p>未定プログレスメーター:
<img alt="画像:prog-udet.jpg" src="File:ja/Media_Gallery/Prog-udet.jpg">
</p><p>プログレスメーターの文法は以下の通りです:
</p>
<pre>&lt;progressmeter
    id="identifier"
    mode="determined"
    value="50%"/&gt;
</pre>
<p>各属性は以下の通りです:
</p>
<dl><dt> id </dt><dd> プログレスメーターの一意な識別子です
</dd><dt> mode </dt><dd> プログレスメーターの種類です。この属性を <code>determined</code> と指定すると、そのプログレスメーターは一杯になったことで処理の完了を示す、既定プログレスメーターになります。この属性を <code>undetermined</code>と指定すると, そのプログレスメーターはかかる時間が分からない場合に使う、未定プログレスメーターになります。この属性を指定しない場合、デフォルトの値は既定(<code>determined</code>)になります。
</dd><dt> value </dt><dd> プログレスメーターの現在の値です。この属性は既定プログレスメーターでのみ意味があります。設定値は 0% から 100% の間で指定しなければなりません。設定値は処理の進行に合わせてスクリプトから変更していきます。
</dd></dl>
<div class="highlight">
<p>それでは、作成中のファイル検索ダイアログにプログレスメーターを追加してみましょう。
普通なら、検索にかかるファイルがいくつなのか、検索にどれだけ時間がかかるかは分からないので、未定プログレスメーターを使うところです。
でも、開発中ずっとアニメーションしているのは気が散りますから、とりあえずは普通のやつを追加することにします。
通常、プログレスメーターは、検索を実行している間だけ表示されると思います。プログレスメーターを出したり消したりするスクリプトは後のセクションで追加する予定です。
</p>
<pre class="eval">&lt;hbox&gt;
   <span class="highlightred">&lt;progressmeter value="50%" style="margin: 4px;"/&gt;</span>
   &lt;spacer flex="1"/&gt;
&lt;/hbox&gt;
</pre>
<p><img alt="画像:progress1.jpg" src="File:ja/Media_Gallery/Progress1.jpg">]
</p><p>ウィンドウ上でメーターが見えるように、value 属性を 50% と指定してあります。
また、ウィンドウの端にくっつかないようにマージンを 4 ピクセルに指定しています。
既に述べたように、検索が行なわれている間だけプログレスバーを表示させたいので、必要に応じて、スクリプトで表示したり隠したりします。
</p>
</div>
<p>次のセクションでは、ウィンドウに、HTML を使って要素を追加する方法について学びます。
</p><p>{{template.PreviousNext("XUL Tutorial:List Controls", "XUL Tutorial:Adding HTML Elements")}}
</p>{{ wiki.languages( { "en": "en/XUL_Tutorial/Progress_Meters", "pl": "pl/Pomocnik_XUL/Paski_poste;pu" } ) }}
このリビジョンへ戻す