Personalizar componentes de Flex con estilos programáticos

Como ampliación a los tips anteriores sobre personalización de componentes en Flex, "Importar diseño desde Photoshop a Flex" y "Personalizar botones de aplicaciones Flex con Actionscript", explicaré un sistema que nos da mcha libertad a la hora de personalizar nuestras aplicaciones: Los estilos programáticos.

Un estilo programático es simplemente un estilo vinculado a una clase de actionscript con la que dibujamos el gráfico a través de código.

Para ello crearemos dentro de nuestro proyecto una clase de actionscript que extienda de ProgrammaticSkin, la llamaremos por ejemplo EstiloBoton:

Código :

package clases.estilos
{
   import mx.skins.ProgrammaticSkin;

   public class EstiloBoton extends ProgrammaticSkin
   {
      
   }
}

Ahora lo que deberemos hacer es sobrescribir la función updateDisplayList de la clase ProgrammaticSkin. Dentro de esta nueva función dibujaremos con la API de dibujo de Flash los gráficos que queramos para el botón (para este ejemplo dibujaré un circulo de diferente color para cada estado del botón):

Código :

protected override function updateDisplayList(w:Number, h:Number):void
{
   graphics.clear();
   
   switch (name)
   {
      case "upSkin":
         graphics.beginFill(0xFF0000);
         break;
      case "overSkin":
         graphics.beginFill(0xFF4400);
         break;
      case "downSkin":
         graphics.beginFill(0xFF8800);
         break;
      case "disableSkin":
         graphics.beginFill(0xCCCCCC);
         break;
   }
   graphics.drawEllipse(0,0,w,h);
   graphics.endFill();
}

Ahora solo queda asignar este estilo al botón:

Código :

<mx:Script>
   <![CDATA[
      import clases.estilos.EstiloBoton;

      private var ico1:Class = EstiloBoton;
      private var ico2:Class = EstiloBoton;
      private var ico3:Class = EstiloBoton;
      private var ico4:Class = EstiloBoton;
    
      private function ini():void
      {
         boton1.setStyle("upSkin", ico1);
         boton1.setStyle("overSkin", ico2); 
         boton1.setStyle("downSkin", ico3); 
         boton1.setStyle("disableSkin", ico4); 
      }
   ]]>
</mx:Script>

En caso de querer asignar el estilo a todos los componentes a través de CSS podemos hacerlo con la directiva ClassReference:

Código :

Button {
   upSkin: ClassReference('clases.estilos.EstiloBoton');
   overSkin: ClassReference('clases.estilos.EstiloBoton');
   downSkin: ClassReference('clases.estilos.EstiloBoton');
   disableSkin: ClassReference('clases.estilos.EstiloBoton');
}

Y listo

¿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.