Personalizar botones de aplicaciones Flex con Actionscript

Posted by admin | Flex | Saturday 20 December 2008 6:41 pm

Este =http://www.cristalab.com/tipstip[/url] es una continuación a tip escrito por Mx en Cristalab sobre como personalizar botones (y componentes en general) de Flex.

En ese tip, se muestra 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:

Actionscript:
  1. Button {
  2.     upSkin: Embed("img/ico1.png");
  3.     overSkin: Embed("img/ico2.png");
  4.     downSkin: Embed("img/ico3.png");
  5.     disableSkin: Embed("img/ico4.png");
  6. }

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 y ahí incrustaremos los gráficos dentro de variables tipo Class, y asignaremos el nuevo estilo al botón a través de setStyle().

Actionscript:
  1. <mx:Script>
  2.     <![CDATA[
  3.         [Embed("img/ico2_1.png")]
  4.         private var ico1:Class;
  5.  
  6.         [Embed("img/ico2_2.png")]
  7.         private var ico2:Class;
  8.  
  9.         [Embed("img/ico2_3.png")]
  10.         private var ico3:Class;
  11.  
  12.         [Embed("img/ico2_4.png")]
  13.         private var ico4:Class;
  14.        
  15.         private function ini():void
  16.         {
  17.             boton1.setStyle("upSkin", ico1);
  18.             boton1.setStyle("overSkin", ico2);
  19.             boton1.setStyle("downSkin", ico3);
  20.             boton1.setStyle("disableSkin", ico4);
  21.         }
  22.     ]]>
  23. </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.

Post relacinonados:

  1. Personalizar componentes de Flex con estilos programáticos
  2. Cómo personalizar el icono del panel de Alerta de Flex
  3. Botones con parámetros en Actionscript 3
  4. Cómo personalizar los iconos en componentes Tree de Flex
  5. Personalizar la tipografía en componentes Flex

No Comments »

No comments yet.

RSS feed for comments on this post. TrackBack URI

Leave a comment

Get Adobe Flash playerPlugin by wpburn.com wordpress themes