« Découpez vos applications Flex en modules
Les jeux sur mobile: le marché français en pleine expansion »

Tutorial Flex 3 et AMFPHP

8 December 2007 par Julien LE PAPE

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 PHP AMFPHP


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

Pour faciliter ce tutorial, nous serons en local avec le serveur Apache de Wamp. Lancez votre serveur et commencez par tester son fonctionnement http://localhost. A la racine de notre serveur (www) nous allons créer un nouveau répertoire "Workspace" et dezipper l'archive AMPPHP à 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 :

Browser de AMFPHP

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 :
Flex 3 Navigateur

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.

Flex Build Path

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

Flex Compiler

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 :

Init Flex AMFPHP Clique sur le bouton => Resultat Service

Voyons maintenant le code source de la page :
HelloWorld.mxml

Le code source de l'exemple :
MTI-Blog-HelloWorld.zip

Tags: , , , , ,

Cet article a été publié le Saturday 8 December 2007 à 11:00 et est classé dans Autres, RIA/RDA. Vous pouvez en suivre les commentaires par le biais du flux RSS 2.0. Vous pouvez laisser un commentaire, ou faire un trackback depuis votre propre site.

13 commentaires pour “Tutorial Flex 3 et AMFPHP”

  1. Laulo dit :
    6 March 2008 à 16:35

    Et la 2ème partie ?
    La première étant parfait pour les débutants de mon genre, j’attends avec impatience la seconde partie !

  2. Lesieux dit :
    18 May 2008 à 22:47

    Merci pour le tuto, malheureusement ça coince et l’erreur est :
    unable to open “C\Program Files\Adobe\FlexBuilder3\sdks\3.0.0\frameworks\locale\en_US-services”C:\wamp\www\Worspace\HelloWorld\services-config.xml”
    Merci pour votre aide

  3. Lesieux dit :
    7 June 2008 à 8:06

    C’est bon ça marche, avec flex 3,
    -locale en_US -services “../services-config.xml”

  4. Grincheux dit :
    27 June 2008 à 15:31

    Je ne comprend pas ce tuto ! Il y a des fautes et s’amuser à corriger ou trouver où est l’erreur avant de tester n’est franchement pas génial…

    Je cite :
    Créons un fichier HelloWorld.php avec le code suivant :
    moi j’ai toujours appris que pour ouvrir le php il fallait faire <? ou <?php et non pas
    =====> Ici encore c’est quoi le délire ? Tu fermes une balise à la fin avec ‘<’, tu ne l’ouvres jamais ? Il manque quoi avant ton “class=” car franchement foutre des instruction foireuse c’est mauvais, je sais toujours pas quoi mettre dans ce fichier.

    Sérieusement, un peu de rigueur quand vous faites des tutos les gars… et faut pas s’étonner qu’il y ait que 3 posts alors que le sujet est intéressant.

  5. Patrice De Saint Steban dit :
    28 June 2008 à 13:00

    Bonjour Grincheux,

    Tous d’abord, merci pour vos commentaires.

    Pour répondre à vos questions, ce blog n’est pas écrit par une seule personne, mais par des étudiants durant leurs études. Cet article a été écrit par un étudiant de la promotion précédente et publié par celle-ci. L’équipe mise en place cette année pour animer ce blog, essaye de valider les articles, mais ne peut pas forcément tout corriger. En l’occurrence, le problème ici, ne venait pas du fait d’un manque de rigueur dans le tutoriel, mais d’un problème avec le plug-in qui s’occupe d’afficher le code avec la coloration syntaxique.

    Nous venons de corriger ces erreurs. Cela dit, Grincheux, ce n’était pas la peine décrire plusieurs commentaires en commençant à nous insulter ! Les commentaires sont modérés pour éviter les problèmes et le spam. Tes autres commentaires ne seront pas publiés, car n’ont pas d’intérêt. Cela dit, pour faire des reproches comme ça, tu pourrais les assumer et mettre une vraie adresse mail plutôt que te cacher derrière un pseudo.

    Pour ce qui est de la deuxième partie du tutoriel, l’étudiant qui avait écrit cet article, n’est plus dans l’école, nous avons demandé aux étudiants de cette année, si quelqu’un était capable d’écrire la suite. Un étudiant devrait s’en occuper dans le courant de l’été. Merci de votre patience.

  6. Martial dit :
    4 July 2008 à 12:56

    par pitié relisez-vous quand vous écrivez, toutes ces fautes ça fait mal aux yeux
    mais ne peut pas forcement tout corrigé -> corrigER
    plusieurs commentaire -> commentaireS
    à nous insulté -> insultER
    et mettre une vrai adresse -> une vraiE
    devrais -> devraiT

    je sais que c’est dur le français (surtout) pour des étudiants en informatique (j’en fais parti) mais faites un effort

    merci

  7. Tutoriel Flex 3 et AMFPHP (partie 2) | Blog MTI dit :
    17 September 2008 à 20:31

    [...] article est la suite du tutoriel précédent (Tutorial Flex 3 et AMFPHP), qui expliquait comment configurer AMFPHP (partie serveur) et le projet sous Flex Builder (partie [...]

  8. bfraboul dit :
    3 October 2008 à 22:18

    Félicitation pour ce travail,
    Les commentaires laissés sont lamentables et n’encouragent pas vraiment à continuer…Il est dommage d’être si peu reconnaissant du travail réalisé.
    Bravo encore à tous les auteurs.

  9. Thomas Pujolle dit :
    8 February 2009 à 18:16

    Bonjour à tous et merci pour ce super tuto :)
    Cependant il me semble qu’il y a une erreur dans le xml de config…quelqu’un peut-il confirmer? Pour que ça fonctionne chez moi j’ai du le corriger en :

    *

    Merci!

  10. jc dit :
    4 March 2009 à 12:41

    En effet le services-config.xml est faux.
    Il faut le remplacer par quelque chose dans ce genre la:

    …

    …

  11. jc dit :
    4 March 2009 à 12:43

    Le code XML ne passant pas, je te suggere d’aller voir le services-config.xml sur ce blog:
    http://groups.drupal.org/node/2768

  12. Arnaud dit :
    1 December 2009 à 23:52

    Une deuxième partie est annoncée au début de ce tutoriel, qu’en est-il ?

  13. nico dit :
    19 April 2010 à 21:16

    Bonsoir,

    super tuto. Après quelques adaptations, il m’a été aisé d’appeler mon RemoteObject.

Laisser un commentaire