an euphonious keeps you smart

an euphonious keeps you smart

an euphonious keeps you smart

 

TabNavigator y ModuleLoader

Bien, este es un tema un poco delicado puesto que si no desarrollamos el ModuleLoader este nos podrá generar un poco de dolor de cabeza y bien nos puede incluir una noche de desvelo. Asi que empecemos por comentar los puntos vitales al momento de trabajar con módulos.

Al momento de utilizar un Module tendremos que utilizar un método, un propiedad y otro método… si así como se lee… un método, una propiedad y otro método, ¿Por qué? cuando se carga un Module dentro de un ModuleLoader este consume memoria entonces primero haremos la solicitud para que se elimine de memoria el Módulo cargado, luego indicamos la url donde está ubicado el nuevo módulo a cargar y por último lo cargamos, si llegásemos a cargar otro módulo entonces utilizaremos esta metodología.

Adicionalmente al momento de trabajar con Módulos nuestro querido Flash Player genera conflicto o simplemente no funcionan de la forma adecuada con algunos contenedores y clases –un ejemplo, los Acordeones solo funcionan una vez y luego se quedan pegados en pantalla, o las PopUp de la clase Alert no emergen en pantalla–, entre los contenedores que generan algún tipo de falla están TabNavigator, Accordion, Alert, entre otros. Por lo tanto tendrás que instanciar algunos objetos del paquete managers, estos objetos los tienes que declarar dentro del archivo principal mxml o as.

En esta práctica utilizaremos tres archivos, el mxml principal y dos módulos que estarán dentro de una carpeta llamada modulos –su extensión también terminan con mxml pero se diferencia que el icono de los módulos llevan una franja celeste–.

La estructura del código MXML del TabNavigator es la siguiente:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">

   <mx:TabNavigator id="tabNav" width="75%" height="80%" x="150" y="50">

      <mx:ModuleLoader id="primeraVinieta" label="Primera Viñeta" horizontalAlign="center"/>

      <mx:ModuleLoader id="segundaVinieta" label="Segunda Viñeta" horizontalAlign="center"/>

   </mx:TabNavigator>

</mx:Application>

La creación de un módulo es sencillo, dentro del IDE de Flex Builder ingresamos a File > New > MXML Module, luego seleccionamos la carpeta donde estará el módulo. Veamos el código del primer módulo:

<?xml version="1.0" encoding="utf-8"?>
<mx:Module xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" width="80%" height="70%"
   horizontalAlign="center">

   <mx:Accordion label="Herramientas de Trabajo" height="150" width="200">
      <mx:VBox label="Politicas de Promociones">

      </mx:VBox>
      <mx:VBox label="Margenes de Maniobra">

      </mx:VBox>
      <mx:VBox label="Aplicaciones Corporativas">

      </mx:VBox>
   </mx:Accordion>

</mx:Module>

La estructura del segundo módulo es la siguiente:

<?xml version="1.0" encoding="utf-8"?>
<mx:Module xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" width="80%" height="70%"
   horizontalAlign="center">

   <mx:Accordion label="Manuales" height="150" width="200">
      <mx:VBox label="Manuales de Procedimientos">

      </mx:VBox>
      <mx:VBox label="Manuales de Ingreso">

      </mx:VBox>
      <mx:VBox label="Manuales de Terminales">

      </mx:VBox>
   </mx:Accordion>

</mx:Module>

Perfecto, con esto ya tenemos bastante tela para cortar… dentro del archivo mxml principal declararemos una etiqueta Script y dentro de ella declararemos una función llamada cambioPestania y esta se ejecutará cada vez que el usuario haga clic en algunas de las pestañas del TabNavigator y según sea el valor del selectedIndex así se mandara a llamar el módulo –esta etiqueta la podemos colocar por debajo de la etiqueta Application–, veamos el código:

<mx:Script>
   <![CDATA[

      private function cambioPestania(e:Event):void {
         var almacenaIndex:String = e.currentTarget.selectedIndex;
         switch (almacenaIndex) {
            case "0":
                     segundaVinieta.unloadModule();
                     primeraVinieta.url = "modulos/modulo1.swf";
                     primeraVinieta.loadModule();
                     break;
            case "1":
                     primeraVinieta.unloadModule();
                     segundaVinieta.url = "modulos/modulo2.swf";
                     segundaVinieta.loadModule();
                     break;
         }
      }

   ]]>
</mx:Script>

Las pestañas de un TabNavigator están señalizadas con un índice empezando desde cero y según sea el número de pestaña este valor puede ir incrementando, así que nos aprovecharemos de esta virtud y con e del tipo Event capturaremos el valor de la pestaña con la propiedad selectedIndex y la almacenamos dentro de almacenaIndex del tipo String. Luego con un condicional switch determinamos que módulo cargaremos.

Como mencionamos al principio primero tenemos que utilizar un método para descargar el Módulo cargado en memoria y para ello utilizaremos unloadModule, luego con la propiedad url indicamos el directorio y el archivo a cargar; por ultimo con el método loadModule cargamos el nuevo módulo.

Consideraciones

Es de tener cuidado sobre cual módulo será quitado de la memoria, si observas en el case 0, descargamos el segundo módulo y cargamos el primero, dentro del case 1 quitamos de memoria el primer módulo y procedemos a cargar el segundo. Si no hiciéramos esto la aplicación consumiría memoria innecesaria de la PC.

Si realizas las pruebas haciendo un Debug y navegas por las pestañas veras a continuación que la consola de Flex le imprimirá lo siguiente:

Una de las ventajas sobre desarrollar con módulos es que la aplicación solo cargará aquellos módulos que solo requiera utilizar el usuario y no toda la aplicación.

Esta vez cambiaremos la metodología y no presentaremos el código completo tal como lo hemos hecho en los Post anteriores, sino que proporcionaremos directamente el código para que lo puedas descargar y exportar a tu IDE. Descárgalo aquí!!!!

Hola, espero te haya gustado y te sea util la información que hayas encontrado, esperamos que sigas aprendiendo y te invito a que revises todo el blog. Mientras agilizare el proceso de edición de información dentro del blog para que puedas encontrar diversos temas referentes a Flex Builder 3 y ActionScript 3.0.

Apoya al proyecto rias4u ingresando aquí!!! =D