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.

  1. Introducción
  2. Documentos FXG
  3. ¿FXG o Flex FXG?
  4. Implementación FXG en Flex
    1. Formas
      1. fill
      2. stroke
      3. spark.primitives.Rect
      4. spark.primitives.Ellipse
      5. spark.primitives.Line
      6. spark.primitives.Path
    2. spark.primitives.BitmapImage
    3. Texto
    4. spark.components.Group
  5. Library
  6. Conclusión

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:

PLAIN TEXT
MXML:
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <s:Application
  3.     xmlns:fx="http://ns.adobe.com/mxml/2009"
  4.     xmlns:s="library://ns.adobe.com/flex/spark"
  5.     xmlns:mx="library://ns.adobe.com/flex/halo">
  6.    
  7.     <s:Rect width="150" height="100" x="100" y="100">
  8.         <s:stroke>
  9.             <mx:SolidColorStroke color="#FF0000" weight="5"/>
  10.         </s:stroke>
  11.         <s:fill>
  12.             <mx:SolidColor color="#000000"/>
  13.         </s:fill>
  14.     </s:Rect>
  15.    
  16.     <s:Ellipse width="100" height="150" x="50" y="50">
  17.         <s:fill>
  18.             <mx:RadialGradient>
  19.                 <mx:GradientEntry color="#FF0000" alpha="0.5"/>
  20.                 <mx:GradientEntry color="#00FF00" alpha="1"/>
  21.             </mx:RadialGradient>
  22.         </s:fill>
  23.     </s:Ellipse>
  24.    
  25.     <s:Line xFrom="100" xTo="250" yFrom="100" yTo="250">
  26.         <s:stroke>
  27.             <mx:SolidColorStroke color="#0000FF" weight="10"/>
  28.         </s:stroke>
  29.     </s:Line>
  30.    
  31. </s:Application>

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:

PLAIN TEXT
MXML:
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <s:Application
  3.     xmlns:fx="http://ns.adobe.com/mxml/2009"
  4.     xmlns:mx="library://ns.adobe.com/flex/halo"
  5.     xmlns:s="library://ns.adobe.com/flex/spark">
  6.  
  7.     <s:Path>
  8.         <s:segments>
  9.             <s:MoveSegment x="100" y="100"/>
  10.             <s:LineSegment x="200" y="100"/>
  11.             <s:LineSegment x="200" y="200"/>
  12.             <s:LineSegment x="100" y="200"/>
  13.             <s:CubicBezierSegment control1X="50" control1Y="175" control2X="50" control2Y="125" x="100" y="100"/>
  14.         </s:segments>
  15.         <s:stroke>
  16.             <s:Stroke color="0x888888"/>
  17.         </s:stroke>
  18.     </s:Path>
  19.  
  20.     <s:Path>
  21.         <s:data>
  22.             M 50 50
  23.             L 150 50
  24.             L 150 150
  25.             L 50 150
  26.             C 0 125 0 75 50 50
  27.         </s:data>
  28.         <s:stroke>
  29.             <s:Stroke color="0xFF0000" weight="10"/>
  30.         </s:stroke>
  31.     </s:Path>
  32.    
  33. </s:Application>

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:

PLAIN TEXT
MXML:
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <s:Application
  3.     xmlns:fx="http://ns.adobe.com/mxml/2009"
  4.     xmlns:mx="library://ns.adobe.com/flex/halo"
  5.     xmlns:s="library://ns.adobe.com/flex/spark">
  6.  
  7.     <s:Graphic x="10" y="10">             
  8.         <s:BitmapImage source="@Embed('/mif_logo.png')"/>
  9.     </s:Graphic>
  10.       
  11.     <s:Graphic x="10" y="101">
  12.         <s:BitmapImage source="@Embed('/mif_logo.png')" width="600" height="100" resizeMode="scale" alpha="0.8"/>
  13.     </s:Graphic>
  14.    
  15.     <s:Graphic x="10" y="211">
  16.         <s:BitmapImage source="@Embed('/mif_logo.png')" width="432" height="162" repeat="true" alpha="0.5"/>
  17.     </s:Graphic>
  18.  
  19. </s:Application>

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:

PLAIN TEXT
MXML:
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <s:Application
  3.     xmlns:fx="http://ns.adobe.com/mxml/2009"
  4.     xmlns:mx="library://ns.adobe.com/flex/halo"
  5.     xmlns:s="library://ns.adobe.com/flex/spark">
  6.    
  7.     <s:RichText x="100" y="100" fontFamily="Arial" fontSize="16" width="200">
  8.         <s:content>
  9.             Lorem <s:span fontWeight="bold" color="#FF0000">Ipsum</s:span> dolor sit amet,
  10.             <s:img source="@Embed('/comment.png')" width="16" height="16"/> consectetur
  11.             adipiscing elit. Aliquam <s:img source="@Embed('/search.png')" width="16" height="16"/>
  12.             sodales magna vel nisl fermentum vel gravida orci bibendum.<s:br /> Quisque accumsan
  13.             ultrices lacus id <s:span fontStyle="italic">sollicitudin</s:span>. Vivamus fermentum
  14.             tortor a odiodapibus <s:img source="@Embed('/warning.png')" width="16" height="16"/>
  15.             id posuere augue congue. Morbi ultricies felis a elit adipiscing dignissim.
  16.         </s:content>
  17.     </s:RichText>
  18.    
  19.     <s:SimpleText x="350" y="100" width="200" fontSize="12" fontFamily="Verdana">
  20.         <s:text><![CDATA[Lorem ipsum dolor sit amet, "consectetur" adipiscing elit.<br/>Aliquam sodales magna vel nisl fermentum vel gravida orci bibendum.<br/>Quisque accumsan ultrices lacus idsollicitudin.]]></s:text>
  21.     </s:SimpleText>
  22.  
  23. </s:Application>

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.

PLAIN TEXT
MXML:
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <s:Application
  3.     xmlns:fx="http://ns.adobe.com/mxml/2009"
  4.     xmlns:mx="library://ns.adobe.com/flex/halo"
  5.     xmlns:s="library://ns.adobe.com/flex/spark">
  6.    
  7.     <s:Group x="100" y="100" width="100" height="100">
  8.         <s:Rect width="100%" height="100%">
  9.             <s:stroke>
  10.                 <mx:SolidColorStroke color="#FF0000" weight="5"/>
  11.             </s:stroke>
  12.             <s:fill>
  13.                 <mx:SolidColor color="#00FF00"/>
  14.             </s:fill>
  15.         </s:Rect>
  16.     </s:Group>
  17.  
  18.     <s:Group x="150" y="150">
  19.         <s:Rect width="150" height="150">
  20.             <s:stroke>
  21.                 <mx:SolidColorStroke color="#000000" weight="5"/>
  22.             </s:stroke>
  23.             <s:fill>
  24.                 <mx:SolidColor color="#0000FF"/>
  25.             </s:fill>
  26.         </s:Rect>
  27.     </s:Group>
  28.    
  29. </s:Application>

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.

PLAIN TEXT
MXML:
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <s:Application
  3.     xmlns:fx="http://ns.adobe.com/mxml/2009"
  4.     xmlns:mx="library://ns.adobe.com/flex/halo"
  5.     xmlns:s="library://ns.adobe.com/flex/spark">
  6.    
  7.     <fx:Library>
  8.         <fx:Definition name="grupo">
  9.             <s:Group>
  10.                 <s:Rect width="150" height="150">
  11.                     <s:stroke>
  12.                         <mx:SolidColorStroke color="#FF0000" weight="5"/>
  13.                     </s:stroke>
  14.                     <s:fill>
  15.                         <mx:SolidColor color="#00FF00"/>
  16.                     </s:fill>
  17.                 </s:Rect>
  18.                 <s:Ellipse width="150" height="150">
  19.                     <s:stroke>
  20.                         <mx:SolidColorStroke color="#000000" weight="5"/>
  21.                     </s:stroke>
  22.                 </s:Ellipse>
  23.             </s:Group>
  24.         </fx:Definition>
  25.     </fx:Library>
  26.    
  27.     <fx:grupo x="100" y="100"/>
  28.     <fx:grupo x="150" y="150" alpha="0.5"/>
  29.        
  30. </s:Application>

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.

Comparte:



7votos  Vota!!

Acerca de esta entrada

Usted está leyendo “Fx4 III: FXG 1.0,” una entrada de MadeInFlex

Autor: Joan Garnet




Joan es desarrollador de aplicaciones web especializado en la Plataforma Flash y su integración con otras tecnologías. Actualmente trabaja desarrollando software en Undefined, empresa de la que es socio.
URL del Autor:
http://www.joangarnet.com/
Ver
otras entradas del autor
Publicada:
18.07.09 / 5pm
Categorías:
Artículos, Flex 4, Tutoriales
Entradas relacionadas:
  • No related posts
    • Número de visitas:
    5394