Adobe Flex Tutorial - Adobe Flex Tutorial

24juin/080

Flex External Interface – Intégrer du HTML et un formulaire Flex

Dans certains cas, vous voudrez afficher la majorité d'un formulaire en HTML mais vous voulez aussi utiliser des composants Flex pour un ou plusieurs éléments du formulaire. Par exemple vous voulez utiliser des sliders, des ColorPicker, ou comme dans cet exemple, un calendrier.

Dans cet exemple simple, vous allez créer un formulaire HTML simple avec une CheckBox et une petite application Flex embarquée. L'application Flex consiste en un composant DateChooser. La CheckBox déactive ou active simplement le DateChooser. De plus, cela met en évidence la nature synchrone d'ExternalInterface: l'application Flex fait une requête à la page HTML pour avoir un tableau des dates désactivées, qui seront désactivées dans le DateChooser.

Ici, le nom de projet Flex est ExternalInterfaceHTMLForm, c'est comme ça qu'il est identifié dans le HTML.

<html>
<script type="text/javascript">
<!--
function getApplicationReference(){
	if(navigator.appName.indexOf("Microsoft") != -1){
		return window.ExternalInterfaceHTMLForm;
	}else{
		return document.ExternalInterfaceHTMLForm;
	}
}
function getDisallowedDates(){
	return [new Date()];
}

-->
</script>
<body>
<input name="checkbox" type="checkbox" onchange="getApplicationReference().setEnabled(this.checked)"/>
  	<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
			id="ExternalInterfaceHTMLForm" width="250" height="250"
			codebase="http://fpdownload.macromedia.com/get/flashplayer/current/swflash.cab">
			<param name="movie" value="ExternalInterfaceHTMLForm.swf" />
			<param name="quality" value="high" />
			<param name="bgcolor" value="#869ca7" />
			<param name="allowScriptAccess" value="sameDomain" />
			<embed src="ExternalInterfaceHTMLForm.swf" quality="high" bgcolor="#869ca7"
				width="250" height="250" name="ExternalInterfaceHTMLForm" align="middle"
				play="true"
				loop="false"
				quality="high"
				allowScriptAccess="sameDomain"
				type="application/x-shockwave-flash"
				pluginspage="http://www.adobe.com/go/getflashplayer">
			</embed>
	</object>
</body>
</html>

Dans ce code HTML, j'ai mis en évidence les éléments clé à retenir. Vous pouvez voir que la CheckBox utilise un événement onChange pour appeler la méthode setEnabled de l'application Flex, en lui passant la valeur checked de la CheckBox. Cela veut dire que l'application doit enregistrer une méthode avec le nom setEnabled() en tant que callback ExternalInterface valide. On peut aussi voir que ce code définit plusieurs méthodes JavaScript appelées getApplicationReference et getDisallowedDates(). La première renvoie simplement une référence vers l'application Flex et l'autre récupère un tableau d'objets Date.

L'application Flex consiste en un seul document:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" horizontalAlign="center" verticalAlign="middle"
	initialize="initializeHandler(event)" width="250" height="250">
	<mx:Script>
		<![CDATA[
			private function initializeHandler(event:Event):void{
				var disallowedDates:Array = ExternalInterface.call("getDisallowedDates");
				calendar.disabledRanges = disallowedDates;
				ExternalInterface.addCallback("setEnabled", setEnabled);
			}

			public function setEnabled(value:Boolean):void{
				calendar.enabled = value;
			}
		]]>
	</mx:Script>

	<mx:DateChooser id="calendar" enabled="false"/>

</mx:Application>

Dans ce code, vous verrez que lorsque l'application s'initialise, elle appelle la fonction JavaScript getDisallowedDates() de manière synchrone, récupérant la valeur immédiatement. Elle utilise ensuite cette valeur (un tableau d'objets Date) pour spécifier un intervalle de dates désactivées pour l'instance du DateChooser. Dans cet exemple, on a pris [new Date()], donc seule la date du jour est grisée. Puisque ExternalInterface serialize et deserialize automatiquement les tableaux et objets Date, ce code fonctionne sans avoir à convertir les valeurs retournées.

Quand l'application s'initialise, elle enregistre aussi setEnabled() comme une callback ExternalInterface. C'est ce qui permet d'avoir une communication JavaScript-to-Flex.

La méthode setEnabled() prend le paramètre et l'assigne à la propriété "enabled" du DateChooser. Encore une fois, les valeurs de type Boolean sont automatiquement serialized et deserialized.

Voir l'application Flex communiquant avec la page HTML par l'intermédiaire de JavaScript