BusyIndicator is not shown - apache-flex

Question

I want to show the busyIndicator before launching a HTTPService , and hide it when the rpc is finished :
<?xml version="1.0" encoding="utf-8"?>
<s:View xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:mx="library://ns.adobe.com/flex/mx"
xmlns:s="library://ns.adobe.com/flex/spark"
title="Saisie et envoi"
creationComplete="creationCompleteHandler(event)" >
<fx:Declarations>
<!-- Placer ici les éléments non visuels (services et objets de valeur, par exemple). -->
<mx:HTTPService id="userRequest" url="{url}/crr.php" resultFormat="text" result="userRequest_resultHandler(event)" useProxy="false" method="POST" />
</fx:Declarations>
<fx:Script>
<![CDATA[
import mx.events.FlexEvent;
import mx.rpc.events.ResultEvent;
import model.Config;
import model.Db;
var conf:Config = new Config();
public var db:Db = new Db();
[Bindable]
public var url:String = conf.getConfigSo("url"); // example : http://localhost/myfolder
protected function enregistrer(event:MouseEvent):void
{
var param:Object = new Object();
try {
if (db.avoirAttribut("enreg")) {
db.setDbSo("enreg", db.getDbSo("enreg")+chp1.text+";"+chp2.text+"\n");
}
else {
db.setDbSo("enreg", chp1.text+";"+chp2.text+"\n");
}
param.text = "Enregistrement effectué avec succès !";
navigator.pushView(Message, param);
}
catch (e:Error) {
param.text = "Enregistrement non effectué !";
navigator.pushView(Message, param);
}
}
protected function lire(event:MouseEvent):void
{
area.text = db.getDbSo("enreg");
}
protected function send(event:MouseEvent):void
{
busy.visible = true;
userRequest.cancel();
var params:Object = new Object();
params.col1 = db.getDbSo("enreg");
userRequest.send(params);
busy.visible = false;
}
protected function userRequest_resultHandler(event:ResultEvent):void
{
resultHTTP.text = userRequest.lastResult.toString();
}
protected function creationCompleteHandler(event:FlexEvent):void
{
chp1.setFocus();
}
]]>
</fx:Script>
<s:Scroller width="100%" height="100%">
<s:VGroup width="100%" height="100%" paddingTop="5" paddingBottom="5" verticalAlign="middle" horizontalAlign="center" gap="5">
<s:TextInput id="chp1" width="50%"/>
<s:TextInput id="chp2" width="50%"/>
<s:Button label="Enregistrer" click="enregistrer(event)"/>
<s:Button label="Lire" click="lire(event)"/>
<s:TextArea id="area" editable="false"/>
<s:Button label="Envoyer" click="send(event)"/>
<s:BusyIndicator id="busy" symbolColor="blue" visible="false" />
<s:Label id="resultHTTP"/>
</s:VGroup>
</s:Scroller>
</s:View>
The problem is that at runtime the BusyIndicator is not shown , though I realise that it took some seconds for the entire operation to complete. So why is not the BusyIndicator shown in this case ?

Answer 1

The HTTPService request send() returns when the request is sent, not when the response is received. So you are showing the busy indicator only for a short period of time (and actually not at all, since the rendering is done in the next display cycle...)
What you need to do is to make the indicator visible in the send function as you're doing, but hide the indicator on the result handler. (You should do this for the error handler as well, otherwise the indicator will still be visible if there was an error in the request)