OBSERVACION: amfPHP 1.9 es soportado hasta Php 5.2.xxx
OOBSERVATION: amfPHP 1.9 is supported only for Php 5.2.xxx
Esta aplicación es básicamente para demostrar que si usamos apropiadamente flex podemos dejar volar nuestra imaginación hasta lograr cualquier cosa que deseemos.
This application is basically build to test flex and se how we can use flex so we can create any application that at imagination can dream for.
En este tutorial vamos a hacer que un datagrid se llene con información de una base de datos en MySQL y además vamos a crear un formulario donde podamos dejar nuestro nombre y un mensaje.
Esto lo vamos a lograr con amfphp conectándose a MySQL y flex mostrando toda la interfaz.
Lo primero que vamos a crear es crear la lógica de Base de dato de MySQL, esta lógica fue creada por una Compañero de trabajo llamado “Joel Moya” quien me dio los scripts para crear seleccionar e insertar en la base de dato:
Ya que tenemos la base de datos podemos crear nuestras funciones remotas una para consultar de la base de datos y otra para insertar en ella:
<?php
Header('Cache-Control: no-cache');
Header('Pragma: no-cache');
class DataGridService
{
var $link;
function DataGridService(){
$this->link = mysql_connect("localhost", "verlasco_dydUser", "mypassword") or die ("No conecta con SQLSERVER");
mysql_select_db("verlasco_dyd", $this->link);
}
function getAllMessages(){
include_once("vo/com/dyd/tutorial/vo/MessageVO.php");
$Result = mysql_query("SELECT * From DataGridMessageTutorial ORDER BY id DESC;", $this->link );
while ($row = mysql_fetch_array($Result, MYSQL_ASSOC))
{
$my_user = new MessageVO();
$my_user->id = $row['id'];
$my_user->name = $row['name'];
$my_user->message = $row['message'];
$list_of_users[] = $my_user;
}
return $list_of_users;
}
function saveMessage($obj){
$sql = "INSERT INTO DataGridMessageTutorial (
id,
name,
message
)
VALUES (
NULL , '$obj->name', '$obj->message'
);";
return mysql_query(sprintf($sql));
}
}
?>
Notemos que en la línea 16 hay un new MessageVO() y en la línea 32 se accede a 2 atributos dentro de un objeto, esto es debido a un VO o Value Object esto nos permite enviar y recibir objetos entre el cliente y el servidor, del lado del servidor se construye así:
<?php
class MessageVO {
var $_explicitType = "com.dyd.tutorial.vo.MessageVO";
var $id;
var $name;
var $message;
}
?>
Ahora que tenemos el lado del servidor listo podemos empezar a crear el lado del cliente.
Entonces creemos un Datagrid y un pequeño formulario que contenga nombre y un mensaje:
Creamos el VO del Lado del Cliente también para poder recibir y enviar los mismos datos:
package com.dyd.tutorial.vo
{
[Bindable]
[RemoteClass(alias="com.dyd.tutorial.vo.MessageVO")]
public class MessageVO
{
public var id:String;
public var name:String;
public var message:String;
}
}
Y aquí les dejo dos imágenes en las cuales vemos como son las rutas de los archivos tanto del lado del cliente como del lado del Servidor: Ejemplo:
In this Example we want a data grid that fills from a MySQL Database and also we want to save all the messages and name from a form so anybody can leave a message.
So for this we are going to use amfphp to connect to MySQL and flex to display everything.
The first thing we have to do is Database Logic for MySQL and a co worker and also a good friend “Joel Moya” gave me the script to create select and insert in the Database:
Know with the database ready we can create the remote function in php, we are going to create 2 function one to consult and one to Insert in the database:
<?php
Header('Cache-Control: no-cache');
Header('Pragma: no-cache');
class DataGridService
{
var $link;
function DataGridService(){
$this->link = mysql_connect("localhost", "verlasco_dydUser", "mypassword") or die ("No conecta con SQLSERVER");
mysql_select_db("verlasco_dyd", $this->link);
}
function getAllMessages(){
include_once("vo/com/dyd/tutorial/vo/MessageVO.php");
$Result = mysql_query("SELECT * From DataGridMessageTutorial ORDER BY id DESC;", $this->link );
while ($row = mysql_fetch_array($Result, MYSQL_ASSOC))
{
$my_user = new MessageVO();
$my_user->id = $row['id'];
$my_user->name = $row['name'];
$my_user->message = $row['message'];
$list_of_users[] = $my_user;
}
return $list_of_users;
}
function saveMessage($obj){
$sql = "INSERT INTO DataGridMessageTutorial (
id,
name,
message
)
VALUES (
NULL , '$obj->name', '$obj->message'
);";
return mysql_query(sprintf($sql));
}
}
?>
Notice that in the line 16 the is an new MessageVO() and in the line 32 I can access to properties from a object, that is because we made an VO or Value Object this value Object lets us pass Object in the functions and send it back to the client:
<?php
class MessageVO {
var $_explicitType = "com.dyd.tutorial.vo.MessageVO";
var $id;
var $name;
var $message;
}
?>
Know we have the remote side complete we need the client side.
So we are going to paint a Datagrid and a little form that contains a name and a message:
The VO we are sending we have to have it to in the client side so let’s made it:
package com.dyd.tutorial.vo
{
[Bindable]
[RemoteClass(alias="com.dyd.tutorial.vo.MessageVO")]
public class MessageVO
{
public var id:String;
public var name:String;
public var message:String;
}
}
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.
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.
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:
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
