Conectar Flex, PHP, MySQL y WebORB para novatos

Por MorphX el 05 de Octubre de 2007 con 98,284 visitas. Aplicaciones web y moviles Otros tutoriales por MorphX.
En este tutorial aprenders desde cero a obtener datos desde una base de datos en MySQL y a representarlos en un DataGrid de Flex. Desde la configuracin de WebORB hasta el cdigo Actionscript 3, hecho fcil. Para lograrlo:

1.

Instalaremos WebORB, como agente de intercambio Cliente/Servidor en formato AMF3, el cual funciona con Flex perfectamente. Gracias a WebORB podremos acceder fcilmente a los Servicios PHP que desarrollaremos para nuestro ejemplo en Flex. 2. Crearemos una base de datos en MySQL muy sencilla, a travs de phpMyAdmin para el ejemplo. 3. Escribiremos una clase/servicio en PHP y la registraremos en WebORB.

4.

Y finalmente, construiremos una pequea aplicacin en Flex Builder 2, que acceda al Servicio PHP creado, y rellene un DataGrid con los datos recibidos. NOTA: Si desconoces alguno de los conceptos anteriores, te recomendamos leer estos tutoriales: Tutorial de Flex Builder 2, Tutorial bsico de bases de datos, Crear una base de datos MySQL desde cPanel. Todo esto lo haremos, paso a paso y explicando el porqu de cada cosa, desde los conceptos ms elementales, hasta los ms avanzados, para que al final del tutorial entiendas perfectamente, qu, cmo y porqu de todo lo que se est manejando.

Empecemos por el principio...

Voy a comenzar, explicando los conceptos fundamentales que rigen la filosofa de trabajo Cliente/Servidor que representa RemoteObject. Estamos acostumbrados a usar archivos de texto, XML, SOAP, HTTPServices, etc, como servidores de datos remotos. Todos ellos se basan en un modelo de representacin plano, es decir, la aplicacin oyente recibe de sus orgenes un texto plano estructurado, que es parseado y tratado apropiadamente por nuestros algoritmos personales. Adobe agreg a Actionscript 3 (Y por ende a Flex) el estndar E4X que realmente ayuda mucho en el parseo de este tipo de orgenes, pero an as seguimos limitados a un procesamiento previo al uso efectivo de los datos, con cdigo adicional en nuestros desarrollos. A esto se suma la perdida del tipo de datos, carencia que deberamos resolver nuevamente a mano. An con todo, para aplicaciones sencillas suele ser una muy buena opcin de uso, ya que no requieren alto rendimiento ni integridad de tipos, cosa que se vuelve fundamental en una aplicacin un poco ms seria, como sera una Rich Internet Application. Para salvar esta problemtica apareci Flash Remoting, que aportaba un protocolo de transporte de datos en formato binario, al cual llamaron AMF0, pensado para trabajar con ColdFusion como agente de transporte. Este protocolo permita hacer uso de objetos complejos de una manera cuasi-transparente entre nuestro Flash y los servicios AMF que se ejecutaban en el servidor a travs de un agente de transporte que codificaba y descodificaba el protocolo contra las clases servicio que se les registraban, el ms famoso y efectivo de la poca AMF0 es sin duda AMFPHP para PHP y OpenAMF para Java. En resumen: Permita transferir objetos y variables entre Flash y un lenguaje del servidor (PHP, Coldfusion, Java) sin que se perdiera el tipo de datos. Para sacar partido a la ventaja que este protocolo ofreca, crearon un tipo de objeto en Flash al cual llamaron RemoteObject, el cual permita ejecutar RPC's (Remote Procedure Call) o sea llamadas a procedimientos remotos en un clase instanciada en el servidor, superando el problema del texto plano y la

serializacin de datos que hasta entonces suframos. Resumen: Un RemoteObject permite invocar funciones escritas en cdigo del lado del servidor y usar su resultado en Flash. AFM0 evolucion hacia AMF3 con la llegada de Flex 2, corrigiendo varias carencias que tena el protocolo original, y mejorando con mucho la velocidad, el peso, el modo en como se transmite la informacin, y sobre todo unificando criterios de llamada y construccin de clases, al estilo Java para todos los lenguajes que lo soporten. Una vez sabes que demonios es RemoteObject y AMF3, vamos a ver como instalamos un agente de transporte que implementa AMF3 sobre PHP en el servidor, WebORB. NOTA: Un agente de transporte es un bloque de cdigo que permite conectar a Flex o Flash con PHP u otro lenguaje del lado del servidor.

WebORB, es la alternativa (gratis y libre) ms lograda a la versin de Abobe del protocolo AMF3, el cual es LiveCycle Data Services. LiveCycle solo puede usarse en entornos Java, en cambio WebORB da soporte al protocolo en Java, .NET, PHP y Ruby on Rails, con un rendimiento muy alto y estable. El sistema para configurarlo es idntico al que usa LiveCycle, con lo cual lo que aprendas ahora para WebORB te valdr tambin para LiveCycle.

WebORB es la serie de archivos del lado del servidor (En PHP en este caso) que permiten a Flash o Flex conectarse directamente con PHP por medio de AMF3. Antes de pasar a rellenar xml's como loco para configurarlo y que copies y pegues sin saber realmente que estas haciendo, voy a explicarte como funciona un agente de transporte, para que sepas porqu y para qu son los distintos xml's que tiene en configuracin. Entra al sitio de descarga de WebORB para PHP, descarga el .zip y descomprimelo en la raiz de tu sitio, de modo que todo el contenido del zip quede en www.tusitio.com/weborb/. Esta direccin ser la raiz de weborb y a partir de esto empezar el tutorial. WebORB tiene su carpeta de configuracin alojada dentro /Weborb/WEB-INF/ (Buscala dentro de la carpeta donde descomprimiste el .zip). Dentro de sta se encuentran las clases de PHP, configuracin y

librerias que requerir el agente para poder generar el protocolo e incluir nuestras clases personales dentro de las clases usables en despliegue. En Flex Builder has de indicar la ruta hasta la carpeta WebORB (contenedora de WEB-INF), para encontrar los xml's de configuracin a la hora de compilar. Dentro de /WEB-INF/flex/ la estructura que encontramos es esta:

data-management-config.xml messaging-config.xml proxy-config.xml remoting-config.xml services-config.xml

Los 3 primeros no se usan en WebORB para PHP, ya que hacen referencia a funcionalidades que no se pueden ofrecer en PHP, pero que si tienen soporte en su versin Java y en LiveCycle, el cual presenta la MISMA estructura de configuracin.

Lo que realmente necesitamos

services-config.xml En este fichero se le indica al agente, que servicios del protocolo va a ofrecer y como se llaman. No lo editaremos en nada, a excepcin de un atributo id. Puedes copiar y pegar el siguiente cdigo completo dentro del archivo .xml. Analicemos su estructura. Lee los comentarios (En verde) para entender el XML <?xml version="1.0" encoding="UTF-8"?> <services-config> <services> <service-include file-path="remoting-config.xml" /> <!-- Aqu se declaran los ficheros de configuracin a analizar. Por tanto leer nuestro remoting-config.xml --> </services> <security> <!-- Aqu declaran los valores para autorizar el uso autentificado de nuestros servicios remotos --> </security> <channels> <!-- Aqu se definen qu y como se llaman los canales.

Un canal, es realmente un proceso del agente que procesa una peticin de servicio -->

<!-- Analicemos como est definido el procesador de AMF3

CHANNEL-DEFINITION id = Nombre para referirnos al l desde Flex. LO MS IMPORTANTE DE ESTE ARCHIVO ES ESTO class = Clase que usar el agente para procesar el protocolo --> <channel-definition id="my-amf" class="mx.messaging.channels.AMFChannel" >

<!-ENDPOINT uri = Url donde deber dirigir la llamada Flex, (uri o url) class = Clase que estar esperando llamdas en esa url --> <endpoint uri="/Weborb/index.php" class="flex.messaging.endpoints.AMFEndpoint" />

<!-- Al resto del fichero no le daremos uso -->

<properties> <polling-enabled>false</polling-enabled> </properties> </channel-definition> </channels>

</services-config> Este fichero era el ms complejo, A que no era tan complicado? remoting-config.xml ste es el que ms tocaremos, de hecho el anterior viene preconfigurado en la distribucin y difcilmente necesitaras tocarlo. Este es remoting-config. Lee los comentarios (En verde) para entender el XML. <?xml version="1.0" encoding="UTF-8"?>

<!-- Aqu, slo el ID es lo que debes recordar --> <service id="remoting-service" class="flex.messaging.services.RemotingService" messageTypes="flex.messaging.messages.RemotingMessage" >

<!-- Irrelevante en nuestro caso, deja esto sin modificar --> <adapters> <adapter-definition id="java-object" class="flex.messaging.services.remoting.adapters.JavaAdapter" default="true"/> </adapters>

<default-channels> <!-- Le decimos al agente que en caso de indicar lo contrario, usaremos el canal llamado my-amf que fu definido en el archivo anterior. (El nombre "my-amf" depende de nosotros y lo elegimos en el XML anterior) --> <channel ref="my-amf"/> </default-channels>

<!-- Bloques como ste, sern los que aadirs en tus proyectos Cada bloque representa una clase PHP que se conectar a Flex De nuevo, manten en mente el ID, que es lo ms importante. Lo puedes cambiar por lo que quieras. --> <destination id="myweborb-service"> <!-- El id lo usaremos para llamar desde Flex al PHP --> <properties> <!-- Ruta en el disco duro a nuestra clase PHP En el tutorial haremos esta ruta ms adelante --> <source>flex.morphx.UsuarioService</source> </properties> </destination>

<!-- Destino por defecto --> <destination id="GenericDestination"> <properties> <source>*</source>

</properties> </destination>

</service>

Y con esto ya sabes que es cada cosa en los xml que hay que tocar, y ademas de camino hemos aadido la configuracin para nuestro ejemplo. Notese que la ruta de nuestra clase es relativa a la carpeta /Services/ dentro de la raiz de /weborb/. En esa carpeta /Services/ es donde guardaremos nuestros archivos .PHP de la aplicacin.

Creamos la Base de Datos

phpMyAdmin: Administrador de base de datos instalado en todos los hosting y servidores con PHP y MySQL. Entra a phpMyAdmin. Dentro encontramos el panel general, donde se nos ofrece la posibilidad de crear una nueva base de datos. Ah le damos el nombre a nuestra DB (Base de datos), y especificamos con cuidado el cotejamiento y el charset, de modo que sea utf8_unicode_ci, dado que Flex usa esa codificacin de caracteres, y ademas nos aseguramos la compatibilidad con cualquier cliente de otros paises. Ponle cualquier nombre a la DB. Con la nueva DB creada, entramos al panel de administracin de tablas. En esta pantalla creamos nuestra tabla de ejemplo, con esta sencilla especificacin:

Nombre de la tabla: user Campos: 2 campo: id tipo: int, auto_increment, primary_key

campo: name tipo: VARCHAR(255), charset: utf8

Con esta estructura, ya tenemos nuestra tabla lista para trabajar, no olvides llenarla de datos para tener algo que mostrar ;) Si no quieres usar phpMyAdmin, este cdigo en SQL genera la base de datos: CREATE TABLE `user` ( `id` INT NOT NULL AUTO_INCREMENT PRIMARY KEY , `name` VARCHAR( 255 ) CHARACTER SET utf8 COLLATE utf8_unicode_ci NOT NULL );

Construimos las clases para comunicar en PHP y Actionscript 3.

Crearemos dos clases que definirn la estructura de los datos que recibimos entre PHP y Actionscript 3. Estas clases se conoces como tipos complejos de datos. Para mantener este tipo complejo correcto tanto en nuestro Flex como en nuestro PHP, nos creamos dos clases gemelas, una en AS3 y la otra en

PHP, de manera que lo que enviemos por PHP sea recibido identido en AS3. Para ello, indicamos en Actionscript 3 con el metatag [RemoteClass(alias=)] donde est su pareja AMF3 escrita en PHP. RECUERDA: PHP es el lenguaje del lado del servidor que se conecta a MySQL. Actionscript 3 es el lenguaje del lado del cliente que muestra los datos en Flex. AMF3 es el protocolo de comunicacin entre PHP y Actionscript 3 que en AS3 ya est programado internamente y en PHP lo implementamos usando las libreras WebORB para PHP. En otras palabras, AMF3 es, para efectos practicos, WebORB

Cdigo en Actionscript 3
Creamos un archivo llamado UsuarioVO.as, que colocaremos en la misma carpeta raiz del proyecto de Flex (Donde est el .mxml). package

[Bindable]

[RemoteClass(alias="flex.morphx.UsuarioVO")]

public class UsuarioVO {

public function UsuarioVO() {

public var name:String = ""; } }

Este objeto tiene una propiedad "name" y nada ms. name ser el nombre de usuario a mostrar en el DataGrid, que es el campo de contenido de nuestra tabla. Este valor ser llenado por medio de PHP.

Cdigo en PHP
Versin de PHP WebORB requiere obligatoriamente, PHP 5. Crearemos nuetro fichero PHP en /Services/flex/morphx/UsuarioVO.php nota que la ruta de carpetas coincide con la ruta de la clase que indicamos en el XML, de ese modo AMF3 es capaz de encontrar nuestra clase PHP, y replicarla correctamente. De esto se deduce que las mayusculas y minusculas en los nombres de las carpetas ha de coincidir plenamente con la ruta indicada antes. En programacin es muy importante mantener mayusculas y minusculas de manera exacta. <?php class UsuarioVO {

public $name;

public function UsuarioVO() {

} ?> Si os fijis es un objeto que tiene exactamente la misma estructura que nuestro UsuarioVO.as, y de hecho sus propiedades han de llamarse exactamente igual, incluso manteniendo el mismo uso de mayusculas y minusculas. ValueObject: Esta combinacin de clases gemelas en PHP y Actionscript 3, cuyo objetivo es mantener un mismo tipo de datos entre lenguajes, se conoce como ValueObject.

Clase en PHP de conexin a MySQL. Servicio.

Vamos a crear ahora una clase servicio en PHP para nuestro ejemplo, ubicala en la misma carpeta que el PHP anterior. Nota: Las carpetas de clases en programacin se conoces como paquetes. La clase anterior tendra como su paquete a "flex.morphx"

La llamaremos UsuarioService.php, y ser sta la clase a la que nos conectaremos desde Flex, en la cual podremos usar sus metodos, por tanto es sta la clase que hemos de asociar al destination en la configuracin de WebORB, como vimos antes (El XML). Lee los comentarios del cdigo (En verde) para entender su funcionamiento. <?php

require_once ("UsuarioVO.php"); //Importamos nuestro objeto de transporte, nuestro ValueObject

class UsuarioService {

public function UsuarioService() {

//Nuestro metodo a llamar public function getUsuario() {

//Cabecera de conexin a la BD //DEBES CAMBIAR LOS VALORES de "SERVER", "USER" y "PASS" de acuerdo a tus datos //de conexin a tu base de datos. $sqlconnect = mysql_connect("SERVER", "USER", "PASS"); $db = "DBNAME"; //DEBES CAMBIAR "DBNAME" por el nombre de tu base de datos.

if (!$sqlconnect) throw new Exception("No fue posible conectarse a MySQL");

if (!mysql_select_db($db)) throw new Exception("No se puede seleccionar la base de datos $db");

//Ejecutamos la consulta SQL para obtener todos los registros de la tabla $rst = mysql_query("SELECT * FROM USER");

if (!$rst) throw new Exception("Error en la consulta SQL");

$respuesta = array (); //Array de datos a devolver. //De este modo nuestro ArrayCollection en Flex, //tendr una serie de objectos con la propiedad "name" //para pasarle al DataGrid

while ($row = mysql_fetch_object($rst)) //Tomamos record a record y lo encapsulamos //en nuestro objeto de transporte { //Creacin de los Objetos de Transporte $vo = new UsuarioVO(); //Le aadimos a nuestro ValueObject el nombre obtenido de MySQL $vo->name = $row->name;

//Aadimos a nuestro array el ValueObject creado $respuesta[] = $vo; }

//Devolvemos el resultado hacia Flex return $respuesta; } } ?> Y finalmente construimos nuestro ejemplo Flex.

Cdigo MXML en Flex

Ahora definimos nuestro MXML en Flex desde el que llamaremos a nuestro servicio PHP. RemoteObject: Un RemoteObject es un tag de MXML que permite conectarse a un servicio PHP configurado con WebORB. Aclaremos cuales son los principios de una llamada a travs de un RemoteObject. Una llamada de ste tipo, es por definicin asncrona, es decir, tenemos que pedir al RemoteObject la ejecucin del procedimiento que necesitemos y luego esperar a que el servicio nos conteste, y para ello es imperativo el delegar esa espera a un listener (Un manejador de evento), para avisarle al usuario que los datos estn cargando y cuando estn cargados. Visto lo anterior, se entiende que una llamada a un mtodo remoto implica 3 acciones:

La llamada al mtodo en s. Un evento result que entrega un ResultEvent, y es lanzado cuando nos llegan los datos. Un evento fault que entrega un FaultEvent, y es lanzado en caso de obtener un error en el
proceso. Por lo tanto el tratamiento de los datos esperados tras una llamada tipo servicio.getUsuario() donde "srv" es el id de nuestro RemoteObject en Flex, no puede hacerse en la lnea siguiente a ella, sino que se har en una funcin a parte que ser lanzada por el evento result y que nos pasar por parmetro un ResultEvent con los datos recibidos y lo salvaremos en un ArrayCollection. ArrayCollection es un tipo de datos de Flex que nos encapsula un Array, con una serie de metodos de manejo que nos permiten un gran numero de operaciones avanzadas sobre la "coleccin" de datos, tales como: Filtros, Cursores, Ordenaciones, etc. Por ello recogemos los datos en un objeto de este tipo, que actuar como DataSet. <?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.ResultEvent; import mx.collections.ArrayCollection; import UsuarioVO;

[Bindable] private var usuarios : ArrayCollection;

//Esto lo hacemos para forzar al compilador //a incluir la clase UsuarioVO en el swf de salida, //de modo que reconozca los objetos recibidos desde WebORB. private var forceimport:Array = [UsuarioVO];

private function onResult(event:ResultEvent):void{ usuarios = ArrayCollection(event.result); //Es necesario convertir el "result" a un ArrayCollection (Eso se llama hacer cast) //Asignamos al ArrayCollection, //la coleccin de objetos de //transporte recibidos desde WebORB. }

]]>

</mx:Script>

<!-- Instanciamos un RemoteObject, le damos nombre ?srv? y le indicamos a que destination hace referencia, o sea que clase ha de usar WebORB cuando srv haga llamadas, que tal como vimos antes, era nuestra clase UsuarioService --> <mx:RemoteObject id="srv" destination="myweborb-service" showBusyCursor="true" fault="Alert.show(event.fault.faultString, 'Error')" >

<!-- Declaramos qu metodo de la clase PHP vamos a usar y que funcin de Flex queremos que trate los resultados que ese metodo nos devuelva --> <mx:method name="getUsuario" result="onResult(event)"/>

</mx:RemoteObject>

<mx:Button x="192" y="302" label="Obtener" width="302" click="srv.getUsuario()"/>

<mx:DataGrid x="192" y="10" height="284" dataProvider="{usuarios}"/>

</mx:Application>

Ahora tan solo nos queda dar de alta en /Weborb/WEB-INF/flex/remoting-config.xml nuestro destination tal y como vimos antes, para que el compilador de Flex encuentre la clase remota a llamar a la hora de generar nuestro swf, para ello incluiremos en dicho fichero el siguiente segmento de cdigo (Si ya lo hiciste antes en la configuracin, no necesitas duplicarlo): <destination id="myweborb-service"> <!-- Id para llamar desde Flex -->

<properties>

<!-- Ruta a nuestra clase servicio --> <source>flex.morphx.UsuarioService</source>

</properties> </destination> Ya tenemos todo, ahora solo queda compilar en Flex y probarlo. No olvides enviar tus preguntas al foro de Flex y Actionscript 3 o al de WebORB.

Tutorial de Flex 2 con WebOrb PHP y acceso a base de datos

Por Zah el 10 de Diciembre de 2006 con 99,672 visitas. Aplicaciones web y moviles Otros tutoriales por Zah.
En este tutorial aprenderemos desde cero a obtener datos desde una base de datos de MySQL y a representarlos en un DataGrid de Flex, donde se puedan modificar, eliminar e insertar nuevos registros, mediante una clase de PHP. Este tutorial es una adaptacin del tutorial de bases de datos con flash y amfphp de Maikel, por ser extremadamente completo y adems es de donde yo aprend. Primero instalaremos WebOrb, un sistema parecido a AMFPHP, que funciona con Flex, y nos permite acceder, de manera limitada, a los Flex Data Services, en concreto a los remoteObjects, instancias de una clase de un lenguaje de servidor cuyas propiedades y mtodos se pueden llamar desde Flex. WebOrb tiene algunos bugs, pero resulta muy rpido trabajar con l (por ejemplo no hacen falta los methodTable de AMFPHP). Despus crearemos una base de datos desde phpmyadmin, agregaremos a WebOrb la clase misquerys de Maikel, y por ltimo haremos una aplicacin parecida a la suya en Flex. Para poder realizar el tutorial es imprescindible conocer, al menos en parte, el funcionamiento de flex, php y las bases de datos. Es recomendable haber hecho algn tuto similar para flash, como el de Maikel, que mencion arriba. Para empezar necesitas un servidor que admita PHP 5 (no, con PHP4 no vale) y MySQL. Un programa para crear un servidor local que cumple estas caractersticas es wamp (pero no EasyPHP u otros) .

Adems usaremos FlexBuilder2 para configurar el proyecto y obtener el swf final. Configurar el proyecto con algn otro framework es bastante complicado, pero siempre pueden probar FlashDevelop.

Instalacin de WebOrb
Instalar WebOrb es muy sencillo. Adems tiene la ventaja de que podemos tratar en ActionScript instancias de una clase de php con toda naturalidad, y sin tanto cdigo como hace falta para AMFPHP. Simplemente tenemos que descargar la ltima versin para php desde aqu: http://www.themidnightcoders.com/weborb/php/weborb-php-latest.zip Ahora tenemos que descomprimir el archivo .zip que hemos conseguido en la raiz de nuestro sitio (la carpeta www donde tenemos nuestro index, vamos). Ahora, para comprobar que todo funciona abrimos el archivo http://tusitio/Examples/FlexRemoting/main.html, que si trabajamos en local ser http://localhost/Examples/FlexRemoting/main.html. Los 5 primeros test deberan funcionar sin problemas y el sexto una vez hayamos ejecutado el desde phpmyadmin (u otra cosa parecida) el archivo siguiente archivo: DIRECTORIOWEB\Services\weborb\tests\northwind.sql. Aqu est el tutorial en ingls de la web oficial.

Preparacin de la Base de Datos:

Crea una base de datos para el ejemplo (o usa la que tengas si es de alojamiento gratuito), en mi caso llamar a la base de datos flexphp. Crea una tabla con 3 campos, en mi caso le di el nombre de prueba, los campos debern tener esta descripcin: Nombre id nombre comentarios Tipo de Dato bigint text text Caractersticas adicionales not null, auto_increment, clave primaria null null

Nota: Pueden crear la base de datos ejecutando el archivo flexphp_bd/flexphp.sql de los archivos det tutorial.

Crear y agregar una clase de php a WebOrb

Bien, el primer paso es crear la clase de php. En la carpeta Services de nuestro directorio principal creamos un archivo php llamado "misquerys.php": <?php

class misquerys{

function insertar($nombre,$comentarios){ $nombre = utf8_encode($nombre);

$comentarios = utf8_encode($comentarios); $sql= "INSERT INTO prueba (id,nombre,comentarios) VALUES ('','".$nombre."','". $comentarios."')"; return $this->query($sql,1); //retornamos el id de nuestro registro insertado

function eliminar ($id){ $sql= "DELETE FROM prueba WHERE id='".$id."' LIMIT 1"; return $this->query($sql,0); }

function modificar ($id,$nombre,$comentarios){ $nombre = utf8_encode($nombre); $comentarios = utf8_encode($comentarios); //creamos la cadena de nuestra sentencia(query) SQL

$sql = "UPDATE `prueba` SET `nombre` ='".$nombre."', `comentarios` ='". $comentarios."' WHERE `id` =".$id." LIMIT 1;"; return $this->query($sql,0); }

function consulta (){ $sql = "SELECT * FROM prueba ORDER BY id "; return $this->query($sql,0); }

function query ($sql, $accion){ $conex= mysql_connect("tuhost","user","password") or die("no se puede conectar porque ".mysql_error()); mysql_select_db("flexphp"); $result= mysql_query($sql,$conex); if ($accion && result){ $result= mysql_insert_id(); } mysql_close($conex); return $result; }

?>

Explicacin:
Una descripcin detallada de cada mtodo: Nombre Parmetros Explicacin Inserta los parmetros a los respectivos campos de la tabla, codificando con utf8_encode los parmetros para entender la codificacin que hace flash con el escape para mandarle los parmetros y crea la respectiva sentencia SQL. Crea la sentencia SQL DELETE con la condicin de que id sea el que recibio. Crea la sentencia SQL UPDATE, buscando el registro cuyo campo id corresponda con $id y actualiza los campos nombre y comentarios con los respectivos parmetros. Valor de Retorno

insertar

$nombre, $comentarios

Retorna el id del registro insertado en tal caso de que se haya hecho exitosamente.

eliminar

$id

Retorna 1 si fue exitosa la operacin o 0 en caso contrario.

modificar

$id, $nombre, $comentarios

Retorna 1 si fue exitosa la operacin o 0 en caso contrario.

consulta

ninguno

Crea la sentencia SQL SELECT para seleccionar todos los registros de la tabla.

Retorna un RecordSet con los registros.

Para consulta: retorna

query

$sql, $accion

$sql ser la sentencia SQL que ejecutar, $accion es para hacer una excepcin de que si la sentencia es un INSERT.

un recordSet. Para eliminar y modificar: 1 o 0 en caso de que haya sido exitosa la operacin.

Para insertar: hay una

excepcin donde el parmetro $accion valdr 1 al invocar la funcin query y es para indicar que retornar el id del ltimo registro insertado.

Noten que en el cdigo, en la funcin query, donde pone "tuhost, "user" y "password" tendrn que sustituirlos por sus datos. Ahora tenemos que decirle a WebOrb que este servicio existe: Vamos a la carpeta principal>Weborb>WEB-INF>flex y abrimos el archivo remoting-config.xml. En l, al final del cdigo, antes del ltimo </service> aadimos lo siguiente <destination id="misquerys"> <properties> <source>misquerys</source> </properties> </destination> </service>

Configuracin del proyecto de Flex

Vamos con Flex Builder: File> New > Flex Project. En el primer cuadro de dilogo How will your Flex application access data? seleccionamos Flex Data Services, y despus Compile application locally in Flex Builder. Hacemos click en Next. Despus en el siguiente dilogo, en el cuadro "Root folder" tendremos que decir cul es la ruta de la carpeta weborb, en la que est el servidor. La ma es: C:\wamp\www\Weborb . Y en el cuadro "Root URL" cul ser la URL del servidor, en este caso, http://localhost/Weborb . De nuevo, hacemos click en Next, Ahora nos pide que demos un nombre al proyecto y la carpeta en la que se guardar. Cuando lo hayamos hecho, volvemos a pinchar en Next. All, dejamos vaco el campo "Main source folder" y donde pone Output folder, ponemos la carpeta en la que deseamos que est el archivo generado (tendr que ser dentro del directorio web). Por ejemplo:

C:\wamp\www\Examples. Tambin tendremos que darle la ruta que tendr cuando aparezca en el navegador al darle al botn de compilar, en el caso anterior sera esta: http://localhost/Examples. De nuevo, esto pueden verlo en ingls en la ayuda de WebOrb. Y por fin podemos empezar a programar mxml.

Creacin de la aplicacin de Flex.

Como es un poco difcil de separar por partes, pondr todo el cdigo comentado y luego una explicacin ms general (y creo que es ms rpido que andar explicando con el modo diseador de Flex). As que lean atentamente los comentarios (Texto en verde) del siguiente cdigo: <?xml version="1.0" encoding="utf-8"?> <!-Definimos la aplicacin aadiendo una funcin creationComplete que realizar una consulta con el remote que definiremos. --> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="remoteObject.consulta()">

<!--

****************LAYOUT*****************

-->

<!--El componente Panel es un contenedor "bonito" en el que adems podemos poner un ttulo. Lo usaremos para contener toda la aplicacin, y usando un tamao relativo del 100% haremos que se adapte al espacio del que dispone, al igual que con el resto de los componentes--> <mx:Panel title="Operaciones de Bases de Datos con Flex2" width="100%" x="0" height="100%" y="0"> <!--El contenedor VBox fuerza a todos los componentes que tiene dentro a posicionarse uno debajo de otro. Podemos usarlo para posicionar los componentes que iremos aadiendo. A este VBox le damos un nombre de instancia (id) ya que lo usaremos despus para agregarle componenentes--> <mx:VBox x="0" y="0" width="100%" height="100%" horizontalAlign="center" id="vbox1"> <!--El componente DataGrid ser el encargado de mostrar la informacin de los registros. Haceoms que ocupe todo el espacio disponible (que adems del tamao de la ventana estar determinado por los componentes que tengamos en cada estado) Al seleccionar otro elemento, hacemos que cambie una variable, que despus necesitaremos para seleccionar el datagrid. --> <mx:DataGrid width="100%" id="datagrid" height="100%" change="{dgIndex=datagrid.selectedIndex}"> <mx:columns> <!--Colocamos 3 columnas, cuyo atributo dataField ser el nombre de la propiedad del correspondiente item que querramos mostrar, aunque aqu ms bien lo usaremos como apuntador, ya que definimos una funcin para mostrar los datos. --> <mx:DataGridColumn headerText="ID" dataField="id" sortCompareFunction="numericSort"/> <mx:DataGridColumn headerText="Nombre" dataField="nombre" labelFunction="dataGridLabelFunction"/>

<mx:DataGridColumn headerText="Comentarios" dataField="comentarios" labelFunction="dataGridLabelFunction"/> </mx:columns> </mx:DataGrid> <!--El contenedor Grid es semejante a una tabla de html. Aqu lo he usado para que los botones se distribuyan en funcin del espacio disponible. --> <mx:Grid width="100%" horizontalAlign="center" id="buttonsGrid"> <mx:GridRow width="100%" height="100%" horizontalAlign="center" id="gridrow1"> <mx:GridItem width="100%" height="100%" horizontalAlign="center"> <mx:Button label="Consultar" id="btnConsultar" click="onButtonPress(event);"/> </mx:GridItem> <mx:GridItem width="100%" height="100%" horizontalAlign="center"> <mx:Button label="Insertar" id="btnInsertar" click="onButtonPress(event);"/> </mx:GridItem> <mx:GridItem width="100%" height="100%" horizontalAlign="center"> <mx:Button label="Modificar" id="btnModificar" click="onButtonPress(event);"/> </mx:GridItem> <mx:GridItem width="100%" height="100%" horizontalAlign="center"> <mx:Button label="Eliminar" id="btnEliminar" click="onButtonPress(event);"/> </mx:GridItem> </mx:GridRow> </mx:Grid>

<!--Un componente HBox hace lo mismo que un VBox pero en horizontal (los componentes se alinean uno al lado de otro)--> <mx:HBox width="100%"> <mx:Label text="Estado:"/> <mx:Label id="estadotxt" text="cargando..."/> </mx:HBox> </mx:VBox> </mx:Panel> <!--Los estados de Flex permiten alternar rpidamente entre diferentes conjuntos de componentes. En ActionScript cambiamos de estado con la propiedad currentState="nombreEstado", y al estado inicial nos referimos con una cadena vaca ""--> <mx:states> <mx:State name="commands"> <!--Dentro de la etiqueta AddChild colocamos los componentes que incluiremos en el nuevo estado. adems usamos el parmetro relativeTo, para referirnos al contenedor en el que colocaremos los componentes y position, para indicarle que ser al final. De todas formas, si trabajas en modo diseo, esto lo hace el FlexBuilder slo--> <mx:AddChild relativeTo="{vbox1}" position="lastChild"> <mx:VBox width="100%" horizontalAlign="center"> <mx:HBox width="100%" horizontalAlign="center"> <mx:VBox> <mx:Label text="ID" id="idlbl"/>

<mx:TextInput id="idtxt" editable="false"/> </mx:VBox> <mx:VBox> <mx:Label text="Nombre" id="nombrelbl"/> <mx:TextInput id="nombretxt"/> </mx:VBox> <mx:VBox> <mx:Label text="Comentarios" id="comentarioslbl"/> <mx:TextInput id="comentariostxt"/> </mx:VBox> </mx:HBox> <mx:Label text="Desea insertar este registro?" id="preguntatxt"/> <mx:HBox width="100%" horizontalAlign="center"> <mx:Button label="S" id="btnSi" click="onButtonPress(event);"/> <mx:Button label="No" id="btnNo" click="onButtonPress(event);"/> </mx:HBox> </mx:VBox> </mx:AddChild> <mx:SetProperty target="{datagrid}" name="enabled" value="false"/> <mx:RemoveChild target="{buttonsGrid}"/> </mx:State> </mx:states>

<!--***************CDIGO*****************-->

<!-Usaremos el remoteObject para acceder a nuestro servicio en php. En "destination" ponemos el id que hemos definido en remoting-config.xml. Ponemos el parmetro showBusyCursor en true para que nos salga un relojito en el cursor mientras estamos esperando las operaciones. --> <mx:RemoteObject id="remoteObject" destination="misquerys" showBusyCursor="true"> <!-Definimos listeners distintos result y el mismo de fault (error) para cada una de las funciones de la clase de php. Los listeners se invocarn cuando se complete la funcin y devuelva un resultado, event.result.

--> <mx:method name="consulta" result="consulta_Result(event)" fault="onFault(event)"/> <mx:method name="insertar" result="insertar_Result(event)" fault="onFault(event)"/> <mx:method name="modificar" result="modificar_Result(event)" fault="onFault(event)"/> <mx:method name="eliminar" result="eliminar_Result(event)" fault="onFault(event)"/> </mx:RemoteObject> <!-- En la etiqueta Script irn todas las funciones que utilizaremos.--> <mx:Script> <![CDATA[ //Importamos la clase ArrayCollection, que usaremos en el DataProvider.

import mx.collections.ArrayCollection; //Importamos la clase para trabajar con las comlumnas del dataGrid, que ser necesaria para definir //funcin con la que rellenaremos el dataGrid import mx.controls.dataGridClasses.DataGridColumn; //Importamos las clases para trabajar con los remoteObjects de WebOrb import mx.rpc.remoting.*; import mx.controls.*; import mx.rpc.events.* //Importamos los detectores de eventos import flash.events.Event; //Una variable que necesitaremos para saber qu operacin realizar private var action:Number; // // // //Esta variable servir para definir el nduce en el que tendr que estar el datagrid //alrealizar una consulta private var dgIndex:int=0; // // //Esta variable contiene el resultado de la peticin. Su tipo de datos ser // ArrayCollection, el recomendado para dataProviders. //El metatag Bindable har que la variable se pase por referencia: //si ella cambia, las dems cambian.

[Bindable] private var resultado:ArrayCollection // // // //Al ejecutarse una consulta... private function consulta_Result(event:ResultEvent):void{ //rellenamos la variable resultado con los datos obtenidos en la consulta, //tratando de convertirlos en un Array usando el operador "as". resultado=new ArrayCollection(event.result as Array); //Rellenamos el dataGrid con los datos que hemos recibido datagrid.dataProvider=resultado; //Si hay al menos un registro... if (resultado[0]){ estadotxt.text="Consulta completada"; //Seleccionamos el primer elemento del datagrid. datagrid.selectedIndex=dgIndex; //Mostramos los botones de Eliminar y Modificar por si estaban deactivados btnModificar.enabled=btnEliminar.enabled=true; //Si no... }else{ //Desactivamos los botones de Eliminar y Modificar btnModificar.enabled=btnEliminar.enabled=false; estadotxt.text="No hay registro que mostrar"; }

} // // // //El resultado de insertar un registro: private function insertar_Result(event:ResultEvent):void{ //Si todo sali bien... if (event.result){ estadotxt.text = "La insercin se realiz exitosamente"; dgIndex=datagrid.dataProvider.length; //Volvemos a cargar los datos actulizados remoteObject.consulta(); } else { estadotxt.text = "La insercin no fue completada, intente de nuevo"; } } //Lo mismo para las funciones modificar y eliminar private function modificar_Result(event:ResultEvent):void{ if (event.result){ estadotxt.text = "La modificacin se realiz exitosamente"; remoteObject.consulta(); } else { estadotxt.text = "La modificacin no fue completada, intente de nuevo"; } }

private function eliminar_Result(event:ResultEvent):void{ if (event.result){ estadotxt.text = "El registro se elimin correctamente"; remoteObject.consulta(); } else { estadotxt.text = "El registro no se elimin, la operacin fall"; } } // // // //Muestra el error al no poder ejecutarse alguna funcin public static function onFault(event:FaultEvent):void { Alert.show(event.fault.faultString, 'Error'); } // // // //Esto pasar cada vez que se pusle un botn: private function onButtonPress(event:Event):void{ //Segn el boton que hayamos pulsado... switch (event.target){ case btnConsultar: remoteObject.consulta();

estadotxt.text="Consultando..." break; case btnInsertar: //Usamos la variable action para saber a cul de las acciones posibles nos referimos, //para evaluarlas despus, al presionar el botn Si action = 1; //Nos ponemos en el estado donde estn todos los mens currentState="commands"; //No necesitamos que se pueda insertar el id idtxt.text="##"; //Borramos los otros campos de texto nombretxt.text= ""; comentariostxt.text= ""; preguntatxt.text="Desea insertar este registro?"; nombretxt.editable=true; comentariostxt.editable=true; break; case btnModificar: //Nos ponemos en el estado donde estn todos los mens currentState="commands"; //Mostramos el elemento seleccionado en el DataGrid, con los carcteres codificados //correctamente idtxt.text= datagrid.selectedItem.id.toString(); nombretxt.text= unescape(datagrid.selectedItem.nombre);

comentariostxt.text= unescape(datagrid.selectedItem.comentarios); action = 2; preguntatxt.text="Desea modificar este registro?"; nombretxt.editable=true; comentariostxt.editable=true; break; case btnEliminar: //Nos ponemos en el estado donde estn todos los mens currentState="commands"; idtxt.text= datagrid.selectedItem.id.toString(); nombretxt.text= unescape(datagrid.selectedItem.nombre); comentariostxt.text= unescape(datagrid.selectedItem.comentarios); action = 3; preguntatxt.text="Desea eliminar este registro?"; nombretxt.editable=false; comentariostxt.editable=false; break; case btnSi: switch (action){ //Si la accin es... case 1: //Realizamos la funcin php que hemos pedido. remoteObject.insertar(escape(nombretxt.text), escape(comentariostxt.text)); break;

case 2: remoteObject.modificar(idtxt.text,escape(nombretxt.text), escape(comentariostxt.text)); break; case 3: remoteObject.eliminar(idtxt.text); break; } //Volvemos al estado principal currentState=""; break; case btnNo: currentState=""; break;

} } //Funcin para mostrar correctamente el DataGrid public function dataGridLabelFunction(item:Object, column:DataGridColumn):String{ //Devuelve lo mismo, pero aplicando un unescape return unescape(item[column.dataField].toString()); } //Funcin para ordenar los datos de la columna id de manera numrica, no alfabtica: public function numericSort(a:*,b:*):int{ var nA:Number=Number(a.id);

var nB:Number=Number(b.id); if (nA<nB){ return -1; }else if (nA>nB){ return 1; }else { return 0; } } ]]> </mx:Script> </mx:Application> En el primer estado coloco un Panel, que ocupar todo el espacio disponible del swf (hago esto con el width=heigth=100%) y dentro un DataGrid que tambin intentar ocupar todo el espacio. El DataGrid (datagrid) ser quien muestre la informacin. Sus tres columnas, que muestran cada una la informacin del objeto del dataProvider que les indica el parmetro dataField, aunque aqu sirve ms bien de indicador ya que las columnas tienen una labelFunction para mostrar la informacin decodificada (ya que si no hay problemas con los carcteres raros y es la solucin mas fcil). La columna que muestra la propiedad id tiene una sortCompareFunction, para que al presionar sobre ella los datos se ordenen de forma numrica, no alfabtica. Debajo del DataGrid coloco un Grid de una fila, que permitir mantener los botones que lleva dentro distribuidos segn el espacio disponible. Debajo hay una caja de texto que nos ir informando sobre el transcurso de las operaciones. Los tres ltimos paneles llevan al segundo estado, que aade tres cajas de texto y los botones para confirmar o cancelar la operacin, elimina los botones principales y deshabilita el datagrid. Segn el botn que hayamos pulsado, las cajas de texto sern o no editables y mostrarn unos datos u otros. Al insertar un registro, no podremos usar el campo id, ni modificarlo al pulsar el botn modificar. Con el botn eliminar se vern los tres campos pero ninguno ser editable. Al pulsar el botn No simplemente volveremos al estado principal y al presionar el btnSi adems realizaremos la operacin solicitada con el Remote Object de php.

Conclusiones
Flex crea un nuevo mundo de posiblidades en las aplicaciones de Internet, permitiendo un manejo de datos potente y fcil y una rapidsima forma de montar proyectos que en Flash costaran mucho ms tiempo (eso s, una vez que te acostumbras a programar con l ;) ).