Home » AS3 »Avanzado »Flex » Currently Reading:

Comunicación entre módulos cargados con ModuleLoader en Flex

octubre 30, 2008 AS3, Avanzado, Flex 1 Comment
Comunicación entre módulos cargados con ModuleLoader en Flex

En este =http://www.cristalab.com/tipstip[/url] mostraré como comunicarse con módulos cargados dentro de una película Flex principal. Los módulos son pequeñas películas MXML que creamos para luego incorporar dentro de otro MXML principal, de igual manera que un componente pero en este caso se genera un archivo .SWF externo independiente, lo que resulta útil ya que podemos compartir módulos entre diferentes películas.

Para colocar un módulo dentro de una película principal existen dos opciones, y con una nos encontraremos un pequeño problema al intentar comunicarnos.

La primera forma es como si de un componente se tratase, osea definiríamos el namespace, por ejemplo, xmlns:modules=”*”, y lo colocaríamos con ese tag:

  1. <modules:module id="modulo"/>

Si este módulo tuviese una función actionscript pública llamada setTexto(t:String); que le asignase el valor a una variable privada podríamos acceder a ella sin problema desde la película MXML principal.

  1. private function setModuleText():void
  2. {
  3.     modulo.setTexto("texto")
  4. }

Ahora bien, también podríamos haber cargado el módulo con el componente ModuleLoader. De esta manera hubiésemos enlazado directamente al archivo .SWF generado al publicar el módulo:

  1. <mx:ModuleLoader id="modulo" url="module.swf"/>

Cargarlo de esta manera es útil ya que nos permite intercambiar un modulo por otro dentro del mismo componente reasignando el parámetro URL. Al enlazar directamente al SWF nos permite incorporar módulos generados desde otras películas, incluso desde otros servidores.

El problema es que al colocar el módulo con ModuleLoader nos saltará un error al intentar acceder a sus funciones públicas.

1061: Llamada a un método setTexto posiblemente no definido mediante una referencia con tipo estático mx.modules:ModuleLoader.

¿Cómo lo podemos solucionar? Deberemos hacer que ese módulo implemente una Interface que disponga de esa función pública a la que queremos acceder.

Crearíamos esta sencillo archivo de interface, al que llamaríamos IModule.as:

  1. package
  2. {
  3.     public interface IModule
  4.     {
  5.         function setTexto(t:String):void
  6.     }
  7. }

Para hacer que el módulo implemente esta interface le incluiremos el parámetro en el tag de definición:

  1. <mx:Module xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" implements="IModule">

Y de esta manera deberemos asignar la definición de tipo a la instancia del módulo para llamar a la función que implementa la interface:

private function setModuleText():void
{
var mod:IModule = modulo.child as IModule;
mod.setTexto(“texto”);
}

Ahora si tenemos acceso a las funciones públicas del módulo :)

Este es todo el código completo por si alguien quiere darle un vistazo:

module.mxml
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <mx:Module xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" implements="IModule">   
  3.     <mx:Script>
  4.         <!&#91;CDATA[
  5.             &#91;Bindable]
  6.             private var _texto:String;
  7.            
  8.             public function setTexto(t:String):void
  9.             {
  10.                 _texto = t;
  11.             }  
  12.         &#93;]>
  13.     </mx:Script>   
  14.     <mx:Label verticalCenter="0" left="20" right="20" textAlign="center" id="textoInput" text="{_texto}"/> 
  15. </mx:Module>
Main.mxml
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:modules="*" layout="absolute">
  3.     <mx:Script>
  4.         <!&#91;CDATA[
  5.             private function setModuleText1():void
  6.             {
  7.                 modulo1.setTexto("texto1")
  8.             }
  9.             private function setModuleText2():void
  10.             {
  11.                 var mod:IModule = modulo2.child as IModule;
  12.                 mod.setTexto("texto2");
  13.             }
  14.         &#93;]>
  15.     </mx:Script>
  16.     <mx:VBox horizontalCenter="0" verticalCenter="0" horizontalAlign="center"> 
  17.         <modules:module id="modulo1"/>
  18.         <mx:ModuleLoader id="modulo2" url="module.swf"/>       
  19.         <mx:Button label="Button1" click="setModuleText1()"/>
  20.         <mx:Button label="Button2" click="setModuleText2()"/>      
  21.     </mx:VBox> 
  22. </mx:Application>
IModule.as
  1. package
  2. {
  3.     public interface IModule
  4.     {
  5.         function setTexto(t:String):void
  6.     }
  7. }

Compártelo:

Comunicación entre módulos cargados con ModuleLoader en Flex
Visto 8.074 veces

Currently there is "1 comment" on this Article:

  1. Andres dice:

    cómo podría ejecutar una accion en mi main application a través de un botón de otro componente, la acción a realizar en el botón es un cambio de estado en el main application pero el botón está en un componente incluido en un namespace de la aplicación…

Comment on this Article:








AdvertisementAdvertisementAdvertisementAdvertisement

Recibe las novedades por email

Post destacado

Panel de zoom de imágenes en Flex

13 abr 2009

Este ejemplo es, igual que hice en el post anterior, un ejemplo que he adaptado a Flex desde un ejemplo que hice hace tiempo para Flash. Se trata de un panel donde se ve un zoom de una parte de una imagen. Este es el ejemplo montado en Flex: Y este es el código utilizado para la película principal: <?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"                 xmlns:ui="*"                 layout="absolute"                 creationComplete="ini()"                 width="505" …



Map

Ranking

Codigoactionscript.org: 4.65 sobre 5 (106 valoraciones)

twitter-widget.com