{"id":535,"date":"2009-05-05T22:54:00","date_gmt":"2009-05-05T21:54:00","guid":{"rendered":"http:\/\/flaven.fr\/?p=535"},"modified":"2013-09-27T15:22:08","modified_gmt":"2013-09-27T13:22:08","slug":"flex-amfphp-connecter-un-service-amfphp-a-une-application-flex","status":"publish","type":"post","link":"https:\/\/flaven.fr\/2009\/05\/flex-amfphp-connecter-un-service-amfphp-a-une-application-flex\/","title":{"rendered":"Flex – AMFPHP – connecter un service amfphp \u00e0 une application Flex"},"content":{"rendered":"


\n<\/p>\n

On va voir comment installer et cr\u00e9er un service avec AMFPHP puis le mettre \u00e0 disposition d’une application Flex, le dernier logiciel d’Adobe. Ce logiciel a \u00e9t\u00e9 \u00e9voqu\u00e9 dans un article pr\u00e9c\u00e9dent concernant twitter via l’application TweetDeck, d\u00e9velopp\u00e9 sous Flex. Cf. S\u00e9lectionner les meilleurs \u00ab twitts \u00bb sans se fatiguer<\/a>.
<\/p>\n

En premier lieu, une rapide pr\u00e9sentation rapide de AMFPHP en anglais .<\/p>\n

AMFPHP<\/h4>\n

“AMFPHP is a free open-source PHP implementation of the Action Message Format (AMF). AMF allows for binary serialization of Action Script (AS2, AS3) native types and objects to be sent to server side services. AMFPHP is challenged with implementing the entire AMF protocol to be an alternative to Flex Data Services (AMF3) and Flash Remoting (AMF0).” Une tr\u00e8s abondante documentation existe sur le site officiel : amfphp.org<\/a>. En r\u00e9sum\u00e9, AMFPHP “serialize” des donn\u00e9es et permet de les envoyer \u00e0 Flash ou \u00e0 Flex.<\/p>\n

FLEX<\/h4>\n

Flex permet de cr\u00e9er des interfaces utilisateur enrichies avec un maximum de souplesse notamment en terme d’affichage puisqu’il existe \u00e9norm\u00e9ment de “Components” pr\u00eats \u00e0 l’emploi. Ces composants peuvent graphiquement \u00eatre personnalis\u00e9s \u00e0 l’aide de “skins” faites en Flash. Une “skin” flex est tout simplement d’un assortiment de boutons en swf et d’une feuille de style CSS. <\/p>\n

Pour votre application, vous pouvez acc\u00e9der \u00e0 deux vues en parall\u00e8le, la source MXML de votre projet d\u00e9nomm\u00e9 “Source” ou un \u00e9cran WYSIWYG appel\u00e9 “Design” qui vous permettra de positionner et de param\u00e9trer vos diff\u00e9rents “components”. Une pr\u00e9cision, si l’application cr\u00e9\u00e9e sous Flex est vraiment aboutie, on parle de Rich Internet Applications (RIA), c’est le terme consacr\u00e9. Ce n’est pas le cas de l’application de notre exemple !<\/p>\n

L’espace de travail FLEX<\/h4>\n

\"Flex<\/p>\n

Faire fonctionner FLEX & AMFPHP ensemble<\/h2>\n

L’outil d’administration de AMFPHP est lui m\u00eame construit avec Flex, cet outil en Flex vous permet de tester la validit\u00e9 du service que vous venez d’\u00e9crire.<\/p>\n

Comment mettre en place un service AMFPHP, tout simplement en \u00e9crivant une “Class” dans un fichier .php<\/code>. Eh oui, un service AMFPHP n’est rien d’autre qu’une “Class”. Le fichier .php<\/code> est ensuite mis \u00e0 disposition dans le r\u00e9pertoire \/amfphp\/service\/<\/code> compris dans l’arborescence de r\u00e9pertoires de AMFPHP. Pour information, les concepteurs de AMFPHP ont intentionnellement laiss\u00e9 un fichier place_services_here.txt<\/code> pour indiquer o\u00f9 le fichier devait \u00eatre d\u00e9pos\u00e9.<\/p>\n

L’arborescence de AMFPHP<\/h4>\n

On peut distinguer le r\u00e9pertoire service<\/code> dans lequel on va placer notre “Class” \u00e9crit en php.
\n\"Flex<\/p>\n

L’administration de AMFPHP<\/h4>\n

\"Flex<\/p>\n

Pour rentrer directement dans le vif du sujet, voici en d\u00e9tail le code PHP de la “Class” que nous allons \u00e9crire pour AMFPHP.<\/p>\n

Le code php correspondant au service HeService<\/code><\/h4>\n
\r\n\t<?php\r\n\r\n\t\/**\r\n\t * Class HeService\r\n\t *\/ \r\n\tclass HeService {\r\n\r\n\t\t\/**\r\n\t\t* La fonction 1 de la Class HeService\r\n\t\t* @returns Cette fonction\/method permet \r\n\t\t* d'afficher "Bienvenue sur\r\n\t\t* le site social.hecube.net"\r\n\t\t *\/\r\n\t\t  function SocialHecube () \r\n\t\t  {\r\n\t\t  \treturn "Bienvenue sur le site social.hecube.net";\r\n\t\t  }\r\n\t}\r\n\r\n\t?>\r\n\t<\/pre>\n
Une r\u00e8gle tout simple doit s’imposer \u00e0 vous en ce qui concerne la nomenclature du service et du fichier php de ce service. Le nom du fichier php doit \u00eatre identique au nom de la classe contenu dans ce fichier. Ainsi dans notre exemple le fichier se nomme HeService.php<\/code>, la “Class” se nomme HeService<\/code><\/strong><\/p>\n
1. Cr\u00e9er un nouveau projet sous Flex<\/h4>\n
Il faut s\u00e9lectionner “Flex Project”
\n\"Flex<\/p>\n
2. Un projet nomm\u00e9 HeService<\/code><\/h4>\n
Vous pouvez conserver les s\u00e9lections coch\u00e9es ou rempies par d\u00e9faut pour la localisation des fichiers, le nature du projet… N\u00e9anmoins, il vous faut choisir PHP<\/code> pour la valeur Application server type<\/code>
\n\"Flex<\/p>\n
3. La configuration du PHP Server<\/code><\/h4>\n
Nous allons publier sous MAMP. Il faut donc indiquer configurer le PHP Server<\/code> avec des informations valides. Il faut indiquer le r\u00e9pertoire racine \/Applications\/MAMP\/htdocs<\/code> et l’adresse par d\u00e9faut http:\/\/127.0.0.1<\/code> ou http:\/\/locahost<\/code> ainsi que le r\u00e9pertoire de publication de votre choix dans le r\u00e9pertoire racine, par d\u00e9faut FLEX vous propose le nom du service suivi du suffixe -debug<\/strong>, ce qui donne pour notre exemple \/Applications\/MAMP\/htdocs\/HeService-debug<\/code>
\n\"Flex<\/p>\n
4. La vue du projet HeService<\/code><\/h4>\n
Par d\u00e9faut, FLEX s’ouvre sur le fichier principal de l’application HeService<\/code>. Toute votre application est contenue dans le HeService.mxml<\/code><\/h4>\n
Au d\u00e9but de la cr\u00e9ation du projet, il est totalement vide. Ce fichier ne contient que l’en-t\u00eate et les balises d’ouverture et de fermeture de l’application <mx:Application ...><\/code> et <\/mx:Application><\/code><\/p>\n
\r\n<?xml version="1.0" encoding="utf-8"?>\r\n<mx:Application \r\nxmlns:mx="http:\/\/www.adobe.com\/2006\/mxml"\r\nlayout="absolute">\r\n\t\r\n\t<!-- Le code de l'application HeService va venir ici -->\r\n\t\r\n<\/mx:Application>\r\n<\/pre>\n
HeService.mxml<\/code> vu dans FLEX<\/strong>
\n\"Flex<\/p>\n
En d\u00e9tail, la vue “source” de HeService.mxml<\/code> dans FLEX<\/strong>
\n\"Flex<\/p>\n
En d\u00e9tail, la vue “design” de HeService.mxml<\/code> dans FLEX<\/strong>
\n\"Flex<\/p>\n
A cette \u00e9tape, si vous exportez votre application, rien ne va se passer et vous obtiendrez la page bleue des applications Flex…<\/strong><\/p>\n
5. Le fichier de configuration du service HeService<\/code><\/h4>\n
Ce fichier de configuration est indispensable au bon fonctionnement de l’application HeService<\/code>. Il va indiquer \u00e0 l’application FLEX de s’adresser \u00e0 AMFPHP pour obtenir les donn\u00e9es \u00e0 afficher. L’\u00e9l\u00e9ment unique \u00e0 changer, c’est le chemin vers le fichier gateway.php de AMFPHP. Si vous avez fait une installation en local avec MAMP ou sur Easyphp, l’adresse de votre fichier gateway.php<\/code> sera sans doute de la forme suivante : http:\/\/127.0.0.1\/amfphp\/gateway.php ou http:\/\/localhost\/amfphp\/gateway.php.<\/p>\n
\"Flex<\/p>\n
Les propri\u00e9t\u00e9s du Flex Compiler<\/code> incomplet<\/strong>
\nC’est \u00e0 cet endroit que va \u00eatre d\u00e9fini l’acc\u00e8s au fichier de config -services config.xml<\/code>
\n\"Flex<\/p>\n
Les propri\u00e9t\u00e9s du Flex Compiler<\/code> complet<\/strong>
\n\"Flex<\/p>\n
La source du fichier config.xml avec une adresse de gateway correcte<\/strong>
\nIl ne vous reste plus qu’\u00e0 faire un copier-coller de cette adresse dans le fichier config.xml dans la balise <endpoint uri="http:\/\/127.0.0.1\/amfphp\/gateway.php" class="flex.messaging.endpoints.AMFEndpoint" \/><\/p>\n
\r\n\r\n\t<?xml version="1.0" encoding="UTF-8"?>\r\n\t<services-config>\r\n\t\t<services>\r\n\t\t\t<service id="amfphp-flashremoting-service" \r\nclass="flex.messaging.services.RemotingService" \r\nmessageTypes="flex.messaging.messages.RemotingMessage">\r\n\t\t\t\t<destination id="amfphp">\r\n\t\t\t\t\t<channels>\r\n\t\t\t\t\t\t<channel ref="my-amfphp"\/>\r\n\t\t\t\t\t<\/channels>\r\n\t\t\t\t\t<properties>\r\n\t\t\t\t\t\t<source>*<\/source>\r\n\t\t\t\t\t<\/properties>\r\n\t\t\t\t<\/destination>\r\n\t\t\t<\/service>\r\n\t\t<\/services>\r\n\t\t<channels>\r\n\t\t\t<channel-definition id="my-amfphp" \r\n\t\t\tclass="mx.messaging.channels.AMFChannel" >\r\n\t\t\t<endpoint uri="http:\/\/127.0.0.1\/amfphp\/gateway.php"\r\n\t\t\t\t\tclass="flex.messaging.endpoints.AMFEndpoint" \/>\r\n\r\n\t\t\t<\/channel-definition>\r\n\t\t<\/channels>\r\n\t<\/services-config>\r\n\r\n\t<\/pre>\n
\t\"Flex<\/p>\n
Si vous souhaitez installer un environnement PHP-MySQL sur MAC ou sur PC, reportez-vous \u00e0 l’un ou \u00e0 l’autre de ces articles.<\/p>\n