Conectar Flex

5/12/2018 Conectar Flex - slidepdf.com

http://slidepdf.com/reader/full/conectar-flex 1/34

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 aprenderás desde cero a obtener datos desde una base de datos en MySQL y arepresentarlos en un DataGrid de Flex. Desde la configuración de WebORB hasta el código Actionscript 3,hecho fácil.

Para lograrlo:

1. Instalaremos WebORB, como agente de intercambio Cliente/Servidor en formatoAMF3, el cual funciona con Flex perfectamente. Gracias a WebORB podremos acceder fácilmente a los Servicios PHP que desarrollaremos para nuestro ejemplo en Flex.

2. Crearemos una base de datos en MySQL muy sencilla, a través de phpMyAdmin para el ejemplo.

3. Escribiremos una clase/servicio en PHP y la registraremos en WebORB.

4. Y finalmente, construiremos una pequeña aplicación en Flex Builder 2, que accedaal 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 básico de bases de datos, Crear una base de datos MySQL desdecPanel .

Todo esto lo haremos, paso a paso y explicando el porqué de cada cosa, desde los conceptos máselementales, hasta los más avanzados, para que al final del tutorial entiendas perfectamente, qué, cómo yporqué de todo lo que se está manejando.

Empecemos por el principio...

Voy a comenzar, explicando los conceptos fundamentales que rigen la filosofía de trabajo Cliente/Servidor que representa RemoteObject.

Estamos acostumbrados a usar archivos de texto, XML, SOAP, HTTPServices, etc, como servidores dedatos remotos. Todos ellos se basan en un modelo de representación plano, es decir, la aplicación oyenterecibe de sus orígenes 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 estándar E4X que realmente ayuda mucho en elparseo de este tipo de orígenes, pero aún así seguimos limitados a un procesamiento previo al usoefectivo de los datos, con código adicional en nuestros desarrollos. A esto se suma la perdida del tipo dedatos, carencia que deberíamos resolver nuevamente a mano.

Aún con todo, para aplicaciones sencillas suele ser una muy buena opción de uso, ya que no requierenalto rendimiento ni integridad de tipos, cosa que se vuelve fundamental en una aplicación un poco másseria, como sería una Rich Internet Application.

Para salvar esta problemática apareció Flash Remoting, que aportaba un protocolo de transporte de datosen formato binario, al cual llamaron AMF0, pensado para trabajar con ColdFusion como agente detransporte. Este protocolo permitía hacer uso de objetos complejos de una manera cuasi-transparenteentre nuestro Flash y los servicios AMF que se ejecutaban en el servidor a través de un agente detransporte que codificaba y descodificaba el protocolo contra las clases servicio que se les registraban, elmás famoso y efectivo de la época AMF0 es sin duda AMFPHP para PHP y OpenAMF para Java. Enresumen: Permitía 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 ofrecía, crearon un tipo de objeto en Flash al cualllamaron RemoteObject, el cual permitía ejecutar RPC's (Remote Procedure Call) o sea llamadas aprocedimientos remotos en un clase instanciada en el servidor, superando el problema del texto plano y la

http://www.cristalab.com/tutoriales/2-aplicaciones-web-y-moviles/


http://www.cristalab.com/usuario/3335-morphx


http://www.themidnightcoders.com/weborb/

http://www.cristalab.com/tutoriales/216/tutorial-de-flex-builder-2



http://dev.mysql.com/

http://www.phpmyadmin.net/home_page/index.php

http://www.php.net/

http://www.php.net/

http://www.adobe.com/products/flex/flexbuilder/




http://www.cristalab.com/tutoriales/75/tutorial-basico-de-bases-de-datos


http://www.cristalab.com/tutoriales/103/como-crear-bases-de-datos-mysql-desde-el-cpanel


http://www.cristalab.com/tips/tags/actionscript_3

http://www.cristalab.com/tips/39755/manejo-de-xml-en-actionscript-3-con-e4x

http://es.wikipedia.org/wiki/Rich_Internet_Application


http://www.cristalab.com/tutoriales/102/tutorial-de-instalacion-de-flash-remoting-y-amfphp

http://www.amfphp.org/


http://sourceforge.net/projects/openamf/

http://livedocs.adobe.com/flex/2/langref/mx/rpc/remoting/mxml/RemoteObject.html




http://dev.mysql.com/

http://www.phpmyadmin.net/home_page/index.php

http://www.php.net/






http://www.cristalab.com/tips/tags/actionscript_3

http://www.cristalab.com/tips/39755/manejo-de-xml-en-actionscript-3-con-e4x


http://www.cristalab.com/tutoriales/102/tutorial-de-instalacion-de-flash-remoting-y-amfphp


http://sourceforge.net/projects/openamf/

http://livedocs.adobe.com/flex/2/langref/mx/rpc/remoting/mxml/RemoteObject.html




serialización de datos que hasta entonces sufríamos. Resumen: Un RemoteObject permite invocar funciones escritas en código del lado del servidor y usar su resultado en Flash.

AFM0 evolucionó hacia AMF3 con la llegada de Flex 2, corrigiendo varias carencias que tenía el protocolooriginal, y mejorando con mucho la velocidad, el peso, el modo en como se transmite la información, ysobre todo unificando criterios de llamada y construcción de clases, al estilo Java para todos los lenguajesque lo soporten.

Una vez sabes que demonios es RemoteObject y AMF3, vamos a ver como instalamos un agente detransporte que implementa AMF3 sobre PHP en el servidor, WebORB.

NOTA: Un agente de transporte es un bloque de código que permite conectar a Flex o Flash con PHP u otro lenguaje del lado del servidor.

WebORB, es la alternativa (gratis y libre) más lograda a la versión de Abobe del protocolo AMF3, el cuales LiveCycle Data Services. LiveCycle solo puede usarse en entornos Java, en cambio WebORB dasoporte al protocolo en Java, .NET, PHP y Ruby on Rails, con un rendimiento muy alto y estable. Elsistema para configurarlo es idéntico al que usa LiveCycle, con lo cual lo que aprendas ahora paraWebORB te valdrá también para LiveCycle.

WebORB es la serie de archivos del lado del servidor (En PHP en este caso) que permiten a Flash oFlex 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 realmenteque estas haciendo, voy a explicarte como funciona un agente de transporte, para que sepas porqué ypara qué son los distintos xml's que tiene en configuración.

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 dirección serála raiz de weborb y a partir de esto empezará el tutorial.

WebORB tiene su carpeta de configuración alojada dentro /Weborb/WEB-INF/ (Buscala dentro de lacarpeta donde descomprimiste el .zip). Dentro de ésta se encuentran las clases de PHP, configuración y

http://www.themidnightcoders.com/weborb/php/index.htm

http://www.adobe.com/products/livecycle/dataservices/


http://www.themidnightcoders.net/downloadcenter/



http://www.themidnightcoders.com/weborb/php/index.htm



librerias que requerirá el agente para poder generar el protocolo e incluir nuestras clases personalesdentro de las clases usables en despliegue.

En Flex Builder has de indicar la ruta hasta la carpeta WebORB (contenedora de WEB-INF), paraencontrar los xml's de configuración 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 sepueden ofrecer en PHP, pero que si tienen soporte en su versión Java y en LiveCycle, el cual presenta laMISMA estructura de configuración.

Lo que realmente necesitamosservices-config.xml En este fichero se le indica al agente, que servicios del protocolo va a ofrecer y como se llaman. No loeditaremos en nada, a excepción de un atributo id. Puedes copiar y pegar el siguiente código completodentro 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" />



</services>

<security>



</security>

<channels>

<!-- Aquí se definen qué y como se llaman los canales.

Un canal, es realmente un proceso del agente

que procesa una petición de servicio -->



<channel-definition

id="my-amf"

class="mx.messaging.channels.AMFChannel"

>



<endpoint

uri="/Weborb/index.php"

class="flex.messaging.endpoints.AMFEndpoint"

/>

<properties>

<polling-enabled>false</polling-enabled>

</properties>

</channel-definition>

</channels>

</services-config>

Este fichero era el más complejo, ¿A que no era tan complicado?

remoting-config.xml Éste es el que más tocaremos, de hecho el anterior viene preconfigurado en la distribución y difícilmentenecesitaras tocarlo.Este es remoting-config. Lee los comentarios (En verde) para entender el XML.

<?xml version="1.0" encoding="UTF-8"?>



<service id="remoting-service"

class="flex.messaging.services.RemotingService"

messageTypes="flex.messaging.messages.RemotingMessage">



<adapters>

<adapter-definition id="java-object"class="flex.messaging.services.remoting.adapters.JavaAdapter" default="true"/>

</adapters>

<default-channels>



<channel ref="my-amf"/>

</default-channels>



<destination id="myweborb-service">



<properties>



<source>flex.morphx.UsuarioService</source>

</properties>

</destination>



<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 añadidola configuración 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 nuestrosarchivos .PHP de la aplicación.

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 concuidado el cotejamiento y el charset, de modo que sea utf8_unicode_ci, dado que Flex usa esacodificación de caracteres, y ademas nos aseguramos la compatibilidad con cualquier cliente de otrospaises. Ponle cualquier nombre a la DB.

Con la nueva DB creada, entramos al panel de administración de tablas. En esta pantalla creamosnuestra tabla de ejemplo, con esta sencilla especificación:

•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 código 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 definirán 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 correctotanto 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 enActionscript 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 comunicaciónentre PHP y Actionscript 3 que en AS3 ya está programado internamente y en PHP lo

implementamos usando las librerías WebORB para PHP . En otras palabras, AMF3 es, para efectos practicos, WebORB

Código en Actionscript 3

Creamos un archivo llamado UsuarioVO.as, que colocaremos en la misma carpeta raiz del proyecto deFlex (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 más. name será el nombre de usuario a mostrar en elDataGrid, que es el campo de contenido de nuestra tabla. Este valor será llenado por medio de PHP.

Código en PHP

Versión de PHP WebORB requiere obligatoriamente, PHP 5 .

Crearemos nuetro fichero PHP en /Services/flex/morphx/UsuarioVO.php nota que la ruta de carpetascoincide 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 enlos nombres de las carpetas ha de coincidir plenamente con la ruta indicada antes. En programación esmuy importante mantener mayusculas y minusculas de manera exacta.

<?php

class UsuarioVO {

public $name;

public function UsuarioVO() {

}

}

?>

Si os fijáis es un objeto que tiene exactamente la misma estructura que nuestro UsuarioVO.as, y dehecho sus propiedades han de llamarse exactamente igual, incluso manteniendo el mismo uso demayusculas y minusculas.

ValueObject : Esta combinación 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 conexión a MySQL. Servicio.

Vamos a crear ahora una clase servicio en PHP para nuestro ejemplo, ubicala en la misma carpeta que elPHP anterior.

Nota: Las carpetas de clases en programación se conoces como paquetes. La clase anterior tendríacomo su paquete a "flex.morphx"



La llamaremos UsuarioService.php, y será ésta la clase a la que nos conectaremos desde Flex, en lacual podremos usar sus metodos, por tanto es ésta la clase que hemos de asociar al “destination” en laconfiguración de WebORB, como vimos antes (El XML). Lee los comentarios del código (En verde)para entender su funcionamiento.

<?php

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

class UsuarioService {

public function UsuarioService() {

}

//Nuestro metodo a llamar

public function getUsuario() {

//Cabecera de conexión a la BD

//DEBES CAMBIAR LOS VALORES de "SERVER", "USER" y "PASS" de acuerdo a tus datos

//de conexión 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");

http://www.php.net/mysql_connect





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

{

//Creación de los Objetos de Transporte

$vo = new UsuarioVO();

//Le añadimos a nuestro ValueObject el nombre obtenido de MySQL

$vo->name = $row->name;

http://www.php.net/mysql_select_db

http://www.php.net/mysql_query

http://www.php.net/array



http://www.php.net/mysql_fetch_object

http://www.php.net/mysql_select_db

http://www.php.net/mysql_query


http://www.php.net/mysql_fetch_object



//Añadimos a nuestro array el ValueObject creado

$respuesta[] = $vo;

}

//Devolvemos el resultado hacia Flex

return $respuesta;

}

}

?>

Y finalmente construimos nuestro ejemplo Flex.

Código 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 través de un RemoteObject. Una llamada de éste

tipo, es por definición “asíncrona”, es decir, tenemos que pedir al RemoteObject la ejecución delprocedimiento que necesitemos y luego “esperar ” a que el servicio nos conteste, y para ello es imperativoel delegar esa espera a un listener (Un manejador de evento), para avisarle al usuario que los datos estáncargando y cuando están cargados. Visto lo anterior, se entiende que una llamada a un método remotoimplica 3 acciones:

•La llamada al método 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 elproceso.

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 línea siguiente a ella, sino que se

hará en una función a parte que será lanzada por el evento “ result ” y que nos pasará por parámetro unResultEvent 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 demanejo que nos permiten un gran numero de operaciones avanzadas sobre la "colección" de datos, talescomo: Filtros, Cursores, Ordenaciones, etc. Por ello recogemos los datos en un objeto de este tipo, queactuará 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 colección de objetos de

//transporte recibidos desde WebORB.

}

]]>

</mx:Script>



<mx:RemoteObject id="srv"

destination="myweborb-service"

showBusyCursor="true"

fault="Alert.show(event.fault.faultString, 'Error')"

>



<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 ala hora de generar nuestro swf, para ello incluiremos en dicho fichero el siguiente segmento de código (Siya lo hiciste antes en la configuración, no necesitas duplicarlo):

<destination id="myweborb-service">



<properties>



<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 deFlex 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 ya representarlos en un DataGrid de Flex, donde se puedan modificar, eliminar e insertar nuevos registros,mediante una clase de PHP. Este tutorial es una adaptación del tutorial de bases de datos con flash yamfphp de Maikel, por ser extremadamente completo y además es de donde yo aprendí.

Primero instalaremos WebOrb, un sistema parecido a AMFPHP, que funciona con Flex, y nos permiteacceder, de manera limitada, a los Flex Data Services, en concreto a los remoteObjects, instancias deuna clase de un lenguaje de servidor cuyas propiedades y métodos se pueden llamar desde Flex.WebOrb tiene algunos bugs, pero resulta muy rápido trabajar con él (por ejemplo no hacen falta losmethodTable de AMFPHP).

Después crearemos una base de datos desde phpmyadmin, agregaremos a WebOrb la clase misquerysde Maikel, y por último haremos una aplicación parecida a la suya en Flex.

Para poder realizar el tutorial es imprescindible conocer, al menos en parte, el funcionamiento de flex, phpy las bases de datos. Es recomendable haber hecho algún tuto similar para flash, como el de Maikel, quemencioné arriba.

Para empezar necesitas un servidor que admita PHP 5 (no, con PHP4 no vale) y MySQL. Un programapara crear un servidor local que cumple estas características es wamp (pero no EasyPHP u otros) .

http://www.cristalab.com/foros/viewforum.php?f=40



mailto:[email protected]




http://www.cristalab.com/usuario/1410-zah


http://www.cristalab.com/tutoriales/117/bases-de-datos-con-flash-y-amfphp



http://www.cristalab.com/foros/profile.php?mode=viewprofile&u=2645



http://www.wampserver.com/










http://www.cristalab.com/foros/profile.php?mode=viewprofile&u=2645



Además usaremos FlexBuilder2 para configurar el proyecto y obtener el swf final. Configurar el proyectocon algún otro framework es bastante complicado, pero siempre pueden probar FlashDevelop.

Instalación de WebOrb

Instalar WebOrb es muy sencillo. Además tiene la ventaja de que podemos tratar en ActionScriptinstancias de una clase de php con toda naturalidad, y sin tanto código como hace falta para AMFPHP.

Simplemente tenemos que descargar la última versión 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 (lacarpeta www donde tenemos nuestro index, vamos).

Ahora, para comprobar que todo funciona abrimos el archivohttp://tusitio/Examples/FlexRemoting/main.html , que si trabajamos en local seráhttp://localhost/Examples/FlexRemoting/main.html. Los 5 primeros test deberían funcionar sin problemas yel sexto una vez hayamos ejecutado el desde phpmyadmin (u otra cosa parecida) el archivo siguientearchivo: DIRECTORIOWEB\Services\weborb\tests\northwind.sql .

Aquí está el tutorial en inglés de la web oficial.

Preparación 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 casollamaré a la base de datos flexphp.

Crea una tabla con 3 campos, en mi caso le di el nombre de prueba, los campos deberán tener estadescripción:

Nombre Tipo de Dato Características adicionales

id bigint not null, auto_increment, clave primaria

nombre text null

comentarios text null

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

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 principalcreamos un archivo php llamado "misquerys.php":

<?php

class misquerys{

function insertar($nombre,$comentarios){

$nombre = utf8_encode($nombre);



http://www.flashdevelop.org/

http://www.themidnightcoders.com/weborb/php/weborb-php-latest.zip

http://localhost/Examples/FlexRemoting/main.html

http://www.themidnightcoders.com/weborb/php/gettingstarted.htm


http://www.flashdevelop.org/

http://www.themidnightcoders.com/weborb/php/weborb-php-latest.zip

http://localhost/Examples/FlexRemoting/main.html




$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;";


}

function consulta (){

$sql = "SELECT * FROM prueba ORDER BY id ";


}



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;

}

}

?>

Explicación:

Una descripción detallada de cada método:

Nombre Parámetros Explicación Valor de Retorno

insertar $nombre,$comentarios

Inserta los parámetros a los

respectivos campos de la tabla,codificando con utf8_encode losparámetros para entender lacodificación que hace flash con elescape para mandarle losparámetros y crea la respectivasentencia SQL.

Retorna el id del registro insertadoen tal caso de que se haya hechoexitosamente.

eliminar $idCrea la sentencia SQL DELETE conla condición de que id sea el querecibio.

Retorna 1 si fue exitosa la operacióno 0 en caso contrario.

modificar $id, $nombre,

$comentarios

Crea la sentencia SQL UPDATE,buscando el registro cuyo campo idcorresponda con $id y actualiza los

campos nombre y comentarios conlos respectivos parámetros.

Retorna 1 si fue exitosa la operación

o 0 en caso contrario.



consulta ningunoCrea la sentencia SQL SELECTpara seleccionar todos los registrosde la tabla.

Retorna un RecordSet con losregistros.

query $sql, $accion

$sql será la sentencia SQL queejecutará, $accion es para hacer unaexcepción de que si la sentencia esun INSERT.

•Para consulta: retornaun recordSet.•

Para eliminar ymodificar: 1 o 0 en casode que haya sidoexitosa la operación.

•Para insertar: hay unaexcepción donde elparámetro $accionvaldrá 1 al invocar lafunción query y es paraindicar que retornará elid del último registroinsertado.

Noten que en el código, en la función query, donde pone " tuhost , "user " y " password " tendrán quesustituirlos 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, alfinal del código, antes del último </service> añadimos lo siguiente

<destination id="misquerys">

<properties>

<source>misquerys</source>

</properties>

</destination>

</service>

Configuración del proyecto de Flex

Vamos con Flex Builder:

File> New > Flex Project.

En el primer cuadro de diálogo How will your Flex application access data? seleccionamos Flex DataServices, y después Compile application locally in Flex Builder. Hacemos click en Next.

Después en el siguiente diálogo, en el cuadro "Root folder " tendremos que decir cuál es la ruta de lacarpeta weborb, en la que está el servidor. La mía es: C:\wamp\www\Weborb . Y en el cuadro "RootURL" cuál será la URL del servidor, en este caso, http://localhost/Weborb . De nuevo, hacemos click enNext,

Ahora nos pide que demos un nombre al proyecto y la carpeta en la que se guardará. Cuando lo hayamoshecho, volvemos a pinchar en Next.

Allí, dejamos vacío el campo "Main source folder " y donde pone Output folder , ponemos la carpeta en laque deseamos que esté el archivo generado (tendrá que ser dentro del directorio web). Por ejemplo:

C:\wamp\www\Examples. También tendremos que darle la ruta que tendrá cuando aparezca en elnavegador al darle al botón de compilar, en el caso anterior sería esta: http://localhost/Examples.

De nuevo, esto pueden verlo en inglés en la ayuda de WebOrb.

Y por fin podemos empezar a programar mxml.

Creación de la aplicación de Flex.

Como es un poco difícil de separar por partes, pondré todo el código comentado y luego una explicaciónmás general (y creo que es más rápido que andar explicando con el modo diseñador de Flex). Así quelean atentamente los comentarios (Texto en verde) del siguiente código:

<?xml version="1.0" encoding="utf-8"?>



<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"

creationComplete="remoteObject.consulta()">

<mx:Panel title="Operaciones de Bases de Datos con Flex2" width="100%" x="0"height="100%" y="0">



<mx:VBox x="0" y="0" width="100%" height="100%" horizontalAlign="center"id="vbox1">



<mx:DataGrid width="100%" id="datagrid" height="100%"change="{dgIndex=datagrid.selectedIndex}">

<mx:columns>



<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>



<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:Button label="Insertar" id="btnInsertar" click="onButtonPress(event);"/>

</mx:GridItem>


<mx:Button label="Modificar" id="btnModificar"click="onButtonPress(event);"/>

</mx:GridItem>


<mx:Button label="Eliminar" id="btnEliminar" click="onButtonPress(event);"/>

</mx:GridItem>

</mx:GridRow>

</mx:Grid>

<mx:HBox width="100%">

<mx:Label text="Estado:"/>

<mx:Label id="estadotxt" text="cargando..."/>

</mx:HBox>

</mx:VBox>

</mx:Panel>



<mx:states>

<mx:State name="commands">



<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>

<mx:RemoteObject id="remoteObject" destination="misquerys" showBusyCursor="true">



<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>



<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á necesariapara definir

//función 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é operación 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 petición. 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 demás 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 inserción se realizó exitosamente";

dgIndex=datagrid.dataProvider.length;

//Volvemos a cargar los datos actulizados

remoteObject.consulta();

} else {

estadotxt.text = "La inserción 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 modificación se realizó exitosamente";


} else {

estadotxt.text = "La modificación no fue completada, intente de nuevo";

}

}



private function eliminar_Result(event:ResultEvent):void{

if (event.result){

estadotxt.text = "El registro se eliminó correctamente";


} else {

estadotxt.text = "El registro no se eliminó, la operación falló";

}

}

//

//

//

//Muestra el error al no poder ejecutarse alguna función

public static function onFault(event:FaultEvent):void

{

Alert.show(event.fault.faultString, 'Error');

}

//

//

//

//Esto pasará cada vez que se pusle un botón:

private function onButtonPress(event:Event):void{

//Según el botoón que hayamos pulsado...

switch (event.target){

case btnConsultar:




estadotxt.text="Consultando..."

break;

case btnInsertar:

//Usamos la variable action para saber a cuál de las acciones posibles nosreferimos,

//para evaluarlas después, al presionar el botón Si

action = 1;

//Nos ponemos en el estado donde están todos los menús

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:



//Mostramos el elemento seleccionado en el DataGrid, con los carácterescodificados

//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:



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 acción es...

case 1:

//Realizamos la función 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;

}

}

//Función 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());

}

//Función para ordenar los datos de la columna id de manera numérica, no alfabética:

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 elwidth=heigth=100%) y dentro un DataGrid que también intentará ocupar todo el espacio.

El DataGrid (datagrid) será quien muestre la información. Sus tres columnas, que muestran cada una lainformación del objeto del dataProvider que les indica el parámetro dataField, aunque aquí sirve más biende indicador ya que las columnas tienen una labelFunction para mostrar la información decodificada (yaque si no hay problemas con los carácteres raros y es la solución mas fácil). La columna que muestra lapropiedad id tiene una sortCompareFunction, para que al presionar sobre ella los datos se ordenen deforma numérica, no alfabética.

Debajo del DataGrid coloco un Grid de una fila, que permitirá mantener los botones que lleva dentrodistribuidos según 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 añade tres cajas de texto y los botones paraconfirmar o cancelar la operación, elimina los botones principales y deshabilita el datagrid.

Según el botón que hayamos pulsado, las cajas de texto serán o no editables y mostrarán unos datos uotros. Al insertar un registro, no podremos usar el campo id, ni modificarlo al pulsar el botón modificar.Con el botón eliminar se verán los tres campos pero ninguno será editable.

Al pulsar el botón No simplemente volveremos al estado principal y al presionar el btnSi ademásrealizaremos la operación solicitada con el Remote Object de php.

Conclusiones

Flex crea un nuevo mundo de posiblidades en las aplicaciones de Internet, permitiendo un manejo dedatos potente y fácil y una rapidísima forma de montar proyectos que en Flash costarían mucho más

tiempo (eso sí, una vez que te acostumbras a programar con él ;) ).

Conectar Flex

Documents

Transcript of Conectar Flex