SkinnableComponent Skin, Dynamic Change - Flex 4

Ejemplo:

Muchas veces necesitamos un component que se comporte como queramos y eso lo podiamos hacer perfectamente con flex 3, pero cuando hablamos de que se vea como queramos ya era otro cuento, teníamos que dibujar dentro de nuestro component o simplemente dibujaba nuestro Nuevo component en flash e importarlo desde flash a flex usando flex kid component.

Con el nuevo framework de flex, separaron lo que es la parte grafica de los componentes de la parte funcional del mismo. Esto quiere decir, que podemos hacer una clase para hacer que se comporte como queramos y luego hacer otra clase para crear como queremos que se vea.

Este diagrama de arquitectura nos dará una idea a que nos estamos enfrentando ahora en comparación con flex 3

Los componentes sigues extendiendo de UIComponente pero ahora tienen un clase llamada SkinnableComponent de este lado podemos programar todo lo que queremos que nuestro componente haga, y del lado de la interfaz nos crean lo que es la clase skin con esta clase podemos renderizar cualquier componente, existen skins ya prediseñados pero si queremos hacer uno por nuestra cuenta desde cero, extenderemos de skin class.

También tenemos el diagrama del ciclo de vida de los skin:

(Esta Imagen fue sacada de http://opensource.adobe.com/wiki/display/flexsdk/Spark+Skinning)


Tenemos varios métodos que podemos sobre escribir para poder darle muchas más funcionalidades a nuestros diseños, no solo para decorar sino para crear efectos interesantes.