Forums Développement Multimédia

Les formations Mediabox
Les formations Mediabox

Flex 4 en un jour - MXML 2009

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 13 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.

En raison des changements dans le langage MXML, un nouveau namespace a été crée. Dans ce chapitre, vous allez découvrir les nouvelles balises du langage MXML 2009 et les différents namespaces disponibles.

Namespaces

Le premier gros changement dans Flex 4 est la séparation du namespace pour le langage MXML du namespace pour la librairie de composants. Ainsi, maintenant vous spécifiez le namespace pour le langage MXML (2009 ou 2006) et pour la librairie de composants Spark, et pour la librairie de composants Halo si vous souhaitez utiliser une ou plusieurs de ces librairies. Cette séparation est nécessaire parce qu'il y a des composants avec le même nom dans les deux bibliothèques (par exemple Button, Label, etc)

Vous pouvez toujours utiliser le namespace 2006, mais ne pourrez pas utiliser des fonctionnalités de Flex 4 (comme les nouveaux composants, le moteur d'états, ou les modes de mise en page) avec lui. Cependant, vous ne pouvez pas mélanger les namespaces du langage dans le même document, il est possible d'avoir les documents qui utilisent MXML 2009 et autres documents qui utilisent MXML 2006.

Voici les principaux namespaces de Flex 4:

  • Declaration langage MXML
    xmlns:fx="http://ns.adobe.com/mxml/2009"
  • Composants Halo(incluant tous les composants dans les packages mx.*, les composants de graphiques de données, et les composants de visualisation de données):
    xmlns:mx="library://ns.adobe.com/flex/mx"
  • Composants Spark (incluant tous les composants dans les packages spark.* et les classes du framework de texte dans les packages flashx.*):
    xmlns:s="library://ns.adobe.com/flex/spark"
  • Les anciennes librairies et composants Flex 3 (quand vous ne voulez pas utiliser les nouveautés du langage ou les composants Spark):
    xmlns:mx="http://www.adobe.com/2006/mxml"

Par exemple:

<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">
	<fx:Style></fx:Style>
	<s:Button label=”This is a Spark button!”/>
	<mx:Button label=”This is a Halo button!”
</s:Application>

Si vous travaillez avec Flash Catalyst ou Adobe Illustrator / Photoshop pour créer des skins ou des applications Flex, vous pourriez voir d'autres espaces tels que:

xmlns:ai="http://ns.adobe.com/ai/2009"
xmlns:d="http://ns.adobe.com/fxg/2008/dt"
xmlns:flm="http://ns.adobe.com/flame/2008"

Ces namespaces sont aussi bien liés à FXG qu'utilisés en interne par Flash Catalyst, Flash Builder et Illustrator ou Photoshop.

Etats

Dans Flex 4, les états ont été fortement modifiés afin de rendre leur utilisation beaucoup plus simple. Si vous souhaitez utiliser les états dans un composant ou un document MXML, vous utilisez un tag <s:States> comme un enfant direct de la balise racine afin de déclarer un certain nombre d'états, et puis vous pouvez utiliser les attributs includeIn / excludeFrom sur n'importe quel élément pour contrôler si le composant est présent dans un état donné. Vous pouvez changer l'état en utilisant la même propriété currentState. Par exemple:

<?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:states>
		<s:State name="default"/>
		<s:State name="report"/>
		<s:State name="form"/>
	</s:states>
	<s:CheckBox label="Checkbox" includeIn="report, form"/>
	<s:TextInput excludeFrom="form"/>

En outre, vous pouvez définir la valeur pour tout attribut d'un composant MXML par suffixation avec l'attribut .state-name:

<s:CheckBox label.default ="Checkbox"
			label.report=”Report Name: ”
			label=””/>

Une autre nouveauté est l'introduction de l'attribut stateGroups qui vous permet de regrouper et d'inclure un composant dans plusieurs états. Par exemple, regardez le code ci-dessous:

<s:states>
	<s:State name="A" stateGroups="G1"/>
	<s:State name="B" stateGroups="G2"/>
	<s:State name="C" stateGroups="G1"/>
</s:states><s:Button label="Button A" includeIn="G1"/>
<s:Button label="Button B" includeIn="G2"/>
<s:Button label="Button C" includeIn="G1"/>

et son résultat:

Nouvelles balises MXML

En plus des balises existantes (Binding, Component, Metadata, Model, Script, Style, XML, XMLList) il y a 6 nouvelles balises: Declarations, Definition, DesignLayer, Library, Reparent, and Private.

Declarations

Dans Flex 4, tous les composants déclarés qui ne sont pas des composants d'interfaces doivent être placés à l'intérieur d'une balise Declarations:

<?xml version="1.0"?>
<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">
	<fx:Declarations>
		<s:HTTPservice id=”myService”/>
	</fx:Declarations>
	<s:Button label=”My Button” />
</s:Application>

Si vous ne le faites pas, une erreur de compilation sera soulevée.

Library

Utilisez la balise <fx:Library> pour définir, en tant qu'enfant, un ou plusieurs dessins nommés <fx:Definition>. La définition, elle-même dans une bibliothèque, n'est pas une instance de ce graphique, mais il vous permet de référencer cette définition un certain nombre de fois dans le document comme une instance.

La balise Library doit être le premier enfant de la balise racine du document. Vous ne pouvez avoir qu'une seule balise Library par document.

Definition

Vous utilisez la balise <fx:Definition> à l'intérieur de la balise <fx:Library> quand vous voulez déclarer un composant d'interface à l'intérieur d'un fichier MXML, et que vous voulez l'utiliser n'importe où dans le fichier. C'est l'équivalent de définir le composant dans un fichier MXML ou ActionScript séparé.

Chaque définition créée doit avoir un attribut name défini. Il est utilisé afin d'ajouter le composant dans votre code. Le fait que vous définissiez un composant à l'aide de la balise de définition ne signifie pas que le composant sera instancié et ajouté à la liste d'affichage.

<?xml version="1.0"?>
<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">
	<fx:Library>
		<fx:Definition name="MySquare">
			<s:Group>
				<s:Rect width="100%" height="100%">
					<s:stroke>
						<s:SolidColorStroke color="red"/>
					</s:stroke>
				</s:Rect>
			</s:Group>
		</fx:Definition>
	</fx:Library>
 
	<mx:Canvas>
		<fx:MySquare x="0" y="0" height="20" width="20"/>
		<fx:MySquare x="25" y="0" height="20" width="20"/>
	</mx:Canvas>
</s:Application>

Chaque définition dans la balise Library est compilée dans une classe ActionScript distincte qui est une sous-classe du type représenté par le premier nœud dans la définition. Dans l'exemple précédent, la nouvelle classe est une sous-classe de mx.graphics.Group. La portée de cette classe est limitée au document. Elle devrait être traitée comme une classe ActionScript privée.

Private

La balise <fx:Private> fournit des informations sur les documents MXML ou FXG. La balise doit être un enfant de la balise racine et doit être la dernière balise du fichier. Le compilateur ignore tout le contenu de la balise <fx:Private>, cependant le contenu doit être valide XML. Le XML peut-être vide, peut contenir d'autres balises arbitraires, ou une chaîne de caractères.

<?xml version="1.0"?>
<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">
	<mx:Canvas>
		<fx:MySquare x="0" y="0" height="20" width="20"/>
		<fx:MySquare x="25" y="0" height="20" width="20"/>
	</mx:Canvas>
	<fx:Private>
		<fx:Date>10/22/2008</fx:Date>
		<fx:Author>Nick Danger</fx:Author>
	</fx:Private>
</s:Application>

Reparent

Vous utilisez la balise <fx:Reparent> pour changer le conteneur parent d'un composant lors d'un changement d'état d'affichage:

<fx:Reparent target="targetComp" includeIn="stateName">

Target spécifie le composant cible, et includeIn spécifie l'état d'affichage. Quand l'état d'affichage courant est défini sur stateName, le composant cible devient un enfant du conteneur parent de la balise <fx:Reparent>.

<s:states>
	<s:State name="Parent1"/>
	<s:State name="Parent2"/>
</s:states>
<mx:HDividedBox height="25%" width="100%" borderStyle="inset">
	<mx:VBox id="VB1>
		<mx:Button id="setCB" includeIn="Parent1"/>
	</mx:VBox>
	<mx:VBox id="VB2">
		<fx:Reparent target="setCB" includeIn="Parent2"/>
	</mx:VBox>
</mx:HDividedBox>

Design Layer

La balise <fx:DesignLayer> est réservée à un usage interne. Par exemple, Flash Catalyst utilise cette balise.

Liaison de données bidirectionnelle

Quand vous liez une variable à une propriété d'un objet et qu'a chaque fois que la variable est mise à jour, l'objet met automatiquement à jour sa propriété et qu'à chaque fois que la propriété est mise à jour, la variable est automatiquement mise à jour, vous avez ce que l'on appelle une liaison de données bidirectionnelle.

Avec Flex 3, une liaison de données bidirectionnelle était possible en utilisant une combinaison d'accolades, d'instructions <mx:Binding>, et des appels à la méthode mx.binding.utils.BindingUtils.bindProperty().

Flex 4 introduit quelques raccourcis pour accomplir cette tâche. Les deux façons de spécifier une liaison de données bidirectionnelle sont:

  • Déclaration en ligne en utilisant la syntaxe @{bindable_property}
    <s:TextInput id="t1" text="@{t2.text}"/>
    <s:TextInput id="t2"/>
  • Dans le MXML
    <fx:Binding source="a.property" destination="b.property" twoWay="true”/>







Sommaire | Page suivante