Fx4 III: FXG 1.0

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á qué es FXG dentro del contexto Flex 4. FXG es la especificación del nuevo formato de intercambio de gráficos para el Flash Player.


Introducción

FXG (Flash XML Graphics) es un lenguaje basado en XML que expone toda la capacidad de renderizado del Flash Player de forma declarativa. La especificación de FXG se ha creado para ofrecer un formato de intercambio de gráficos entre aplicaciones de edición gráfica y el Flash Player que sea fácil de utilizar y a la vez ofrezca un control total del resultado final y de la optimización del mismo.
En la especificación de FXG encontramos un conjunto de elementos gráficos, texto, filtros, etc.. con los cuales se puede crear, agrupar, transformar y modificar formas vectoriales, bitmaps y texto.

Documentos FXG

En una aplicación Flex podemos utilizar FXG en línea dentro de un documento *.MXML de la misma forma que utilizamos otros componentes Flex o bien auto contenido como componente en un archivo *.FXG o *.MXML externo.
Aunque en ambos casos podamos obtener el mismo resultado internamente las cosas son ciertamente diferentes. En el caso de utilizar FXG en línea dentro de un archivo MXML lo que estamos haciendo es utilizar la implementación de FXG que el SDK de Flex nos proporciona, es decir, obtenemos instancias de clases que están dentro de la cadena de herencia del SDK de Flex.
En el caso de utilizar un FXG como componente desde un archivo externo lo que obtenemos en el momento de compilación es un recurso gráfico muy optimizado en cuanto a uso de memoria y que hereda de spark.core.SpriteVisualElement, una clase de mucho más bajo nivel y por lo tanto mucho más ligera.

¿FXG o Flex FXG?

Entonces, ¿cuándo utilizar una u otra opción? Si necesitamos elementos gráficos que soporten el ciclo de vida del sdk de Flex y que nos proporcionen toda la interactividad del framework (eventos, data binding, etc…) entonces debemos utilizar la implementación de FXG que nos proporciona Flex a través de Spark, de lo contrario lo mejor es externalizar en forma de componente FXG para sacar partido de las optimizaciones que el compilador nos brinda.
Debemos tener en cuenta que dentro de un comonente FXG no se pueden utilizar las funcionalidades del SDK, tampoco tipos nativos del Flash Player o en definitiva lógica alguna. El componente es puramente un descriptor de un elemento gráfico.

Implementación FXG en Flex

Flex contiene una implementación FXG completa en el espacio de nombres Spark. En esta entrada vamos a aprender a utilizar FXG a través de dicha implementación.
A continuación vamos a revisar los distintos elementos FXG de los que disponemos en Flex.

Formas

Las formas vectoriales se componen de los puntos que la definen, un relleno y un trazo.

fill

El relleno de cualquer forma se declara mediante la propiedad fill.
Esta propiedad acepta implementaciones de IFill:

  • mx.graphics.BitmapFill
  • mx.graphics.LinearGradient
  • mx.graphics.RadialGradient
  • mx.graphics.SolidColor

stroke

El trazo que define una forma se declara mediante la propiedad stroke.
Esta propiedad acepta implementaciones de IStroke:

  • mx.graphics.LinearGradientStroke
  • mx.graphics.RadialGradientStroke
  • mx.graphics.SolidColorStroke

spark.primitives.Rect

spark.primitives.Ellipse

spark.primitives.Line

Estas primitivas declaran respectivamente una forma rectangular, una elipse y una línea.
Un ejemplo de uso:
[mxml]




















[/mxml]
Formas vectoriales

spark.primitives.Path

Esta primitiva permite declarar libremente cualquier forma.
Con Path podemos definir una secuencia de segmentos rectos o circulares para que conformen el perímetro de una forma. Dichos segmentos se asignan desde el atributo segments:Array y pueden ser de los siguientes tipos:

  • spark.primitives.pathSegments.LineSegment
  • spark.primitives.pathSegments.CubicBezierSegment
  • spark.primitives.pathSegments.QuadraticBezierSegment

Adicionalmente disponemos de la clase spark.primitives.pathSegments.MoveSegment para mover el punto desde el que se empieza a dibujar.
Además de poder definir declarativamente la secuencia de segmentos disponemos del atributo data, el cual nos permite pasar un String con notación SVG para que defina dicha secuencia de segmentos.
Con toda esta versatilidad, la clase Path nos permite obtener el mismo resultado que con las primitivas que se muestran anteriormente y más
Un ejemplo de uso:
[mxml]














M 50 50
L 150 50
L 150 150
L 50 150
C 0 125 0 75 50 50





[/mxml]
Path

spark.primitives.BitmapImage

Esta primitiva nos permite cargar un bitmap en una superficie rectangular. El bitmap puede ocupar una porción, la totalidad o incluso más de la superficie disponible. Adicionalmente se puede controlar si el bitmap se escala o no y si se repite a lo largo de la superficie.
Un ejemplo:
[mxml]








[/mxml]
BitmapImage

Texto

FXG proporciona dos primitivas para tratar zonas de contenido textual:

  • spark.primitives.RichText
  • spark.primitives.SimpleText

RichText es para definir texto rico, en el cuál se pueden renderizar distintos tipos de formatos a la vez, distintos tipos de elementos como imágenes, texto, etc…
Esta clase saca partido del FTE (Flash Text Engine) a través del TLF (Text Layout Framework). El FTE es un conjunto de componentes de bajo nivel existentes en el Flash Player 10 que, a través de sus APIs ActionScript permiten crear por encima implementaciones listas para ser utilizadas como campos de texto, como el TLF.
A través de la propiedad content de RichText se pueden intercalar elementos de texto mezclados con distintos tags que permiten desde asignar formatos a grupos de caracteres hasta intercalar imágenes entre otros grupos de caracteres, etc..
Estos son los tags soportados:

  • div
  • p
  • span
  • a
  • img
  • br
  • tab
  • tcy

Cada uno de ellos sopora un conjunto de atributos y permite realizar una serie de operaciones determinadas. Toda esta potencia es, sin duda, un paso de gigante en lo que a renderizado de bloques de texto se refiere.
SimpleText soporta un solo formato que se aplica a todo el texto. Esta clase ofrece una funcionalidad parecida a la clase mx:Label de la versión 3 de Flex pero con soporte multiline.
Un ejemplo:
[mxml]



Lorem Ipsum dolor sit amet,
consectetur
adipiscing elit. Aliquam
sodales magna vel nisl fermentum vel gravida orci bibendum. Quisque accumsan
ultrices lacus id sollicitudin. Vivamus fermentum
tortor a odiodapibus
id posuere augue congue. Morbi ultricies felis a elit adipiscing dignissim.


Aliquam sodales magna vel nisl fermentum vel gravida orci bibendum.
Quisque accumsan ultrices lacus idsollicitudin.]]>


[/mxml]
RichText y SimpleText

spark.components.Group

La clase Group permite agrupar elementos en un lienzo con origen de coordenadas propio. Por defecto utiliza layout de posicionamiento absoluto que puede cambiarse en tiempo de ejecución por cualquier otro tipo de layout, ya sea uno de los disponibles en Spark o uno personalizado por nosotros mismos.
Se dispone de las subclases VGroup y HGroup para trabajar con layout vertical y horizontal respectivamente.
[mxml]




















[/mxml]
Group

Library

El concepto de librería y símbolo no es nada nuevo dentro del mundo Flash, de hecho has sido un pilar para la evolución de la tecnología y para ayudar a introducir los coneptos de de clase e instancia de POO a todos los usuarios no programadores de Flash.
Flex 4 se sirve nuevamente de esta metáfora a través del tag Library que proporciona el espacio de nombres de lenguaje MXML2009.
En este nodo MXML podemos anidar dentro de un tag Definition cualquier grupo o elemento gráfico a modo de template para ser usado (instanciado) en cualquier lugar del documento tantas veces como se quiera. Es importante notar que los elementos que añadimos en Library quedan accesibles exclusivamente dentro del ámbito del documento MXML que los declara.
Para crear las instancias de cada una de las definiciones utilizaremos el atributo name del Definition que deseemos para referenciar el template de objeto.
[mxml]





















[/mxml]
Library

Conclusión

FXG es una especificación muy potente que ofrece a la plataforma Flash una herramienta a medida para intercambiar gráficos entre distintas aplicaciones. Además, a través de la implementación que Flex 4 lleva en el espacio de nom bres Spark, proporciona una versatilidad nunca vista antes ( bueno si.. ver Degrafa 🙂 ) a la hora de declarar interfaces.
Gracias a FXG el workflow designer/developer nunca más va a ser un obstáculo para llevar la tecnología a los más altos niveles de perfección gráfica.

5 Comentarios

  1. Sergi Dote

    Muy buen post Joan, un gran artículo para entender el lenguaje FXG y ver la potencia que introduce en cuanto a skinning y stiling en la maquetación de interfícies gráficas. Estoy completamente de acuerdo contigo cuando dices que con FXG se llega a una versatilidad nunca vista.
    Felicidades.

  2. Edgar Parada

    Excelete post Joan, ya hacía falta darle una revisada más profunda en MIF.

    Una duda un poco offtopic, sabes que hay del tema FXG en JavaFX? en algunas presentaciones he visto que JavaFX usa algo de FXG sabes si es un estándar abierto o solo lo propone Adobe y el de SUN es otro?

    Sería increíble que fuera un estándar que tanto Silverlight, como JavaFX como Flex usaran para el tema de gráficos.

  3. Joan Garnet

    Hola Edgar,
    por lo que he visto JavaFX utiliza FXD, que en definitiva busca el mismo objetivo que FXG: tooling y facilitar el workflow designer-developer.

    Como bien dices FXG es una especificación abierta pero supongo que al estar tan ligada al modelo de renderizado del Flash Player será dificil que otras tecnologías la utilicen.
    Antes de tomar FXG estoy seguro que tirarían por SVG ya que FXG toma muchísimos conceptos e incluso partes enteras de la especificación.

  4. Xavi Colomer

    Estoy teniendo algunos leaks de memoria con skinning basado en spark.

    Te explico el proceso que seguimos:

    Creamos los iconos con illustrator, exportamos a FXG y pasamos el codigo a MXML ( se k es un tanto rebuscado )

    Tengo un boton que pulsandolo me salen un monton de botones con iconos creados con el proceso anterior. Cada vez k mostro el menu se crean todos los iconos pero cuando cierro el menu y elimino la vista, no desaparecen de la memoria.

    Me he encontrado con esto usando el Profiler. Las instancias de los iconos se crean cada vez a pesar de eliminar las vistas ( menu ) en las que estan contenidas. Ademas el proceso con mas memoria es un vector de Numbers ( que es lo que usan los Paths con los que estan echos los iconos )

    Alguna idea?

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