Home » goodies » IndicatorUI.mxml




IndicatorUI.mxml

Ajaxローディングアイコンを表示させるmxmlコンポーネントです(アニメーションアイコン部分のみ)。 表示・非表示をActionScriptコード(わずか2行)で制御してやることで ローディングアニメーションとして機能します。 表示アイコンの種類は8種類各白・黒ベース(合計16種類)と豊富に揃えてあります。 Flex, AIRアプリケーションで使用可能。

ライブラリのダウンロード

IndicatorUI.zip

使い方

  1. ライブラリ内IndicatorUI.mxmlをFlexアプリケーションに設置します。 ここではコンポーネントのidをindicatorUIとしています。 このコンポーネント設置場所にローディングアイコンが表示されるようになります。 
    <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" 
    xmlns:ui="com.borealkiss.fx.display.*">
    
    <ui:IndicatorUI id="indicatorUI"/> 
    
</mx:Application>
  2. アプリケーション起動初期状態ではアイコンは非表示になっています。 アイコンの表示・非表示は以下のActionScriptコマンドで制御します。 
    //アイコンを表示する
indicatorUI.dispatchEvent(new Event(IndicatorUI.SHOW_LOADING_INDICATOR));

//アイコンを隠す
indicatorUI.dispatchEvent(new Event(IndicatorUI.HIDE_LOADING_INDICATOR));
    これら二つのコマンドを用いて、例えば画像のロード開始時にアイコンを表示、ロード完了後にアイコンを非表示、 というふうにローディングを演出することができます。後ほど説明しますが、デバッグ用にアイコンを常時表示することもできます。 アイコンやレイアウトの確認にお役立てください。

ローディングアイコンの変更方法

以下のようにIndicatorUI.iconModeプロパティを設定する必要があります。 未設定の場合はデフォルト値com.borealkiss.fx.display.IndicatorUI.INDICATOR_AJAX_BLACKになります。

<ui:IndicatorUI 
    id="indicatorUI" 
    iconMode="{com.borealkiss.fx.display.IndicatorUI.INDICATOR_AJAX_BLACK}"/>

iconModeの設定値と表示されるアイコンの関係はページ最上部のデモで確認できます。

デバッグモードでアイコンを常時表示

アイコンは表示命令コマンド発動中しか表示されませんが、 以下のようにIndicator.debugModeプロパティをtrue(デフォルトはfalse)にすることで アプリケーションスタート時にも強制的に表示することが可能です。

<ui:IndicatorUI id="indicatorUI" debugMode="true"/>

ローディングアイコンのフレームレートの変更方法

Flex(またはAIR)アプリケーションのフレームレートと同期します。そのためアニメーションが早すぎる場合は 以下のようにアプリケーションのフレームレートを変更してみてください。 

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" 
    xmlns:ui="com.borealkiss.fx.display.*"
    frameRate="8">

</mx:Application>

フレームレートとアイコンアニメーションの関係はページ最上部のデモで確認できます。

その他 - ライセンス

MITライセンスです。 Flashオープンソースプロジェクトとライセンス - blog Boreal Kiss を参考ください。

Contact

info [AT] boreal-kiss [DOT] com

Powered by blog Boreal Kiss 2008.