Fx4 VIII: Soporte CSS ampliado

En esta cuarta versión de Flex se han producido cambios considerables en la arquitectura de componentes así como en el lenguaje MXML. Esto se ha hecho para potenciar varios aspectos como son la productividad, facilitar el workflow designer / developer o la integración con herramientas externas.
En esta entrada se verá en profundidad las novedades referentes al soporte CSS en Flex 4.


Espacios de nombre

A partir de Flex 4 todos los selectores CSS requieren de un espacio de nombres para evitar la ambiguedad entre nombres de clase definidos en halo y spark.
Un ejemplo de esta situación la podemos encontrar en la clase Button.
Para spark la clase Button se define en spark.components.Button, en cambio para halo se define en mx.controls.Button. Lo que se puede apreciar es que en ambos casos las clases se llaman igual. Si se hubiera mantenido el modelo CSS de Flex <= 3 tendríamos un problema de ambiguedad al querer redefinir los estilos de la clase Button como se puede ver. El código que necesitamos para definir los estilos de Button para spark y halo a la vez sería el siguiente: [mxml]


@namespace s “library://ns.adobe.com/flex/spark”;
@namespace mx “library://ns.adobe.com/flex/mx”;
s|Button{ lineThrough: true; }
mx|Button{ icon: Embed(‘favorite.png’); }
.botonRedondeado{ cornerRadius: 10; }





[/mxml]
Obtenemos esto:
namespaces
Podemos observar dos peculiaridades con respecto a Flex3. La primera las declaraciones de espcios de nombre @namespace alias "URI"; y la segunda la forma de contextualizar las declaraciones con alias|ClassName.
Por otra parte vemos que podemos seguir utilizando los selectores de clase de siempre de la misma forma que antes y que son aplicables a componentes halo y spark indistintamente.

Selector de clase múltiple

Una forma muy potente de modularizar los estilos es definirlos de la forma más atómica posible. Cuanto más se especialice la declaración de un estilo más versatil será.
A partir de Flex 4 se pueden asignar múltiples selectores de clase a un mismo componente separados por un espacio:
[mxml]



.iconoFavoritos{ icon: Embed(‘favorite.png’); }
.botonRedondeado{ cornerRadius: 10; }
.textoRojo{ color: #FF0000; }
.texto25{ fontSize: 25; }



[/mxml]
Obtenemos esto:
multiple_selectors

Selector por #id

Otra característica añadida es el soporte para selectores por identificador, al más puro estilo HTML:
[mxml]


#favoritos{
icon: Embed(‘favorite.png’);
cornerRadius: 10;
fontSize: 25;
}




[/mxml]
Obtenemos esto:
id_selector

Selectores descendientes

Los selectores descendientes nos ofrecen la posibilidad de contextualizar las declaraciones de nuestros estilos dentro del ámbito de una clase determinada.
Por ejemplo, si queremos declarar un estilo que afecte a todos los campos de texto que estén dentro de un formulario lo haríamos de la siguiente forma:
[mxml]


@namespace s “library://ns.adobe.com/flex/spark”;
@namespace mx “library://ns.adobe.com/flex/mx”;

mx|FormItem s|TextInput{ color: #FF0000; }
mx|FormItem mx|TextInput{ color: #00FF00; }










[/mxml]
Obtenemos esto:
descendant_selector

Pseudo selectores

Los pseudo selectores permiten aplicar estilos sobre un componente teniendo en cuenta el skin state en el que está. Para ello se debe tener conocimiento de los estados de skin disponibles para el componente en cuestión.
Por ejemplo, la clase spark.components.Button dispone de los estados up, over, down y disabled (cada componente tiene especificados sus skin states en la documentación ASDoc), por lo tanto podemos sacar partido de los pseudo selectores CSS del siguiente modo:
[mxml]


@namespace s “library://ns.adobe.com/flex/spark”;
@namespace mx “library://ns.adobe.com/flex/mx”;

s|Button:up{ fontSize: 10; }
s|Button:over{ fontSize: 20; }
s|Button:down{ fontSize: 30; }




[/mxml]
Obtenemos esto:
Up:
button_up
Over:
button_over
Down:
button_down

Combinando

Por supuesto lo más interesante de todo es que todas estas funcionalidades las podemos combinar:
[mxml]


@namespace s “library://ns.adobe.com/flex/spark”;
@namespace mx “library://ns.adobe.com/flex/mx”;

mx|Panel mx|ControlBar s|Button:up{ color: #FF0000; fontSize: 6; }
mx|Panel mx|ControlBar s|Button:over{ color: #00FF00; fontSize: 30; }

mx|Panel mx|Form #formItem2 s|TextInput{ color: #0000FF; }
















[/mxml]
Obtenemos esto:
Up:
combinando_up
Over:
combinando_over

Conclusión

Con Flex4 se dispone de una mayor versatilidad y control en lo que a declaración de estilos se refiere. La implementación CSS de Flex <= 3 dejaba bastante que desear y este paso sin duda está apuntando hacia el buen camino. Cabe destacar que se dipone de una API AS3 para asignar todos estos estilos de forma programática y que no dudo se cubrirá en una futura entrada así que, manteneos atentos!

Notas

• Los selectores de clase son los que llevan punto ‘.’ antes del identificador. Por ejemplo .botonRedondeado{}, los selectores de tipo son los que se asocian con una clase. Por ejemplo s|Button

Etiquetado en:

3 Comentarios

  1. Pingback: Tweets that mention MadeInFlex » Blog Archive » Fx4 VIII: Soporte CSS ampliado -- Topsy.com

  2. Pingback: Adobe un recuento de 2010 y que esperar en 2011 | www.riactive.com

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Acerca de Made In Flex

Made In Flex es una comunidad de desarrolladores de Apache Flex creada en 2006.

Apache Flex, anteriormente conocido como Adobe Flex, es un SDK (kit de desarrollo de software) para crear aplicaciones enriquecidas - multiplataforma basadas en Adobe Flash donado por Adobe a la fundación Apache in 2011 y promocionado a proyecto de primer nivel en Diciembre de 2012.

Actualmente estamos cambiando muchos aspectos del sitio web para ofrecer un sitio útil para toda la comunidad que tenga en cuenta las necesidades actuales.

Últimas Fotos

Instalador de Apache Flex

Entrar o Registrase