Comunidad de diseño web y desarrollo en internet online

Control ViewStack...

Citar            
MensajeEscrito el 18 Sep 2007 10:46 am
Hola ! Les cuento mi duda: Tengo un main.mxml, y en él quiero ir mostrando algunos componentes, distribuidos en carpetas. He mirado la documentación de flex sobre este componente pero no me sirve el ejemplo que viene.

La idea es la siguiente: Tras comprobar que con un "if" se cumple una condición, mostrar otro componente. Por ejemplo, primero, un panel de identificación de usuario, y si el usuario es correcto, mostrar (por ejemplo) otra pantalla, con un texto de bienvenida. Creo que se trata de cambiar el "selectedIndex" del ViewStack, no?

No sé si me explico...Alguna idea??

Muchas gracias desde ya.

Por Prometeo2006

122 de clabLevel



 

firefox
Citar            
MensajeEscrito el 18 Sep 2007 03:52 pm
si exactamente, es cambiando el selectedIndex, pero .... eso del login yo no lo haria de esa forma...

saludos
^^

Por Zandy

Claber

1345 de clabLevel

5 tutoriales

Genero:Masculino   Premio_Secretos

firefox
Citar            
MensajeEscrito el 18 Sep 2007 03:53 pm
Creo que se trata de cambiar el "selectedIndex" del ViewStack, no?


¿Y el problema es...?

También puedes usar la propiedad selectedChild, que igualas al atributo id del container que quieres que el viewStack muestre. Haces que un determinado evento (el click de un botón, por ejemplo) llame a una función que haga la comprobación y listo.

Por Zah

BOFH

4290 de clabLevel

27 tutoriales
5 articulos

  Bastard Operators From Hell Editores

Zaragoza, España

firefox
Citar            
MensajeEscrito el 18 Sep 2007 04:20 pm
Hola! Antes de nada, muchas gracias a los dos por vuestra ayuda. A ver si me podeis aclarar esto...Verán, este es el codigo del "main.mxml" que contiene el ViewStack:

[code]
<mx:ViewStack width="100%" height="90%" id="vistaMain" selectedIndex="0" >

<view:login_user id="login"></view:login_user>
<view:encabezado></view:encabezado>

</mx:ViewStack>
[code]

Al ejecutar la aplicación, me muestra el componete "login_user", hasta aqui, bien. Lo que quiero, es mostrar el componente "encabezado" (en el viewstack del main) desde el componente "login_user". Es decir, como cambiar el componente del stackview desde otro componente

Saludos, y gracias de nuevo

Por Prometeo2006

122 de clabLevel



 

firefox
Citar            
MensajeEscrito el 18 Sep 2007 08:16 pm
Bueno yo lo que hago es una variable bindeable dentro de un singleton, cuya variable la pongo en el selectedIndex del viewStack, es decir, que desde cualquier parte que yo modifique esa variable, inmediatamente la propiedad selectedIndex sera modificada.....

Ej: [en el singleton]

Código :

[Bindable]
public var VISTA_INDEX:int = new int();
...
...


Código :

<mx:ViewStack selectedIndex="{ VISTA_INDEX }">
..
..
</mx:ViewStack>


[En cualquier lugar de la aplicacion]

Código :

....VISTA_INDEX = 5; //Inmediatamente en el viewstack se visualizara el elemento 5....


saludos ^^

Por Zandy

Claber

1345 de clabLevel

5 tutoriales

Genero:Masculino   Premio_Secretos

firefox
Citar            
MensajeEscrito el 19 Sep 2007 09:32 am
Hola de nuevo! Muchas gracias por tu ayuda! Lo que no entiendo muy bien es la parte del "singlton". Podrías detallarlo un poco más, por favor? Es que con lo de las calses aún no estoy muy puesto...

Muchas gracias de nuevo por tu ayuda y paciencia

Saludos!

Por Prometeo2006

122 de clabLevel



 

firefox
Citar            
MensajeEscrito el 19 Sep 2007 12:09 pm
ok, aqui mas detallado

Clase singleton

Código :

package
{
   public class mySingleton
   {
      [Bindable] public var VISTA:int; //El index de la vista activa.
      
      private  static var instancia:mySingleton;
      
      public static function getInstance():mySingleton
      {
         if( instancia==null ) instancia = new mySingleton();
         return instancia;
      }
   }
}


prueba.mxml

Código :

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns:local="*">
   <mx:ViewStack x="66" y="48" id="viewstack1" width="396" height="345" selectedIndex="{ mySingleton.getInstance().VISTA }">
      <mx:Canvas label="View 1" width="100%" height="100%">
         <local:componente1 />         
      </mx:Canvas>
      <mx:Canvas label="view 2">
         <local:componente2 />
      </mx:Canvas>
   </mx:ViewStack>
   
   <mx:Button label="Ir a vista 2" click="{ mySingleton.getInstance().VISTA=1 }" />
   <mx:Button label="Ir a vista 1" click="{ mySingleton.getInstance().VISTA=0 }" />
</mx:Application>


Componente 1

Código :

<?xml version="1.0" encoding="utf-8"?>
<mx:Panel xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="400" height="300">
   <mx:Label x="63" y="72" text="Este es el componente 1" width="175" height="83"/>
</mx:Panel>


Componente 2

Código :

<?xml version="1.0" encoding="utf-8"?>
<mx:Panel xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="400" height="300">
   <mx:Label x="63" y="72" text="Este es el componente 2" width="175" height="83"/>
</mx:Panel>


PD:http://es.wikipedia.org/wiki/Patr%C3%B3n_de_dise%C3%B1o_Singleton

saludos ^^

Por Zandy

Claber

1345 de clabLevel

5 tutoriales

Genero:Masculino   Premio_Secretos

firefox
Citar            
MensajeEscrito el 19 Sep 2007 12:12 pm
@admin; BOFH --> :? por que no puedo editar el post :?

Por Zandy

Claber

1345 de clabLevel

5 tutoriales

Genero:Masculino   Premio_Secretos

firefox
Citar            
MensajeEscrito el 19 Sep 2007 03:48 pm
Hola!! Muchas gracias por tu ejemplo! Para cambiar de vista desde un componente, me sale este error:

1120: Access of undefined property mySingleton.

Este nes el codigo de dicho componente (desde el que quiero cambiar la vista del stackview del main.mxml):

Código :

 if (event.result){
               if(rUsuario.length>0){   
                mySingleton.getInstance().VISTA=1;
                
                                 }else{
...................
.............


Alguna idea?? Muchas gracias de nuevo.

Por Prometeo2006

122 de clabLevel



 

firefox
Citar            
MensajeEscrito el 19 Sep 2007 04:14 pm
? la verdad que no se porque te da ese error, hice un componente nuevo le puse un boton, y le puse a VISTA otro valor y funciono perefecto.. :?

:?

Por Zandy

Claber

1345 de clabLevel

5 tutoriales

Genero:Masculino   Premio_Secretos

firefox
Citar            
MensajeEscrito el 19 Sep 2007 04:15 pm
pon tu codigo a ver

Por Zandy

Claber

1345 de clabLevel

5 tutoriales

Genero:Masculino   Premio_Secretos

firefox
Citar            
MensajeEscrito el 19 Sep 2007 04:26 pm
El de la aplicacion:

Código :

<?xml version="1.0" encoding="utf-8"?>
<mx:Application  xmlns:mx="http://www.adobe.com/2006/mxml"
   layout="absolute" 
   backgroundGradientColors="[#ffffff, #ffffff]"
   backgroundGradientAlphas="[1, 1]"
   verticalScrollPolicy="auto"
   fontFamily="Verdana" 
   xmlns:view="view.*">


<mx:ViewStack width="100%" height="90%" id="vistaMain"  selectedIndex="{ mySingleton.getInstance().VISTA }">


<view:login_user></view:login_user>
<view:encabezado></view:encabezado>

</mx:ViewStack>
</mx:Application>


El del componente "login_user" lo que hace es una consulta a un php para comprobar si existe el usuario y va bien. Desde este componente (dentro de un "if") es desde donde quiero cambiar la vista. Este es el codigo:

Código :

<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" width="100%" height="100%" xmlns:vistas="vistas.*">
   <!--Pantalla: Error de login de user-->
   <mx:states>
      <mx:State name="error_user"  id="error_user">
         <mx:RemoveChild target="{panel_id}"/>
         <mx:AddChild position="lastChild">
            <mx:Panel width="422" height="225" layout="absolute" horizontalCenter="20" verticalCenter="-78.5" title="Error de conexión" fontFamily="Verdana" fontWeight="bold" cornerRadius="10" color="#000000" backgroundColor="#ffffff" id="panel_error" backgroundAlpha="1.0" alpha="1.0">
               <mx:Label y="90" text="e-mail:" horizontalCenter="-132.5"/>
               <mx:TextInput y="88" width="249" fontFamily="Verdana" horizontalCenter="23.5" id="email_datos_acceso" text="[email protected]"/>
               <mx:Button y="135" label="Aceptar" width="112" horizontalCenter="-126" id="button0" click="dame_datos_acceso(event)" />
               <mx:Button x="282" y="135" label="Volver atrás" click="atras()"/>
               <mx:TextArea borderColor="#ffffff" x="10" y="10" width="382" height="72" color="#ff0000">
               <mx:text>Se ha producido un error al intentar conectar al usuario. El login o clave no son correctos. Puede ingresar su e-mail para recibir los datos de acceso por correo, o bien puede volver a intentar conectarse mediante el botón "Volver atrás"</mx:text>
               </mx:TextArea>
            </mx:Panel>
         </mx:AddChild>
         <mx:RemoveChild target="{estadotxt}"/>
         <mx:AddChild position="lastChild">
            <mx:Text x="400" y="422" width="391" id="estado_envio" height="20"/>
         </mx:AddChild>
         <mx:AddChild position="lastChild">
            <mx:Image x="348" y="416" id="icono_estado_envio"/>
         </mx:AddChild>
      </mx:State>
   </mx:states>

   <mx:Panel width="422" height="225" layout="absolute" horizontalCenter="20" verticalCenter="-78.5" title="Identificación de usuario" fontFamily="Verdana" fontWeight="bold" cornerRadius="10" color="#000000" backgroundColor="#ffffff" id="panel_id" alpha="1.0">
      <mx:Label y="50" text="Login:" horizontalCenter="-113"/>
      <mx:TextInput y="46" width="187" fontFamily="Verdana" horizontalCenter="13.5" id="login" text="admin"/>
      <mx:Label y="93" text="Clave:" horizontalCenter="-113"/>
      <mx:TextInput y="89"  width="187" displayAsPassword="true" fontFamily="Verdana" horizontalCenter="13.5" id="clave" text="admin"/>
      <mx:Button y="125"  label="Aceptar" width="112" horizontalCenter="23.5" id="btnAceptar" click="onButtonPress(event);" />
<mx:Script>
   <![CDATA[
   
    //Enviar datos de acceso al usuario       
  private function enviar_datos_acceso_Result(event:ResultEvent):void{

            if (event.result){
        
             switch (event.result.toString()){
                
                case "OK":
                estado_envio.text="Se han enviado sus datos por correo";
                icono_estado_envio.source="imagenes/icono_estado_info.png";
                break;
                case "no_existe_email":
                Alert.show("El correo introducido no se encuentra en la base de datos.\n Puede escribir a [email protected] para pedir sus datos de acceso","Error");
                break;
                case "no_enviado_email":
                Alert.show("No se ha podido enviar el correo. Por favor, vuelva a intentarlo mas tarde","Error");
               }               
             
            }else{
             Alert.show("Se ha producido un error de conexión", 'Error de conexión');
            }
        }
        //      
   
   
   
           //Boton Aceptar para enviar datos de acceso al usuario           

    private function dame_datos_acceso(event:Event):void{   
       remoteObject.enviar_datos_acceso(escape(email_datos_acceso.text));

                }   
   ]]>
</mx:Script>
   </mx:Panel>







<!--Objetos remotos & eventos-->

<mx:RemoteObject id="remoteObject" destination="funciones" showBusyCursor="true">
   
        <!--Validar usuario-->
<mx:method name="validar_user"  result="validar_user_Result(event)" fault="onFault(event)"/>
        <!--Enviar datos de acceso por correo-->
<mx:method name="enviar_datos_acceso"  result="enviar_datos_acceso_Result(event)" fault="onFault(event)"/>


</mx:RemoteObject>



<!--Funciones -->

<mx:Script>
    <![CDATA[ 
    

       
 //Importamos la clase ArrayCollection, que usaremos en el DataProvider.
    import mx.collections.ArrayCollection;
   
    //Importamos las clases para trabajar con los remoteObjects de WebOrb
    import mx.rpc.remoting.*;
    import mx.controls.*;
    import mx.rpc.events.*
    //Importamos los detectores de eventos
    import flash.events.Event; 
///////////////////////////////////////////////////////
    import mx.controls.Alert;    //Control "Alerta"

  
  
///////////////////////

[Bindable]
  //Arrays para guardar los datos de las consultas a la BBDD
  //
        public var rUsuario:ArrayCollection; //Datos del usuario
        
            
            
 
//Función para validar usuario
        private function validar_user_Result(event:ResultEvent):void{
            //rellenamos la variable rUsuario con los datos obtenidos en la consulta,
           rUsuario=new ArrayCollection(event.result as Array);
         
            //Si todo salió bien...
            if (event.result){
               if(rUsuario.length>0){   
                  mySingleton.getInstance().VISTA=1;
  
                                 }else{
                                 currentState="error_user";
                                 }
             
            }else{
             Alert.show("Se ha producido un error de conexión", 'Error de conexión');
            }
        }
        //    
        
        
        
        
        
        
        
            
        //Muestra el error al no poder ejecutarse alguna función
        public static function onFault(event:FaultEvent):void 
    {
      Alert.show(event.fault.faultString, 'Error de conexión');
    }
        
        
     //Botón "Aceptar" para validar user
    private function onButtonPress(event:Event):void{   
       remoteObject.validar_user(escape(login.text),escape(clave.text));
        estadotxt.text="Consultando...";
                }   
              
                
                      
        
////////// Volver atras para reintentar identificarse

public function atras():void{
currentState="";
}
//Año actual para mostrar en el copyright
public var a:Date=new Date();
///////////////
    ]]>
</mx:Script>
   <mx:Text text="Text" id="estadotxt" width="365" horizontalCenter="0.5" verticalCenter="98.5" color="#008000" fontWeight="bold" fontSize="12" fontFamily="Arial" height="20"/>
   
         
<!--Fin de las funciones-->
</mx:Canvas>


Como veras, dentro del

Código :

.........................................
if (event.result){
               if(rUsuario.length>0){   
                  mySingleton.getInstance().VISTA=1;
  
                                 }else{
...............................................


es de donde quiero que me cambie la vista. Saludos, y gracias de nuevo.

Por Prometeo2006

122 de clabLevel



 

firefox
Citar            
MensajeEscrito el 19 Sep 2007 06:25 pm
Prometeo2006, no se porque te esta dando ese problema, yo copie tu codigo lo pegue aca, en onButtonPress llame directamente a validar_user_Result [Quitandole el parametro claro] dejando solo la linea de mySingleton.getInstance().VISTA=1 y me ha funcionado correcto :?

Por Zandy

Claber

1345 de clabLevel

5 tutoriales

Genero:Masculino   Premio_Secretos

firefox
Citar            
MensajeEscrito el 20 Sep 2007 04:30 pm
Hola de nuevo! Te cuento: El error es que había escrito mal una de las variables, aunque lo corregí, y seguía sin funcionar, y ahora, tras compilar muchas veces, sí que va de perlas.

Muchas gracias por tu gran ayuda y por tu paciencia!!

Saludos!

Por Prometeo2006

122 de clabLevel



 

firefox

 

Cristalab BabyBlue v4 + V4 © 2011 Cristalab
Powered by ClabEngines v4, HTML5, love and ponies.