^M Modulos | Andrés Villagrán Placencia

Modulos

Comunicación entre componentes/modulos utilizando Singleton

En un post anterior (y muy antiguo) comentaba que se podía utilizar Application.application para comunicarse con la aplicación principal desde un módulo, si bien es cierto esta misma operación se puede realizar a través de eventos, lo cual sería la forma más limpia de hacerlo, hay otra, la cual sería "sucia" pero rápida que es utilizando Singleton.

Lo primero es crear esta clase, como ejemplo:

Util.as

  1. package {
  2. public class Util {
  3. public var variableTemporal:Object;
  4. private static var instance:Util;
  5.  
  6. public static function getInstance():Util {
  7. if(instance == null) {
  8. instance = new Util();
  9. }
  10. return instance;
  11. }
  12. }
  13. }

Esta clase permitirá almacenar en la variable "variableTemporal" los objetos que queramos almacenar y acceder desde cualquier componente/modulo, obviamente en vez de utilizar una variable publica, podemos crear funciones setter/getter.

Luego, debemos instanciar la clase en la aplicación principal:

Prueba.mxml

  1.  
  2. <?xml version="1.0" encoding="utf-8"?>
  3. <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
  4. xmlns:s="library://ns.adobe.com/flex/spark"
  5. creationComplete="creationCompleteHandler(event)">
  6. <fx:Script>
  7. <![CDATA[
  8. import mx.events.FlexEvent;
  9.  
  10. protected function creationCompleteHandler(event:FlexEvent):void {
  11. Util.getInstance();
  12.  
  13. // Guardo en la variableTemporal
  14. // un valor para hacer la prueba
  15. Util.getInstance().variableTemporal = {prueba: 'Hola'};
  16.  
  17. }
  18. ]]>
  19. </fx:Script>
  20. </s:Application>
  21.  

Luego de esto, ya podemos utilizar nuestra clase desde cualquier componente o modulo, por ejemplo:

Prueba.mxml

  1.  
  2. <?xml version="1.0" encoding="utf-8"?>
  3. <s:Group xmlns:fx="http://ns.adobe.com/mxml/2009"
  4. xmlns:s="library://ns.adobe.com/flex/spark"
  5. xmlns:mx="library://ns.adobe.com/flex/halo"
  6. creationComplete="init()">
  7.  
  8. <fx:Script>
  9. <![CDATA[
  10. private function init():void {
  11. trace("Valor variableTemporal:" + Util.getInstance().variableTemporal.prueba);
  12. }
  13. ]]>
  14. </fx:Script>
  15. </s:Group>
  16.  

Ojalá les sirva de ayuda 😉

Tags: , , ,

Thursday, January 28th, 2010 Flex, Uncategorized 8 Comments

Flex: Paso de variables entre Módulos

Suponiendo que necesitamos pasar de una pantalla a otra el valor de un numero por ejemplo (puede ser un id dentro de la tabla), dentro de la aplicación principal deben agregar una variable para guardar esta información (el código siguiente no esta completo):
Inicio.mxml:

  1. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
  2. <mx:Script>
  3. <![CDATA[
  4. public var id_modulo:int; // Esta es la variable donde guardaré el valor
  5. ......
  6. ]]>
  7. </mx:Script>
  8. ....
  9. </mx:Application>

Modulo1.mxml:
Ahora queremos que al hacer click en un botón "Siguiente" guarde el valor del id que necesitamos.

  1. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
  2. <mx:Script>
  3. <![CDATA[
  4. private function Funcion_Click_Boton_Siguiente():void {
  5. // Aquí guardamos nuestro valor en la aplicación principal,
  6. // después lo obtendremos de la misma forma
  7. Application.application.id_modulo = 10;
  8.  
  9. // Después de guardar, nos cambiamos al siguiente modulo
  10. Application.application.CargaModulo("Modulo2");
  11. }
  12. ......
  13. ]]>
  14. </mx:Script>
  15. <mx:Button label="Siguiente" click="Funcion_Click_Boton_Siguiente()" />
  16. </mx:Application>

Modulo2.mxml:
Ahora pedimos a la aplicación principal el valor previamente guardado y lo mostramos como una alerta cuando carga la aplicación, dentro de Application se define initialize para utilizar una función al momento de cargar un módulo.

  1. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" initialize="CargarInicio()">
  2. <mx:Script>
  3. <![CDATA[
  4. // Necesario para poder utilizar el pop-up de alerta
  5. import.mx.controls.Alert;
  6. // Bindable se utiliza sólo si necesitan utilizar la variable
  7. // como valor en algún componente
  8. // Si no lo van a utilizar para eso, descartenlo
  9. [Bindable]
  10. private var id_a_utilizar:int;
  11.  
  12. public function CargarInicio():void {
  13. id_a_utilizar = Application.application.id_modulo;
  14. Alert.show("Mi variable tiene el valor: " + id_a_utilizar);
  15. }
  16. ......
  17. ]]>
  18. </mx:Script>
  19. ....
  20. </mx:Application>

Tags: ,

Wednesday, June 25th, 2008 Flex, Programación 10 Comments

Modularización con Adoble Flex

Una característica importante que tiene Flex es a la hora de crear módulos, este provee un componente el cual sirve para cargarlos (estos son SWF, el “ejecutable” que compila Flex), el Cargador de Módulos se crea de la siguiente forma:

<mx:ModuleLoader id="CargadorModulos" url="ejemplo_modulo.swf" width="100%" height="100%" />

Este se comporta como cualquier otro componente y tiene las típicas propiedades como width y height, donde podemos definir el tamaño de este, como también incluye la propiedad url, que será el modulo a cargar, en este ejemplo se cargará el modulo “ejemplo_modulo.swf”. Si queremos accesar desde el modulo a propiedades u objetos de la aplicación principal debemos importar lo siguiente (dentro de nuestro modulo):

<mx:Script>

<![CDATA[

import mx.core.Application;

private function init():void {

Application.application.ObjetoDesdeAplicacion.Metodo();

}

]]>

</mx:Script>

 

Puede ser que necesitemos ejecutar una función al momento de que cargue el módulo, como ya creamos la función init() debemos agregar la propiedad “initialize” a nuestro modulo:

<mx:Module xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" width="100%" height="100%" initialize="init()">

Ahora supongamos que queremos cargar otro modulo desde “ejemplo_modulo.swf” para esto simplemente podemos hacer lo siguiente (suponiendo que estamos agregando esto al CDATA de Script:

<mx:Script>

<![CDATA[

private function FuncionCargaOtroModulo():void {

Application.application.CargadorModulos.url = "otro_modulo.swf";

}

]]>

</mx:Script>

 

Pueden bajar el ejemplo completo donde encontrarán como crear menús y como tratar los eventos de estos para cargar un nuevo modulo.

Ejemplo de Modularización en Flex

Tags: , , , , ,

Monday, April 21st, 2008 Flex 9 Comments