Forums Développement Multimédia

Les formations Mediabox
Les formations Mediabox

Flex 4 en un jour - Dessins MXML et FXG

Compatible Flex 4. Cliquer pour en savoir plus sur les compatibilités.Compatible ActionScript 3. Cliquer pour en savoir plus sur les compatibilités.Par tannoy (Antony Chauviré), le 18 octobre 2010

Cet article est une traduction d'un mini livre nommé Flex 4 in a Day de Mihai Corlan.

Adobe a donné son accord concernant la traduction de ce mini-livre.

Un des plus grands changements apportés par Flex 4 est l'ajout de dessins MXML et le support du langage FXG. Bien que ces deux concepts permettent de dessiner des graphiques vectoriels, ils ne sont pas les mêmes.

Dessins MXML

Les dessins MXML sont une collection de classes que vous utilisez pour définir des dessins interactifs (ce sont des dessins qui peuvent changer à l'exécution). Il ne s'agit pas d'un nouveau langage, mais d'un ajout au langage MXML et au framework Flex. Ces classes font parties du SDK Flex (beaucoup d'entre elles font parties des packages mx.graphics et spark.primitives) et le compilateur MXML relie chaque balise de dessins MXML vers une classe ActionScript correspondante.

Les balises de dessins MXML peuvent être ajoutées en tant qu'enfant de la balise racine Application ou de n'importe quel conteneur ou groupe. Elles ont un ordre de profondeur implicite: chaque balise est rendu au-dessus de la précédente. Parce-que chaque balise correspond à une classe ActionScript, vous pouvez créer des dessins en utilisant ActionScript au lieu du MXML. Les dessins MXML définissent:

  • Des primitives de dessins et de textes
  • Des remplissages, traits, dégradés, et images
  • Des filtres, masques, opacités, transformations et modes de fusion

Voici une liste de balises de dessins MXML et leurs implémentations ActionScript (veuilles noter que le namespace s est pour la libraire de composants Spark):

<s:BitmapFill> mx.graphics.BitmapFill
<s:BitmapImage> spark.primitives.BitmapImage
<s:ColorTransform> flash.geom.ColorTransform
<s:Ellipse> spark.primitives.Ellipse
<s:GradientEntry> mx.graphics.GradientEntry
<s:Graphic> spark.primitives.Graphic
<s:Line> spark.primitives.Line
<s:LinearGradient> mx.graphics.LinearGradient
<s:LinearGradientStroke> mx.graphics.LinearGradientStroke
<s:Path> spark.primitives.Path
<s:RadialGradient> mx.graphics.RadialGradient
<s:RadialGradientStroke> mx.graphics.RadialGradientStroke
<s:Rect> spark.primitives.Rect
<s:SolidColor> mx.graphics.SolidColor
<s:SolidColorStroke> mx.graphics.SolidColorStroke
<s:RichText> spark.primitives.RichText
<s:Transform> mx.geom.Transform
<s:BevelFilter> spark.filters.BevelFilter
<s:BlurFilter> spark.filters.BlurFilter
<s:ColorMatrixFilter> <s:ColorMatrixFilter>
<s:DropShadowFilter> spark.filters.DropShadowFilter
<s:GlowFilter> spark.filters.GlowFilter
<s:GradientGlowFilter> spark.filters.GradientGlowFilter
<s:GradientBevelFilter> spark.filters.GradientBevelFilter
<s:ShaderFilter> spark.filters.ShaderFilter

Vous pouvez écrire le code des dessins MXML en utilisant un éditeur de code ou vous pouvez utiliser un outil comme Flash Catalyst pour générer le code. Généralement, vous utilisez les dessins MXML pour créer des skins pour les composants Flex 4.

Voici un exemple de dessins MXML qui créé cette forme:

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
			   xmlns:s="library://ns.adobe.com/flex/spark"
			   xmlns:mx="library://ns.adobe.com/flex/mx">
	<s:Group x="50" y="50">
		<s:Rect height="75" radiusX="5.62472" radiusY="5.99958" width="75" x="0.5" y="0.5">
			<s:fill>
				<s:SolidColor color="#494848"/>
			</s:fill>
			<s:stroke>
				<s:SolidColorStroke caps="none" joints="miter" miterLimit="10" weight="1"/>
			</s:stroke>
			<s:filters>
				<s:GlowFilter alpha="0.56" blurX="7.5" blurY="7.5" color="#777777" inner="true" quality="2" strength="2"/>
			</s:filters>
		</s:Rect>
		<s:Group x="22" y="28">
			<s:Line x="0" xFrom="37" y="14"/>
			<s:Path data="M 36.785 11.654 L 23.489 11.654 L 22.785 11.654 L 22.785 0 L 0 13.154 L 22.785 26.309 L 22.785 14.654 L 23.489 14.654 L 36.785 14.654 L 36.785 11.654 Z" winding="nonZero" x="0.215" y="0.346">
				<s:fill>
					<s:SolidColor color="#FFFFFF"/>
				</s:fill>
			</s:Path>
		</s:Group>
	</s:Group>
</s:Application>

FXG

FXG est un format graphique XML d'échange basé sur la plate-forme Flash. Les autres outils qui connaissent FXG sont Adobe Illustrator et Adobe Photoshop. Vous pouvez créer des éléments graphiques avec ces outils et les exporter sous FXG et les utiliser dans Flex.

Vous ne pouvez pas utiliser le langage FXG à l'intérieur de documents ou composants MXML; à la place, vous définissez des fichiers fxg séparés que vous référencez en MXML. La balise racine d'un document FXG est toujours <Graphic> et il ne peut y avoir qu'un seul noeud <Graphic> dans un document FXG. Par exemple, vous pouvez définir un fichier AlphaMaskComponent.fxg:

<?xml version="1.0" encoding="utf-8"?>
<!-- /comps/AlphaMaskComp.fxg -->
<Graphic xmlns="http://ns.adobe.com/fxg/2008" version="2">
	<Ellipse width="400" height="200" maskType="alpha">
		<mask>
			<Group>
				<Rect width="100" height="100">
					<fill>
						<SolidColor alpha="0.1"/>
						10
					</fill>
				</Rect>
			</Group>
		</mask>
		<fill>
			<SolidColor color="#FF00FF"/>
		</fill>
	</Ellipse>
</Graphic>

Et l'utiliser en MXML comme ceci:

<?xml version="1.0" encoding="utf-8"?>
<s:Application
	xmlns:fx="http://ns.adobe.com/mxml/2009"
	xmlns:mx="library://ns.adobe.com/flex/mx"
	xmlns:s="library://ns.adobe.com/flex/spark"
	xmlns:comps="comps.*">
	<comps:AlphaMaskComponent/>
</s:Application>

Beaucoup d'éléments FXG ont des équivalents en dessins MXML bien que des éléments FXG ne supportent qu'un sous-ensemble des attributs pris en charge par des balises de dessins MXML.

Quelles sont les différences et similitudes entre FXG et les dessins MXML ?

  • Les deux sont utilisés pour créer des dessins dans les applications Flex.
  • FXG génère des dessins compilés (le modèle de rendu FXG suit de très près le modèle de rendu Flash Player 10, et le compilateur optimise FXG directement dans les balises SWF comprises nativement par le lecteur Flash). Les dessins MXML sont des graphiques rendus à l'exécution (le compilateur Flex effectue une transformation en ActionScript qui est transformé ensuite en code binaire ActionScript). Ainsi FXG est hautement optimisé par rapport à un même dessin créé en utilisant des dessins MXML.
  • Namespaces: FXG utilise son propre namespace (http://ns.adobe.com/fxg/2008), quand les dessins MXML utilisent le namespace du document (généralement le namespace Spark).
  • FXG est hautement optimisé lors de la compilation, mais comme résultat, il ne peut pas être changé lors de l'exécution. Ainsi si vous voulez l'utiliser pour personnaliser un bouton, vous ne serez pas en mesure d'ajouter des couleurs différentes pour le fond de chaque Etat (over, disabled, up et down). FXG ne permet pas non plus la liaison de données ni la gestion des événements.

En savoir plus