Forums Développement Multimédia

Les formations Mediabox
Les formations Mediabox

Faire du Flash Remoting AMFPHP en AS3 avec Flex Builder 2

Compatible Flex Builder 2. Cliquer pour en savoir plus sur les compatibilités.Compatible ActionScript 3. Cliquer pour en savoir plus sur les compatibilités.Compatible PHP. Cliquer pour en savoir plus sur les compatibilités.Par mrvertigo (Thibault Monereau), le 02 août 2006

Le framework AS3 propose tout un tas de classes permettant d'appeler des services via http comme par exemple une page php qui génère du XML.

J'ai voulu migrer une application écrite en AS2 fonctionnant avec des méthodes PHP que Flash 7 appelait via Flash Remoting.

Flash Remoting, c'est un ensemble de codes permettant à Flash d'appeler facilement des méthodes PHP (ou provenant d'un autre langage) sans se préoccuper du typage des objets lors du transferts entre le serveur et l'animation côté client.

Ce tutoriel s'applique à décrire comment utiliser Flash Remoting avec AMFPHP en AS3 et ainsi pour migrer votre ancien travail AS1 ou AS2 vers Flex2 sans réécrire les méthodes serveur.

Ce tutoriel est réalisé et testé dans Flex Builder 2 (release 2.0.143459), sur win xp, avec le FlashPlayer 9.0.16.

Créer un nouveau projet Flex : FlashRemotingAS3

Dans Flex, faire un clic droit dans la fenêtre

Navigator > Nouveau Projet Flex. (Access data : cocher Basic) > Suivant > Nommer le projet FlashRemotingAS3 > Finish.

Vous devez avoir un fichier FlashRemotingAS3.mxml.

Installer amfphp sur votre serveur web

Récupérer amfphp sur http://www.amfphp.org.
Dézipper le fichier, il doit contenir 11 dossiers (actions, adapters, app, browser, debug, exception, extra, filters, io, services, util) et un fichier (gateway.php).

Nous allons baser notre exemple sur l'utilisation d'AMFPhp mais il est tout à fait possible d'utiliser d'autres solutions utilisant le protocol AMF (JAVA, .NET, etc..)

Configurer AMFPHP

Ouvrer le fichier gateway.php, et à la ligne 105, noter la présence du code :

$gateway->setBaseClassPath("services/");

Le répertoire services se trouve parmi les 11 dossiers ci-dessus, et il n'y a aucun fichier dedans.
C'est là, que vous mettez les fichiers contenant vos classes de services PHP. Ces fichiers de classes PHP proposeront des méthodes (PHP) qui pourront être appelées par Flash. Afin de simplifier, laissons par défaut ce dossier Services afin de ne pas modifier setBaseClassPath !

Créer un service PHP de test pour le tutoriel

Dans le dossier /services, créer un fichier de classe PHP nommé Sample.php et mettez le code suivant dedans :

<?
class Sample{
 
	// Constructeur
 
	function Sample(){
		$this->methodTable = array(
			"allerRetour" => array("access" => "remote")			
		);	
	}
 
	function allerRetour($pValeur){
		return "\nClient a envoyé : [".$pValeur."]\nLe Serveur l'a bien recu 
 
!!!";
	}
}
?>

Déployez les 11 dossiers plus le fichier gateway.php dans un dossier nommé “remoting” sur votre serveur PHP, en localhost par exemple.

Remarque : vous pouvez utiliser WAMP Server pour tester vos application en local.

C'est fini pour la partie serveur. Jusque là, nous avons :

1 - Installer les fichiers php permettant à la mécanique de remoting de fonctionner (appel depuis flash accepté par php, qui exécute les méthodes appelées, et renvoie leur retour à Flash de manière asynchrone).

2 - Créer un service nommé Sample, proposant une méthode nommée allerRetour, qui prend en paramètre une chaine de caractère(String) envoyée par Flash, et qui retourne cette même variable précédée du message “Client a envoyé : “ suivi de “Le Serveur l'a bien recu !!!”.

Ce test nous permettra de tester que l'appel serveur a bien été effectué.

Créer une classe AS3 permettant d'appeler des méthodes distantes

La classe AS2 mx.remoting.Service n'est pas disponible dans le framework AS3 ou dans la libray mx de Adobe.

Adobe fourni généreusement une classe équivalente : la classe RemotingConnection. Cette classe peut être récupérée sur le site DevNet de Adobe

Il faut maintenant créer une nouvelle classe dans le projet Flex que nous avons mi en place au début de ce tutorial : Bouton droit à la racine du projet dans le Navigator + Nouvelle Classe.

Vous allez créer la classe RemotingConnection. Copiez collez le code suivant :

package 
{
    import flash.net.NetConnection;
    import flash.net.ObjectEncoding;
 
    public class RemotingConnection extends NetConnection
    {
    public function RemotingConnection( sURL:String )
        {
            objectEncoding = ObjectEncoding.AMF0;
            if (sURL) connect( sURL );
        }
 
        public function AppendToGatewayUrl( s : String ) : void
        {
            //
        }
    }
}

Créer un MXML de test

Revenez dans Flex, et éditer la source du fichier FlashRemotingAS3.mxml. Nous allons mettre le minimum pour nous retrouver de suite dans une classe AS3 une fois le SWF lancé. Le sujet du tuto n'étant pas réellement le xml ni les composants, mais l'accès distants aux méthodes PHP.

Collez ce code :

<samples:SampleApplication 
	xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" 
	xmlns:samples="net.thibaultmonereau.samples.*" verticalAlign="middle">
</samples:SampleApplication>

la balise samples défini l'espace dans lequel je travaille pour le tutorial. Il est définit par l'attribut xmlns, et indique au compilateur que tous les tags <samples: trouvent leurs définitions de classes dans le dossier net/thibaultmonereau/samples/ contenu dans un des classpaths du projet.

Créer un dossier pour ranger les classes AS3 de l'espace de noms samples

Bouton droit sur la racine du projet, et créer l'arbo suivante : net/thibaultmonereau/samples

Bon, j'aurais pu mettre la classe AS3 de test à la racine …mais bon..j'aime bien ranger !!!

Créer la classe SampleApplication

Dans le mxml, j'ai mis un tag racine <sample:SampleApplication>. Cela signifie que le compilateur va aller chercher une classe nommée SampleApplication dans le package net.thibaultmonereau.samples. Créons cette classe.

Bouton droit sur le dossier samples, nouvelle classe ActionScript, nommée SampleApplication, elle hérite de la classe mx.core.Application.

Je propose un code “simple” : un champ texte ou l'on peut saisir un message, par exemple “bonjour”, et un bouton Envoyer. Au clic sur Envoyer, Flash appelle le service PHP nommé Sample, et sa méthode allerRetour en passant en paramètre le contenu du champ texte. Si l'aller retour fonctionne bien, une Alert Flash doit afficher onResult, Client a envoyé [Bonjour]. Le serveur l'a bien recue !!!

A la ligne 78 du code suivant, n'oubliez pas de changer www.monserveur.com par le nom de votre serveur (localhost, localhost:1234 ou le nom de votre serveur reel en ligne :-) )

package net.thibaultmonereau.samples
{
	import flash.events.KeyboardEvent;
	import flash.events.MouseEvent;
	import flash.net.Responder;
 
	import mx.containers.Panel;
	import mx.controls.Alert;
	import mx.controls.Button;
	import mx.controls.DataGrid;
	import mx.controls.Label;
	import mx.controls.TextInput;
	import mx.core.*;
	import mx.events.FlexEvent;
	import mx.skins.halo.HaloBorder;
	import mx.styles.StyleManager;
 
	public class SampleApplication extends Application
	{
 
		private var _input : TextInput = null;
 
		/**
		 * Fonction constructeur
		 * @param Aucun
		 * @return SampleApplication
		 */
		public function SampleApplication()
		{
			//TODO: implement function
			super();
			layout = "vertical";
			setStyle("borderSkin",mx.skins.halo.HaloBorder);			
			addEventListener(FlexEvent.APPLICATION_COMPLETE, doInit);
 
		}
 
		/**
		 * <br>Initialisation de l'Application
		 * @param e (FlexEvent)
		 * @return Void
		 */
		private function doInit(e:FlexEvent) : void {
			this.doDraw();
		}
 
		/**
		 * <br>Méthode de dessin de l'Application
		 * @param Aucun
		 * @return void
		 */
		private function doDraw() : void {
 
			var p : Panel = new Panel();
			p.title = "Saisissez un message à envoyer au serveur avec Flash Remoting, et AMFPHP ! ";
 
			var l : Label = new Label();
			l.text = "Votre message : ";
			var t : TextInput = new TextInput();
			this._input = t;
 
			var b : Button = new Button();
			b.label = "Envoyer";
			b.addEventListener( MouseEvent.CLICK, this.doSend );
			this.addChild(p);
			p.addChild(l);
			p.addChild(t);	
			p.addChild(b);
		}
 
		/**
		 * <br>Envoi à un service PHP une String, et affecte un callback 
 
(onResult, onFault) à cette requête
		 * @param e (MouseEvent)
		 * @return void
		 */
		private function doSend( e : MouseEvent ) : void {
 
			var	gateway : RemotingConnection = new  RemotingConnection( "http://www.monserveur.com/remoting/gateway.php" );
                gateway.call( "Sample.allerRetour", new Responder(onResult, onFault), this._input.text );
		}
 
		private function onResult ( result : Object ) : void {
			Alert.show("onResult\n" + result);
		}
 
		private function onFault ( fault : Object ) : void {
			var s : String = "";
			for( var i : String in fault ) {
				s+= i + " " + fault[i]  + "\n";
			}
			Alert.show("onFault\n"+s);
		}		
	}
}

Compiler et tester

Normalement, tout doit fonctionner. En cas d'erreur, une alert avec les détails de l'erreur doit s'afficher !

Déployer en ligne (si vous aviez testé en localhost).

Déployez le SWF et la page HTML qui va avec sur votre serveur (les services PHP ont été déployés précédement). Retester…ca donne ca : http://www.thibaultmonereau.net/samples/fp/fp9/FlashRemotingAS3/MonApplicatoin.html

C'est le premier tuto que je publie…alors en cas de problème écrivez moi sur le forum

Auteurs

media-box : mrvertigo.

Update : Mise à jour (version 1) par eKameleon :)