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í |
