Adobe^® Flex^™ Tutorial

Voici une technique très intéressante permettant d'embarquer (embedding) un fichier JS dans un SWF pour pouvoir ensuite appeler des fonctions JS qui vont réagir avec le conteneur HTML. J'ai découvert cette technique ce matin (comme quoi on en apprend tous les jours) sur le blog de Kenny Bunch.

Cela peut être très intéressant pour des applications embarquées (comme les players Youtube & co). Dans ce cas-là, on ne peut pas modifier la page qui va accueillir le SWF pour rajouter une balise <script>, il faut donc trouver une autre solution.

La solution de Kenny Bunch est en fait plutôt simple et consiste à embarquer le fichier JS comme une ressources binaire grâce au metatag Embed.  Cette ressource est conservée dans un objet de type Class. Il suffit ensuite d'instancier cette Class, de récupérer la représentation en String de cette instance, et envoyer cette String à la page en utilisant un eval JavaScript.

Voici un exemple d'utilisation de cette technique. On a un fichier JS "hello.js" qui contient une fonction hello qui fait simplement un alert JS:

function hello(){
	 alert("hello");
}

Créons maintenant le fichier ActionScript qui va embarquer le JS dans le SWF, l'écrire dans la page et appeler la fonction hello:

package
{
	import flash.display.Sprite;
	import flash.external.ExternalInterface;
	public class EmbeddedJavaScriptExample extends Sprite
	{
		// embed the JavaScript into the SWF
		[Embed(source="hello.js", mimeType="application/octet-stream")]
		// create a class that can instantiate the JavaScript for embedding
		private static const HelloJS:Class;
		public function EmbeddedJavaScriptExample()
		{
			if (ExternalInterface.available)
			{
				// embed the JavaScript to the page
				ExternalInterface.call("eval", new HelloJS().toString());
				// the embedded JavaScript has a function call named hello
				// now that it has been embedded to the page call it
				ExternalInterface.call("hello");
			}
		}
	}
}

• Flex External Interface – Utilisation générale d'ExternalInterface
• Flex Tips – Connaître le navigateur utilisé par l'application Flex (IE, Firefox, etc…)
• Flex External Interface – Changer le statut du Navigateur (exemple JS)
• Flex External Interface – Intégrer du HTML et un formulaire Flex
• Flex PopUp – Utiliser des icônes dans une Alert Flex