Cómo personalizar el panel de Alerta 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 :





import mx.controls.Alert;
private function llamarAlerta():void{
Alert.show("No se puede procesar su información");
}
]]>








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 :



Alert {
borderColor: #666666;
background-color: #ffffff;
color: #999999;
}




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 :



Alert {
borderColor: #666666;
background-color: #ffffff;
color: #999999;
borderAlpha: 0.5;
}



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

Código :



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






O simplemente redondear el borde del Alert

Código :



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



Que sea más alto la cabecera del Alert



Código :



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



O agregarle un degrade elegante al header



Código :



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;
}



Le agregamos una sombra para la derecha y obtenemos:

Código :



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;
}






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

Fte: http://www.cristalab.com/tips/47959/como-personalizar-el-panel-de-alerta-de-flex-con-css