TabNavigator + ModuleLoader (cargar modulo de uno en uno?)

Hola, alguien sabe como hacer para que me aparezca un tabnavigator con 4 pestañas siendo cada pestaña un módulo.

La cosa es que al cargar la aplicación me carga todos los módulos de golpe. Y esto me pasa tanto si:

--> Pongo el tabnavigator con los modulos

--> Como si pongo el tabnavigator con canvas y dentro de cada canvas los módulos.


Quiero que al pulsar sobre cada pestaña se me cargue el módulo correspondiente y ya se quede cargado.



Gracias

que extraño, el tabnavigator está hecho para cargar el contenido de cada pestaña solo cuando se selecciona, podrías poner tu código para probarlo?

Hola te lo pongo aqui, pero es que encima hice un ejemplo y encima peta:


<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<mx:TabNavigator x="39" y="59" width="499" height="318">
<mx:Canvas label="Modulo 1" width="100%" height="100%">
<mx:ModuleLoader width="100%" height="100%" url="m1.swf"/>
</mx:Canvas>
<mx:Canvas label="Modulo 2" width="100%" height="100%">
<mx:ModuleLoader width="100%" height="100%" url="m2.swf"/>
</mx:Canvas>
<mx:Canvas label="Modulo 3" width="100%" height="100%">
<mx:ModuleLoader width="100%" height="100%" url="m3.swf"/>
</mx:Canvas>
</mx:TabNavigator>

</mx:Application>




Y son 3 modulos:


<?xml version="1.0" encoding="utf-8"?>
<mx:Module xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="400" height="300" creationComplete="init();">
<mx:Script>
<![CDATA[
import mx.controls.Alert;
public function init():void{
Alert.show('El modulo 1 ha sido cargado');
}

]]>
</mx:Script>
</mx:Module>




Los otros dos son iguales pero cambiando el Alert por: "el modulo 2 ha sido cargado" etc...



¿Como veo yo si me ha cargado los dos modulos? Con el debugger, al arrancar te dice las cosas que va cargando,

Dime algo, gracias

Efectivamente en ese ejemplo tan simple si carga los modulos cuando avanza el tabnavigator... (a pesar de que este ejemplo lanza un error super extraño por lanzar los Alerts)


Pero aqui os voy a poner otro ejemplo en el que carga todos los modulos de golpe, el motivo? (Usar los estados de flex), alguien sabe como solucionar que no cargue todos los modulos de golpe?
Este es el dichoso codigo:


********************** El application ***********************
<?xml version="1.0"?> <!-- modules/URLModuleLoaderApp.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" creationComplete="init();">
<mx:states>
<mx:State name="loged">
<mx:AddChild position="lastChild">
<mx:Panel title="Module Example" height="90%" width="90%" paddingTop="10" paddingLeft="10" paddingRight="10" paddingBottom="10">
<mx:Label width="100%" color="blue" text="Select the tabs to change the panel."/>
<mx:TabNavigator id="tn" width="100%" height="100%" creationPolicy="auto">
<mx:VBox id="vb1" label="Modulo 1">
<mx:Label id="l1" text="m1.swf"/>
<mx:ModuleLoader url="m1.swf"/>
</mx:VBox>
<mx:VBox id="vb2" label="Modulo 2">
<mx:Label id="l2" text="m2.swf"/>
<mx:ModuleLoader url="m2.swf"/>
</mx:VBox>
</mx:TabNavigator>
</mx:Panel>
</mx:AddChild>
</mx:State>
</mx:states>
<mx:Script>
<![CDATA[
import mx.controls.Alert;

public function init():void{
currentState='loged';

}

]]>
</mx:Script>
</mx:Application>







**************** Modulo 1 *********************
<?xml version="1.0" encoding="utf-8"?>
<mx:Module xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="400" height="300" creationComplete="init();">
<mx:Script>
<![CDATA[
import mx.controls.Alert;
public function init():void{
//Alert.show('El modulo 1 ha sido cargado');
}

]]>
</mx:Script>
<mx:Label x="96" y="117" text="Este es el modulo 1"/>
</mx:Module>



******************* Modulo 2 *************************
<?xml version="1.0" encoding="utf-8"?>
<mx:Module xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="400" height="300" creationComplete="init();">
<mx:Script>
<![CDATA[
import mx.controls.Alert;
public function init():void{
//Alert.show('El modulo 2 ha sido cargado');
}

]]>
</mx:Script>
<mx:Label x="96" y="117" text="Este es el modulo 2"/>
</mx:Module>

Me respondo a mi mismo:


Segun he podido ver, si metes un tabnavigator dentro de un sub-estado si ese tabnavigator tiene moduleloader, se cargaran todos los modulos de golpe independientemente de que el usuario pinche en una pestaña o en otra, se cargaran todos de golpe, lo cual es totalmente ineficiente.

¿Cómo solucionarlo?

Pues yo hice eso mismo pero con la salvedad de que dentro de cada uno de esos modulos que se crean he puesto otros tannavigator con módulos dentros (y estos no se cargan todos de golpe).


De esta manera si el tanavigator principal tiene 3 pestañas se cargarán 3 modulos de golpe (pero módulos simples, apenas unos kbs) y cuando el usuario vaya navegando entre las sub-pestañas, ya si se irán cargando los módulos de uno en uno.



Otra solución es quitar el sub-estado, y ponerlo como estado principal, pero no creo que eso sea conveniente.


Un saludo

ah viejo busca bien en google esta la solucion bien completita y explicadao paso a paso te la buscaria
pero buscala mueve los dedos

REvisa este link... aquí
kreo que te va a funcionar... ahorita lo implemento y si no me kedo dormido encima del teclado te aviso

exitos!!!

Si estas trabajando con modulos me imagino que ya tienes bases bastante solidas con Flex y ActionScript, asi ke no te explico el codigo xq me imagino que lo entenderas rapido...

Lo unico que te digo es que los modulos los coloque en una carpeta llamada modulos, si no entiendes alguna función revisa el Help Contens de Flex Builder.

Ojo! cuando trabajas con modulos tienes que preever si es necesario que entre ellos mismo se comuniquen o se pasen datos (esto dependera de la aplicacion que desarrolles)

Saludos y exitos viejo!!!

Aplicacion Principal

Código Flex :

<?xml version="1.0"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" creationComplete="init(event)">
   
   <mx:Script>
      <![CDATA[
         import mx.events.IndexChangedEvent;
         import mx.events.FlexEvent;
         
         import mx.containers.TabNavigator;
         
         private function init(e:FlexEvent):void {
            tabNav.addEventListener(Event.TAB_INDEX_CHANGE, cambioHandler);
         }
         
         private function cambioHandler(e:Event):void {
            var almacenaIndex:String = e.currentTarget.selectedIndex;
            textoPrueba.text = almacenaIndex;
            switch (almacenaIndex) {
               case "0":
                  primeraVinieta.unloadModule();
                  primeraVinieta.url = "modulos/modulo1.swf";
                  primeraVinieta.loadModule();
                  break;
               case "1":
                  segundaVinieta.unloadModule();
                  segundaVinieta.url = "modulos/modulo2.swf";
                  segundaVinieta.loadModule();
                  break;
            }
         }
         
      ]]>
   </mx:Script>
   
   <mx:Text id="textoPrueba"/>
   <mx:TabNavigator id="tabNav" width="75%" height="80%" change="cambioHandler(event)">
      
      <mx:ModuleLoader id="primeraVinieta" label="Primera Viñeta" horizontalAlign="center"/>
         
      <mx:ModuleLoader id="segundaVinieta" label="Segunda Viñeta" horizontalAlign="center"/>
      
   </mx:TabNavigator>

</mx:Application> 

Modulo 1

Código Flex :

<?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>

Modulo 2

Código Flex :

<?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>

jajaja no le hagas kaso a la funcion init , es ke la kopie de unos de los proyectos que tenia

Hola, me ha parecido una excelente respuesta, muchísimas gracias, pero una dudilla:


Al hacer unloadModule() y volver a cargar el modulo, se tiene que descargar de nuevo el swf del servidor? o simplemente lo carga y descarga de la memoria local del PC que lo está ejecutando?


Gracias !


PD: Lo digo porque el motivo de descargarlo y cargarlo no es mas porque me ocurre lo siguiente, cuando en una web normal html un usuario le da a Ver Agenda, al cargar la web se cargan los contactos, pero en Flex me pasaba que al darle por primera vez se le cargaba el modulo y los contactos, pero al volver a esa pestaña seguían los de antes y tenía que darle el usuario a un boton que le ponía yo que era de refrescar contactos...

hola :

Va la cosa asi
en el principal coloca lo siguiente:

import mx.managers.DragManager;
import mx.managers.CursorManager;
import mx.managers.HistoryManager;
import mx.managers.IPopUpManager;
private var __dm:DragManager;
private var __cm:CursorManager;
private var __hm:HistoryManager;
private var iPopUpManager:IPopUpManager;

y cuando llames a los modulos coloca

applicationDomain="{ApplicationDomain.currentDomain}"
y con eso ya no deberia haber problemas. despues nos dices como te fue okis

Lo que dice la respuesta anterior es cierto, debido a que nuestro querido Flash Player no se comporta como esperamos, tenemos que instanciar los objetos del paquete managers para que tenga un buen funcionamiento.

saludos!!

y recuerda cuando haces unload a tu modulos y luego a tus referencias hacerle un nulll , ya con eso se lo mandas a guardar bien rico a flash .jajaaj

Hola, estoy incursionando en flex y tengo un problemita....
tengo lo siguiente...
<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" initialize="init()"
xmlns:mxeffects="com.adobe.ac.mxeffects.*" width="800" height="845"
verticalScrollPolicy="on" horizontalScrollPolicy="off" creationPolicy="all"
xmlns:com="myComponents.*" cornerRadius="0" xmlns:hc="com.hillelcoren.components.*"
color="#586568" xmlns:coreutil="core.util.*">
<mx:Style source="css/estilos.css" />

<mx:Script>
<[[
.........
]]>
</mx:Script>

<mx:Canvas x="0" y="0" width="800" height="22" id="cnv_menu" >
<mx:LinkBar x="0" y="2" dataProvider="vs_principal" id="lkb_prin" itemClick="cambiarCanvas();" height="20" backgroundColor="#FFFFFF" themeColor="#D2FF00">
</mx:LinkBar>
</mx:Canvas>
<mx:HRule x="0" y="48" width="800" height="1"/>
<mx:HRule x="0" y="21" width="800" height="1"/>
<mx:ViewStack x="0" y="50" id="vs_principal" width="800" height="840">
<mx:Canvas label="1" width="100%" height="100%">
<mx:TextInput x="725" y="53" width="37" borderStyle="inset" id="txt_digitador" tabIndex="19999" maxChars="2" restrict="0-9" textAlign="center"/>
</mx:canvas>
<mx:Canvas label="2" width="100%" height="100%">
<mx:TextInput x="144" y="128" width="26" id="txt_totp" maxChars="1" restrict="1-9" focusOut="numeroPersonas()" tabIndex="20000" textAlign="center"/>
</mx:Canvas>
</mx:Canvas>

Necesito que al dar un tab en el inputText txt_digitador me salte al inputText txt_totp......porfa si tienen idea de como hacerlo se los quedo agradecido...!!