Sistema de Clientes (AIR y SQLite) Parte IV (Consulta a la base de datos)

Carla Macías — Wed, 10 Sep 2008 05:30:04 +0000

Esta es la cuarta y última parte del proyecto “Sistema de Clientes” desarrollado en AIR con SQLite como administrador de base de datos. En la entrada anterior vimos cómo modificar y eliminar registros en la base de datos (clientesDB.sqlite) desde nuestra aplicación en AIR.

En esta ocasión veremos cómo realizar consultas de los registros en la base de datos; para esto crearemos una forma en la cual el usuario puede introducir el nombre, teléfono o correo del cliente que está buscando. Los resultados de esta consulta los escribiremos en un archivo HTML y lo mostraremos dentro del componente HTML (aprovechando el post que publiqué hace ya tiempo sobre cómo crear un archivo en AIR).

Parte 4: Consulta a la base de datos 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: Estructura de la aplicación

Todas las interfaces de este proyecto están incluidas en la carpeta componentes. La interfaz que en esta ocasión veremos es la del archivo ConsultaClientes.mxml. Esta interfaz funciona de la siguiente manera:

Imagen 2: Interfaz del usuario

Al seleccionar la opción “Consultar…” del menú, se mostrará una forma con tres campos de texto, en donde el usuario podrá introducir el nombre, teléfono y correo del cliente que está buscando. Además, en la forma tendremos el botón de Mostrarel cual ejecutará la búsqueda. Los resultados serán mostrados dentro del rectángulo que ves en la parte de abajo de la imagen anterior.

Una vez que el usuario ejecute al búsqueda, si no se encontraron registros que coincidan con los datos buscados, el sistema mostrará dentro del archivo HTML la leyenda “No se encontraron resultados“. En caso contrario, el sistema mostrará los resultados de forma similar a la mostrada a continuación:

Imagen 2: Interfaz del usuario

Dicho lo anterior, comenzaremos mostrando la estructura y el código del archivo ConsultaClientes.mxml:

El ID del TextInput Nombre es nombre_txt
El ID del TextInput Correo es correo_txt
El ID del TextInput Teléfono es teléfono_txt
El ID del componente HTML es HTMLLoader

El código de este archivo es el siguiente:

Observa en el código anterior que el tag principal de este archivo es y no , 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 ConsultarCliente.as:

Dentro del código del botón Mostrar hacemos la llamada a la función generaConsulta una vez que el usuario haya hecho click en dicho botón. El código de esta función (generaConsulta) y de la función principal (abreConexion) se encuentra dentro del archivo ConsultarCliente.as:

/* Importamos todas las librerías y clases que necesitamos. La clase HTMLTags la hice para establecer el código de cada elemento del archivo HTML, así como los estilos que usa dicho archivo; esta clase la veremos más adelante. */
import clases.HTMLTags;
	import flash.data.SQLConnection;
	import flash.events.SQLErrorEvent;
	import flash.events.SQLEvent;
	import flash.filesystem.File;
	import flash.html.HTMLLoader;
	import mx.controls.Alert;

/* Es importante establecer el tipo de codficación (encodeType) para que, al momento de escribir y generar el archivo, se muestren los acentos correctamente.  */
	private var _encodeType:String = "iso-8859-1";
	private var conexion:SQLConnection;
	private var database:File;
	private var stream:FileStream = new FileStream(); /* Declaramos una variable de tipo FileStream para poder crear y escribir en el archivo */
	private var htmlElements:HTMLTags = new HTMLTags();/* Este es un objeto de nuestra clase HTMLTags */
	private var queryStatement:SQLStatement = new SQLStatement();
public function abreConexion():void {
	    database = new File(File.applicationStorageDirectory.nativePath + "\database\clientesDB.sqlite");
	    conexion = new SQLConnection();
	    conexion.addEventListener(SQLEvent.OPEN, dbAbrirConexion);
	    conexion.addEventListener(SQLErrorEvent.ERROR, dbErrorConexion);
	    conexion.open(database);
	}

	private function dbAbrirConexion(event:SQLEvent):void {

	}

	private function dbErrorConexion():void {
		Alert.show("No se pudo conectar a la base de datos");
	}

Después de haber importado las librerías necesarias y de haber declarado nuestras variables, escribimos el código de la función abreConexion. Esta función la hemos estado utilizando en las entradas anteriores, por lo que su código no debería causarte ruido.

Antes de ver el código de la función generaConsulta, mostraré el código de la clase HTMLTags:

package clases
{
	public class HTMLTags
	{
		public function HTMLTags()
		{
		}

		public function getEndTags():String {
			var _texto:String = '\n\n';
			return _texto;
		}

		public function getRulerTag():String {
			var _texto:String = '\n';
			return _texto;
		}

		public function getFirstTags():String {
			var _texto:String = '\n' +
			'\n' +
			'\n' +
			'\n' +
			'Consulta: Tarjetas\n' +
			'\n' +
			'\n' +
			'\n';
			return _texto;
		}

		public function getTitleTags(name:String):String {
			var _texto:String = '
' + name + '

\n';
			return _texto;
		}

		public function getTable1Tags(nombre:String, direccion:String):String {
			var _texto:String = '\n' +
		'  \n' +
		'    \n' +
		'    \n' +
		'    \n' +
		'    \n' +
		'  \n';
			return _texto;
		}

		public function getTable2Tags(telefono:String, correo:String):String {
			var _texto:String = '' +
		'  \n' +
		'    \n' +
		'    \n' +
		'    \n' +
		'    \n' +
		'  \n' +
		'Nombre: ' + nombre + ' Dirección: ' + direccion + '
Teléfono: ' + telefono + ' Correo: ' + correo + '\n';
			return _texto;
		}
	}
}

Como pudiste observar en el código anterior, esta clase lo único que hace es regresarnos los tags del documento HTML que vamos a generar. Por ejemplo, la función getFirstTags nos regresa los primeros elementos que debe llevar el archivo HTML (los tags , , y los estilos que usaremos \n' + '\n' + '\n'; return _texto; } private function getEndTags():String { var _texto:String = ''; return _texto; } private function writeIOErrorHandler(event:Event):void { trace("Error al abrir o escribir el archivo"); }

¿Te perdiste? No te preocupes, aquí va el código completo:

\n' +
		'\n' +
		'\n' +
		'\n' +
		'Crear archivo HTML en Adobe AIR\n' +
		'\n' +
		'\n' +
		'\n';
		return _texto;
	}

	private function getDataTable():String {
		var _texto:String = '
\n' +
		'Archivo HTML en Adober AIR  (http://codigometropoli.com)
\n' +
		'
\n' +
		'\n' +
		'  \n' +
		'    \n' +
		'    \n' +
		'    \n' +
		'    \n' +
		'  \n' +
		'  \n' +
		'    \n' +
		'    \n' +
		'    \n' +
		'    \n' +
		'  \n' +
		'  \n' +
		'    \n' +
		'    \n' +
		'    \n' +
		'    \n' +
		'  \n' +
		'Nombre: Juan Carlos Fecha de Nacimiento: 20/03/1981
País: México Ciudad: Distrito Federal
Número de Cliente: 541232    \n' +
		'';
		return _texto;
	}

	private function getEndTags():String {
		var _texto:String = '';
		return _texto;
	}

	private function writeIOErrorHandler(event:Event):void
	{
		trace("Error al abrir o escribir el archivo");
	}
]]>

El resultado final se muestra en la siguiente imagen:

Enlaces recomendados:

» Building a text-file editor
» Adobe® Flex® 3 Language Reference

Nombre:	' + nombre + '	Dirección:	' + direccion + '
Teléfono:	' + telefono + '	Correo:	' + correo + '

Nombre:	Juan Carlos	Fecha de Nacimiento:	20/03/1981
País:	México	Ciudad:	Distrito Federal
Número de Cliente:	541232

Código Metrópoli - Blog de programación » AIR

Sistema de Clientes (AIR y SQLite) Parte IV (Consulta a la base de datos)