Bienvenido a Klr20mg

Cronicas de un desarrollador

Actualmente soy Jefe de Desarrollo del area Flash en Sapotek de México en la cual trabajo desde hace mas de 4 años. Desarrollando aplicaciones en Flash para Web mas comúnmente llamadas (RIAs)

Estas en : Blog » [Tutorial] Flex2 y Amfphp (RemoteObject)
  • Decrease font size
  • Default font size
  • Increase font size
  • color default
  • color verde
  • color azul
[Tutorial] Flex2 y Amfphp (RemoteObject)
AddThis Social Bookmark Button
 Post2PDF Print
January 28th, 2007

Hace poco mas de un mes se anuncio el lanzamiento de la versión 1.9 alpha de amfphp, esta versión por fin soportaba AMF3 y con ello interactuar totalmente con Flex2. Y el pasado viernes se lanzo la versión beta 2, Así que es hora de que nos vayamos enterando de como funciona esta nueva versión =)

1.Descargar e Instalar Amfphp 1.9 beta 2.

Descarga el archivo zip de amfphp 1.9, descomprimelo y sube el folder amfphp a algún lugar de tu servidor, el mejor sitio seria el directorio principal de tu sitio. Para comprobar que todo esta correcto haremos la vieja pero siempre efectiva comprobación. En tu navegador escribe la dirección que apunte hacia el archivo gateway.php

Si el folder de amfphp se encuentra en el folder raíz de tu sitio entonces la dirección seria:

http://www.tusitio.com/amfphp/gateway.php

Si todo sale bien debes de ver un mensaje como este.

“amfphp and this gateway are installed correctly. You may now connect to this gateway from Flash.

Note: If you're reading an old tutorial, it will tell you that you should see a download window instead of this message. This confused people so this is the new behaviour starting from amfphp 1.2.

View the amfphp documentation

Load the service browser”

2. Crear nuestro primer servicio.

HelloWorld.php

PLAIN TEXT
PHP:
  1. <?php
  2.  class HelloWorld
  3.  {
  4.     public function SayHi()
  5.     {
  6.        return "Hi there. =)";
  7.     }
  8.  }
  9. ?>

Si ya habías trabajado con una versión vieja de amfphp te darás cuenta que $this->methodTable se ha eliminado de la estructura de la clase.

$this->methodTable era utilizado para asignar las propiedades de las funciones, sobre todo la descripción, y la forma de acceso, esto ultimo para saber si se podría acceder a la función de forma remota o solo local.

En esta nueva versión como dije antes $this->methodTable dejo de usarse. Ahora esta nueva versión de amfphp asume que todas las funciones pueden accederse remotamente a menos que el nombre de la función comience con guion-bajo “_” o la función sea declarada como privada, esta ultima opción solo esta disponible en php5.

Un ejemplo HelloWorld2.php

PLAIN TEXT
PHP:
  1. <?php
  2.  class HelloWorld
  3.  {
  4.     public function SayHi()
  5.     {
  6.        return "Hi there. =)";
  7.     }
  8.     private function connectDB()
  9.     {
  10.        //PHP5
  11.        //Solo se puede ejecutar desde la misma clase
  12.     }
  13.     function _localMethod()
  14.     {
  15.        //PHP4
  16.        //Esta funcion tambien sera accesible desde la misma clase unicamente
  17.     }
  18.  }
  19. ?>

3. Configurar Flex2 para trabajar con amfphp

Debemos crear un proyecto básico en Flex.

project1

project2

Ahora necesitamos crear un archivo de configuración para que flex sepa donde buscar nuestros servicios de amfphp.

Para ello creamos el archivo services-config.xml con la siguiente estructura

PLAIN TEXT
XML:
  1. <?xml version="1.0" encoding="UTF-8"?>
  2. <services-config>
  3.     <services>
  4.         <service id="amfphp-service" class="flex.messaging.services.RemotingService" messageTypes="flex.messaging.messages.RemotingMessage">
  5.             <destination id="amfphp">
  6.                 <channels>
  7.                     <channel ref="amfphpId"/>
  8.                 </channels>
  9.                 <properties>
  10.                     <source>*</source>
  11.                 </properties>
  12.             </destination>
  13.         </service>
  14.     </services>
  15.     <channels>
  16.         <channel-definition id="amfphpId" class="mx.messaging.channels.AMFChannel">
  17.             <endpoint uri="http://www.klr20mg.com/amfphp/gateway.php" class="flex.messaging.endpoints.AMFEndpoint"/>
  18.         </channel-definition>
  19.     </channels>
  20. </services-config>

La única linea que nos interesa y que debemos modificar es la siguiente:

PLAIN TEXT
XML:
  1. <endpoint uri="http://www.klr20mg.com/amfphp/gateway.php" class="flex.messaging.endpoints.AMFEndpoint">

Modificando la ruta hacia donde esta nuestro archivo gateway y guardandolo en el folder raíz de nuestro proyecto.

Una vez que tenemos nuestro archivo, dar click derecho sobre el nombre del mismo e ir a propiedades. Se abrirá una ventana de propiedades, obviamente, seleccionamos del menú izquierdo la pestaña “Flex Compiler” y en la linea de “Argumentos adicionales de compilación” -s services “services-config.xml” y damos click en “Ok”

project3

Ahora ya estamos listos para trabajar con amfphp 1.9 y Flex.

4. Probando la conexión

Lo primero es subir nuestro servicio “HelloWorld.php” el cual creamos en el paso 2.

Este servicio debe de estar dentro del folder amfphp/services, dentro, puedes crear folders anidados sin ningún problema en este caso lo colocare en la carpeta Tutorials/HelloWorld.

Creamos una pequeña interfaz la cual constara de un un par de LinkButtuns, un TextArea contenidos dentro de un panel cuyos botones ejecutaran los métodos remotos de amfphp.

Algo así

PLAIN TEXT
XML:
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
  3.     <!-- Funciones que controlan los eventos del RemoteObject -->
  4.     <mx:Script>
  5.         <![CDATA[
  6.             import mx.rpc.events.FaultEvent;
  7.             import mx.rpc.events.ResultEvent;
  8.             public function onMethodResult(event:ResultEvent):void
  9.             {
  10.                 out_txt.text = "Result "+event.result
  11.                 out_txt.text += "\nDataType "+ typeof(event.result)
  12.             }
  13.             public function onServiceFault(event:FaultEvent):void
  14.             {
  15.                 out_txt.text = "Fault "+event.fault
  16.             }
  17.         ]]>
  18.     </mx:Script>
  19.     <!-- Declaracion del RemoteObject y sus metodos -->
  20.     <mx:RemoteObject
  21.         id="helloService"
  22.         source="Tutorials.HelloWorld.HelloWorld"
  23.         destination="amfphp"
  24.         fault="{onServiceFault(event)}"
  25.         showBusyCursor="true"
  26.     >
  27.        
  28.         <mx:method
  29.             name="SayHi"
  30.             result="{onMethodResult(event)}"
  31.         >
  32.         </mx:method>
  33.        
  34.        
  35.     </mx:RemoteObject> 
  36.     <!-- Layout general-->
  37.     <mx:Panel x="0" y="0" width="250" height="200" layout="absolute" title="Amfphp-RemoteObject">
  38.         <mx:LinkButton x="178" y="135" label="Fault" click="{helloService.invalidMethod.send()}"/>
  39.         <mx:LinkButton x="108" y="135" label="SayHi" click="{helloService.SayHi.send()}"/>
  40.         <mx:TextArea x="7" y="7" width="216" height="121" id="out_txt"/>
  41.     </mx:Panel>
  42. </mx:Application>

vamos a ver parte por parte.

PLAIN TEXT
XML:
  1. <mx:RemoteObject
  2.     id="helloService"
  3.     source="Tutorials.HelloWorld.HelloWorld"
  4.     destination="amfphp"
  5.     fault="{onServiceFault(event)}"
  6.     showBusyCursor="true"
  7. >
  8.    
  9.     <mx:method
  10.         name="SayHi"
  11.         result="{onMethodResult(event)}"
  12.     >
  13.     </mx:method>
  14. </mx:RemoteObject>

En este tag como se puede ver creamos nuestro RemoteObject los parámetros son:

id : El nombre con el cual haremos referencia
source: el path a partir del folder amfphp/services, donde se encuentra nuestro servicio en el servidor,
destination: el identificador seteado en el tag <destination> del archivo services-config.xml
fault: El método que sera ejecutado al momento de que ocurra un error.
showBusyCursor: Mientras dure la ejecución del método remoto flex mostrara el cursor de ocupado

Dentro del tag RemoteObject debemos agregar los métodos a los cuales vallamos a acceder desde Flex y definir la función que se ejecutara cuando el método se haya ejecutado con éxito.

Esto lo hacemos definiendo el tag <mx:method>

PLAIN TEXT
XML:
  1. <mx:method
  2.     name="SayHi"
  3.     result="{onMethodResult(event)}"
  4. >
  5. </mx:method>

los parámetros son:

name: El nombre del método que se ejecutara, que es el mismo que tenemos en nuestro servicio.
result : asignamos la función que se ejecutara cuando el método remoto se ejecute.

Por ultimo, debemos ejecutar dichos métodos desde nuestra interfaz, en este ejemplo se ejecutan mediante un LinkButton

PLAIN TEXT
XML:
  1. <mx:linkbutton x="108" y="135" label="SayHi" click="{helloService.SayHi.send()}">

Al momento de dar click enviamos la petición de ejecución del método SayHi que esta definido dentro del RemoteObject helloService, simple cierto? ;)

Este es el resultado final.

Aqui estan los archivos completos del proyecto. helloworld-amfphp19.zip

Con esto podemos comenzar a trabajar y a aprovechar todas la ventajas que amfphp nos ofrece.

Cheers. 8)

Entradas Relacionadas

Comentarios

9 Comentarios en “[Tutorial] Flex2 y Amfphp (RemoteObject)”

muy bueno, simple y sencillo, aunq me acostumbre mucho a amfphp, ahora con AMF3 las cosas son mas simples y mas con flex :D

muy buen tuto kike

eldervaz escribio el 1-February-2007 a las 7:38 pm

Muy bueno el tutorial ... sin enbargo me han sergido un par de inconvenientes a la hora de enviar objetos desde la interfaz de flex hacia los servicios en php ... los objetos salen nulos

Alejandro escribio el 22-February-2007 a las 10:44 pm

A mi tampoco me funciona. Parece ser que flex no encuentra la ruta de services-config.xml correctamente y no conecta con amfphp. He tenido que adptar la clase de php para que funcione con php4.
No sé qué hacer para solucionar lo del service-config.

Saludos.

javi escribio el 26-February-2007 a las 7:06 am

Solucioné el problema dejando la ruta así:
-services “/services-config.xml”
Había que añadirle una barra al inicio de la ruta.
Para quien le sirva...
Saludos.

javi escribio el 27-February-2007 a las 7:11 am

Muchas gracias por este tutorial, está muy sencillo y práctico.

En cuanto a lo de la ruta del archivo de configuración, a mi me funcionó quitando las comillas del nombre de archivo, así:

-services services-config.xml

José Ríos escribio el 20-April-2007 a las 1:07 pm

hola que tal, esta muy práctico a el tutorial, aunque si me dejaste con una duda, si Patrick omitio el method Table quieres decir que ya no hay forma de especificar roles? en mi ipinion creo que solian ser utiles (de vez en cuando) pues si bastante utiles, ya rebice el blog de Patrick pero no encontre nada mas al respecto alguna idea?

Andres Santos escribio el 14-May-2007 a las 11:56 pm

Hola como andan, soy nuevo en flex y amfphp y me surgió este problema cuando quise utilizar en mi localhost el AMFPHP. El tuto funciona cuando le pongo la direccion de
pero cuando le cambio por la local me sale esto:

Fault [RPC Fault faultString="Channel disconnected" faultCode="Client.Error.DeliveryInDoubt" faultDetail="Channel disconnected before an acknolwedgement was received"]

Tengo instalado Apache 2.2.3 + PHP 5.1.6

Por favor que alguien me ayude, yo creo que es un problema de configuracion de apache o php

Martin Lemos escribio el 15-May-2007 a las 5:52 pm

Hola que tal, escribe algo que tal vez les interese, con respecto a los Roles nuevos en AMFPHP 1.9

Andres Santos escribio el 16-May-2007 a las 7:35 pm

saludos, sería posible un tutorial o una indicación con amfphp 1.9b2m enviando datos desde flex (xml o string) a un servicio php ( flex >> amfphp )
gracias saludos.

marcelo escribio el 30-November-2007 a las 3:59 pm

Leave a Reply

[ Back ]

 Blog editado por:

Enrique Chavez aka Tmeister
Si los codigos de este sitio te han ayudado y gustas ayudar de alguna forma:

 Compra Links

 Suscribete


AddThis Social Bookmark Button

 Archivo

2008
2007
2006
2005
2004