Personalizar diseño del componente Alert de Flex con CSS

En la conferencia de aniversario de garageFlash, hice un pequeño registro de asistentes en Flex, con una alerta personalizada con CSS, muchas personas me preguntaron como lo logré y aqui les dejo el tip. Zguillez dejó una personalización de icono del componente muy bueno por cierto.

Para empezar creamos un proyecto en Flex, agregamos un botón y que dispare un Alert:

Código :

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
   <mx:Script>
      <![CDATA[
         import mx.controls.Alert;
         private function llamarAlerta():void{
            Alert.show("No se puede procesar su información");
         }
      ]]>
   </mx:Script>
   <mx:Button x="10" y="10" label="Button" click="llamarAlerta()"/>
</mx:Application>

Ahora agregaremos el css necesario para personalizar nuestro componente. Para eso creamos un estilo CSS con el nombre de nuestro componente, también podemos aplicar estilos a cualquier componente.

Código :

<mx:Style>
      Alert {
         borderColor: #666666;
         background-color: #ffffff;
         color: #999999;
      }
   </mx:Style>

Con esto logramos cambiar el color de la fuente, el color fondo y el color del borde del componente.



basicamente eso es todo, le agregaremos algunas cambios mas, como por ejemplo poner 50% (0.5) el alpha del borde

Código :

<mx:Style>
      Alert {
         borderColor: #666666;
         background-color: #ffffff;
         color: #999999;
         borderAlpha: 0.5;
      }
   </mx:Style>

O darle espacios mas reducidos entre el borde y el área del texto

Código :

<mx:Style>
      Alert {
         borderColor: #666666;
         background-color: #ffffff;
         color: #999999;
         borderAlpha: 0.5;
         borderThicknessLeft: 5;
         borderThicknessTop: 5;
         borderThicknessBottom: 5;
         borderThicknessRight: 5;
      }
   </mx:Style>

O simplemente redondear el borde del Alert

Código :

<mx:Style>
      Alert {
         borderColor: #666666;
         background-color: #ffffff;
         color: #999999;
         borderAlpha: 0.5;
         borderThicknessLeft: 5;
         borderThicknessTop: 5;
         borderThicknessBottom: 5;
         borderThicknessRight: 5;
                   cornerRadius: 16;
      }
   </mx:Style>

Que sea más alto la cabecera del Alert

Código :

<mx:Style>
      Alert {
         borderColor: #666666;
         background-color: #ffffff;
         color: #999999;
         borderAlpha: 1;
         borderThicknessLeft: 10;
         borderThicknessTop: 10;
         borderThicknessBottom: 10;
         borderThicknessRight: 10;
         cornerRadius: 16;
         headerHeight: 20;
      }
   </mx:Style>

O agregarle un degrade elegante al header

Código :

<mx:Style>
      Alert {
         borderColor: #666666;
         background-color: #ffffff;
         color: #999999;
         borderAlpha: 1;
         borderThicknessLeft: 10;
         borderThicknessTop: 10;
         borderThicknessBottom: 10;
         borderThicknessRight: 10;
         cornerRadius: 16;
         headerHeight: 20;
         highlightAlphas: 0.28, 0;
         headerColors: #000000, #666666;
      }
   </mx:Style>

Le agregamos una sombra para la derecha y obtenemos:

Código :

<mx:Style>
      Alert {
         borderColor: #666666;
         background-color: #ffffff;
         color: #999999;
         borderAlpha: 1;
         borderThicknessLeft: 10;
         borderThicknessTop: 10;
         borderThicknessBottom: 10;
         borderThicknessRight: 10;
         cornerRadius: 16;
         headerHeight: 20;
         highlightAlphas: 0.28, 0;
         headerColors: #000000, #666666;
         dropShadowEnabled: true;
         shadowDirection: right;
      }
   </mx:Style>

Y así podemos dar un estilo propio a cada uno de nuestros componentes , el código completo aquí

También te interesa

• Personalizar la tipografía en componentes Flex
• Personalizar componentes de Flex con estilos programáticos
• Personalizar botones de aplicaciones Flex con Actionscript

css 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