Hola Mundo php con flex - Flex 3

OBSERVACION: amfPHP 1.9 es soportado hasta Php 5.2.xxx

Ejemplo a Elaborar:

Para conectar una aplicación Flex con PHP necesitamos un protocolo que pueda hablar los 2 idiomas que pueda hablar Flex y que pueda hablar PHP y aun más pueda traducir lo que habla uno para entender al otro.
AMF (Action Message Format) es un formato binario basando en SOAP (Simple Object Access Protocol). AMF fue creado para intercambiar datos entre aplicaciones Adobe Flash y bases de datos, básicamente usando RPC (Remote Procedure Call).
AMF contiene una estructura completa que contiene manejo de ERRORES y una RESPUESTA que estaremos esperando como un Objeto de ActionScript, esto quiere decir en pocas palabras que AMF al hacer una petición puede devolver 2 cosas una respuesta en el evento RESULT y si en dado caso exista un error en la trasmisión de datos o simplemente no existe lo que estamos buscando el error se devolverá en el evento FAULT.
AMF por ser un formato binario tiende a ser más rápido en la comunicación que el paso POST o GET de PHP o el enviar un XML a php interpretarlo y devolver un XML e interpretarlo en Flash.
SOAP, es un protocolo para mandar información estructurada implementada en Web Services, que sirve para hacer RPC para la negociación y recepción de mensajes.
En este ejemplo veremos cómo conectar FLEX con PHP mediante AMFPHP, creando un simple servicio web en el cual mandaremos un mensaje y recibiremos el mismo mensaje en FLEX.




Lo primero que necesitamos es la carpeta de AMFPHP que la podemos encontrar en esta dirección http://sourceforge.net/project/showfiles.php?group_id=72483&package_id=72363&release_id=541961 y podemos bajarla de cualquiera de los dos espejos.

Luego necesitaremos un Servidor Web, yo siempre he usado WAMP y me a funcionado muy bien ya que tiene MySQL , APACHE y PHP y es todo lo que necesitamos. Se lo pueden bajar de la siguiente dirección http://www.wampserver.com/en/download.php

Una ves instalado WAMP tendremos un icono al lado de nuestro reloj del sistema en forma de un semi circulo blanco con negro.

Y también tenemos nuestro Servidor en la siguiente dirección C:/wamp/www donde colocaremos todas nuestras páginas .php .html .asp Etc…

Luego una vez descargado AMFPHP colocaremos la carpeta dentro de WWW la cual nos permitirá acceder a nuestros, servicios vía WEB, creando así nuestro primer WEB SERVICES. Pero aun nos queda mucho camino por recorrer.

Para probar que AMFPHP esté funcionando correctamente dentro de nuestro Browser colocamos http://localhost/amfphp/gateway.php y recibiremos un mensaje “amfphp and this gateway are installed correctly.”
Y procedemos al darle al LINK que dice “Load the service browser” que es lo mejor que se a podido inventar AMFPHP que es un brower de WEB SERVICES donde podemos probar nuestros servicio debugearlos y hasta generar códigos que funcionan en FLX y FLASH para los que SOMOS un poco Flojos al momento de programar.

Una vez dentro de nuestro Services Browse vemos que no hay ningún tipo de servicios asociados al Explorador.

Por lo que crearemos un servicio llamado HelloWorld.php, tenemos que tener mucho cuidado en colocar .php y no cualquier otro tipo de extensión y lo vamos a colocar en la siguiente dirección C:\wamp\www\amfphp\services

Abrimos HelloWord.php con un editor de texto y echamos nuestras funciones la cual constara de una función que recibe un parámetro y devolverá el mismo parámetro pero con un texto concatenado el cual será “USTED ESCRIBIO: ”.

El código de HelloWord.php:

<?php
class HelloWorld
{
function HelloWorld(){    
}

function say( $mensaje )
{
return 'USTED ESCRIBIO: ' . $mensaje ;
}
}
?>

Una vez que cuadramos nuestro código recargamos la pagina y veremos que nuestro servicio HelloWord aparece en nuestro Explorador de servicios para probarlo hacemos click sobre HelloWord y nos presentara una entrada de texto donde escribiremos “HOLA MUNDO” y nos responderá “USTED ESCRIBIO: HOLA MUNDO”.

Si todo se ha hecho bien podemos seguir ahora con la programación de un simple programa en Flex. Abriremos Eclipse y crearemos un nuevo Proyecto que tenga como servicio a PHP.
Entonces en Eclipse vamos a FILE -> NEW -> FLEX PROJECT

Le damos un nombre al proyecto, una vez que llenamos los campos le damos a siguiente “NEXT”. Creamos una carpeta en “C:\wamp\www” la cual llamaremos PRUEBAS y nos quedara la siguiente dirección “C:\wamp\www\Pruebas”. y le decimo a eclipse que compile todo a esta carpeta.

Bueno ya toda la configuración esta, ahora, manos a la obra.

Vamos a crear un texto de entrada donde podremos escribir el mensaje que queramos, crearemos un Botón el cual se encargara de enviar la información que queramos a PHP y luego crearemos un texto de Salida el cual se encargara de leer lo que PHP nos allá mandado.

Codigo tutorialAMFPHP.mxml

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" >
<mx:Script>
<![CDATA[
import mx.rpc.events.FaultEvent;
import mx.rpc.events.ResultEvent;

private function onClick():void{
amf.say.send(myText.text);
}

private function handlerResult(e:ResultEvent):void{
outText.text = String (e.result);
}
private function handlerFault(e:FaultEvent):void{
outText.text = String (e.message);
}

]]>
</mx:Script>
<mx:RemoteObject
id="amf"
source="HelloWorld"
destination="amfphp">
<mx:method name="say" result="handlerResult(event);"  fault="handlerFault(event);"/>
</mx:RemoteObject>
<mx:VBox verticalGap="10" horizontalGap="10" paddingLeft="10" paddingTop="10">
<mx:HBox>
<mx:Label text="MENSAJE A ENVIAR ->"/>
<mx:TextInput id = "myText" />
<mx:Button click="onClick();" label="Enviar"/>
</mx:HBox>
<mx:HBox>
<mx:Label text="MENSAJE A LLEGAR ->"/>
<mx:TextArea id="outText" />
</mx:HBox>
</mx:VBox>
</mx:Application>

Una ves escrito el código esto no es todo lo que necesitamos, FLEX BUILDER no sabes nada de que existe AMFPHP entonces de algún modo se lo tenemos que decir mediante un archivo de configuración de SERVICIOS que es el que dice mira para comunicar PHP con FLEX usaremos AMFPHP.

Este archivo lo llamaremos SERVICES-CONFIG.XML y lo llenaremos con el siguiente código:

<?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="/amfphp/gateway.php" class="flex.messaging.endpoints.AMFEndpoint"/>
</channel-definition>
</channels>
</services-config>

Una ves que tengamos esta configuración puesta en muestra carpeta SRC vamos a tener que decirle al compilador que ese archivo esta hay de el siguiente modo, hacemos Click derecho en nuestro proyecto luego vamos a “PROPIEDADES” y en FLEX COMPILER en el espacio que dice ADDITIONAL COMPILER ARGUMENTS agregamos, no borramos nada solo agregamos un espacio y colocamos -services "services-config.xml"


Una ves hecho esto Estamos listo para Probar nuestro programa y comunicarnos con HelloWorld.php mediante WEB SERVICES.
Antes de terminar este tutorial, quiero hacer unas acotaciones MUY IMPORTANTES y se las presentare \en las siguientes imágenes.
Una acotación para esta imagen es Supongamos que tenemos una carpeta dentro de services llamada MyServices y nos queda C:\wamp\www\amfphp\services\MyServices y tenemos nuestro HelloWord.php dentro de esa carpeta en nuestro código justo donde dice SOURCE=”HelloWorld” colocaremos SOURCE=”MyServices.HelloWorld” para poder hacer referencia al mismo nada de MyServices/HelloWorld ni nada parecido.

En cuanto a los métodos podemos tener tantos métodos como dentro del HelloWold.php hallan.
En otras palabras, se colocarían en tantos tag de Method como funciones tengamos dentro de HelloWorld.php.

Y por ultimo
Esta imagen sale acotación para prevenir que si ustedes tienen AMFPHP EN OTRO LUGAR que no sea C:\wamp\www\amfphp entonces nuestro SERVICES-CONFIG.XML no nos va a servir por lo que el proyecto no va a funcionar tampoco.

Aquí les dejo todos los archivos y el ejemplo corriendo

Descargar Archivos:

• tutorialAMFPHP.mxml
• services-config.xml
• HelloWorld.php (CLIC DERECHO -> GUARDAR COMO ENLACE)

Ejemplo:

Saludos.