ProgressBar コントロール -- Flex 2.01

ProgressBar コントロールは、処理の進行状況を時間経過に沿って視覚的に表現するものです。ProgressBar コントロールには、確定型と不確定型の 2 つの種類があります。確定型の ProgressBar コントロールでは、時間の経過に伴う処理の進行状況が比例直線的に表現されます。ユーザーを長時間待たせる必要があるとき、その処理の規模が事前にわかっている場合に使用します。

不確定型の ProgressBar コントロールは、処理の規模が不確定である場合に、処理の経過時間に基づいて進捗状況を表現します。処理の規模が明らかな場合は、確定型の ProgressBar コントロールを使用することをお勧めします。

次の例は、ProgressBar コントロールの両方の種類を示しています。

ProgressBar コントロールは、処理の完了まで長時間にわたってユーザーを待たせる必要がある場合に使用します。ProgressBar コントロールは、あらゆるタイプのコンテンツロード処理に適用できます。どの程度のコンテンツがロード済みであるかを表示するラベルを使用することもできます。

ProgressBar コントロールには、次のデフォルトプロパティがあります。

プロパティ	デフォルト値
デフォルトサイズ	幅 150 ピクセル、高さ 4 ピクセル
最小サイズ	0
最大サイズ	未定義

サブトピック

ProgressBar コントロールのモード

ProgressBar コントロールの動作モードを指定するには、mode プロパティを使用します。ProgressBar コントロールは、次の動作モードをサポートしています。

event progress イベントと complete イベントを送出するロードプロセスを、source プロパティを使って指定します。たとえば、SWFLoader コントロールと Image コントロールはファイルのロードの過程で、これらのイベントを送出します。一般に、このモードでは、確定型の ProgressBar を使用します。これがデフォルトのモードです。

また、イメージを再ロードする場合や、SWFLoader コントロールと Image コントロールで複数のイメージをロードする場合など、複数のロードプロセスについて進捗状況を評価したいときにもこのモードを使用します。

polled getBytesLoaded() メソッドおよび getsBytesTotal() メソッドを実装するロードプロセスを、source プロパティを使って指定します。これらのメソッドは、SWFLoader コントロールと Image コントロールなどに実装されています。一般に、このモードでは、確定型の ProgressBar を使用します。

manual maximum、minimum、indeterminate の各プロパティを設定し、setProgress() メソッドを呼び出します。一般に、このモードでは、不確定型の ProgressBar を使用します。

ProgressBar コントロールの作成

次の例のように、MXML で ProgressBar コントロールを定義するには、<mx:ProgressBar> タグを使用します。MXML の他の場所 (別のタグまたは ActionScript ブロック) のコンポーネントを参照する場合は、id 値を指定します。

次の例では、Image コントロールで、デフォルトの event モードを使用して、イメージのロード状況を追跡します。

<?xml version="1.0"?>
<!-- controls\pbar\PBarSimple.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">

    <mx:Script>
        <![CDATA[
            public function initImage():void {
              image1.load('http://localhost:8100/flex/assets/DSC00034.JPG');
            }
        ]]>
    </mx:Script>

    <mx:VBox id="vbox0" 
        width="600" height="600">
        <mx:Canvas>
            <mx:ProgressBar width="200" source="image1"/>
        </mx:Canvas>
        <mx:Button id="myButton" 
            label="Show" 
            click="initImage();"/>
        <mx:Image id="image1" 
            height="600" width="600" 
            autoLoad="false" 
            visible="true"/> 
    </mx:VBox>
</mx:Application>

このモードでは、Image コントロールはロード中に progress イベントを生成し、ロードが完了したときに complete イベントを生成します。

<mx:Image> タグには getBytesLoaded() メソッドと getBytesTotal() メソッドが実装されているため、次のように、polled モードを使用することもできます。

<mx:ProgressBar width="200" source="image1" mode="polled"/>

manual モード (mode="manual") で使用するには、不確定モードの ProgressBar コントロールで maximum プロパティと minimum プロパティ、および setProgress() メソッドを使用します。setProgress() メソッドのシグネチャを次に示します。

setProgress(Number completed, Number total)

completed 処理の進行量を、maximum から minimum の範囲内の値で指定します。たとえば、ロードされたバイト数を追跡する場合は、既にロード済みのバイト数を指定します。

total 処理の合計を指定します。たとえば、ロードされたバイト数を追跡する場合は、ロードの対象となる合計バイト数を指定します。通常は、maximum と同じ値になります。

進捗状況を評価するには、setProgress() メソッドを明示的に呼び出して ProgressBar コントロールを更新する必要があります。

ProgressBar コントロールのラベルの定義

デフォルトでは、ProgressBar に LOADING xx% (xx はロード済みイメージの割合) のように表示されます。他のテキストストリングを指定するには、label プロパティを使用します。

label プロパティでは、ラベルテキストのストリングに次の特殊文字を使用できます。

Loading Image 1500 out of 78000 bytes, 2%

<?xml version="1.0"?>
<!-- controls\pbar\PBarLabel.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">

    <mx:Script>
        <![CDATA[
            public function initImage():void {
              image1.load('http://localhost:8100/flex/assets/DSC00034.JPG');
            }
        ]]>
    </mx:Script>

    <mx:VBox id="vbox0" 
        width="600" height="600">
        <mx:Canvas>
            <mx:ProgressBar 
                width="300" 
                source="image1" 
                mode="polled" 
                label="Loading Image %1 out of %2 bytes, %3%%" 
                labelWidth="400"/>        
        </mx:Canvas>
        <mx:Button id="myButton" 
            label="Show" 
            click="initImage();"/>
        <mx:Image id="image1" 
            height="600" width="600" 
            autoLoad="false" 
            visible="true"/> 
    </mx:VBox>
</mx:Application>