Sakana labs

[FLEX] Data binding et gestion des données

J'ai découvert récemment le "data binding" avec Flex. Il s'agit de lier des données, cela permet une communication plus simple entre les composants. On peut par exemple lier une propriété à une source de donnée.

Pour faire simple et concret prenons le code mxml suivant :

<mx:application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
 <mx:textinput x="10" y="10" id="source" />
 <mx:label x="10" y="40" id="destination" text="{source.text}" />
 <mx:label x="20" y="40" text="Destination" />
 <mx:label x="20" y="14" text="Source" />
</mx:application>

Ce qui donne :

[kml_flashembed movie="http://labs.sakanadesign.com/wp-content/uploads/2007/12/example_1.swf" height="70" width="400" /]

L'exemple ci-dessus affiche un champ permettant d'introduire du texte et un composant label qui est "bindé" (lié) directement à la propriété texte de mon champ texte. Ainsi dès que je tape quelque chose dans le champ, cela s'affiche directement dans le label. Il existe trois façons de faire du Data binding avec Flex.

• La synthaxe utilisant simplement les {} pour préciser la source
• Le tag mxml<mx:Binding>
• La classe BindingUtils en actionscript 3

Même exemple en mxml (plus propre à mon sens puisqu'on sépare le code du contenu graphique) :

<mx:application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="400" height="70">
	<mx:binding source="source.text" destination="destination.text" />
	<mx:textinput x="160" y="10" id="source" />
	<mx:label x="160" y="40" id="destination" width="160" />
	<mx:label x="20" y="40" text="Destination" />
	<mx:label x="20" y="14" text="Source" />
</mx:application>

Même exemple à l'aide de la classe BindingUtils :

<mx:application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="400" height="70" initialize="bindingWithActionscript();">
	<mx:script>
		<!--[CDATA[
			import mx.binding.utils.BindingUtils;
			private function bindingWithActionscript():void{
				BindingUtils.bindProperty(destination, "text", source, "text");
			}
		]]-->
	</mx:script>
	<mx:textinput x="160" y="10" id="source" />
	<mx:label x="160" y="40" id="destination" width="160" />
	<mx:label x="20" y="40" text="Destination" />
	<mx:label x="20" y="14" text="Source" />
</mx:application>

On peut observer que dans la version actionscript il faut initialiser la méthode à l'aide de l'attribut "initialize" du tag application.

Ceci n'est qu'un aperçu rapide du Data binding dans Flex. J'essayerai de proposer d'autres exemples rapidement.