Sistema de Clientes (AIR y SQLite) Parte II (Insertar Registros)

Publicado por Carla Macías
1 Septiembre, 2008

Adobe AIREsta es la segunda parte del proyecto "Sistema de Clientes" desarrollado en AIR con SQLite como administrador de base de datos. En la entrada anterior vimos cómo crear la base de datos (clientesDB.sqlite), y cómo llenar con algunos registros por default la tabla cliente.
Esta entrada forma parte de un proyecto y los archivos de éste los encontrarás cuando termine de publicar todas las partes (entradas). Recuerda que para este proyecto estamos usando Flex Builder 3, del cual puedes bajarte una versión de prueba del Flex Builder 3 aquí.

Como lo comenté en el post anterior , aquí mostraré solamente la información más importante y sobre la cual trata el tema, sin embargo el archivo fuente del proyecto está completo y tiene integrado todo lo que se mostrará en esta entrada, la anterior y en las siguientes, para así formar un proyecto completo. Dicho lo anterior, a continuación iniciaré la explicación sobre cómo insertar registros en una base SQLite.

Parte 2: Insertar registros en SQLite con AIR

Recuerda que para mantener organizado el código de nuestro proyecto y para evitar que se pierdan con toda la información aquí mostrada, dividí el código del proyecto en archivos .as. Estos archivos estarán almacenados en la carpeta actionscript. La estructura de nuestro proyecto será la siguiente:

Imagen 1

Imagen 1

Todas las interfaces de este proyecto están incluidas en la carpeta componentes. La interfaz para dar de alta un nuevo cliente está en el archivo AltaCliente.mxml. Esta interfaz será la siguiente:

Imagen 1

Imagen 2

Los IDs de cada uno de estos elementos son:

El código del archivo AltaCliente.mxml es el siguiente:

Texto Plano
Actionscript:
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <mx:Canvas show="abreConexion()" xmlns:mx="http://www.adobe.com/2006/mxml" width="100%" height="100%">
  3.     <mx:Script source="../actionscript/AltaCliente.as"/>
  4.     <mx:Label y="16" text="Alta de Clientes" textAlign="center" fontWeight="bold" fontSize="14" fontFamily="Verdana" color="#F64507" width="212" horizontalCenter="48"/>
  5.     <mx:TextInput y="57" width="212" height="21" id="nombre_txt" fontSize="10" fontFamily="Verdana" horizontalCenter="48"/>
  6.     <mx:TextArea y="88" width="212" height="69" id="direccion_txt" horizontalCenter="48"/>
  7.     <mx:TextInput y="168" width="212" height="21" id="telefono_txt" fontSize="10" fontFamily="Verdana" horizontalCenter="48"/>
  8.     <mx:TextInput y="197" width="212" height="21" id="correo_txt" fontSize="10" fontFamily="Verdana" horizontalCenter="48"/>
  9.     <mx:Label y="57" text="Nombre:" fontSize="12" fontFamily="Verdana" fontWeight="normal" color="#000000" width="101" textAlign="right" horizontalCenter="-127"/> 
  10.     <mx:Label y="93" text="Dirección:" fontSize="12" fontFamily="Verdana" fontWeight="normal" color="#000000" width="101" textAlign="right" horizontalCenter="-127"/>
  11.     <mx:Label y="168" text="Teléfono:" fontSize="12" fontFamily="Verdana" fontWeight="normal" color="#000000" width="101" textAlign="right" horizontalCenter="-127"/>
  12.     <mx:Label y="197" text="Correo:" fontSize="12" fontFamily="Verdana" fontWeight="normal" color="#000000" width="101" textAlign="right" horizontalCenter="-127"/>
  13.     <mx:Button y="230" label="Aceptar" width="100" horizontalCenter="104" click="{validaForma();}"/>
  14.     <mx:Label y="57" text="(*)" fontSize="10" fontFamily="Verdana" fontWeight="bold" color="#B80808" width="27" textAlign="left" id="msj1" visible="false" horizontalCenter="171"/>
  15.     <mx:Label y="89" text="(*)" fontSize="10" fontFamily="Verdana" fontWeight="bold" color="#B80808" width="27" textAlign="left" id="msj2" visible="false" horizontalCenter="171"/>
  16.     <mx:Label y="168" text="(*)" fontSize="10" fontFamily="Verdana" fontWeight="bold" color="#B80808" width="27" textAlign="left" id="msj3" visible="false" horizontalCenter="171"/>
  17.     <mx:Label y="197" text="(*)" fontSize="10" fontFamily="Verdana" fontWeight="bold" color="#B80808" width="27" textAlign="left" id="msj4" visible="false" horizontalCenter="171"/>
  18. </mx:Canvas>

Observa en el código anterior que el tag principal de este archivo es <mx:Canvas> y no <mx:WindowedApplication>, esto es porque todas las interfaces que están dentro del directorio componentes las desplegaremos dentro de la aplicación principal (Sistema_Clientes.mxml); a la propiedad show del Canvas le estamos especificando que llame a la función abreConexion() una vez que se haya terminado de mostrar el componente. También observa cómo estamos incluyendo el código de AltaCliente.as:

Texto Plano
Actionscript:
  1. <mx:Script source="../actionscript/AltaCliente.as"/>

Otro punto importante a destacar del código anterior es el botón que tiene de etiqueta “Aceptar”, cuando se produce un click en este botón llamaremos a la función validaForma() para asegurarnos que todos los datos requeridos sean llenados.

Texto Plano
Actionscript:
  1. <mx:Button y="230" label="Aceptar" width="100" horizontalCenter="104" click="{validaForma();}"/>

A continuación está la explicación del código del archivo AltaCliente.as:

Texto Plano
Actionscript:
  1. import flash.data.SQLConnection;
  2. import flash.events.SQLErrorEvent;
  3. import flash.events.SQLEvent;   
  4. import mx.controls.Alert; /* Haremos uso de los mensajes de alerta, por lo que de una vez añadimos la clase */
  5.  
  6. private var conexion:SQLConnection; // Nuestro objeto de la clase SQLConnection
  7. private var database:File; /* Aquí guardaremos la referencia de nuestro archivo .sqlite que es nuestra base de datos */
  8. private var queryStatement:SQLStatement = new SQLStatement(); /* Creamos una variable de tipo SQLStatement en la cual estableceremos los queries y parámetros de nuestras consultas */
  9.  
  10. public function abreConexion():void {
  11.     nombre_txt.setFocus();
  12.     database = new File(File.applicationStorageDirectory.nativePath + "\database\clientesDB.sqlite");
  13.     conexion = new SQLConnection();
  14.     conexion.addEventListener(SQLEvent.OPEN, dbAbrirConexion);
  15.     conexion.addEventListener(SQLErrorEvent.ERROR, dbErrorConexion);                 
  16.     conexion.open(database);
  17.     queryStatement.sqlConnection = conexion;
  18. }

Del código anterior, las seis primeras líneas no cambian en nada con respecto al código mostrado en el primer post. Cuando se llame la función abreConexion posicionaremos el cursor dentro del campo de texto nombre_txt, establecemos cuál es el archivo de la base de datos e intentamos abrirla; si existiera algún error es llamada la función dbErrorConexion; en caso contrario, es llamada la función dbErrorConexion.

En esta ocasión, la función abreConexion será llamada desde la intefaz que mostré más arriba (desde el archivo AltaCliente.mxml).

Como lo señalé más arriba, una vez que el usuario introduzca los datos y haga click en el botón de Aceptar, la función validaForma() será llamada, el código de esta función te lo presento a continuación:

Texto Plano
Actionscript:
  1. private function validaForma():void {
  2.     escondeMensajes();
  3.     if(nombre_txt.text == "") {
  4.         msj1.visible = true;
  5.         nombre_txt.setFocus();
  6.     }
  7.     else if(direccion_txt.text == "") {
  8.         msj2.visible = true;
  9.         direccion_txt.setFocus();
  10.     }
  11.     else if(telefono_txt.text == "") {
  12.         msj3.visible = true;
  13.         telefono_txt.setFocus();
  14.     }
  15.     else if(correo_txt.text == "" || !mail(correo_txt.text)) {
  16.         msj4.visible = true;
  17.         correo_txt.setFocus();
  18.     }
  19.     else
  20.         compruebaCliente();
  21. }

Dentro del código de AltaCliente.mxml están unas etiquetas con IDs msj1, msj2, msj3, etc. y cuyo texto es (*); estas etiquetas nos permitirán mostrarle al usuario qué información le faltó por llenar. Como su nombre lo indica, la función escondeMensajes se encarga de "esconder" (visible = false) éstos mensajes y así mostrar solamente los que son necesarios.

En este ejemplo, tenemos cuatro sentencias if encargadas de verificar que la información en los campos de texto nombre_txt, dirección_txt, telefono_txt y correo_txt sean distintos de vacío. Además, nos aseguramos que el formato del correo electrónico sea correcto creando la función mail.

Finalmente, si ninguna de las cuatro condicionales if se cumple (es decir, toda la información requerida fue introducida) llamamos a la función compruebaCliente y verificar si el correo electrónico proporcionado ya existe en la base de datos.

A continuación, te muestro el código de las funciones escondeMensajes, mail y compruebaCliente:

Texto Plano
Actionscript:
  1. private function escondeMensajes():void {
  2.     msj1.visible = false;
  3.     msj2.visible = false;
  4.     msj3.visible = false;
  5.     msj4.visible = false;
  6. }
  7.  
  8. private function mail(email:String):Boolean
  9. {
  10.     var res:Boolean = false;
  11.     if(email.indexOf("@")>0 && email.indexOf("@") == email.lastIndexOf("@"))
  12.     {
  13.         if(email.lastIndexOf(".")>email.indexOf("@") && email.lastIndexOf(".")<email.length-1)
  14.         {
  15.             res = true;
  16.         }
  17.     }
  18.     return res;
  19. }
  20.  
  21. private function compruebaCliente():void {
  22.     var correo:String = correo_txt.text;
  23.        
  24.     queryStatement.clearParameters();
  25.     queryStatement.text = "SELECT 1 FROM cliente WHERE email = :correo LIMIT 1";
  26.     queryStatement.parameters[":correo"] = correo;
  27.    
  28.     try {
  29.         query.execute();
  30.        
  31.         var result:SQLResult = query.getResult();
  32.        
  33.         if(result.data != null)
  34.             Alert.show("Esa cuenta de correo ya existe");
  35.         else
  36.             insertaCliente();
  37.  
  38.     } catch(error:SQLError) {
  39.         Alert.show("Error: “ + error.toString());
  40.     }      
  41. }

Observa que dentro de la función compruebaCliente estamos declarando la variable correo y asignándole el valor del cuadro de texto correo_txt. Esta variable la pasaremos como parámetro a la consulta para verificar que esa cuenta de correo electrónico no exista en la base de datos. Con la función clearParameters de nuestro objeto SQLStatement estamos eliminando los posibles parámetros que hayamos asignado con anterioridad, de no hacer esto el programa generará un error indicándonos que la cantidad de parámetros establecidos en el query no concuerda con los parámetros del SQLStatement. A esta variable le indicamos a su propiedad text el query o la consulta que debe realizar. Además, le especificamos (dentro del query) que llevará el parámetro :correo y le asignamos a ese parámetro el valor de la variable correo.
Por último, realizamos la ejecución de la consulta y verificamos si el resultado obtenido es distinto de vacío (nulo – null). Si el resultado es distinto de vacío quiere decir que sí existe un registro con esa cuenta de correo y por lo tanto mostramos un mensaje de alerta informándole al usuario; en caso contrario, llamamos a la función insertaCliente():

Texto Plano
Actionscript:
  1. private function insertaCliente():void {
  2.     var sql:String = "INSERT INTO `cliente` (nombre, direccion, telefono, email)";
  3.     sql += " VALUES (:nombre, :direccion, :telefono, :email) ";
  4.     queryStatement.clearParameters();
  5.     queryStatement.parameters[":nombre"] = nombre_txt.text;
  6.     queryStatement.parameters[":direccion"] = direccion_txt.text;
  7.     queryStatement.parameters[":telefono"] = telefono_txt.text;
  8.     queryStatement.parameters[":email"] = correo_txt.text;
  9.     queryStatement.text = sql;
  10.    
  11.     try {
  12.         queryStatement.execute();
  13.         Alert.show("Sus datos han sido almacenados");
  14.         restableceForma();
  15.     }
  16.     catch(error:SQLError){
  17.         trace("Error: " + error.toString());
  18.     }
  19. }

Creamos la variable sql y le asignamos un string con nuestra consulta y los parámetros que recibirá (recuerda que los parámetros son especificados con dos puntos - : -). Llamamos a la función clearParameters y posteriormente le asignamos al SQLStatement los valores de los cuatro parámetros (estos valores son obtenidos de nuestros campos de texto). Ejecutamos la sentencia, le mostramos un mensaje al usuario informándole que sus datos han sido almacenados y por último llamamos a la función restableceForma para borrar la información de los campos de texto.

Texto Plano
Actionscript:
  1. private function restableceForma():void {
  2.     nombre_txt.text = "";
  3.     direccion_txt.text = "";
  4.     telefono_txt.text = "";
  5.     correo_txt.text = "";
  6. }

Hemos llegado al final de esta segunda parte. Si te perdiste la primera parte de este tutorial, te recuerdo que… como recomendación y para que te asegures de que tu base de datos, la tabla y el registro fueron creados, puedes bajar el complemento para Firefox llamado SQLite Manager, el cual es un pequeño y simple administrador de bases SQLite.


Enlaces recomendados:

» Working with local SQL databases
» Adobe® Flex® 3 Language Reference
Tags: , , , ,
AIR, Proyectos

Si te gustó esta entrada anímate a escribir un comentario o suscribirte al feed y obtener los artículos futuros en tu lector de feeds.

Comentarios
  Pingback por Sistema de Clientes (AIR y SQLite) Parte III (Modificar y Eliminar Registros) | Código Metrópoli el Septiembre 7, 2008 @ 11:15 pm

[...] "Sistema de Clientes" desarrollado en AIR con SQLite como administrador de base de datos. En la entrada anterior vimos cómo insertar registros en la base de datos (clientesDB.sqlite) desde nuestra [...]

Escribe un comentario

Nota: Es posible que tu comentario requiera autorización, si es así tu comentario será publicado a la brevedad. Gracias.

(requerido)

(requerido)