Personalizar componentes de Flex con estilos programáticos

Posted by admin | AS3,Avanzado,Flex | Saturday 20 December 2008 6:45 pm

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:

PLAIN TEXT
Actionscript:
  1. package clases.estilos
  2. {
  3.     import mx.skins.ProgrammaticSkin;
  4.  
  5.     public class EstiloBoton extends ProgrammaticSkin
  6.     {
  7.        
  8.     }
  9. }

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):

PLAIN TEXT
Actionscript:
  1. protected override function updateDisplayList(w:Number, h:Number):void
  2. {
  3.     graphics.clear();
  4.    
  5.     switch (name)
  6.     {
  7.         case "upSkin":
  8.             graphics.beginFill(0xFF0000);
  9.             break;
  10.         case "overSkin":
  11.             graphics.beginFill(0xFF4400);
  12.             break;
  13.         case "downSkin":
  14.             graphics.beginFill(0xFF8800);
  15.             break;
  16.         case "disableSkin":
  17.             graphics.beginFill(0xCCCCCC);
  18.             break;
  19.     }
  20.     graphics.drawEllipse(0,0,w,h);
  21.     graphics.endFill();
  22. }

Ahora solo queda asignar este estilo al botón:

PLAIN TEXT
Actionscript:
  1. <mx:Script>
  2.     <![CDATA[
  3.         import clases.estilos.EstiloBoton;
  4.  
  5.         private var ico1:Class = EstiloBoton;
  6.         private var ico2:Class = EstiloBoton;
  7.         private var ico3:Class = EstiloBoton;
  8.         private var ico4:Class = EstiloBoton;
  9.    
  10.         private function ini():void
  11.         {
  12.             boton1.setStyle("upSkin", ico1);
  13.             boton1.setStyle("overSkin", ico2);
  14.             boton1.setStyle("downSkin", ico3);
  15.             boton1.setStyle("disableSkin", ico4);
  16.         }
  17.     ]]>
  18. </mx:Script>

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

PLAIN TEXT
Actionscript:
  1. Button {
  2.     upSkin: ClassReference('clases.estilos.EstiloBoton');
  3.     overSkin: ClassReference('clases.estilos.EstiloBoton');
  4.     downSkin: ClassReference('clases.estilos.EstiloBoton');
  5.     disableSkin: ClassReference('clases.estilos.EstiloBoton');
  6. }

Y listo ^^

Be Sociable, Share!

Post relacinonados:

  1. Personalizar botones de aplicaciones Flex con Actionscript
  2. Personalizar la tipografía en componentes Flex
  3. Cómo personalizar los iconos en componentes Tree de Flex
  4. Cómo personalizar el icono del panel de Alerta de Flex
  5. Ejemplo de Preload en Actioncsript 3

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