Cristalab

Cuadros de diálogo en Flex Builder 3

   Foros de discusión -> Tips, ¡Envía tus trucos aquí!
Mensaje Autor
Mensaje Publicado: Mar Mar 04, 2008 9:02 pm     Citar   firefox 
Resulta que el domingo empecé con AIR y una de las primeras cosas que quise hacer fue crear cuadros de diálogo. ¿Por qué? Bien, el proyecto personal en el que estoy trabajando los requiere por toneladas, pero no lograba encontrar cómo hacerlos. Por suerte, luego de inspeccionar bien a fondo el componente Alert (que tiene justo el comportamiento que deseaba), logré armar mis propias ventanas.

Requerimientos


  • Mínimos conocimientos de Adobe Flex Builder, así como manejarse con cierta soltura por la interface del programa.
  • Este código también sirve para aplicaciones en Adobe AIR, si quieres implementarlo, necesitas conocimientos básicos en esa tecnología.


Pasos a seguir



  1. Creamos un proyecto de AIR o Flex vacío (en este caso lo llamaremos "DialogTest") y un componente de Flex:



    También vamos a hacer que se base en Panel, para que herede el look de este componente



    Los componentes de Flex son básicamente componentes personalizados. Que, luego de haberlos creado, vamos a poder encontrar en la carpeta "Custom" del panel de componentes (si, ya sé que el "luego de haberlos creado" suena a Capitán Obvio, pero por si acaso...).


  2. Diseñamos nuestro componente . En este caso, vamos a incluir la opción de no volver a verlo, por comodidad




  3. Creamos nuestra aplicación principal como estamos acostumbrados, si no estamos acostumbrados, sería bueno empezar por éste tutorial.


  4. También creamos una clase con una propiedad estática booleana y pública "mostrarDialogo" que usaremos para decidir si mostramos o no el diálogo. La clase no podría ser más simple:

    Código :

    package
    {
       public class DialogConfig
       {
          public static var mostrarDialogo:Boolean = true;
       }
    }



  5. Ahora al resto del código, usando el tag <mx:Script> vamos a agregar acciones al botón que mostrará el diálogo:

    Código :

    import mx.managers.PopUpManager;
    private function mostrarDialogo ():void
    {
       if (DialogConfig.mostrarDialogo)
       {
          var escena:Sprite = Sprite (Application.application)
          var miDialogo:DialogoDePrueba = new DialogoDePrueba ();
                   
          PopUpManager.addPopUp (miDialogo, escena, true);
          PopUpManager.centerPopUp (miDialogo);
       }
    }


    En este caso, le pasamos al PopUpManager tanto la instancia que queremos convertir en popUp como el escenario. Pero la clave del funcionamiento de la ventana se encuentra en el true que le pasamos como parámetro al PopUpManager. Ese true significa que el popUp es modal, o lo que es lo mismo, que retendrá el foco hasta ser cerrado. Una cosa bonita de Flex es que se encarga del blureado sin que tengamos que hacer nada. Quizá en un futuro tutorial, explique cómo personalizar ese efecto.


  6. No nos olvidemos de ubicar un código importantísimo en el diálogo, el que usamos para cerrarlo. En este caso, también se encargará de usar la información del CheckBox:

    Código :

    import mx.managers.PopUpManager;
    private function close ():void
    {
       if (noMostrar.selected) DialogConfig.mostrarDialogo = false;
       PopUpManager.removePopUp (this);
    }


  7. Compilamos y listo. Nuestra aplicación queda más o menos así:




Quizás también te interesen estos otros tutoriales :

HernanRivas


clabLevel: 2580 Genero:Masculino

1 Tutoriales
23 Tips

MP Email         
Volver arriba
Mensaje Publicado: Mar Mar 04, 2008 11:59 pm     Citar   firefox 
cool mas y mas flex!
nice tip HR
 _________________

I'm perfect in wickness

penHolder


clabLevel: 1778
| mdz |

19 Tips

MP Web     Google Talk    
Volver arriba
Mensaje Publicado: Mie Mar 05, 2008 10:55 am     Citar   firefox 
Muy bueno Hernan como siempre!, esperamos la explicación para personalizar el blur Lengua

Es muy complejo hacer que al draguear el cuadro no se pase de los limites del Stage?

O sea.. en flash lo hacia tranquilamente con un if y creo (ya me olvide!) que con un enterFrame(perdón freddie, pero eran las espocas de as1!! jaja)? o al stopDrag lo comprobaba no recuerdo bien, en fin hay alguna forma más efectiva en AS3 o algún método o propiedad que simplemente le pases un true/false y lo compruebe solo?

Saludos!.

Raxiro_blog
Invitado






        
Volver arriba
Mensaje Publicado: Mie Mar 05, 2008 12:36 pm     Citar   mozilla 
Hola Hernan, por si te pudiera ayudar, echa un vistazo en mi blog a la clase ventanas, creo que te puede solucionar algún problemilla. Guiño

http://blog.diaztorrres.com

Raul Diaz_blog
Invitado






        
Volver arriba
Mensaje Publicado: Mie Mar 05, 2008 12:37 pm     Citar   mozilla 
Perdón puse mal la url:
http://blog.diaztorres.com

Raul Diaz_blog
Invitado






        
Volver arriba
Mensaje Publicado: Mie Mar 05, 2008 4:05 pm     Citar   firefox 
Raxiro: Como la respuesta a tu pregunta es muy interesante, la puse en un post aparte para hacerla más accesible a los demás usuarios. Podés verla aquí.

Raul Diaz: Interesante componente, pero es demasiado para el caso que necesito. Igual, lo tendré en cuenta para un futuro proyecto. Gracias. Por otro lado sería preferible que pusieras el link directo al post. Total, si alguien está interesado puede ir a la home y recorrer tu página, sin necesidad de que tu comentario parezca mera publicidad (vale aclarar que mi detector de spam es demasiado sensible).
 _________________
Hernán Rivas Acosta -hernanrivasacosta@gmail.com-

Gracias a PenHolder por el avatar los avatares.

HernanRivas


clabLevel: 2580 Genero:Masculino

1 Tutoriales
23 Tips

MP Email         
Volver arriba
Mensaje Publicado: Mie Mar 05, 2008 4:47 pm     Citar   firefox 
Ya habia visto el link de diaztorres en madeinflex con el sistema de ventas y aporvecho que esta escribiendo en este post para felicitar a Raul Diaz, muy buen trabajo yo ya las utilice les recomiendo que la vean... Muy Feliz Muy Feliz

vanvanero_blog
Invitado






        
Volver arriba
Mensaje Publicado: Jue Mar 06, 2008 11:33 am     Citar   mozilla 
Hernan tienes razón, lo puse así por no andar buscando el link, tomo nota para la próxima Guiño

Gracias por las felicitaciones Vanvanero Guiño

Raul Diaz_blog
Invitado






        
Volver arriba
Mensaje Publicado: Jue Mar 06, 2008 11:36 am     Citar   firefox 
Es estupendo. Está claro que la tecnologia flex en poco tiempo se impondrá para la creación de RIAS. (si es que no se ha impuesto ya) buen tip
 _________________
Test de 8 colores

Sisco
SWAT Team

SWAT
clabLevel: 3040
Catalunya
6 Tutoriales
4 Tips

MP Web         
Volver arriba
Mensaje Publicado: Vie Abr 11, 2008 10:31 pm     Citar   msie 

Sisco escribió:

Es estupendo. Está claro que la tecnologia flex en poco tiempo se impondrá para la creación de RIAS. (si es que no se ha impuesto ya) buen tip
Es muy complejo hacer que al draguear el cuadro no se pase de los limites del Stage

Hola hernan, como podria pasar este codigo a una clase .as para ser llamado desde flex?

Agradezco su colaboración.

Invitado






        
Volver arriba
Responder al tema    Foros de discusión -> Tips, ¡Envía tus trucos aquí! Todas las horas son GMT
Página 1 de 1

Respuesta Rapida
Nick: 

  Citar el ultimo mensaje
Adjuntar tu firma

Mostrar mensajes de anteriores:
  

 


Cristalab BloodBerry Style © 2006 Cristalab
Powered by phpBB © 2001, 2002 phpBB Group