MAWAPE Sistemas

AMFPHP y Actionscript 3

Oct 17

mawapeActionscript, Flash, Tutoriales Actionscript, AMFPHP, conexion, Flahs, PHP 7 Comments

Muchas veces queremos conectar Actionscript con alguna base de datos o enviar mails, etc…, sin embargo Flash, Flex y AIR por si mismo no traen un mecanismo que lo haga nativamente por lo que debemos usar algun lenjuage que nos permita hacer de back-end.

Si bien hoy en día hay muchas posibilidades (Weborb, Zend Framework,….) usaremos la mas conocida y simple: AMFPHP, que como su nombre lo indica, nos comunicará con una clase PHP.

AMFPHP es una implementación en PHP, gratuita y de código abierto del AMF (Action Message Format), el cual es un formato binario basado en SOAP. AMF permite la serialización binaria de objetos y tipos nativos de ActionScript 2 y ActionScript 3 para ser enviados a servicios del lado del servidor.

Los pasos para el tutorial serán los siguientes:

0- Debemos tener instalados en nuestras máquinas alguna de las tantas herramientas que permiten la manipulación de Apache, MySQL y PHP. En mi caso uso Appserv, pero hay varias como Xampp o Wamp. Elijan el que más les guste descarguénlo e instálenlo.

1- Debemos, luego, bajar los archivos amfphp-1.9.beta.20080120.zip.

2- Luego de descomprimirlo, buscar y copiar la carpeta amfphp en nuestro diectorio www o htdocs, es decir, la que normalmente usamos como localhost.

La estructura del directorio quedaría de la siguiente manera (en mi caso, la carpeta amfphp la puse en la carpeta raíz de mi blog en el servidor):

–>amfphp (Directorio)
–> browser (Directorio)
–> core (Directorio)
–> services (Directorio)
–> gateway.php
–> globals.php
–> json.php
–> phpinfo
–> xmlrpc

3- Para instalar el dispositivo, debemos dirigirnos a nuestro navegador preferido (con esto digo cualquier menos IE :S) y en la barra de direciones colocar: http://localhost/amfphp/browser/. Esto nos mostrará una pantalla como la siguiente:

En esta ventana de configuración deberás asegurarte que la dirección del Gateway es correcta. Después de hacer click en el botón Save te aparecerá la lista de servicios que tenemos instalados. Por default y como todavía no hemos creado ningún servicio nuevo, solamente aparecerá el servicio DiscoveryService dentro de la carpeta amfphp.

Importante:Como recomendación les digo que los servicios nuevos que creamos, no los pongamos dentro del browser, sino que continuemos dentro de un directorio, de esa forma, todo estará mejor ordenado. Cada vez que creemos un nuvo servicio, estos deberán ser guardados dentro de la carpeta services, es decir:

htdocs o www/amfphp/services/”nuestra carpeta con los servicios”.

4- Para probar el funcionamiento, crearemos una clase sensilla en PHP, que simulará las operaciones básicas de una suma y una resta . Cada método recibirá como parámetro dos números sobre los cuales hay que hacer la operación.

Nota: Este tutorial espera explicar cómo funciona AMFPHP y cómo accedemos a él desde Flash. En los post siguientes veremos la conexción a una Base de Datos, consultas, recuperación y todas las operaciones posibles.

Nota 2: Tener en cuenta que en PHP, al igual que en Flash, el nombre del archivo de una clase deberá tener el mismo nombre de la clase; por lo tanto, crearemos un nuevo archivo PHP y le pondremos de nombre operaciones.php y lo guardamos en el directorio services de nuestra carpeta amfphp (esto quedaría así: www/amfphp/services/operaciones.php). En el archivo operaciones.php escribimos lo siguiente:

<?php

/**
 * @author MAWAPE Sistemas
 * @url http://www.mawape.com.ar/blog
 */

class operaciones
{
	/**
	 * Suma dos números pasados por parámetro
	 * @returns Regresa un valor numérico
	 */
	function sumar($numeroA, $numeroB)
	{
		return ($numeroA + $numeroB);
	}

	/**
	 * Resta dos números pasados por parámetro
	 * @returns Regresa un valor numérico
	 */
	function restar($numeroA, $numeroB)
	{
		return ($numeroA - $numeroB);
	}
}

?>

Fíjense que la clase tiene comentarios antes de cada función; estos comentarios nos permiten decifrar que es lo que hace cada método y además le estamos indicando qué es lo que nos regresa cada método (@returns). Estos comentarios no son obligatorios, pero nos sirven para darnos cuenta de qué realiza cada método y esto ayudará cuando tengamos clases más complicados. Además, en el browser, cuando seleccionamos alguno de estos métodos se nos mostrará esta descripción:

Pueden hacer la prueba ustedes mismos ingresando en http://localhost/amfphp/browser/ y ahi verán la imagen que esta arriba. Ahora ingresen un número dentro del campo $numeroA e ingresa otro número dentro del campo $numeroB; luego hagan click en el botón Call y observen cómo en el área de resultados (Results) se muestra el resultado regresado por el método restar de nuestra clase operaciones que creamos recién. Luego pueden hacer lo mismo para el método sumar. Y un detalle, es que se fijen en lo que escribimos como comentarios, que ahora se observa por qué son tan útiles.

Importante: Dentro de nuestra clase podemos utilizar métodos privados, los cuales no podrán ser utilizados desde el navegador de servicios (browser) ni desde nuestras aplicaciones en Flash, Flex o AIR. Esto permite crear funciones que realicen operaciones importantes o que requieran mayor seguridad como lo muestra Carla en su Post Original.

5- Ahora crearemos nuestro archivo Flash. Para eso creen un documento de Actionscript 3, del tamaño que deseen.

Dentro crean 2 botones (Buttons), estos serán los encargados de sumar y restar correspondientemente, por lo que a uno de ellos le pondremos nombre de instancia: mas_btn y al otro menos_btn. (Como verán mi imaginación para los nombres es muy reducida ). Luego agregar 3 TextInput y les damos nombres de instancias: numeroA, numeroB y resultado_txt.

Tendría que quedar algo parecido a esto:

(Aunque supongo que a muchos les quedará mas lindo)

Agregamos una nueva capa y la nombramos Actions. Esta capa contendrá el código necesario para realizar la conexión y los cálculos, por lo que el Actionscript será:

/*
Archivo realizado por: MAWAPE Sistemas
Bajado de: www.mawape.com.ar/blog
*/

/*Estas son las librerías necesarias para realizar la conexión*/
import flash.net.NetConnection;
import flash.net.Responder;

/*En la variable gateway escribimos la dirección en donde se encuentra nuesto archivo gatawey.php*/
var gateway:String = "http://localhost/amfphp/gateway.php";
/*La variable conexion del tipo NetConnection es la que permitirá la comunicación*/
var conexion:NetConnection = new NetConnection;
/* Establecemos una conexión Ida/Vuelta entre el Flash y el servidor */
conexion.connect(gateway);
/*Esta variable se encarga del os valores que son regresados por el servidor,
ya se si es exitosa o no la conexión*/
var responder:Responder;

Tengan en cuenta los comentarios para futuras conexiones. Hasta ahora solo hemos puesto lo minimo para realizar la conexión

A continuación agregamos lo siguiente, en donde declarando dos métodos que serán llamados dependiendo de botón en que se haga click ya sea el de mas o el de menos.

/*Creamos los listeneres que activarán los botones*/
mas_btn.addEventListener(MouseEvent.CLICK, suma);
menos_btn.addEventListener(MouseEvent.CLICK, resta);

function suma(evento:MouseEvent):void {
	/*Creamos las variables que obtendrán los valores ingresados en los TextInput*/
	var numeroA:Number = Number(numeroA.text);
	var numeroB:Number = Number(numeroB.text);

	/* Le decimos a la variable responder que debe realizar en CASO DE ÉXITO (respuesta)
	y en CASO DE FRACASO (error)*/
	responder = new Responder(respuesta, error);
	/*Invocamos, por medio del método call, al método sumar que se encuentra en la clase
	operaciones (operaciones.sumar). Si se fijan bien, al estar el archivo dentro de un
	directorio, debemos indicarle la dirección exacta. El segundo parámetro del método
	call es nuestro objeto de la clase Responder, este se encargará de manejar los valores ingresados.
	Por último, le pasamos como tercero y cuarto parámetro los dos números que deberá
	recibir la función sumar. */
	conexion.call("operaciones.sumar", responder, numeroA, numeroB);
}

function resta(evento:MouseEvent):void {
	var numeroA:Number = Number(numeroA.text);
	var numeroB:Number = Number(numeroB.text);

	responder = new Responder(respuesta, error);

	conexion.call("operaciones.restar", responder, numeroA, numeroB);
}
/*Esta función se ejecuta en caso de ÉXITO tras ejecutar el método call, pasándole como
parámetro un objeto con el resultado regresado. Este resultado lo mostraremos dentro del TextInput
resultado. */
function respuesta(resultado:Object):void {

	resultado_txt.text = String(resultado);
}

/*Esta función se ejecuta en caso de FRACASO tras ejecutar el método call, pasándole como
parámetro el objeto del eror, el mismo será mostrado en un trace.*/
function error(error:Object):void {
	trace("Error: " + error.description);
}

/*Le indicamos que el TextInput con nombre de instancia resultado, será de solo lectura*/
resultado_txt.enabled = false;

Finalmente puedes ver la aplicación funcionando:

Pueden ver la segunda parte, donde nos conectamos y recuperamos información desde una base de datos MySQL.