Tutorial Flex 3 et AMFPHP

L'objectif de ce tutorial est de réaliser une liste de contacts avec photo en utilisant les technologies Flex 3 et AMFPHP 1.9 Beta2.

Nous procèderons en deux étapes :
La première partie sera consacrée à l'installation et à la configuration de Flex et AMFPHP avec un "Hello World !!!" pour tester notre installation. Si vous avez déjà configuré votre environnement de travail, vous pouvez passer directement à la seconde partie.
La seconde partie rentrera plus en détails dans les interactions entre Flex et AMFPHP avec pour exemple l'affichage d'une liste de contacts avec photo provenant d'une base de donnée MySQL en utilisant les remoteObjects.

Nous aurons besoin de :

Flex 3 Beta 2
AMFPHP 1.9 Beta 2
Un serveur Apache (Wamp, EasyPHP etc...)

Première partie : Installation et Configuration de notre environnement de travail Flex et AMFPHP.

Pour faciliter ce tutorial, nous travaillerons en local avec le serveur Apache de Wamp. Lancez votre serveur et commencez par tester son fonctionnement à l'adresse suivante http://localhost. A la racine de notre serveur (www) nous allons créer un nouveau répertoire "Workspace" et dezipper l'archive AMFPHP à l'intérieur, le dossier devrait s'appeler "amfphp".

Pour vérifier les compatibilités, ouvrez l'url http://localhost/Workspace/amfphp/gateway.php, vous devez voir apparaître le message suivant : "amfphp and this gateway are installed correctly."

Nous pouvons maintenant coder notre premier service amfphp. Commençons par créer un nouveau dossier "mti-tutorial" représentant une nouvelle liste de services dans www/Workspace/amfphp/services, nous insèrerons tous nos nouveaux services dans ce dossier.

Créons un fichier HelloWorld.php avec le code suivant :

< ?php
/*** Class HelloWorld*/
class HelloWorld {
/*** First Function* @returns a string 'Hello World !!!'*/

function firstHello() {
return "Hello World !!!";
}
}
?>

Utilisons une fonctionnalite très intéressante de amfphp pour tester ces services qui est le browser en allant sur http://localhost/Workspace/amfphp/browser/

Voici un exemple de ce que vous devriez voir :

Notre premier service fonctionne, occupons nous maintenant de la partie Flex. Installez votre Flex Builder. Ensuite, créez un nouveau projet "HelloWorld" et rajoutez un fichier "services-config.xml" à la racine du projet. Ce fichier permettra à Flex 3 de savoir où chercher les remote methods.

Vous devez obtenir une arborescence comme ci-dessous :

Rentrez ce code dans votre fichier "services-config.xml" :

<services -config>
</services><services>
<service id="amfphp-flashremoting-service"
class="flex.messaging.services.RemotingService"
messageTypes="flex.messaging.messages.RemotingMessage">
<destination id="amfphp">
<channels>
<channel ref="my-amfphp"/>
</channels>
<properties>
<source>*</source>
</properties>
</destination>
</service>
</services>
<channels>
<channel -definition id="my-amfphp" class="mx.messaging.channels.AMFChannel">
<endpoint uri="http://localhost:80/Workspace/amfphp/gateway.php" class="flex.messaging.endpoints.AMFEndpoint"/>
</channel>
</channels>

Dans les propriétés du projet, vérifiez dans le "Flex Build Path" que le fichier "rpc.swc" est présent. Dans Flex3, il est mis par défaut mais ça ne coûte rien de vérifier car cette bibliothèque est celle qui va nous permettre de discuter avec notre serveur.

Configurons le compiler pour lui faire lire le fichier "services-config.xml" :

Comme nous utilisons une version Beta, nous n'avons pas -locale fr_FR.
Astuces : Vous pouvez écrire -services "services-config.xml" mais cette version Bêta a parfois du mal à localiser ce fichier donc nous mettons le chemin complet pour corriger cette erreur.

La partie configuration est maintenant terminée.

Nous allons créer un layout très simple avec un bouton et une zone de texte. Lorsque nous appuierons sur ce bouton, celui-ci fera appel au service défini coté serveur et se mettra en "écoute" d'une réponse positive ou non. En fonction de cette réponse, nous afficherons notre "Hello World !!!" ou un message d'erreur dans une Box.
Pour créer notre service dans le .mxml, il y a la balise RemoteObject dans laquel nous pouvons définir des méthodes.
myservice.getOperation('firstHello').send(); va être l'évènement marquant l'envoi d'informations au serveur, les fonctions définies dans la balise remoteObject se mettent en attente d'un event de la part du serveur.

Le résultat attendu :

Clique sur le bouton =>