Flex : comprendre le databinding

Quand on découvre Flex et le databinding, on est dans un premier temps bluffé par la “magie” du mécanisme, puis très vite, on se retrouve confronté à des comportements totalement imprévisibles. Très souvent, les développeurs préfèrent alors se passer de cet outil.

Il y a quelques jours de ça, nous avons eu une discussion, avec mon collègue Benjamin Houdu, sur un cas de databinding extrêmement simple syntaxiquement mais dont le comportement était de prime abord étonnant :

 <?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" creationComplete="init()"> 	<mx:Script> 		<![CDATA[ 			[Bindable] public var varText:String; 			[Bindable] public var varXML:XML; 			public function init():void {   				varText = "<user><name>Zenika</name></user>";   				varXML = <user><name>Zenika</name></user>; 			} 		]]> 	</mx:Script> 	<mx:HBox> 		<mx:TextArea id="textareaText" text="{varText}" width="200" height="200"/> 		<mx:TextArea id="textareaXML" text="{varXML}" width="200" height="200"/> 	</mx:HBox> 	<mx:Button label="INIT" click="init()"/> </mx:Application>

Ce code lie respectivement deux variables (une variable de type String et une de type XML) à des composants TextArea ; dès que l’une des deux variables est modifiée, son composant associé est automatiquement mis à jour : c’est le principe même du databinding.
Si nous exécutons l’application ci-dessus, nous constatons que le comportement du databinding est différent en fonction du type de la variable. En effet, si nous venons à modifier chaque composant manuellement, et que nous réinitialisons les variables “bindées” à l’aide du bouton INIT, nous pouvons observer que seul le composant lié à la variable XML est remis à jour : le databinding de la variable de type String n’est pas pris en compte. Pour comprendre cela, il suffit d’aller au-delà de l’apparente magie du databinding.

En effet, il n’y a rien de magique dans le databinding…pour s’en convaincre le compilateur Flex nous fournit un paramètre fort utile : le paramètre keep-generated-actionscript. Ce paramètre permet de récupérer l’ensemble du code généré par le compilateur. On peut alors se rendre compte que pour une annotation Bindable, plus d’une centaine de lignes de code est générée par Flex ! Et c’est dans ces lignes de code que se trouve la solution à notre mystère et tout particulièrement dans la classe BindableProperty (fichier _Application-binding-generated.as ) qui est chargée par Flex de mettre à jour les composants liés. Si on regarde en détail le contenu de cette classe, on peut voir que la fonction d’affectation se présente ainsi :

 public function set varText(value:String):void { 	var oldValue:Object = this._236164340varText; 	if (oldValue !== value) 	{     		this._236164340varText = value;     		this.dispatchEvent(mx.events.PropertyChangeEvent.createUpdateEvent(this, "varText", oldValue, value)); 	} }

Une comparaison est effectuée avant d’affecter la valeur : si le nouveau contenu de la variable est différent du contenu précédent, le databinding est exécuté, sinon tout s’arrête là. Il faut noter que le databinding est unilatéral en Flex (ie. la modification par l’utilisateur des TextAreas n’entraîne pas la mise à jour des variables “bindées”). Aussi, quand nous appelons la fonction init(), nous ne faisons qu’écraser nos variables avec la même valeur que précédemment.
Or l’opérateur utilisé, la différence stricte (ie. !==) induit un comportement différent pour le Databinding de type String et celui de type XML. En effet, la différence stricte compare les variables String par valeur et les variables XML par référence (ie. emplacement mémoire). Ainsi, dans le cas qui nous intéresse, seule la variable XML apparait comme différente ; cela a pour conséquence que seul le composant XML est mis à jour. Afin de rétablir le comportement attendu pour le composant String, il suffit, par exemple, de vider la variable (ie. varText = null;) avant de la réinitialiser ou encore de mettre en place un databinding bijectif afin de répercuter les modifications manuelles au sein de la variable varText.
Il est donc fondamental de connaître le comportement du Databinding afin d’éviter des effets de bord imprévus et ainsi utiliser toute la puissance du langage Flex.