Web通信部分(Ti.Network.createHTTPClient)を利用すると
非同期通信で画面の制御が面倒なことがあるので
これを回避する１つの方法No Loading...を実装してみました。
利用するのは、ActivityIndicatorと呼ばれるのものでこれを利用しバックグラウンドでは
Web通信を画面では、Now Loadingを表示します。
index.js
=========
=========function doClick(e) {var loading = Alloy.createController('loading',{handler : function(client, e){Ti.API.info("Received text: " + client.responseText);alert('success');}});loading.getView().open();}$.index.open();
index.tss
=========
".container": {
backgroundColor:"white"
},
"Label": {
top: 30,
width: Ti.UI.SIZE,
height: Ti.UI.SIZE,
color: "#000"
}
=========
index.xml
=========
<Alloy>
<Window class="container">
<Label id="label" onClick="doClick">Hello, World</Label>
</Window>
</Alloy>
=========
loading.js
=========
var args = arguments[0] || {};
function showIndicator(e){
$.activityIndicator.show();
}
var url = "http://www.google.co.jp/";
var client = Ti.Network.createHTTPClient({
onload : function(e) {
args.handler(this, e);
$.loading.close();
$.activityIndicator.hide();
},
onerror : function(e) {
Ti.API.debug(e.error);
alert('error');
$.loading.close();
$.activityIndicator.hide();
},
timeout : 5000
});
client.open("GET", url);
client.send();
=========
loading.tss
=========
".container" : {
backgroundColor: '#999',
opacity: 0.6,
height:Ti.UI.FILL,
width:Ti.UI.FILL
}
loading.xml
=========
<Alloy>
<Window class="container" onOpen="showIndicator">
<ActivityIndicator id="activityIndicator" message="Loading..."/>
</Window>
</Alloy>
=========
ソースはこのようになっています。
loading自体はモジュールみたいな形で利用します。
順番としては
loadingをopen->load画面を表示->HTTPリクエスト->onload処理->画面を閉じる
が流れです。
意外と簡単にでき応用も利くのでおためあれ
gitに今回作った内容を公開いたしました。
https://github.com/genyasan/ti/tree/master/loading
