Personalizar botones de aplicaciones Flex con Actionscript

Este tip es una continuación a tip escrito por Mx sobre como personalizar botones (y componentes en general) de Flex:

• Flex y diseñadores: Importar diseño desde Photoshop a Flex

En ese tip, Mx mostraba como podemos utilizar gráficos de Photoshop para sustituir los gráficos estándar del componente. Ella mostró la forma de hacerlo desde los menús de Flex Builder y el resultado de ese proceso es la generación de un archivo CSS como, por ejemplo, este:

Código :

Button {
   upSkin: Embed("img/ico1.png");
   overSkin: Embed("img/ico2.png");
   downSkin: Embed("img/ico3.png");
   disableSkin: Embed("img/ico4.png");
}

Con esto cambiaremos el aspecto de TODOS los componentes botón de nuestra aplicación. Pero.. ¿que pasa si queremos cambiar el aspecto de un botón en concreto? por ejemplo para un botón de "Play" o de "Stop" en un reproductor de vídeo.

Para hacer eso, podemos asignar otro "estilo" a ese botón en concreto a través de actionscritp.

Para ello abriremos un tag <mx:Script> y ahí incrustaremos los gráficos dentro de variables tipo Class, y asignaremos el nuevo estilo al botón a través de setStyle().

Código :

<mx:Script>
   <![CDATA[
      [Embed("img/ico2_1.png")]
      private var ico1:Class;

      [Embed("img/ico2_2.png")]
      private var ico2:Class;

      [Embed("img/ico2_3.png")]
      private var ico3:Class;

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

De esta manera, todos los componentes botón tendrán el estilo definido desde el archivo CSS menos nuestro botón "boton1" que tendrá el estilo definido en el actionscript.

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