Usando eventos ModuleLoader
A classe ModuleLoader dispara vários eventos, inclusive setup, ready, loading, unload, progress, error, e urlChanged. Você pode usar estes eventos para localizar o progresso do processo loading, e descobrir quando um módulo foi descarregado ou quando o URL do target ModuleLoader mudou.
Usando o evento error
O evento error dá a você uma oportunidade de detectar uma falha quando um módulo não carregar por uma determinada razão. No exemplo seguinte, você pode carregar e descarregar um módulo usando os controles de Botão. Para ativar um evento error, mude o URL no TextInput para um módulo que não existe. O manipulador de erro exibe uma mensagem para o usuário e escreve a mensagem de erro para o log.
<?xml version=”1.0″?>
<!– modules/ErrorEventHandler.mxml –>
<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml”>
<mx:Script>
<![CDATA[
import mx.events.ModuleEvent;
import mx.modules.*;
import mx.controls.Alert;
private function errorHandler(e:ModuleEvent):void {
Alert.show(”There was an error loading the module.” +
” Please contact the Help Desk.”);
trace(e.errorText);
}
public function createModule():void {
chartModuleLoader.url = ti1.text;
chartModuleLoader.loadModule();
}
public function removeModule():void {
chartModuleLoader.unloadModule();
}
]]>
</mx:Script>
<mx:Panel title=”Module Example”
height=”90%”
width=”90%”
paddingTop=”10″
paddingLeft=”10″
paddingRight=”10″
paddingBottom=”10″
>
<mx:HBox>
<mx:Label text=”URL:”/>
<mx:TextInput width=”200″ id=”ti1″ text=”ColumnChartModule.swf”/>
<mx:Button label=”Load” click=”createModule()”/>
<mx:Button label=”Unload” click=”removeModule()”/>
</mx:HBox>
<mx:ModuleLoader id=”chartModuleLoader” error=”errorHandler(event)”/>
</mx:Panel>
</mx:Application>
Usando o evento progress
Você pode usar o evento progress para localizar o progresso de um módulo à medida que ele carrega. Quando você adicionar um listener para o evento de progress, Flex chama aquele listener em intervalos regulares durante o processo de carregamento do módulo. Todo tempo o listener é chamado, você pode olhar para a propriedade bytesLoaded do evento. Você pode comparar esta ao bytesTotal para conseguir uma porcentagem de conclusão.
O exemplo seguinte reporta o nível de conclusão durante o carregamento do módulo. Também produz uma barra de progresso simples que mostra a usuários e fecha ao terminar de carregar.
<?xml version=”1.0″?>
<!– modules/SimpleProgressEventHandler.mxml –>
<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml”>
<mx:Script>
<![CDATA[
import mx.events.ModuleEvent;
import flash.events.ProgressEvent;
import mx.modules.*;
[Bindable]
public var progBar:String = “”;
[Bindable]
public var progMessage:String = “”;
private function progressEventHandler(e:ProgressEvent):void {
progBar += “.”;
progMessage =
“Module ” +
Math.round((e.bytesLoaded/e.bytesTotal) * 100) +
“% loaded”;
}
public function createModule():void {
chartModuleLoader.loadModule();
}
public function removeModule():void {
chartModuleLoader.unloadModule();
progBar = “”;
progMessage = “”;
}
]]>
</mx:Script>
<mx:Panel title=”Module Example”
height=”90%”
width=”90%”
paddingTop=”10″
paddingLeft=”10″
paddingRight=”10″
paddingBottom=”10″
>
<mx:HBox>
<mx:Label id=”l2″ text=”{progMessage}”/>
<mx:Label id=”l1″ text=”{progBar}”/>
</mx:HBox>
<mx:Button label=”Load” click=”createModule()”/>
<mx:Button label=”Unload” click=”removeModule()”/>
<mx:ModuleLoader
id=”chartModuleLoader”
url=”ColumnChartModule.swf”
progress=”progressEventHandler(event)”
/>
</mx:Panel>
</mx:Application>
Você também pode conectar um carregador de módulo para um controle ProgressBar. O exemplo seguinte cria um componente personalizado para o ModuleLoader que inclui um ProgressBar. O ProgressBar exibe o progresso do módulo carregando.
<?xml version=”1.0″?><!– modules/MySimpleModuleLoader.mxml –><mx:ModuleLoader xmlns:mx=”http://www.adobe.com/2006/mxml”> <mx:Script> <![CDATA[ private function clickHandler():void { if (!url) { url=”ColumnChartModule.swf”; } loadModule(); } ]]> </mx:Script>
<mx:ProgressBar id=”progress” width=”100%” source=”{this}” /> <mx:HBox width=”100%”> <mx:Button id=”load” label=”Load” click=”clickHandler()” /> <mx:Button id=”unload” label=”Unload” click=”unloadModule()” /> <mx:Button id=”reload” label=”Reload” click=”unloadModule();loadModule();” /> </mx:HBox></mx:ModuleLoader>
Você pode usar este módulo em um aplicativo simples, como o exemplo seguinte mostra:
<?xml version=”1.0″?><!– modules/ComplexProgressEventHandler.mxml –><mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml” xmlns:local=”*”>
<mx:Panel title=”Module Example” height=”90%” width=”90%” paddingTop=”10″ paddingLeft=”10″ paddingRight=”10″ paddingBottom=”10″ > <mx:Label text=”Use the buttons below to load and unload the module.”/> <local:MySimpleModuleLoader id=”customLoader”/> </mx:Panel>
</mx:Application>
Este exemplo não muda a propriedade de tag do ProgressBar para todos os eventos. Por exemplo, se você carregar e então descarrega o módulo, a propriedade de tag permanece em “CARREGAR 100%”. Ajustar a tag corretamente, você deve definir outros manipuladores de evento para os eventos de ModuleLoader, como unload e error.
