<?xml version="1.0" encoding="utf-8"?>
<mx:Application 
    xmlns:mx="http://www.adobe.com/2006/mxml" 
    xmlns:view="es.guasax.samples.store.view.*" 
    horizontalAlign="center" verticalAlign="middle"
    preinitialize="initGuasax()" 
    xmlns:services="es.guasax.samples.store.services.*" 
    viewSourceURL="srcview/index.html" 
    xmlns:mxeffects="com.adobe.ac.mxeffects.*">
    
    <mx:Script>
        <![CDATA[
            import es.guasax.samples.store.business.ProductoBO;
            import es.guasax.samples.store.business.PedidoBO;
            import es.guasax.view.ViewLocator;
            import es.guasax.container.GuasaxContainer;
            import conf.ConstantsApp;
            import es.guasax.samples.store.model.ModeloDeDatos;
            
            // Nota: Es necesario crear al menos una variable para que el copmpiler incluya la clase de la misma, 
            //para que en tiempo de ejecucion  se pueda instanciar la clase e invocar un metodo.
            private var classForCompile:Array = [PedidoBO,ProductoBO];            
            /**
            * Registramos la vista principal en el viewLocator  y 
            * Leemos el fichero de configuracion de guasax 
            */
            public function initGuasax():void{
                Security.allowDomain('*');
                
                ViewLocator.getInstance().register(ConstantsApp.MAIN_VIEW,this);
                // ---------------------------------------------------------------
                /**
                * Parseamos el fichero de configuracion para el container con la ayuda de la clase 
                * XMLConfParser
                */
                GuasaxContainer.getInstance().parseConfFile("./conf/guasax-conf.xml",inicializaModeloDeDatos);
            }        
            /**
            * Cuando terminamos de leer el fichero de configuracion, inicializamos la carga de los
            * productos mediante el caso de uso, PIDE_PRODUCTOS.
            */    
            private function inicializaModeloDeDatos(event:Event):void            
            {        
                // 1 Version simple        
                //Controlador.getInstance().dispatchEvent( new ProductoEvent(ProductoEvent.PIDE_PRODUCTOS)  );
                
                // 2 Version con cairngorm
                //new ProductoEvent(ProductoEvent.PIDE_PRODUCTOS).dispatch();
                
                // 3 Version con guasax
                GuasaxContainer.getInstance().executeAction(ConstantsApp.PIDE_PRODUCTOS,null);
            }
            
            /**
            * Metodo de la vista , llamado a través de guasax, desde otros ficheros MXML para 
            * lanzar una actualizacion del interface visual de esta vista. Ejecución de un efecto, 
            * transiciones, fitrado de datos, ordenacion de elemento visuales,etc..             
            */                
            public function selectedView(index:Number):void{
                  // De esta manera cambiamos la vista que tenemos visible a través del efecto cube
                  // 
                if(index == ConstantsApp.VISTA_CREACION_PEDIDO){
                    rotateEffectRight.play();
                }else if(index == ConstantsApp.VISTA_PROCESO_PEDIDO){
                    rotateEffectLeft.play();
                }
                
                // Descomentar esta linea para cambiar la vista a través del index del viewStack                
                // vistaMain.selectedIndex = index;
                
                // para lanzar programativamente el efecto de los Fade
                //efecto.play();
                
            }
        ]]>
    </mx:Script>
    
    <!--Instanciamos el Singleton de los servicios -->    
    <!--Este nos define todos los servicios remotos a los que podemos acceder desde guasax -->
    <services:Services />    
    
    
    <!-- Effectos de distorsion , fuente: http://weblogs.macromedia.com/auhlmann/archives/2007/03/distortion_effe.cfm -->
    <mxeffects:CubeRotate 
            id="rotateEffectRight"
            target="{ procesarPedidoView }" 
            siblings="{ [ creacionPedidoView ] }" 
            direction="RIGHT"
            duration="1000"/>    
            
    <mxeffects:CubeRotate 
            id="rotateEffectLeft"
            target="{ creacionPedidoView }" 
            siblings="{ [ procesarPedidoView ] }" 
            direction="LEFT"
            duration="1000"/>    
            
    <!-- Definimos algun efecto para mostrar la transición -->
    <mx:Sequence id="efecto" target="{vistaMain}">
             <mx:Fade id="fadeOut"     alphaFrom="1.0" alphaTo="0.0" duration="700"/>
            <mx:Fade id="fadeIn"      alphaFrom="0.0" alphaTo="1.0" duration="700"/> 
    </mx:Sequence>
    
    <!-- Otros efectos por si queremos trabajar con las propiedades showEffect y hideEffect  -->
    <mx:WipeDown id="wipeOut" duration="600"/>
    <mx:WipeDown id="wipeIn"  duration="600"/>    
    
<!-- Interface Aplicacion -->    

    <mx:Label text="Mini Flex Store - Guasax Framework" fontFamily="Verdana" fontSize="20" color="#ffffff"/>

    <mx:ViewStack id="vistaMain" width="750" height="450"> 
    
        <!-- Para trabajar con los efectos "cube" y la seleccion de los mismo programativa en el metodo 'selectedView'-->
        <view:CreacionPedido id="creacionPedidoView" width="100%" height="100%"    />
        <view:ProcesarPedido id="procesarPedidoView" width="100%" height="100%"    />
    
        <!-- Descomentar para trabajar con los effect wipe y la selección del index del view stack -->
        <!--
        <view:CreacionPedido id="creacionPedidoView" width="100%" height="100%" hideEffect="wipeIn"  showEffect="wipeOut" />
        <view:ProcesarPedido id="procesarPedidoView" width="100%" height="100%" hideEffect="wipeIn"  showEffect="wipeOut" />
        -->
        
        <!-- Descomentar para trabajar con los effect Fade y la selección del index del view stack  -->
        <!--
        <view:CreacionPedido id="creacionPedidoView" width="100%" height="100%" hideEffect="fadeOut"  showEffect="fadeIn" />
        <view:ProcesarPedido id="procesarPedidoView" width="100%" height="100%" hideEffect="fadeOut"  showEffect="fadeIn" />
        -->
    </mx:ViewStack>
</mx:Application>