RPC 処理や HTTPService 処理中に表示される busy カーソル。
s2flex2-components や RemoteObject を使用して Flex（AIR）アプリケーションとサーバプログラムを Remoting で連携して何かを処理する場合、showBusyCursor="true" にすることで、サーバプログラムが任意の処理を行っている際にデフォルトのくるくる回るカーソルを表示することができるが、独自のカーソルやプログレスバーを表示したい場合があるので、その独自のカーソルやプログレスバーを表示する方法をメモ。
考え方はいくつかあるのかと思うが、今回はシンプルにデフォルトのカーソルを非表示にし、処理が開始した時点で作成したカーソルやプログレスバーを表示設定し、result イベントハンドラや fault イベントハンドラが呼び出された時点で非表示設定させるだけのものにする。
▽ カーソルやプログレスバーは・・・
今回は Flash CS３で作成した簡単なプリローダ的デザイン要素を作成し、swf を asset として Embed し、UIComponent を extends する。プログレスバーなら graphics.drawRect 辺りを上手く利用する。
package {
import mx.core.UIComponent;
import flash.display.Sprite;
public class CustomBusyCursor extends UIComponent {
[Embed(source='cursor.swf')]
private var CustomCursor:Class;
public function CustomBusyCursor() {
var cursor:Sprite = new CustomCursor();
addChild(cursor);
}
}
}
▽ MXML ソースサンプル
今回は s2flex2-components を使用して簡単にログインのサンプル。ボタンをクリックしログイン処理を開始する。Remoting には AMFPHP 1.9-beta を利用し、class 名は Login で test/Login.php として保存し、ログイン用の関数を loginUser とする。
（PHP 側の詳しいプログラムに関しては特に今回は関係が無いので省く。）
<?xml version="1.0" encoding="UTF-8"?>
<mx:Application
xmlns:mx="http://www.adobe.com/2006/mxml"
xmlns:s2="http://www.seasar.org/s2flex2/mxml"
layout="absolute"><mx:Script source="BusyCursor.as" />
<mx:VBox>
<mx:Form>
<mx:FormItem label="ユーザー ID:">
<mx:TextInput id="userId" />
</mx:FormItem>
<mx:FormItem label="パスワード:">
<mx:TextInput id="password" displayAsPassword="true" />
</mx:FormItem>
<mx:Button label="ログイン" click="login()" />
</mx:Form>
</mx:VBox><s2:S2Flex2Service
id="loginService"
gatewayUrl="http://hogehoge.com/amfphp/gateway.php"
destination="test.Login"
result="login_onResult(event)"
fault="login_onFault(event)" /></mx:Application>
▽ ActionScript ソース
loginService.loginUser に２つのパラメータを渡してログインする。
import mx.controls.Alert;
import CustomBusyCursor;private var cBusyCursor:CustomBusyCursor;
private function login():void {
var userId:String = userId.text;
var password:String = password.text;
if(userId == "" || password == "") {
Alert.show("必須項目を入力してください。", "ログインエラー");
return;
}
cBusyCursor = new CustomBusyCursor();
cBusyCursor.x = Math.floor(width / 2);
cBusyCursor.y = Math.floor(height / 2);
addChild(cBusyCursor);
loginService.loginUser(userId, password);
}private function login_onResult(evt:Object):void {
removeChild(cBusyCursor);
if(evt.result) {
trace("ログイン成功");
} else {
trace("ログイン失敗");
}
}private function login_onFault(evt:Object):void {
removeChild(cBusyCursor);
trace("ログイン失敗");
}
【使用技術】
Flex Framework, Flex Builder 3 beta, ActionScript 3, AMFPHP 1.9 - beta, s2flex2-components
【参考サイト】
FxUG 記事：flexの処理の一時的な中断
