Home » AS3 »Avanzado »Flex » Currently Reading:

Personalizar componentes de Flex con estilos programáticos

diciembre 20, 2008 AS3, Avanzado, Flex No Comments
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:

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

  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:

  1. <mx:Script>
  2.     <!&#91;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.     &#93;]>
  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:

  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 ^^

Compártelo:

Personalizar componentes de Flex con estilos programáticos
Visto 5.996 veces

Comment on this Article:








Twitter: zguillez

AdvertisementAdvertisementAdvertisementAdvertisement

Recibe las novedades por email

Post destacado

Panel de zoom de imágenes en Flex

13 abr 2009

Este ejemplo es, igual que hice en el post anterior, un ejemplo que he adaptado a Flex desde un ejemplo que hice hace tiempo para Flash. Se trata de un panel donde se ve un zoom de una parte de una imagen. Este es el ejemplo montado en Flex: Y este es el código utilizado para la película principal: <?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"                 xmlns:ui="*"                 layout="absolute"                 creationComplete="ini()"                 width="505" …



Map

Ranking

Codigoactionscript.org: 4.65 sobre 5 (106 valoraciones)

twitter-widget.com