Flex – AMFPHP – connecter un service amfphp à une application Flex

by Posted on


On va voir comment installer et créer un service avec AMFPHP puis le mettre à disposition d’une application Flex, le dernier logiciel d’Adobe. Ce logiciel a été évoqué dans un article précédent concernant twitter via l’application TweetDeck, développé sous Flex. Cf. Sélectionner les meilleurs « twitts » sans se fatiguer.

En premier lieu, une rapide présentation rapide de AMFPHP en anglais .

AMFPHP

“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ès abondante documentation existe sur le site officiel : amfphp.org. En résumé, AMFPHP “serialize” des données et permet de les envoyer à Flash ou à Flex.

FLEX

Flex permet de créer des interfaces utilisateur enrichies avec un maximum de souplesse notamment en terme d’affichage puisqu’il existe énormément de “Components” prêts à l’emploi. Ces composants peuvent graphiquement être personnalisés à 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.

Pour votre application, vous pouvez accéder à deux vues en parallèle, la source MXML de votre projet dénommé “Source” ou un écran WYSIWYG appelé “Design” qui vous permettra de positionner et de paramétrer vos différents “components”. Une précision, si l’application créée sous Flex est vraiment aboutie, on parle de Rich Internet Applications (RIA), c’est le terme consacré. Ce n’est pas le cas de l’application de notre exemple !

L’espace de travail FLEX

Flex - AMFPHP - connecter un service amfphp à une application Flex

Faire fonctionner FLEX & AMFPHP ensemble

L’outil d’administration de AMFPHP est lui même construit avec Flex, cet outil en Flex vous permet de tester la validité du service que vous venez d’écrire.

Comment mettre en place un service AMFPHP, tout simplement en écrivant une “Class” dans un fichier .php. Eh oui, un service AMFPHP n’est rien d’autre qu’une “Class”. Le fichier .php est ensuite mis à disposition dans le répertoire /amfphp/service/ compris dans l’arborescence de répertoires de AMFPHP. Pour information, les concepteurs de AMFPHP ont intentionnellement laissé un fichier place_services_here.txt pour indiquer où le fichier devait être déposé.

L’arborescence de AMFPHP

On peut distinguer le répertoire service dans lequel on va placer notre “Class” écrit en php.
Flex - AMFPHP - connecter un service amfphp à une application Flex

L’administration de AMFPHP

Flex - AMFPHP - connecter un service amfphp à une application Flex

Pour rentrer directement dans le vif du sujet, voici en détail le code PHP de la “Class” que nous allons écrire pour AMFPHP.

Le code php correspondant au service HeService

	<?php
 
	/**
	 * Class HeService
	 */ 
	class HeService {
 
		/**
		* La fonction 1 de la Class HeService
		* @returns Cette fonction/method permet 
		* d'afficher "Bienvenue sur
		* le site social.hecube.net"
		 */
		  function SocialHecube () 
		  {
		  	return "Bienvenue sur le site social.hecube.net";
		  }
	}
 
	?>

Une règle tout simple doit s’imposer à vous en ce qui concerne la nomenclature du service et du fichier php de ce service. Le nom du fichier php doit être identique au nom de la classe contenu dans ce fichier. Ainsi dans notre exemple le fichier se nomme HeService.php, la “Class” se nomme HeService

1. Créer un nouveau projet sous Flex

Il faut sélectionner “Flex Project”
Flex - AMFPHP - connecter un service amfphp à une application Flex

2. Un projet nommé HeService

Vous pouvez conserver les sélections cochées ou rempies par défaut pour la localisation des fichiers, le nature du projet… Néanmoins, il vous faut choisir PHP pour la valeur Application server type
Flex - AMFPHP - connecter un service amfphp à une application Flex

3. La configuration du PHP Server

Nous allons publier sous MAMP. Il faut donc indiquer configurer le PHP Server avec des informations valides. Il faut indiquer le répertoire racine /Applications/MAMP/htdocs et l’adresse par défaut http://127.0.0.1 ou http://locahost ainsi que le répertoire de publication de votre choix dans le répertoire racine, par défaut FLEX vous propose le nom du service suivi du suffixe -debug, ce qui donne pour notre exemple /Applications/MAMP/htdocs/HeService-debug
Flex - AMFPHP - connecter un service amfphp à une application Flex

4. La vue du projet HeService

Par défaut, FLEX s’ouvre sur le fichier principal de l’application HeService. Toute votre application est contenue dans le HeService.mxml

Au début de la création du projet, il est totalement vide. Ce fichier ne contient que l’en-tête et les balises d’ouverture et de fermeture de l’application <mx:Application ...> et </mx:Application>

<?xml version="1.0" encoding="utf-8"?>
<mx:Application 
xmlns:mx="http://www.adobe.com/2006/mxml"
layout="absolute">
 
	<!-- Le code de l'application HeService va venir ici -->
 
</mx:Application>

HeService.mxml vu dans FLEX
Flex - AMFPHP - connecter un service amfphp à une application Flex

En détail, la vue “source” de HeService.mxml dans FLEX
Flex - AMFPHP - connecter un service amfphp à une application Flex

En détail, la vue “design” de HeService.mxml dans FLEX
Flex - AMFPHP - connecter un service amfphp à une application Flex

A cette étape, si vous exportez votre application, rien ne va se passer et vous obtiendrez la page bleue des applications Flex…

5. Le fichier de configuration du service HeService

Ce fichier de configuration est indispensable au bon fonctionnement de l’application HeService. Il va indiquer à l’application FLEX de s’adresser à AMFPHP pour obtenir les données à afficher. L’élément unique à 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 sera sans doute de la forme suivante : http://127.0.0.1/amfphp/gateway.php ou http://localhost/amfphp/gateway.php.

Flex - AMFPHP - connecter un service amfphp à une application Flex

Les propriétés du Flex Compiler incomplet
C’est à cet endroit que va être défini l’accès au fichier de config -services config.xml
Flex - AMFPHP - connecter un service amfphp à une application Flex

Les propriétés du Flex Compiler complet
Flex - AMFPHP - connecter un service amfphp à une application Flex

La source du fichier config.xml avec une adresse de gateway correcte
Il ne vous reste plus qu’à 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" />

 
	<?xml version="1.0" encoding="UTF-8"?>
	<services-config>
		<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://127.0.0.1/amfphp/gateway.php"
					class="flex.messaging.endpoints.AMFEndpoint" />
 
			</channel-definition>
		</channels>
	</services-config>

Flex - AMFPHP - connecter un service amfphp à une application Flex

Si vous souhaitez installer un environnement PHP-MySQL sur MAC ou sur PC, reportez-vous à l’un ou à l’autre de ces articles.

Le fichier MXML complet de l’application HeService

Avec le fichier de configuration, ce fichier constitue l’épine dorsale de l’application. Ce fichier détaille non seulement l’interface mais aussi les différentes opérations ou actions susceptibles d’être effectuées par l’application FLEX.

 <?xml version="1.0" encoding="utf-8"?>
<mx:Application 
	xmlns:mx="http://www.adobe.com/2006/mxml"
	creationComplete="init();"
	layout="horizontal"
	horizontalAlign="center"
	cornerRadius="0"
	 borderColor="#EEEEEE" borderStyle="solid"
	 backgroundGradientAlphas="[1.0, 1.0]"
	 backgroundGradientColors="[#FF0000, #FF0000]">
 
 
 
	<mx:RemoteObject 
	id="amfphp" 
	source="Hecube.HeService"
	destination="amfphp">
		<mx:method name="SocialHecube" result="onConnect (event);" />
  </mx:RemoteObject>
 
 
 
  <mx:Script>
<![CDATA[
// ActionScript file
import mx.controls.*;
import mx.rpc.events.*;
import mx.utils.ArrayUtil;
 
private function init ():void {
		amfphp.SocialHecube.send();
 
}
 
 
private function onConnect (e:ResultEvent):void {
		slogan.text = String (e.result);
 
}
 
]]>
</mx:Script>
  <mx:TextArea id="slogan" width="621"
  	height="84" fontSize="29" fontFamily="Arial"
  	color="#FF0000" cornerRadius="10"/>
 
</mx:Application>

L’application HeService en local…

Flex - AMFPHP - connecter un service amfphp à une application Flex

Une bonne vidéo d’introduction à la programation dans Flex

Pour aller plus loin

Published by Bruno Flaven

Bruno Flaven has been a Project Manager in a wide variety of Internet business applications both in Mobile and in Desktop for 20 years now. You can find more information about his professional life on his personal website (www.flaven.fr) or his linkedin profile: https://fr.linkedin.com/in/brunoflaven. He is currently working In France Media Monde (FMM) mostly on mobile applications (iOS and Android). He is currently P.O for a Backoffice project made with Symfony. He also made few trainings to facilitate the handling of the tools that he helps to make.

Related Posts