Cómo personalizar el componente Alert de Flex

Este sencillo tip te permitirá darle un aspecto acorde con tu aplicación a los mensajes de alerta, pasando por algunos aspectos básicos sobre la personalización de los componentes de Flex mediante CSS y las propiedades de categoría Styles.

Nota: Si de plano no tienes ni idea de que se esta hablando, te sugiero que leas primero los tutoriales básicos de Flex que encuentras aquí mismo.

Después de habernos esmerado lo suficiente en el diseño de las pantallas de nuestra aplicación, resulta frustrante el hecho de que los mensajes de interacción con el usuario se rebelen y se muestren con el aspecto por default.

Bien, pues para solucionar eso, lo principal es entender que el Alert es un hijo de su Panel padre, y como dicen por allí, “De tal palo tal astilla”, tenemos que Alert cuenta con todas las propiedades de estilo (les dejo a ustedes la comprobación de las demás) como si de un Panel se tratase, en ese sentido, sólo tenemos que editar o cambiar los valores de dichas propiedades para obtener el aspecto deseado.

Ahora bien, pero ya que las sintaxis de Alert no es una etiqueta del tipo <mx:Alert></mx:Alert>, no podemos especificar los nuevos valores directamente sobre el código.

Es aquí donde nos auxiliamos de las hojas de estilo (CSS) que también han hecho un pacto con esta potente herramienta llamada flex.

Al igual que en las hojas de estilo para XHTML, existen dos formas de incluir estilos a una aplicación Flex:

• Directamente en el código de la aplicación mediante la etiqueta <mx:Style></mx:Style>.
  
• Adjuntando una hoja de estilos Externa mediante el atributo source de la etiqueta <mx:Style></mx:style>.

Dicho esto y atendiendo la primera forma de agregar estilos, pasaremos a personalizar nuestro componente Alert.

Nota: Si cuentas con el Flex Builder X, en la forma de diseño, puedes colocar en el área de trabajo un panel y luego podrás observar sus propiedades en el ventana flotante de Flex properties en la categoría de Styles, para que tengas la base de cuales propiedades usar para modificar el alert.

El siguiente esquema te muestra las propiedades principales y que pueden resultar más útiles en este caso:



Donde:

• color: Color de fuente (hexadecimal).
  
• fontFamily: Nombre de la fuente.
  
• borderColor: Es el color (hexadecimal) que enmarca el mensaje, y donde se ubica el título(todo lo que esta fuera del rectángulo rojo).
  
• borderStyle: Sus posible valores son: inset, outset, solid, none, y determina el aspecto del marco de nuestro alert, si especificas alguno de éstos valores, el área que conforma el background (rectángulo rojo) llenará toda el área del componente, y el “Drag” del alert se perderá. No especifiques ningún valor para mantener el borde con el aspecto de un panel normal.
  
• backgroundColor: Color (hexadecimal) para el área enmarcada con rojo en la ilustración (aproximadamente). Inicialmente tiene el mismo valor que el borderColor, por esa razón no se distingue hasta donde llega uno u otro.
  
• backgroundImage: URL de la imagen que irá de fondo.
  
• dropShadowEnabled: Sus valores pueden ser true o false, dependiendo si deseas que se proyecte sombra o no.
  
• dropShadowColor: Color (hexadecimal) para la sombra proyectada.

Además:

• themeColor: Especifica un color general a utilizar en los componentes hijos, es decir, cambia al color especificado los bordes (normal y durante el focus), y el color del fondo (al hacer clic sobre él). Cualquier color en valor hexadecimal está permitido, más cuatro predefinidos: haloOrange, haloSilver, haloGreen y haloBlue que es el valor por default de todos los componentes cuando creas una aplicación nueva.

Veamos el ejemplo práctico para que entiendas mejor la función de estas propiedades.

Crea una aplicación nueva, y agrega un botón. En este caso lo he etiquetado como “Say hello World!”. Agregamos el código necesario para que cuando demos clic sobre nuestro botón, se muestre nuestro mensaje de alerta, como se muestra a continuación:





Listo, ahora añadiremos estilos mediante la etiqueta <mx:Style></mx:Style> para personalizar nuestro alert.



Nota: es importante que el nombre de las propiedades las escribas respetando mayúsculas y minúsculas, ya que no se reconocerán si las escribas mal.

Como ejemplo, añado los siguientes estilos para empieces a entender mejor que es lo que hace cada propiedad:

Código :

Alert
         {
            themeColor: haloOrange;
            backgroundColor: #FFFFFF;
            color: #000000;
         }

Éste es el resultado:



Ahora prueba a cambiar el color del borde y agregando una imagen de fondo, puedes agregarla en el encabezado mediante titleBackgroundSkin o en el área del mensaje mediante backgroundImage. También puedes quitar el sombreado:

Código :

Alert
         {
      
            backgroundColor: #FFFFFF;
            color: #000000;
            borderColor: #006699;
backgroundImage: Embed('images/created_by.jpg');
            dropShadowEnabled: false;
         }

Así resulta:



Ahora bien, puedes crear tus estilos mediante cualquier editor de texto, pero siempre atendiendo las propiedades válidas, y después la adjuntas como una hoja de estilos externa. Como se muestra en la imagen:



Cabe mencionar que éste tip no muestra un diseño exacto de cómo podrías personalizar los alert, eso es tarea tuya, aquí sólo te muestro las herramientas para lograr hacerlo. El experimentar y crear efectos interesantes ya depende de tu imaginación. Juega un poco con PNG's, podrías obtener mejores efectos.

Recuerda leer los comentarios para la retroalimentación.

Saludos y espero les sea útil.

Artículos Relacionados

• Obtener información de la dirección URL desde Actionscript 3
• Conectar Flex 3 con PHP y MySQL
• Utilización básica de webservice en Flex

flex

Deja un comentario

IMPORTANTE

Recuerda ser respetuoso, no insultes a otras personas, ni uses palabrotas, hay una persona al otro lado de la pantalla.

Habla bien, NO ESCRIBAS EN MAYUSCULA TODO, no escribas como en un SMS, evita cosas como "ke", "x q" y demás abreviaciones.

Aquí funcionan las etiquetas de los foros, puedes usar [b] para negrita, [img] para las imágenes, [url] para los enlaces, etc.

Si tienes preguntas técnicas, envíalas mejor al foro.

Nombre

Comentario