November 04, 2004

Tutorial

Para comenzar, veamos que es exactamente Flash Remoting:

Flash Remoting es una tecnología que te permite hacer llamadas o pedidos a lenguajes de backend... como PHP, .NET o ColdFusion, pero sin tener conocimiento de ellos. La manera en que se puede trabajar con estas llamadas es un poco similar a la integración de Flash con los Web Services, solo que es mucho mejor, ya que toda la información se manda en formato binario y serializada. Estas llamadas se les denomina Remote Procedure Calls (RPC) y la transferencia de datos es mediante objetos que tanto el lenguaje de servidor como flash comparten. Como bien dijimos, la información se manda en formato binario mediante AMF (Action Message Format) el cual es mas rápido de cargar que informacion en formato XML nativo o por medio de cadenas URL, Incluso es mas rapido que con los Web Services. Nosotros para este tutorial utilizaremos la versión open source AMFPHP el cual funciona con el lenguaje PHP. Porque? porque es gratuito :) . Como apunte hay que recordar, como bien comentamos, hay Flash Remoting para .NET, Coldfusion, ademas de Java, los cuales fueron desarrollados por Macromedia y sus licencias son algo costosas. Otra opción gratuita son las librerías para Perl de Flash Remoting que pueden encontrar aquí.

p>Ahora si, hagamos un listado de lo que necesitaremos en este tutorial


1.- Macromedia Flash MX 2004 Pro
2.- Los componentes de Flash Remoting que se pueden bajar desde aquí (hay que instalar tanto los de AS 2.0 como los de AS 1.0 para Flash MX 2004 Pro)
2.- Un servidor que nos permita usar PHP (por ejemplo, Apache)
3.- Las librerías de AMFPHP que se pueden descargar directamente desde aquí.
4.- Un editor de código como Bbedit (Mac), Ultraedit (Pc) o Dreamweaver (hibrido).

Ya con todos estos elementos preparados, veamos la instalación de Flash Remoting. Al momento que terminemos de descargar las librerías, encontraremos varios folders. El que nos interesa es el de flashservices, el cual contendrá todo el código necesario para poder lograr que se integre Flash Remoting entre PHP y Flash.
Coloquemos en un folder de nuestro servidor local lo siguiente: la carpeta flashservices, otra carpeta llamado services (la cual debemos crear), un documento llamado gateway.php (y que por el momento estará vacío) y un documento flash. Para comenzar construyamos nuestro servicio. Dentro de la carpeta services crearemos un archivo llamado HolaMundo.php con el editor de código que dispongamos y escribiremos lo siguiente:


&amp;lt;?php<br />
class HolaMundo{<br /> function HolaMundo(){<br /> $this-&amp;gt;methodTable = array(<br /> &amp;quot;hacerLlamada&amp;quot; =&amp;gt; array(<br /> &amp;quot;description&amp;quot; =&amp;gt; &amp;quot;Muestra un texto el cual sera introducido
como argumento&amp;quot;,<br /> &amp;quot;access&amp;quot; =&amp;gt; &amp;quot;remote&amp;quot;, <br /> &amp;quot;arguments&amp;quot; =&amp;gt; array (&amp;quot;arg1&amp;quot;)<br /> )<br /> );<br /> }<br /> function hacerLlamada($mensaje){<br /> return $mensaje;<br /> }<br />
}<br />
?&amp;gt;<br />


Y este archivo para que nos sirve? Pues es aquel que contendrá nuestro servicio. Es importante que el nombre que le pongamos a nuestra clase, sea exactamente el mismo nombre de nuestro archivo (o sea, que es case-sensitive, distingue entre mayúsculas y minúsculas). Dentro de la clase podremos ver una función llamada HolaMundo. Esta es la función constructora, o sea…el código que se correrá primero cuando se inicialize una instancia de la clase. Como requisito, esta función solo deberá tener un Array llamado methodTable, el cual contendrá toda la información acerca de los métodos de nuestro servicio. La parte de description hace referencia a la descripción de nuestro método, access es para especificar desde donde seria accesible el método (en este momento, esta propiedad no esta disponible funcionalmente en la utlima versión de AMFPHP, pero es recomendable escribirla, porque es una de esas cosas pendientes que se agregaran en el futuro). Por ultimo, arguments es para indicar cuantos argumentos acepta nuestro método del servicio. Toda esta información contenida en el Array methodTable es puramente descriptiva y realmente no afectara al servicio. Ya documentado todo esto…procedemos a escribir nuestro método hacerLlamada():

<br />
function hacerLlamada($mensaje){<br /> return $mensaje;<br />
}<br />

Aunque parezca que lo único que hace esta función devolver la información que le proveemos, en realidad pasan muchas cosas dentro de la librería AMFPHP.
Veamos nuestro archivo gateway.php (el cual deberá estar vacío en estos momentos). Este archivo contendrá la información necesaria para vincular nuestro folder de flashservices con nuestro servicio creado. Este el código que deberá tener:

<br />
&amp;lt;?php<br />
include &amp;quot;flashservices/app/Gateway.php&amp;quot;;<br />
<br />
$gateway = new Gateway();<br />
$gateway-&amp;gt;setBaseClassPath(&amp;quot;services/&amp;quot;);<br />
$gateway-&amp;gt;service();<br />
?&amp;gt;


La primera linea deberá contener la ruta al archivo Gateway.php el cual esta dentro de flashservices -> app . Si nuestro archivo gateway.php (que no es el mismo a Gateway.php) esta en el mismo folder que la carpeta flashservices, entonces la ruta es como la que mencionamos alla arriba. Este archivo gateway.php puede estar en cualquier lado en nuestro sitio, siempre y cuando la configuracion apunte correctamente al archivo Gateway.php. La tercera línea debe estar configurada asi: dentro de nuestro setBaseClassPath() tenemos que escribir la ruta donde este nuestro folder de services y el cual contiene el archivo HolaMundo.php. Es muy importante que las rutas apunten bien a nuestros servicios…si no, nuestra aplicación no funcionará correctamente.
Ahora si, veamos el código de actionscript. En el primer frame debemos poner lo siguiente:

<br />
import mx.remoting.Service;<br />
import mx.services.Log;<br />
import mx.rpc.RelayResponder;<br />
import mx.rpc.FaultEvent;<br />
import mx.rpc.ResultEvent;<br />
import mx.remoting.PendingCall;<br />
#include &amp;quot;NetDebug.as&amp;quot;<br />
mx.remoting.debug.NetDebug.initialize();<br />
var miLog:Log = new Log(Log.DEBUG, &amp;quot;logger1&amp;quot;);<br />
miLog.onLog = function(message:String) {<br /> trace(&amp;quot;mensaje--&amp;gt;&amp;gt;&amp;gt;&amp;quot;+message);<br />
};<br />
servicio = new Service(&amp;quot;http://localhost/amf/gateway.php&amp;quot;, miLog,
&amp;quot;HolaMundo&amp;quot;, null, null);<br />
var llamadas:Object = {onLlamadaData:function (msg:ResultEvent) {<br /> campo.text = msg.result;<br />
}, onLlamadaError:function (rs:FaultEvent) {<br /> mx.remoting.debug.NetDebug.trace({level:&amp;quot;None&amp;quot;, message:&amp;quot;hubo
un problema: &amp;quot;+fault.fault.faultstring});<br />
}};<br />
llamar.onRelease = function () {<br /> var resultado:PendingCall = servicio. hacerLlamada ("Hola Mundo");<br /> resultado.responder = new RelayResponder(llamadas, &amp;quot;onLlamadaData&amp;quot;,
&amp;quot;onLlamadaError&amp;quot;);<br />
}<br />
limpiar.onRelease = function () {<br /> campo.text = "";<br />
}<br />


Para esto, necesitamos crear un campo de texto llamado campo y dos botones, uno llamar y otro limpiar. Ademas debemos obtener las de Flash Remoting. Si instalaste los componentes de Flash Remoting las podras encontrar en windows -> other panels -> common libraries -> remoting . Son dos archivos….RemotingClasses y RemotingDebugClasses. Ambos arrastralos al escenario, y posteriormente borralos si asi lo quieres. Lo importante es que se hallen en la librería de nuestro documento flash. Ahora si, expliquemos el código pedazo por pedazo:

<br />
import mx.remoting.Service;<br />
import mx.services.Log;<br />
import mx.rpc.RelayResponder;<br />
import mx.rpc.FaultEvent;<br />
import mx.rpc.ResultEvent;<br />
import mx.remoting.PendingCall;<br />
#include &amp;quot;NetDebug.as&amp;quot;<br />


Aquí importamos todas las librerías necesarias para hacer funcionar Flash Remoting, no basta con arrastrarlas… se debe especificar

<br />
mx.remoting.debug.NetDebug.initialize();<br />


Inicializamos la clase NetDebug que serve para ver el estado de nuestro servicio y sus posibles errores

<br />
var miLog:Log = new Log(Log.DEBUG, &amp;quot;logger1&amp;quot;);<br />miLog.onLog = function(message:String) {<br /> trace(&amp;quot;mensaje--&amp;gt;&amp;gt;&amp;gt;&amp;quot;+message);<br />
};<br />


El objeto miLog nos mostrará el estado de nuestro servicio y como va el proceso. Cada vez que se reciba algo, el evento onLog se detonará y mostrará informacion acerca de la conexion

<br />
servicio = new Service(&amp;quot;http://localhost/amf/gateway.php&amp;quot;, miLog,
&amp;quot;HolaMundo&amp;quot;, null, null);<br />


Aquí creamos nuestro servicio, y apuntamos al mismo. El primer argumento es la ruta donde esta nuestro archivo gateway.php. El segundo es el objeto Log que mostrara el estado del servicio. En caso de que no queramos mostrar el estado, se puede dejar el argumento en null y borrar el código anterior (la creacion del objeto miLog y su evento). El tercer argumento es el servicio que queremos usar y que este debidamente definido. El cuarto es una conexión que tenga otro servicio (u objeto Service) y deseemos compartir. Si declaramos este argumento correctamente, la clase ignorara el primer argumento de la ruta. Para mas información, vean el diccionario de actionscript. El ultimo argumento es para poner un objeto RelayResponder que contendrá las respuestas cuando el servicio sea devuelto. En este caso, nosotros crearemos el RelayResponder mas adelante y dejaremos el argumento como null.

<br />
var llamadas:Object = {onLlamadaData:function (msg:ResultEvent) {<br /> campo.text = msg.result;<br />
}, onLlamadaError:function (rs:FaultEvent) {<br /> mx.remoting.debug.NetDebug.trace({level:&amp;quot;None&amp;quot;, message:&amp;quot;hubo
un problema: &amp;quot;+fault.fault.faultstring});<br />
}};<br />


Crearemos un objeto genérico que contendrá dos métodos, uno para recibir la respuesta cuando el servicio se consuma correctamente (onLlamadaData), y otro cuando exista un error (onLlamadaError). Si se recibe correctamente el texto se mostrará en un campo de texto llamado campo, sino… aparecerá el error correspondiente.

<br />
llamar.onRelease = function () {<br /> var resultado:PendingCall = servicio. hacerLlamada ("Hola Mundo");<br /> resultado.responder = new RelayResponder(llamadas, &amp;quot;onLlamadaData&amp;quot;,
&amp;quot;onLlamadaError&amp;quot;);<br />
}<br />
limpiar.onRelease = function () {<br /> campo.text = "";<br />
}<br />


En el momento que presionemos nuestro boton, llamaremos a nuestro servicio el cual nos devolverá un objeto de tipo PendingCall. Este contiene una propiedad llamada responser, y deberá ser una instancia de la clase RelayResponder. El primer argumento del objeto RelayReponder es el objeto que contendrá nuestros métodos o eventos que recibirán la información. Ahí es donde entra la instancia llamadas. Ademas tenemos un boton al cual lo nombramos como limpiar. Este solamente cumple la funcion de borrar el contenido de nuestro campo de texto.

Sea dicho todo esto, nuestro servicio ha de estar funcionando correctamente y al presionar el boton, aparecerá "Hola Mundo" en su campo de texto.

Gracias por su atención.


Comentarios

Ya era hora de que alguien explicara bien esto del Flash Remoting. Enhorabuena Dani.

**Error** Escena=Scene 1, capa=code, fotograma=1:Línea 2: Error al abrir el archivo include NetServices.as: archivo no encontrado.
#include &quot;NetServices.as&quot;

**Error** Escena=Scene 1, capa=code, fotograma=1:Línea 4: Error al abrir el archivo include NetDebug.as: archivo no encontrado.
#include &quot;NetDebug.as&quot;

ayuda!!!

tienes que instalar los componentes de Actionscript 1 (ademas de los de As2) para Flash MX 2004 :)

saludos!!!

Gracias por conestestar Daniel.

Tengo instalados los dos componentes as1 y as2 y sigue dicendome esto.

Una duda, esteos includes se supone que debo tener los archivos en el mismo directorio, no?, si es asi, de donde los saco, o no es asi?

Espero que puedas aclarmelo.

Muchas gracias.

Jose, no se si te ayudo con esto, pero a la hora de instalar los componentes, te los instala en el directorio de la versión inglesa por defecto ...\en\... Si tienes la versión de Flash española, debes tener en cuenta esto.

joer macho, siento ser tan pesado pero no consigo nada.
Los componentes se me han instalado en la carpeta clas

G:\Documents and Settings\yo\Configuración local\Datos de programa\Macromedia\Flash MX 2004\es\Configuration\Classes\mx\remoting

el la de &quot;en&quot; no tengo nada.

////////////////
Una duda, esteos includes se supone que debo tener los archivos en el mismo directorio, no?, si es asi, de donde los saco, o no es asi?
/////////

gracias.

Por favor si me pedir aclarar mi anterior pregunta.


Por fin!!!

he desinstalado los componentes y los he vuelto a instalar, primero el as1 y luego as2.

Gracias a todos.


//#include &quot;NetServices.as&quot;

//#include &quot;NetDebug.as&quot;

-------------
flash mx 2004

import mx.remoting.NetServices;

import mx.remoting.debug.NetDebug;

uy...dejenme redactar de nuevo el tuto

aqui es donde se dice, !#%$!#! Macintosh, XD

gracias por la aclaracion, saludos!!!

tengo FLASH 2004 en español y no puedo ver klos componentes instalados, se q es porq esta en ingles, pero EXISTE forma alguna de instalarlo en mi version?

si, yo de hecho lo he hecho, copia todos los ficheros &quot;diferentes&quot; o sea que no esten, de la carpeta /en/ a la /es/ y reinicia el Flash.

Suerte :)