Comunidad de diseño web y desarrollo en internet

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í

¿Sabes SQL? ¿No-SQL? Aprende MySQL, PostgreSQL, MongoDB, Redis y más con el Curso Profesional de Bases de Datos que empieza el martes, en vivo.

Publica tu comentario

o puedes...

¿Estás registrado en Cristalab y quieres
publicar tu URL y avatar?

¿No estás registrado aún pero quieres hacerlo antes de publicar tu comentario?

Registrate