Insertando datos con ActionScript 3.0

12 agosto, 2010

Prefacio

Para entender el funcionamiento del código enlazaremos esta función con la interfaz que creamos en el post de Mi Primer Formulario, y a la vez este código lo puedes implementar con la Clase DatosLoader.as que hemos desarrollado. Recuerda todo lo que estamos desarrollando en este post lo puedes integrar con los demas post que estamos desarrollando, todo con el objetivo para poder facilitarte la comprensión.

Necesitamos crear algun archivo ActionScript para que sea conectado a la interfaz de usuario, este archivo lo llamaremos interfaceCode.as y lo ubicaremos dentro de la misma carpeta donde este el archivo .mxml de la aplicaciòn principal. Un ejemplo de como quedaria:

Ejemplo de Estructura de Archivos

Ejemplo de Estructura de Archivos

Para poder crear el archivo interfaceCode.as tendremos que ingresar dentro del IDE de Flex Builder 3 a File > New > ActionScript File y una vez nos salga la ventana de dialogo, solamente tendremos que seleccionar la ubicación donde queremos guardar el archivo y le asignamos el nombre.

Ahora empecemos con el còdigo, primero importaremos las bibliotecas DatosLoader para instanciar un objeto y así enviar la solicitud ser procesada -para una mejor comprensión lee aquí para entender la clase DatosLoader-, las clases MouseEvent son para que responda bien la aplicación cuando hagamos el llamado a la función al momento que el usuario haga clic en el boton dentro de la interfaz y la clase URLVariables la utilizaremos para empaquetar los datos capturados, el código es el siguiente:

// ActionScript file
import com.gestiondatos.DatosLoader;

import flash.events.Event;
import flash.events.MouseEvent;
import flash.net.URLVariables;

import mx.events.FlexEvent;

Seguido declaremos la variable directorio que almacenará la ubicación del directorio donde estarán guardados los Script PHP que utilizaremos -la estructura del los Script PHP lo puedes revisar aquí, de ahi puedes adaptar ese código PHP a este proyecto-. y un objeto llamado consultaLoader de la clase DatosLoader. Támbien creamos la variable datosXMLList que cargará el XML leido por la clase DatosLoader -este contendrá las etiquetas hijos que se encuentren dentro de channel, para la saber como es la estructura de un Documento XML puedes revisar aquí-.

// recuerda que aquí tienes que reemplazar la dirección del servidor que tu utilizas.
private var directorio:String = "http://localhost:8088/GestionDatos/src/ScriptPHP/";

private var datosXMLList:XMLList;

private var consultaLoader:DatosLoader = new DatosLoader();

La función encargada de realizar el ingreso de nuevos registros a la base de datos tendrá el nombre de capturaDatos; dentro de la función crearemos en primera instancia el objeto que llevará empaquetado como atributos todos los datos del formulario, tendrá como nombre capVrs del tipo URLVariables. Luego se asigna al objeto consultaLoader un detector de eventos con los parámetros Event.COMPLETE y la función resCapturaDatos. Por último utilizamos el método gestion de la clase DatosLoader y pasamos como parámetros la variable directorio concatenando el nombre del archivo PHP y el objeto capVrs.

private function capturaDatos(e:MouseEvent):void {
   var capVrs:URLVariables = new URLVariables();
   capVrs.nombre = txtNombre.text;
   capVrs.apellido = txtApellido.text;
   capVrs.email = txtEMail.text;
   consultaLoader.addEventListener(Event.COMPLETE, resCapturaDatos);
   consultaLoader.gestion(directorio + "capturaInfo.php", capVrs);
}

Dentro de la función resCapturaDatos estaremos cargando las respuestas que se recibirán de la etiqueta message del Script PHP generado como Documento XML, con esto lo mandaremos a imprimir en la etiqueta text txtMensaje. Luego limpiaremos el formulario con una función llamada limpiaForm -la desarrollaremos más adelante- y por último removemos el evento -esto último es para eliminar consumo de memoria innecesaria y respuestas no deseadas ante eventos-.

private function resCapturaDatos(e:Event):void {
   datosXMLList = consultaLoader.obtenerDatosXML();
   txtMensaje.text = datosXMLList.message;
   limpiaForm();
   consultaLoader.removeEventListener(Event.COMPLETE, resCapturaDatos);
}

Extraemos el XML devuelto con el método obtenerDatosXML de la clase DatosLoader y luego le asignamos el valor de la etiqueta message a txtMensaje. Ahora veamos la función limpiaForm:

private function limpiaForm():void {
   txtNombre.text = "";
   txtApellido.text = "";
   txtEMail.text = "";
}

La función es sencilla, solo solicitamos borrar el contenido de las etiquetas pasando el valor «» con la propiedad text. Ahora necesitamos implementar esta función al botón btnCapturar, entonces nos pasaremos al archivo de la aplicación principal con extensión .mxml y dentro haremos referencia al archivo interfaceCode.as haciendo uso de la etiqueta Script que irá por debajo de la etiqueta de apertura Application -este archivo es el que creamos en este post-. Veamos el código:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"
   backgroundColor="#FFFFFF" backgroundGradientColors="[#008AFF, #EFEFF0]"
   backgroundGradientAlphas="[0.0, 1.0]" width="480" height="280">

   <mx:Script source="interfaceCode.as"/>

Después con el evento click asignamos la función capturaDatos al botòn btnCapturar que esta ubicado dentro de la etiqueta ControlBar, así:

<mx:ControlBar>
   <mx:Button id="btnCapturar" label="Capturar" click="capturaDatos(event)"/>
   <mx:Button id="btnModificar" label="Modificar"/>
   <mx:Button id="btnLimpiar" label="Limpiar"/>
</mx:ControlBar>

Si unes todo lo visto en este post te estaria funcionando perfectamente -claro si haz desarrollado previamente la base de datos-. Practicamente es la misma secuencia de código la que estarías utilizando si deseases modificar datos, el único código a modificar seria cambiar el nombre de la función de capturaDatos a modificaDatos -o cualquier otro-, y cambiar el nombre del archivo PHP a utilizar -recuerda que dentro del Script PHP tendrás que adaptarlo para que te funcione como un UPDATE dentro de la base de datos-.

Veamos como ha quedado el código completo:

// ActionScript file
import com.gestiondatos.DatosLoader;

import flash.events.Event;
import flash.events.MouseEvent;
import flash.net.URLVariables;

import mx.events.FlexEvent;

// recuerda que aquí tienes que reemplazar la dirección delservidor que tu utilizas.
private var directorio:String = "http://localhost:8088/GestionDatos/src/ScriptPHP/";

private var datosXMLList:XMLList;

private var consultaLoader:DatosLoader = new DatosLoader();

private function capturaDatos(e:MouseEvent):void {
   var capVrs:URLVariables = new URLVariables();
   capVrs.nombre = txtNombre.text;
   capVrs.apellido = txtApellido.text;
   capVrs.email = txtEMail.text;
   consultaLoader.addEventListener(Event.COMPLETE, resCapturaDatos);
   consultaLoader.gestion(directorio + "gestionPorDUI.php", capVrs);
}

private function resCapturaDatos(e:Event):void {
   datosXMLList = consultaLoader.obtenerDatosXML();
   txtMensaje.text = datosXMLList.message;
   limpiaForm();
   consultaLoader.removeEventListener(Event.COMPLETE, resCapturaDatos);
}

private function limpiaForm():void {
   txtNombre.text = "";
   txtApellido.text = "";
   txtEMail.text = "";
}

Hola, espero te haya gustado y te sea util la información que hayas encontrado, esperamos que sigas aprendiendo y te invito a que revises todo el blog. Estamos trabajando para editar la información dentro del blog para que puedas encontrar diversos temas referentes a Flex Builder 3 y ActionScript 3.0.

Apoya al proyecto rias4u ingresando aquí!!! =D



Desarrollemos en PHP una plantilla para generar XML

7 agosto, 2010

Fácil de entender, no te preocupes… si te preguntas en estos momentos ¿Cómo puedo generar un Script PHP que me devuelva un Documento XML?; bien tomemos como base que generaremos un Documento XML Bien Formado con formato RSS 2.0 -si no no sabes lo que hemos estamos hablando, ingresa aquí para que tengas un mejor panorama-.

Existen varios caminos para generar un Documento XML en PHP, y el que hemos tomado esta divido por tres archivos PHP, el primer archivo genérico es para conectar alguna base de datos, el segundo archivo PHP es para dar el formato RSS 2.0 al Documento XML; por último dejaremos el archivo encargado de poblar las etiquetas item que contiene un XML con RSS 2.0. Veamos primero el archivo que hará la conexión a una base de datos SQL.

<?php
//Este archivo puede ser nombrado como connectDB.php

$db_host = 'localhost';
$db_user = 'root';
$db_pass = '';
$db_name = 'informacion';
mysql_connect($db_host, $db_user, $db_pass);
mysql_select_db($db_name);

?>

En este archivo utilizamos datos de prueba, en el caso hemos digitado el nombre del localhost que utilizamos en el servidor remoto, si no posee usuario y contraseña con la base de datos que estas utilizando entonces sería root y no tendrías que declarar nada en el password, con respecto a la base de datos es aquí donde señalizamos cual es la base de datos que utilizaremos por ejemplo en nuestro caso es informacion. Y con toda esta información hacemos la conexión a la base de datos y luego indicamos la base que utilizaremos.

Ahora pasemos al segundo Script PHP que dará el formato RSS 2.0 al documento XML que generemos.

<?php
//Este archivo lo puede llamar introXML.php

$xml = new DomDocument('1.0', 'UTF-8');
$root = $xml->createElement('rss');
$root->setAttribute('version', '2.0');
$root = $xml->appendChild($root);
$channelElement = $xml->createElement('channel');
$channelElement = $root->appendChild($channelElement);
$titleElement = $xml->createElement('title','Consulta de Datos');
$titleElement = $channelElement->appendChild($titleElement);
$linkElement = $xml->createElement('link','http://localhost:8088/GestionDatos/');
$linkElement = $channelElement->appendChild($linkElement);
$descriptionElement = $xml->createElement('description','Aplicaciòn de Gestion de Datos');
$descriptionElement = $channelElement->appendChild($descriptionElement);

?>

El código puede aparentar difícil, pero si te fijas lleva una secuencia -bastante logica- y no tienes donde perderte. Dentro de la variable $xml creamos el Documento XML con la versión 1.0 y la codificación UTF-8, luego creamos un nodo raiz llamado rss y con setAttribute le colocamos como atributo la versión 2.0, posteriormente con appendChild insertamos el nodo al Documento XML.

Ojo con la secuencia lógica… luego creamos un nuevo elemento o nodo hijo llamado channel y lo guardamos dentro de $channelElement, a este no le colocamos ningun atributo y con la sentencia appendChild lo asignamos como hijo de $root. Posteriormente creamos el nuevo elemento title y le colocamos el valor de Consulta de Datos -esto lo almacenamos dentro de $titleElement-,  y luego con appendChild se lo colocamos como hijo de channel. Y así sucesivamente; aclaro que en este punto no esta completo el XML ya que necesitamos incluir otra secuencia de código con el tercer Script PHP, puesto que este Script es solo para para generar la especificación del XML.

Pero… ¿Cómo vamos a utilizar estos dos archivos? sencillo! los llamaremos con un include dentro del tercer Script PHP que generará el XML. El Script que desarrollaremos a continuación se compondrá de las siguientes partes: el encabezado, la captura de datos, la consulta realizada, la validación de la consulta, la captura de los datos recibidos por la consulta y el almacenamiento del Documento XML. Empecemos por el encabezado que llevara el archivo.

<?php
//El archivo lo puedes llamar generaXML.php
header('Content-Type: text/xml');

include 'connectDB.php';
include 'introXML.php';

?>

En la parte del encabezado incluiremos un header para indicarle al navegador la transferencia de datos XML, luego se implementan los include necesarios para hacer la conexión a la base de datos y la escritura de la especificación del Documento XML. Veamos a continuación la captura de datos.

$capturaNombre = $_POST['capturaNombre'];
$capturaApellido = $_POST['capturaApellido'];

Hemos utilizado el método POST para capturar los datos que serán pasados por el objeto URLVariables de ActionScript 3.0, aclaramos que debes de tener cuidado con respecto al nombre del atributo que utilices dentro del objeto URLVariables, en este ejemplo estamos capturando los valores de capturaNombre y capturaApellido, esto quiere decir que en el archivo ActionScript tendrá que enviarse estos parametros  con los mismos nombres, asi:

var capVrs:URLVariables = new URLVariables();
capVrs.capturaNombre = "Juan";
capVrs.capturaApellido = "Pérez";

Con respecto a la consulta de datos, no es más que la gestiòn de una consulta a la base de datos. Esta es cualquier consulta que se realice a la base, pondremos una consulta de ejemplo a continuación:

$sql = "SELECT nombre, apellido, fechaNac, email
        FROM datos
        WHERE (nombre = '$capturaNombre')";

En el siguiente codigo veremos primero el envio de la consulta y la validación, que esta compuesta por la anidación del los dos if y el ciclo while, el primer condicional if verifica si no ha ocurrido algun error en la consulta a la base de datos, el segundo if verifica si la consulta ha devuelto información de la base de datos y siendo el caso verdadero entonces se procede en recorrer el resultado recibido con una iteración while y los valores devueltos por la base de datos son almacenados en variables. A la vez por cada iteración del ciclo while se creara un elemento item donde tendrá como hijos a nombre, apelllido, fechaNac y email.

$result = mysql_query($sql);

if ($result) {
   if (mysql_num_rows($result) > 0) {
      while ($row = mysql_fetch_array($result)) {
         $nombre = $row['nombre'];
         $apellido = $row['apellido'];
         $fechaNac = $row['fechaNac'];
         $email = $row['email'];

         $itemElement = $xml->createElement('item');
         $itemElement = $channelElement->appendChild($itemElement);

         $nombreElement = $xml->createElement('nombre', $nombre);
         $nombreElement = $itemElement->appendChild($nombreElement);

         $apellidoElement = $xml->createElement('apellido', $apellido);
         $apellidoElement = $itemElement->appendChild($apellidoElement);

         $fechaNacElement = $xml->createElement('fechaNac', $fechaNac);
         $fechaNacElement = $itemElement->appendChild($fechaNacElement);

         $emailElement = $xml->createElement('email', $email);
         $emailElement = $itemElement->appendChild($emailElement);
      } // Cierre del Bucle While
    } // Cierre del if que verifica si ha encontrado información
   else {
      $messageElement = $xml->createElement('message', 'Información no encontrada.');
      $messageElement = $channelElement->appendChild($messageElement);
   } // Cierre del else
} // Cierre del if que verifica si ha ocurrido algún error en la base de datos
else {
   $messageElement = $xml->createElement('message', mysql_error());
   $messageElement = $channelElement->appendChild($messageElement);
} // Cierre del else

echo $xml->saveXML();
?>

El final del código no son más que los mensajes que pueden ser devueltos de la consulta a la base de datos, ejemplo, no se encontro información, o ha ocurrido un error en la consulta. Por último guardamos el XML creado con la función saveXML. Para tener un mejor panorama sobre lo que hemos creado veamos el código completo:

<?php
//El archivo lo puedes llamar generaXML.php

header('Content-Type: text/xml');

include 'connectDB.php';
include 'introXML.php';

$capturaNombre = $_POST['capturaNombre'];
$capturaApellido = $_POST['capturaApellido'];

$sql = "SELECT nombre, apellido, fechaNac, email
        FROM datos
        WHERE (nombre = '$capturaNombre')";

$result = mysql_query($sql);

if ($result) {
   if (mysql_num_rows($result) > 0) {
      while ($row = mysql_fetch_array($result)) {
         $nombre = $row['nombre'];
         $apellido = $row['apellido'];
         $fechaNac = $row['fechaNac'];
         $email = $row['email'];

         $itemElement = $xml->createElement('item');
         $itemElement = $channelElement->appendChild($itemElement);

         $nombreElement = $xml->createElement('nombre', $nombre);
         $nombreElement = $itemElement->appendChild($nombreElement);

         $apellidoElement = $xml->createElement('apellido', $apellido);
         $apellidoElement = $itemElement->appendChild($apellidoElement);

         $fechaNacElement = $xml->createElement('fechaNac', $fechaNac);
         $fechaNacElement = $itemElement->appendChild($fechaNacElement);

         $emailElement = $xml->createElement('email', $email);
         $emailElement = $itemElement->appendChild($emailElement);
      } // Cierre del Bucle While
   } // Cierre del if que verifica si ha encontrado información
   else {
      $messageElement = $xml->createElement('message', 'Información no encontrada.');
      $messageElement = $channelElement->appendChild($messageElement);
   } // Cierre del else
} // Cierre del if que verifica si ha ocurrido algún error en la base de datos
else {
   $messageElement = $xml->createElement('message', mysql_error());
   $messageElement = $channelElement->appendChild($messageElement);
} // Cierre del else

echo $xml->saveXML();
?>

Con esto finalizamos la plantilla para generar XML con PHP, este código es fácilmente adaptable y conforme a la cantidad de datos devueltos por la consulta a la base de datos así tendras que incrementar o quitar los elementos o nodos que serán enviados como Documento XML. Veamos un ejemplo de como seria devuelto una consulta a la base de datos.

<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0">
   <channel>
      <title>Consulta de Datos</title>
      <link>http://localhost:8088/GestionDatos/</link>
      <description>Aplicación de Gestión de Datos</description>
      <item>
         <nombre>Juan</nombre>
         <apellido>Pérez</apellido>
         <fechaNac>01/01/1900</fechaNac>
         <email>perez.juan@mail.com</email>
      </item>
   </channel>
</rss>

Hola, espero te haya gustado y te sea util la información que hayas encontrado, esperamos que sigas aprendiendo y te invito a que revises todo el blog. Mientras estaremos preparando la información dentro del blog para que puedas encontrar diversos temas referentes a Flex Builder 3 y ActionScript 3.0.

Apoya al proyecto rias4u ingresando aquí!!! =D