Faire communiquer Flex (ActionScript) et le JavaScript avec ExternalInterface
2 déc. 2008
Par Jean Marie Macé - Exemples Flex - Lien permanent
Dans cet article je vais vous présenter rapidement comment appeler des fonctions JavaScript depuis votre animation Flash et inversement.
Il est tout à fait possible de passer des paramètres à une fonction JavaScript depuis notre animation Flash. En effet la méthode call de la classe ExternalInterface prend un nombre non définit de paramètre optionnel.
Voici donc comment communiquer le contenu d'un TextInput à notre page HTML et à une fonction JavaScript:
Voici, la fonction:
Maintenant voyons comment effectuer le chemin inverse, c'est à dire appeler une méthode ActionScript depuis une fonction JavaScript. Pour cela il faut préparer le terrain côté Flex pour lui indiquer qu'il est susceptible de recevoir des infos depuis le JavaScipt, pour cela à l'initialisation, il suffit d'ajouter une fonction callback(lors de l'event creationComplete par exemple):
Pour information la page index.template.html utilisée avec Flex Builder instancie l'application avec le nom du projet que vous avez créé.
Pour finir voici la démo:
Voici donc comment communiquer le contenu d'un TextInput à notre page HTML et à une fonction JavaScript:
private function onClick():voidNous transmettons donc à la fonction appelJSFromAS le contenu du composant textinput. il faut donc créer cette fonction côté JavaScript. Pour cela dans la page HTML qui instancie notre application nous l'ajoutons. Sous Flex Builder, lors de la création d'un projet Flex, il y a un dossier html-template qui contient le squelette de la page HTML qui sert à la génération de la page HTML finale. il s'agit de index.template.html, c'est ici que vous devez faire vos modifications, ainsi à cahque compilation le code JavaScript est bien présent sur votre fichier de sortie, sinon vous devrez réécrire après chaque compilation cette partie du code.
{
ExternalInterface.call("appelJSFromAS", this.textinput.text);
}
Voici, la fonction:
function appelJSFromAS(param)Et voila, une popup JavaScript apparait avec votre texte tapé depuis l'application Flex!
{
alert(param);
}
Maintenant voyons comment effectuer le chemin inverse, c'est à dire appeler une méthode ActionScript depuis une fonction JavaScript. Pour cela il faut préparer le terrain côté Flex pour lui indiquer qu'il est susceptible de recevoir des infos depuis le JavaScipt, pour cela à l'initialisation, il suffit d'ajouter une fonction callback(lors de l'event creationComplete par exemple):
ExternalInterface.addCallback("appelASFromJS", callBackASFromJS);Ainsi dès que Flex recevra un appel externe vers une méthode nommée appelASFromJS il la renverra vers la fonction callback callBackASFromJS. Il suffit alors de coder cette méthode:private function callBackASFromJS(param:String):voidVous remarquez que je prévois d'envoyer un paramètre depuis la fonction JavaScript vers la méthode ActionScript! Alors voyons à présent comment appeler cette méthode dans le code JavaScript, pour cela une simple ligne suffit, graçe au DOM, nous récupérons l'instance de notre application Flex et nous utilisons le nom de la méthode définit:
{
Alert.show(param);
}
document.CallJS.appelASFromJS("vous avez bien clické sur la fenêtre JavaScript");CallJS étant le nom donné à mon instance, et entre parenthèse le paramètre à passer. Et voila le tour est joué!Pour information la page index.template.html utilisée avec Flex Builder instancie l'application avec le nom du projet que vous avez créé.
Pour finir voici la démo:
Commentaires
Vous n'avez jamais eu de problème avec Safari ? (dernière version sur Windows).
OlivierJ'ai une application Flex qui utilise les ExternalInterface dans les deux sens et qui fonctionne très bien. Par contre une autre application Flex plante à tous les coups Safari.
Pourtant je ne fais rien de compliquer, juste recevoir ou envoyer une chaîne de caractère.
Je n'ai jamais faitt de test avec Safari sous windows ... as tu tenté de rechercher sur le web des problèmes similaires?
Jim_NastiqOui, j'ai cherché mais je n'ai rien trouvé de spécial.
Dans l'application qui plante je fais :
- un upload de fichier avec l'objet FileReference
- je récupère avec Zend_AMF l'url du fichier uploadé
- avec ExternalInterface.call('flexGetWebsiteUrl'); j'appelle une fonction javascript pour renseigner un champ de formulaire (et là ça plante Safari)
Dans l'autre application (celle qui fonctionne), je ne fais pas d'upload.
Et là je n'ai même plus le temps de faire des tests pour voir si le problème est lié avec l'upload... et je n'ai même pas encore pu testé sous mac...
Le problème est reproductible sous XPSP3 et Win7 RC (je n'ai pas testé d'autres versions).
En tout cas tout fonctionne bien sur IE6,IE7,IE8,Chrome 2,Opera 9.6x, Firefox 3.x.
OlivierIl n'y a que Safari 4.x qui plante, alors qu'il utilise le même plugin Flash que Firefox, Chrome, Opera.