Código Metrópoli » AIR http://www.codigometropoli.com Programación para Super Héroes Tue, 08 Jun 2010 00:30:52 +0000 http://wordpress.org/?v=2.9.2 en hourly 1 Sistema de Clientes (AIR y SQLite) Parte IV (Consulta a la base de datos) http://www.codigometropoli.com/sistema-de-clientes-parte-iv/ http://www.codigometropoli.com/sistema-de-clientes-parte-iv/#comments Wed, 10 Sep 2008 05:30:04 +0000 Carla Macías http://www.codigometropoli.com/?p=350 Adobe AIREsta 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

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

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

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:

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%" backgroundColor="#FFFFFF">
  3.     <mx:Script source="../actionscript/ConsultarCliente.as"/>
  4.     <mx:Label y="13" text="Consulta de Clientes" right="75" left="55" textAlign="center" fontWeight="bold" fontSize="14" fontFamily="Verdana" color="#F64507"/>
  5.     <mx:Label y="61" text="Mostrar clientes por:" textAlign="left" fontWeight="normal" fontSize="12" fontFamily="Verdana" color="#000000" width="151" x="31" textDecoration="underline"/>
  6.     <mx:Label y="89" text="Nombre:" textAlign="left" fontWeight="normal" fontSize="12" fontFamily="Verdana" color="#000000" width="83" x="62"/>
  7.     <mx:Label y="119" text="Correo:" textAlign="left" fontWeight="normal" fontSize="12" fontFamily="Verdana" color="#000000" width="65" x="62"/>
  8.     <mx:Label y="89" text="Teléfono:" textAlign="left" fontWeight="normal" fontSize="12" fontFamily="Verdana" color="#000000" width="74" x="285"/>
  9.     <mx:Button x="415" y="119" label="Mostrar" click="generaConsulta();"/>   
  10.     <mx:HTML focusEnabled="false" id="HTMLLoader" borderStyle="solid" left="31" top="171" right="31" bottom="21"/>
  11.     <mx:TextInput y="89" width="130" height="21" id="nombre_txt" fontSize="10" fontFamily="Verdana" x="123"/>
  12.     <mx:TextInput y="89" width="130" height="21" id="telefono_txt" fontSize="10" fontFamily="Verdana" x="355"/>
  13.     <mx:TextInput y="119" width="130" height="21" id="correo_txt" fontSize="10" fontFamily="Verdana" x="123"/>
  14. </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 ConsultarCliente.as:

Texto Plano
Actionscript:
  1. <mx:Script source="../actionscript/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:

Texto Plano
Actionscript:
  1. /* 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. */
  2. import clases.HTMLTags; 
  3.     import flash.data.SQLConnection;
  4.     import flash.events.SQLErrorEvent;
  5.     import flash.events.SQLEvent;
  6.     import flash.filesystem.File;
  7.     import flash.html.HTMLLoader;   
  8.     import mx.controls.Alert;
  9.    
  10. /* Es importante establecer el tipo de codficación (encodeType) para que, al momento de escribir y generar el archivo, se muestren los acentos correctamente.  */
  11.     private var _encodeType:String = "iso-8859-1";
  12.     private var conexion:SQLConnection;
  13.     private var database:File;
  14.     private var stream:FileStream = new FileStream(); /* Declaramos una variable de tipo FileStream para poder crear y escribir en el archivo */
  15.     private var htmlElements:HTMLTags = new HTMLTags();/* Este es un objeto de nuestra clase HTMLTags */
  16.     private var queryStatement:SQLStatement = new SQLStatement();
  17. public function abreConexion():void {      
  18.         database = new File(File.applicationStorageDirectory.nativePath + "\database\clientesDB.sqlite");
  19.         conexion = new SQLConnection();
  20.         conexion.addEventListener(SQLEvent.OPEN, dbAbrirConexion);
  21.         conexion.addEventListener(SQLErrorEvent.ERROR, dbErrorConexion);                 
  22.         conexion.open(database);
  23.     }
  24.    
  25.     private function dbAbrirConexion(event:SQLEvent):void {
  26.        
  27.     }
  28.    
  29.     private function dbErrorConexion():void {
  30.         Alert.show("No se pudo conectar a la base de datos");
  31.     }

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:

Texto Plano
Actionscript:
  1. package clases
  2. {
  3.     public class HTMLTags
  4.     {
  5.         public function HTMLTags()
  6.         {
  7.         }
  8.        
  9.         public function getEndTags():String {
  10.             var _texto:String = '</body>\n</html>\n';
  11.             return _texto;
  12.         }
  13.        
  14.         public function getRulerTag():String {
  15.             var _texto:String = '<hr class="Ruler" />\n';
  16.             return _texto;
  17.         }
  18.        
  19.         public function getFirstTags():String {
  20.             var _texto:String = '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">\n' +
  21.             '<html xmlns="http://www.w3.org/1999/xhtml">\n' +
  22.             '<head>\n' +
  23.             '<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2" />\n' +
  24.             '<title>Consulta: Tarjetas</title>\n' +
  25.             '<style>\n' +
  26.             'body {\n' +
  27.             '   font:Arial, Helvetica, sans-serif;\n' +
  28.             '   font-family:Arial, Helvetica, sans-serif;\n' +
  29.             '   font-size:12px;\n' +
  30.             '   margin-left:30px;\n' +
  31.             '}\n' +
  32.             'hr.Ruler {\n' +
  33.             '   margin-left:-20px !important;\n' +
  34.             '   color:#003366;\n' +
  35.             '   border:1px solid #003366;\n' +
  36.             '   background-color:#003366;\n' +
  37.             '   width:800px;\n' +
  38.             '}\n' +
  39.             '.Estilo3 {\n' +
  40.             '   color: #993300;\n' +
  41.             '   font-weight: bold;\n' +
  42.             '   font-size: 14px;\n' +
  43.             '}\n' +
  44.             '.Estilo4 {font-size: 12px; color: #666666;}\n' +
  45.             '.Tabla_Datos td {\n' +
  46.             '   height:25px;\n' +
  47.             '}\n' +
  48.             '</style>\n' +
  49.             '</head>\n' +      
  50.             '<body>\n';
  51.             return _texto;
  52.         }
  53.        
  54.         public function getTitleTags(name:String):String {
  55.             var _texto:String = '<br /><span class="Estilo3">' + name + '</span><br /><br />\n';
  56.             return _texto;
  57.         }
  58.        
  59.         public function getTable1Tags(nombre:String, direccion:String):String {
  60.             var _texto:String = '<table class="Tabla_Datos" width="700" border="0" cellspacing="0" cellpadding="0">\n' +
  61.         '  <tr>\n' +
  62.         '    <td><strong>Nombre:</strong></td>\n' +
  63.         '    <td>' + nombre + '</td>\n' +
  64.         '    <td><strong>Dirección:</strong></td>\n' +
  65.         '    <td>' + direccion + '</td>\n' +
  66.         '  </tr>\n';
  67.             return _texto;
  68.         }
  69.        
  70.         public function getTable2Tags(telefono:String, correo:String):String {
  71.             var _texto:String = '' +
  72.         '  <tr>\n' +
  73.         '    <td><strong>Teléfono:</strong></td>\n' +
  74.         '    <td>' + telefono + '</td>\n' +
  75.         '    <td><strong>Correo:</strong></td>\n' +
  76.         '    <td>' + correo + '</td>\n' +
  77.         '  </tr>\n' +
  78.         '</table>\n';
  79.             return _texto;
  80.         }
  81.     }
  82. }

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 <html>, <head>, <meta> y los estilos que usaremos <style>). La función getTitleTags la mandaremos a llamar cada vez que recorramos un nuevo registro, le pasaremos como parámetro un texto de tipo "Cliente N" donde N es el valor de un contador que pondremos en el código (Cliente #1, Cliente #2, etc.) y nos regresará un texto con los tags y estilo que debe llevar. A la función getTable1Tags le estamos pasando como parámetro el nombre y la dirección del cliente, y ésta a su vez nos está regresando la información en forma de tabla con el código en HTML. Lo mismo sucede con la función getTable2Tags. La función getRulerTag nos regresa el tag <hr> para mostrar una línea horizontal. Por último, la función getEndTags nos regresa un texto con los tags que nos faltaban por cerrar (</body> y </html>).

Ahora veremos el código de generaConsulta. Presta atención en los comentarios que se encuentran dentro del código:

Texto Plano
Actionscript:
  1. private function generaConsulta():void {
  2.         var prep:String = " WHERE ";
  3.        
  4.         queryStatement.clearParameters();
  5.         queryStatement.sqlConnection = conexion;
  6.                
  7.         var genericQuery:String = "SELECT * FROM cliente "; /* Seleccionamos todas las columnas del registro */
  8.        
  9.         if(nombre_txt.text != "") { /* Si el usuario sí escribió algo en el campo de texto nombre_txt */
  10.             genericQuery += prep + " nombre LIKE '%" + nombre_txt.text + "%'"; /* Adjuntamos al query el valor del campo de texto nombre */
  11.             prep = " AND ";
  12.         }
  13.         if(correo_txt.text != "") { /* Si el usuario sí escribió algo en el campo de texto correo_txt */
  14.             genericQuery += prep + " email LIKE '%" + correo_txt.text + "%'"; /* Adjuntamos al query el valor del campo de texto correo */
  15.             prep = " AND ";
  16.         }
  17.         if(telefono_txt.text != "") { /* Si el usuario sí escribió algo en el campo de texto telefono_txt */
  18.             genericQuery += prep + " telefono LIKE '%" + telefono_txt.text + "%'"; /* Adjuntamos al query el valor del campo de texto telefono */
  19.             prep = " AND ";
  20.         }
  21.        
  22.         genericQuery += " ORDER BY nombre asc"; /* Le especificamos al query que los resultados los ordene de manera ascendente de acuerdo al nombre del cliente */  
  23.        
  24.         queryStatement.text = genericQuery; // Asignamos la variable del query al SQLStatement
  25.        
  26.         try {
  27.             queryStatement.execute(); // Ejecutamos la consulta
  28.            
  29.             /* Este será el archivo HTML que estamos creando. Su nombre es ConsultaCliente.html y se encontrará dentro de la carpeta HTML */
  30.             var htmlFile:File = new File(File.applicationStorageDirectory.nativePath + "/HTML/ConsultaCliente.html");
  31.            
  32.             if(stream != null) {
  33.                 stream.close(); /* Cerramos el stream si es que existe */
  34.             }
  35.             stream = new FileStream();
  36.             stream.open(htmlFile, FileMode.WRITE); /* Abrimos el stream en modo de escritura */
  37.             stream.addEventListener(IOErrorEvent.IO_ERROR, writeIOErrorHandler); /* Establecemos un listener para detectar el evento */
  38.            
  39.             var result:SQLResult = queryStatement.getResult(); /* Obtenemos los resultados regresados por la consulta */
  40.            
  41.             if(result.data != null) { // Si existen resultados...
  42.                 var numResults:int = result.data.length; // Determinamos el total de resultados regresados
  43.                
  44.                 stream.writeUTFBytes(htmlElements.getFirstTags()); /* Escribimos en el archivo el texto regresado por la clase HTMLTags en su función getFirstTags */
  45.             
  46.                 for (var i:int = 0; i <numResults; i++) // Hacemos un ciclo para recorrer todos los registros obtenidos
  47.                 {   
  48.                     var row:Object = result.data[i];
  49.                     row.nombre;        
  50.                    
  51.                 /* Esta parte entraría a un ciclo */                                
  52.                     stream.writeMultiByte(htmlElements.getTitleTags("Cliente #" + (i + 1)), _encodeType);
  53.                     stream.writeMultiByte(htmlElements.getTable1Tags(row.nombre, row.direccion), _encodeType);
  54.                     stream.writeMultiByte(htmlElements.getTable2Tags(row.telefono, row.email), _encodeType);
  55.                     stream.writeUTFBytes(htmlElements.getRulerTag());
  56.                 /* Esta parte entraría a un ciclo */         
  57.                 }
  58.                 stream.writeUTFBytes(htmlElements.getEndTags());   
  59.             }      
  60.             else {
  61.                 stream.writeUTFBytes("No se encontraron resultados");
  62.             }
  63.             stream.close();
  64.         }
  65.         catch(error:SQLError) {
  66.             trace("Error: " + error.toString());
  67.         }
  68.                
  69.         /* Si todo salió bien, ahora podremos mostrar el archivo html en nuestro HTMLLoader */  
  70.         HTMLLoader.location = File.applicationStorageDirectory.nativePath + "/HTML/ConsultaCliente.html";
  71.     }

Observa que al final estamos especificando al control HTML (cuyo ID es HTMLLoader) el archivo HTML que debe mostrar (ConsultaCliente.html dentro de la carpeta HTML).

Hemos llegado al final de esta cuarta parte y de todas las entregas, no olvides bajar los archivos que se encuentran más abajo.


Descargar Archivo
]]> http://www.codigometropoli.com/sistema-de-clientes-parte-iv/feed/ 4 Sistema de Clientes (AIR y SQLite) Parte III (Modificar y Eliminar Registros) http://www.codigometropoli.com/sistema-de-clientes-parte-iii/ http://www.codigometropoli.com/sistema-de-clientes-parte-iii/#comments Mon, 08 Sep 2008 04:15:49 +0000 Carla Macías http://www.codigometropoli.com/?p=334 Adobe AIREsta es la tercera parte del proyecto "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 aplicación en AIR.
En esta ocasión veremos cómo editar y eliminar registros de la base de datos; para esto mostraremos dentro de un DataGrid todos los registros que tenemos en nuestra base de datos; en este DataGrid usaremos itemRenderer(s) para llenar con botones dos columnas, uno de los botones será para editar el registro seleccionado y el otro para eliminarlo.

Parte 3: Modificar y eliminar 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: Estructura de la aplicación

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 EditarBorrarCliente.mxml. Esta interfaz funciona de la siguiente manera:

Imagen 2: Interfaz del usuario

Imagen 2: Interfaz del usuario

Al seleccionar la opción "Editar/Eliminar…" del menú, se mostrará un DataGrid con todos los registros que tenemos dados de alta en nuestra base. En este ejemplo solamente tengo dos registros. Si el usuario hace click al botón de Modificar del primer registro, se mostrará lo siguiente:

Imagen 3: Opción Modificar Cliente

Imagen 3: Opción Modificar Cliente

…Un Canvas con los datos de nuestro registro. Si el usuario lo desea, podrá modificar o actualizar los datos de este registro. Por el contrario, si el usuario le da click al botón de Eliminar del primer registro, se mostrará un mensaje de alerta pidiéndole que confirme si desea o no borrar el registro.

Imagen 4: Mensaje de confirmación

Imagen 4: Mensaje de confirmación

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

  • El ID del DataGrid donde mostraremos los registros es clientes_dg
  • El ID de nuestro Canvas en donde mostraremos la información del registro que el usuario puede modificar es Modificar_Cliente
    • El botón de Cambiar que se encuentra dentro del Canvas tiene de ID guardarBtn
    • El botón con una X tiene de ID cerrarBtn
    • Los IDs de cada una de las áreas de texto son:
      • nombre_txt, direccion_txt (TextArea), telefono_txt, correo_txt
      • Además, tenemos tres etiquetas cuyo texto es (*) y con los cuales le indicaremos al usuario qué dato le faltó por llenar. Estas etiquetas tienen de ID: msj1, msj2, msj3 y msj4.

El código de este archivo 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%" backgroundColor="#FFFFFF">
  3.     <mx:Script source="../actionscript/EditarBorrarCliente.as"/>
  4.     <mx:Label y="13" text="Lista de Clientes" right="75" left="55" textAlign="center" fontWeight="bold" fontSize="14" fontFamily="Verdana" color="#F64507"/>
  5.     <mx:DataGrid y="57" width="600" height="223" horizontalCenter="-14" id="clientes_dg">
  6.         <mx:columns>
  7.             <mx:DataGridColumn width="150" textAlign="left" headerText="Nombre" dataField="nombre"/>
  8.             <mx:DataGridColumn width="120" textAlign="left" headerText="Teléfono" dataField="telefono"/>
  9.             <mx:DataGridColumn width="165" textAlign="left" headerText="Correo" dataField="correo"/>
  10.             <mx:DataGridColumn sortable="false" width="85" textAlign="center" headerText="Modificar" dataField="modificar">
  11.                 <mx:itemRenderer>
  12.                 <mx:Component>
  13.                     <mx:HBox horizontalAlign="center">
  14.                         <mx:Button id="editarBtn" click="outerDocument.editarCliente(data.id_cliente, data.nombre, data.direccion, data.telefono, data.correo)" label="" height="20" width="30" icon="@Embed(source='../images/edit.png')"/>
  15.                     </mx:HBox>
  16.                 </mx:Component>
  17.                 </mx:itemRenderer>
  18.             </mx:DataGridColumn>
  19.             <mx:DataGridColumn sortable="false" width="80" textAlign="center" headerText="Eliminar" dataField="eliminar">
  20.                 <mx:itemRenderer>
  21.                 <mx:Component>
  22.                     <mx:HBox horizontalAlign="center">
  23.                         <mx:Button id="borrarBtn" click="outerDocument.borrarCliente(data.id_cliente)" label="" height="20" width="30" icon="@Embed(source='../images/remove.png')"/>
  24.                     </mx:HBox>
  25.                 </mx:Component>
  26.                 </mx:itemRenderer>
  27.             </mx:DataGridColumn>
  28.         </mx:columns>
  29.     </mx:DataGrid> 
  30.     <mx:Canvas id="Modificar_Cliente" visible="true" y="324" width="378" height="255" horizontalCenter="-15" borderColor="#ADADAD" backgroundAlpha="0.0" borderStyle="solid">
  31.         <mx:Button id="guardarBtn" click="validaForma();" y="221" label="Cambiar" width="100" x="220"/>
  32.         <mx:Label y="10" text="Modificar Cliente:" textAlign="left" fontWeight="bold" fontSize="11" fontFamily="Verdana" color="#31384B" width="213" x="10" textDecoration="underline"/>
  33.         <mx:Button id="cerrarBtn" y="1" label="X" width="32" x="343.3" click="Modificar_Cliente.visible = false; reseteaForma();" cornerRadius="0"/>
  34.         <mx:Text visible="false" x="10" y="86" text="Por favor introduzca la divisa" fontWeight="bold" color="#B80808" fontFamily="Verdana" fontSize="10" width="184" height="33" id="msj_nombre"/>
  35.         <mx:TextInput y="50" width="212" height="21" id="nombre_txt" fontSize="10" fontFamily="Verdana" x="108"/>
  36.         <mx:TextArea y="81" width="212" height="69" id="direccion_txt" x="108"/>
  37.         <mx:TextInput y="161" width="212" height="21" id="telefono_txt" fontSize="10" fontFamily="Verdana" x="108"/>
  38.         <mx:TextInput y="190" width="212" height="21" id="correo_txt" fontSize="10" fontFamily="Verdana" x="108"/>
  39.         <mx:Label y="50" text="Nombre:" fontSize="12" fontFamily="Verdana" fontWeight="normal" color="#000000" width="80" textAlign="right" x="10"/>
  40.         <mx:Label y="86" text="Dirección:" fontSize="12" fontFamily="Verdana" fontWeight="normal" color="#000000" width="80" textAlign="right" x="10"/>
  41.         <mx:Label y="161" text="Teléfono:" fontSize="12" fontFamily="Verdana" fontWeight="normal" color="#000000" width="80" textAlign="right" x="10"/>
  42.         <mx:Label y="190" text="Correo:" fontSize="12" fontFamily="Verdana" fontWeight="normal" color="#000000" width="80" textAlign="right" x="10"/>
  43.         <mx:Label y="50" text="(*)" fontSize="10" fontFamily="Verdana" fontWeight="bold" color="#B80808" width="27" textAlign="left" id="msj1" visible="false" horizontalCenter="153"/>
  44.         <mx:Label y="82" text="(*)" fontSize="10" fontFamily="Verdana" fontWeight="bold" color="#B80808" width="27" textAlign="left" id="msj2" visible="false" horizontalCenter="153"/>
  45.         <mx:Label y="161" text="(*)" fontSize="10" fontFamily="Verdana" fontWeight="bold" color="#B80808" width="27" textAlign="left" id="msj3" visible="false" horizontalCenter="153"/>
  46.         <mx:Label y="190" text="(*)" fontSize="10" fontFamily="Verdana" fontWeight="bold" color="#B80808" width="27" textAlign="left" id="msj4" visible="false" horizontalCenter="153"/>
  47.     </mx:Canvas>
  48. </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 EditarBorrarCliente.as:

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

También presta atención en la forma en que estamos creando los renderers para las columnas.

Texto Plano
Actionscript:
  1. <mx:DataGridColumn sortable="false" width="85" textAlign="center" headerText="Modificar" dataField="modificar">
  2. <mx:itemRenderer>
  3.         <mx:Component>
  4.             <mx:HBox horizontalAlign="center">
  5.             <mx:Button id="editarBtn" click="outerDocument.editarCliente(data.id_cliente, data.nombre, data.direccion, data.telefono, data.correo)" label="" height="20" width="30" icon="@Embed(source='../images/edit.png')"/>
  6.             </mx:HBox>
  7.         </mx:Component>
  8.     </mx:itemRenderer>
  9. </mx:DataGridColumn>

Dentro de los tags <mx:itemRenderer> y </mx:itemRenderer> estamos usando como layout el HBox (HorizontalBox), aunque en realidad no afecta mucho ya que sólo estamos poniendo un componente por cada celda (en caso de que pongamos más elementos en esa celda, estos elementos se mostrarán uno tras otro de izquierda a derecha). El componente que estamos insertando en cada celda es un botón; este botón en el momento de hacer click sobre él llamará a la función editarCliente, el cual recibe como parámetros el ID, nombre, dirección, teléfono y correo del cliente en cuyo registro hicimos click. La palabra reservada outerDocument nos permite acceder a elementos que se encuentran fueran del alcance del item renderer. Además, al botón le estamos asignando el icono edit.png () que está dentro de nuestra carpeta images. Importante: Observa cómo a esta columna del DataGrid le estamos especificando que no se pueda ordenar (sortable = false). Esto es porque en realidad no le estamos asignando valor alguno a cada celda, por lo tanto si intentáramos ordenar los registros de acuerdo a esta columna, Flex nos desplegaría un error.

El código para la columna que llevará los botones de Eliminar es el siguiente:

Texto Plano
Actionscript:
  1. <mx:DataGridColumn sortable="false" width="80" textAlign="center" headerText="Eliminar" dataField="eliminar">
  2.     <mx:itemRenderer>
  3.     <mx:Component>
  4.         <mx:HBox horizontalAlign="center">
  5.             <mx:Button id="borrarBtn" click="outerDocument.borrarCliente(data.id_cliente)" label="" height="20" width="30" icon="@Embed(source='../images/remove.png')"/>
  6.         </mx:HBox>
  7.     </mx:Component>
  8.     </mx:itemRenderer>
  9. </mx:DataGridColumn>

El código es similar al mostrado más arriba, lo único que cambia es que en esta ocasión el botón mandará a llamar a la función borrarCliente, pasándole como parámetro el ID del cliente. Además, el icono para este botón es remove.png ().

Antes de ver el código de las funciones editarCliente y borrarCliente, veremos cómo mostrar los registros de nuestra base de datos en el DataGrid. Para eso, el código que pegaré a continuación forma parte del archivo EditarBorrarCliente.as.

Primero, importamos las clases y declaramos las variables que necesitamos. En el arreglo data_provider almacenaremos los datos obtenidos de nuestra consulta y lo asignaremos como dataProvider de nuestro DataGrid (clientes_dg). La variable id_selected nos servirá para almacenar el ID del registro seleccionado y posteriormente eliminarlo de la base de datos.

Texto Plano
Actionscript:
  1. // ActionScript file
  2.  
  3.     import flash.data.SQLConnection;
  4.     import flash.events.SQLErrorEvent;
  5.     import flash.events.SQLEvent;
  6.    
  7.     import mx.controls.Alert;
  8.     import mx.events.CloseEvent;
  9.     import mx.events.ListEvent;
  10.    
  11.     private var conexion:SQLConnection;
  12.     private var database:File;
  13.     private var queryStatement:SQLStatement = new SQLStatement();   
  14.     [Bindable]
  15.     private var data_provider:Array;
  16.     private var id_selected:Number = 0;

La primera función que es llamada en esta sección es abrirConexion:

Texto Plano
Actionscript:
  1. public function abreConexion():void {
  2.     reseteaForma();
  3.     Modificar_Cliente.visible = false;
  4.     reiniciaVariables();
  5.     clientes_dg.addEventListener(ListEvent.CHANGE, dgChangeHandler);
  6.        
  7.     database = new File(File.applicationStorageDirectory.nativePath + "\database\clientesDB.sqlite");
  8.     conexion = new SQLConnection();
  9.     conexion.addEventListener(SQLEvent.OPEN, dbAbrirConexion);
  10.     conexion.addEventListener(SQLErrorEvent.ERROR, dbErrorConexion);
  11.     queryStatement.sqlConnection = conexion;                 
  12.     conexion.open(database);        
  13. }

Dentro de abreConexion llamamos a la función reseteaForma, la cual se encarga de borrar los datos de la forma para la modificación de los datos.

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

Después de llamar a la función reseteaForma, ocultamos el canvas Modificar_Cliente y llamamos a la función reiniciaVariables, la cual se encargará de resetear los arreglos para eliminar su contenido previo.

Texto Plano
Actionscript:
  1. private function reiniciaVariables():void {
  2.     clientes_dg.dataProvider = new Array(); // Reiniciamos el arreglo para eliminar su contenido
  3.     data_provider = new Array(); // Reiniciamos el arreglo para eliminar su contenido   
  4. }

Posteriormente le asignamos al datagrid clientes_dg el listener del evento CHANGE. Este evento es lanzado cuando el usuario hace click en alguno de los registros del DataGrid. Cuando se genere este evento, el programa se encargará de esconder el cambas Modificar_Cliente (es posible que previamente el usuario le haya dado click al botón de Editar en alguno de los registros, es por eso que nos aseguramos de esconder el Canvas). Además, almacenamos en la vaiable id_selected el ID del registro seleccionado; y, por último, escondemos los posibles mensajes que se le mostraron al usuario para que, cuando vuelva a darle click al botón Editar, no se le muestren.

Texto Plano
Actionscript:
  1. private function dgChangeHandler(event:ListEvent):void {
  2. escondeMensajes();
  3.     Modificar_Cliente.visible = false;
  4.     id_selected = event.target.selectedItem.id_cliente; 
  5. }

El resto del código de la función abreConexion ya lo conoces de las entradas anteriores.
Si no hubo ningún problema en la conexión a la base de datos, llamamos a la función getClientes para llenar el DataGrid con nuestros registros:

Texto Plano
Actionscript:
  1. private function dbAbrirConexion(event:SQLEvent):void {
  2.     getClientes();
  3. }
  4.  
  5. private function getClientes():void {      
  6.     queryStatement.clearParameters();
  7.     queryStatement.text = "SELECT * FROM cliente ORDER BY nombre asc";
  8.        
  9.     try {
  10.         queryStatement.execute();
  11.        
  12.         var result:SQLResult = queryStatement.getResult();
  13.         if(result.data != null) {
  14.             var numResults:int = result.data.length;
  15.         
  16.             for (var i:int = 0; i <numResults; i++)
  17.             {
  18.                 var row:Object = result.data[i];
  19.                     
  20.             data_provider.push({nombre:row.nombre, id_cliente:row.id, direccion:row.direccion, correo:row.email, telefono:row.telefono});
  21.             }
  22.                 
  23.             clientes_dg.dataProvider = data_provider;
  24.         }
  25.     }
  26.     catch(error:SQLError) {
  27.         trace("Error: " + error.toString());
  28.     }      
  29. }

Dentro del código de getClientes haremos la consulta a la tabla cliente para obtener todos los registros de nuestra base. Nuestro query es muy sencillo, en él estamos seleccionando (SELECT) todas las columnas (*) de la tabla cliente y le estamos diciendo que lo ordene (ORDER BY) de forma ascendente (asc) de acuerdo a la columna nombre.

Texto Plano
SQL:
  1. SELECT * FROM cliente ORDER BY nombre ASC

Una vez que ejecutamos la consulta (queryStatement.execute()) obtenemos el resultado con la función getResult. Comprobamos que el resultado no sea vacío (result.data!= null) y obtenemos el total de registros obtenidos por medio de la propiedad length. Como ya sabemos cuántos registros nos regresó la consulta, haremos un ciclo for para almacenar los registros en nuestro arreglo data_provider. Finalmente estamos asignando el arreglo data_provider a la propiedad dataProvider del DataGrid. Importante: Si no comprendes esta parte donde llenamos el arreglo y se lo asignamos al DataGrid te recomiendo visitar la entrada sobre el Componente DataGrid que publiqué anteriormente.

Hemos terminado la explicación de cómo realizar la consulta a la base de datos y mostrar los resultados en el DataGrid. Ahora veremos las funciones que habíamos dejado pendientes: editarCliente y borrarCliente.
Como lo mencioné anteriormente, cuando el usuario hace click en el botón de Editar de alguno de los registros, la función editarCliente es llamada:

Texto Plano
Actionscript:
  1. public function editarCliente(id_cliente:Number, nombre:String, direccion:String, telefono:String, correo:String):void {
  2.     id_selected = id_cliente;
  3.     nombre_txt.text = nombre;
  4.     direccion_txt.text = direccion;
  5.     telefono_txt.text = telefono;
  6.     correo_txt.text = correo;
  7.     Modificar_Cliente.visible = true;
  8. }

Esta función recibe como parámetros el ID del cliente, su nombre, dirección, teléfono y correo, para posteriormente mostrarlo en el formulario del canvas Modificar_Cliente. Si el usuario hace click en el botón de Cambiar, la función es validaForma es ejecutada:

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.         updateCliente(id_selected);
  21.     }
  22. }

Esta función es similar a la que usamos en la entrada anterior, simplemente estamos verificando que todos los datos fueron llenados y, en caso positivo, llamamos a la función updateCliente.

Texto Plano
Actionscript:
  1. private function updateCliente(idCliente:Number):void {
  2.     queryStatement.clearParameters();
  3.     var sql:String = "UPDATE `cliente` SET nombre = :nombre, direccion = :direccion, telefono = :telefono, email = :correo WHERE id = :idCliente";
  4.     queryStatement.parameters[":nombre"] = nombre_txt.text;
  5.     queryStatement.parameters[":direccion"] = direccion_txt.text;
  6.     queryStatement.parameters[":telefono"] = telefono_txt.text;
  7.     queryStatement.parameters[":correo"] = correo_txt.text;
  8.     queryStatement.parameters[":idCliente"] = idCliente;
  9.     queryStatement.text = sql;
  10.    
  11.     try {
  12.         queryStatement.execute();         
  13.         abreConexion();
  14.     }
  15.     catch(error:SQLError){
  16.         trace("Error: " + error.toString());
  17.     }
  18. }

Esta función recibe como parámetro el ID del registro seleccionado, crea el query para actualizar los datos del registro y los nuevos valores son pasados como parámetros a la sentencia SQL. Una vez que se ejecuta la sentencia llamamos nuevamente a la función abreConexion para que muestre todos los registros (incluyendo los nuevos) en el DataGrid.

La función borrarCliente es llamada cuando el usuario hace click en el botón de Eliminar:

Texto Plano
Actionscript:
  1. public function borrarCliente(id_cliente:Number):void {
  2.     id_selected = id_cliente;
  3.     Alert.yesLabel = "Sí";
  4.     Alert.noLabel = "No";
  5. Alert.show("¿Desea eliminar este cliente?", "Importante", 3, this, alertClickHandler);
  6. }

Esta función recibe como parámetro el ID del registro seleccionado por el usuario. Además, muestra un mensaje de alerta pidiéndole al usuario que confirme si desea eliminar el registro. Observa que al método show le pasamos como parámetro el manejador de eventos que debe considerar (alertClickHandler). Este manejador de eventos revisa si la respuesta del usuario fue positiva o negativa. En caso de que el usuario haya hecho click en el botón de Sí, llamamos a la función delCliente pasándole como parámetro el ID del registro seleccionado.

Texto Plano
Actionscript:
  1. private function alertClickHandler(event:CloseEvent):void {
  2. if (event.detail == Alert.YES)
  3.         delCliente(id_selected);
  4. }

La función delCliente se encarga de ejecutar el query para borrar el registro de la base de datos. A este query le estamos pasando el ID del registro que hay que eliminar. Después de ejecutar la sentencia llamamos nuevamente a la función abreConexion para mostrar todos los registros restantes de la base de datos en el DataGrid.

Texto Plano
Actionscript:
  1. private function delCliente(id_cliente:Number):void {
  2.     queryStatement.clearParameters();
  3.     queryStatement.text = "DELETE FROM cliente WHERE id = :id_cliente";
  4.     queryStatement.parameters[":id_cliente"] = id_cliente;
  5.    
  6.     try {
  7.         queryStatement.execute();         
  8.         abreConexion(); 
  9.     }
  10.     catch(error:SQLError) {
  11.         trace("Error: " + error.toString());
  12.     }
  13. }

Hemos llegado al final de esta tercera parte; ya nada más nos queda pendiente la cuarta y última entrega.


]]> http://www.codigometropoli.com/sistema-de-clientes-parte-iii/feed/ 3 Sistema de Clientes (AIR y SQLite) Parte II (Insertar Registros) http://www.codigometropoli.com/sistema-de-clientes-parte-ii/ http://www.codigometropoli.com/sistema-de-clientes-parte-ii/#comments Mon, 01 Sep 2008 16:47:38 +0000 Carla Macías http://www.codigometropoli.com/?p=312 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:

  • nombre_txt
  • dirección_txt
  • telefono_txt
  • correo_txt

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.


]]> http://www.codigometropoli.com/sistema-de-clientes-parte-ii/feed/ 3 Sistema de Clientes (AIR y SQLite) Parte I (Crear Base de datos) http://www.codigometropoli.com/sistema-de-clientes-parte-i/ http://www.codigometropoli.com/sistema-de-clientes-parte-i/#comments Tue, 26 Aug 2008 01:01:32 +0000 Carla Macías http://www.codigometropoli.com/?p=269 Adobe AIREsta es la primera parte del proyecto "Sistema de Clientes" desarrollado en AIR con SQLite como administrador de base de datos. Para este proyecto usaremos Flex Builder 3, del cual puedes bajarte una versión de prueba del Flex Builder 3 aquí. Si requieres más información sobre qué es AIR y qué puedes hacer con él visita esta entrada. Los archivos de este proyecto los encontrarás al terminar de publicar todas las partes (entradas) de este proyecto.

Para este proyecto, abre Flex Builder 3 y crea un nuevo proyecto de AIR (File -> New -> Flex Project. Como nombre de proyecto (Project name) ponle Sistema_Clientes; en la sección de Application type selecciona la opción Desktop application (runs in Adobe AIR) y haz click en el botón Finish.
Como lo comenté en la sección de Proyectos, 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 y en las siguientes, para así formar un proyecto completo. Dicho lo anterior, a continuación iniciaré la explicación sobre cómo crear una base de datos en SQLite.

Parte 1: Crear Base de Datos en SQLite con AIR

Para mantener organizado el código de nuestro proyecto y para evitar que se pierdan con toda la información aquí mostrada, vamos a dividir 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

Comenzamos con el archivo CrearBaseDatos.as:

Necesitamos de las siguientes librerías para poder tener acceso a los métodos de conexión con la base de datos, la ejecución de los queries, etc. Las clases que usaremos son SQLConnection, SQLErrorEvent y SQL Event:

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

Ahora vamos a crear los objetos de estas clases y las variables que requeriremos a lo largo de este archivo:

Texto Plano
Actionscript:
  1. private var conexion:SQLConnection; // Nuestro objeto de la clase SQLConnection
  2. private var database:File; /* Aquí guardaremos la referencia de nuestro archivo .sqlite que es nuestra base de datos */
  3. private var existeBD:Boolean = false; /* Variable booleana en la cual guardaremos el valor de true si existe la base de datos y false en caso contrario */
  4. private var queryStatement:SQLStatement = new SQLStatement(); /* Creamos una variable de tipo SQLStatement en la cual estableceremos los queries y parámetros de nuestras consultas */

Para crear las sentencias de SQL, necesitamos de un objeto de la clase SQLStatement, a este objeto lo llamamos queryStatement.

La función abreConexion (que mostraremos a continuación) será llamada desde la aplicación principal, es decir desde el archivo Sistema_Clientes.mxml (recuerda que al crear un nuevo proyecto, Flex Builder construye automáticamente un archivo MXML con el nombre del proyecto y el cual es el punto de partida de nuestra aplicación). Esta función se encargará de verificar si existe la base de datos la cual la pasamos como parámetro del constructor de la clase File. Si no existiera la base de datos la aplicación se encargará de crearla. En caso contrario, se establecería la conexión con la base de datos. El nombre de nuestra base de datos será clientesDB.sqlite, presta atención a la primera línea de nuestra función:

Texto Plano
Actionscript:
  1. private function abreConexion():void {
  2.     /* Asignamos a nuestra variable database el archivo de nuestra base de datos */
  3.     database = new File(File.applicationStorageDirectory.nativePath + "\database\clientesDB.sqlite");
  4.     /* Inicializamos nuestra variable conexion */
  5.     conexion = new SQLConnection();
  6.     /* Creamos el listener que será llamado cuando se abra la conexión a la base de datos */
  7.     conexion.addEventListener(SQLEvent.OPEN, dbAbrirConexion);
  8.     /* Creamos el listener que será llamado cuando exista algún error en la conexión a la bd */
  9. conexion.addEventListener(SQLErrorEvent.ERROR, dbErrorConexion);
  10. queryStatement.sqlConnection = conexion; /* Le asignamos a su propiedad sqlConnection la variable conexion que creamos al inicio del archivo  */
  11.         
  12.     if(!database.exists) { // Comprobamos si existe o no la base de datos
  13.         existeBD = false; // No existe la bd, por lo tanto le asignamos a existeBD el valor de falso
  14.             conexion.open(database); // Abrimos la conexión a la bd       
  15.     }
  16.     else {
  17.             conexion.open(database); // Abrimos la conexión a la bd
  18.     }   
  19. }

Observa que al constructor de la clase File le estamos pasando como parámetro el URL de donde estará almacenada nuestra base de datos. Para construir este URL estamos usando la propiedad applicationStorageDirectory, la cual hace referencia al directorio privado donde se encuentra la aplicación. Además, estamos usando la propiedad nativePath la cual nos regresa la ruta completa de acuerdo al sistema operativo donde se encuentra el sistema. A grandes rasgos, esta línea crea un directorio con el nombre de la aplicación (en este caso el directorio se llama Sistema_Clientes) dentro de la carpeta de Application Data (Datos de programa). Esta carpeta es donde los programas que tenemos instalados guardan información o las preferencias del usuario de la computadora. En Windows Vista, el directorio donde está almacenada la base de datos es C:\Users\Nombre_Usuario\AppData\Roaming\Sistema_Clientes. En Windows XP, el directorio es: C:\Documents and Settings\Nombre_Usuario\Datos de programa\Sistema_Clientes.

Al hacer la llamada a la función open, la función dbAbrirConexion será llamada en caso de que no exista error; en caso contrario la función dbErrorConexion será llamada. El código de estas funciones se muestra a continuación:

Texto Plano
Actionscript:
  1. private function dbAbrirConexion(event:SQLEvent):void {  
  2.     if(!existeBD) { /* Si no existe la base de datos, llamamos a la función createTBLCliente */
  3.         createTBLCliente();
  4.     }
  5. }
  6.    
  7. private function dbErrorConexion():void {
  8.     Alert.show("No se pudo conectar a la base de datos"); /* Mostramos un mensaje de error*/
  9. }

Nuestra base de datos estará conformada por solamente una tabla (sólo para fines del ejercicio, ya que no es común que una base de datos esté formada por sólo una tabla). Nuestra tabla se llama cliente y sus elementos son los siguientes:

Imagen 2

Imagen 2

De la imagen anterior podemos determinar que el query para crear esta tabla es:

Texto Plano
SQL:
  1. CREATE TABLE `cliente` (`id` INTEGER PRIMARY KEY  NOT NULL, `nombre` TEXT, `direccion` TEXT, `telefono` TEXT, `email` TEXT)

Este query lo usaremos en la función createTBLCliente, el cual es llamado desde dbAbrirConexion.

Texto Plano
Actionscript:
  1. private function createTBLCliente():void {
  2.     queryStatement.clearParameters();
  3.     var sql:String = "CREATE TABLE `cliente` ";
  4.     sql += "(`id` INTEGER PRIMARY KEY  NOT NULL, `nombre` TEXT, `direccion` TEXT ";
  5.     sql += ", `telefono` TEXT, `email` TEXT)";
  6.     queryStatement.text = sql;
  7.     try {
  8.         queryStatement.execute();
  9.         insertDefaultData();
  10.     }
  11.     catch(error:SQLError) {
  12.         Alert.show("Error al insertar el registro: " + error.toString());            
  13.     }
  14. }

Para crear las sentencias de SQL, necesitamos de un objeto de la clase SQLStatement, a este objeto lo llamamos queryStatement y lo declaramos al inicio del programa. Para asegurarnos de que no tengamos parámetros asignados a este SQLStatement, usamos la función clearParameters, 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. Posteriormente declaramos una variable sql de tipo String que contiene el query de crear la tabla de cliente.
La propiedad text de la clase SQLStatement nos permite asignarle la sentencia SQL, por lo que le asignamos la variable sql.

Para poder "cachar" cualquier error que ocurra al ejecutar la sentencia, colocamos la llamada a la función execute dentro del bloque try. Cualquier error que ocurra será detectado y administrador en el bloque catch. En caso de que no exista ningún error al llamar a la función execute, llamaremos a la función insertDefaultData para insertar algunos registros por default.

A continuación pego el código de la función insertDefaultData:

Texto Plano
Actionscript:
  1. private function insertDefaultData():void {
  2.     queryStatement.clearParameters();
  3.     var sql:String = "INSERT INTO `cliente` (nombre, direccion, telefono, email) VALUES (:nombre, :direccion, :telefono, :email)";
  4.     queryStatement.parameters[":nombre"] = 'Ernesto Trujillo';
  5.     queryStatement.parameters[":direccion"] = 'Avenida Importante #33';
  6.     queryStatement.parameters[":telefono"] = '55667788';
  7.     queryStatement.parameters[":email"] = 'etrujillo@email.com';
  8.     queryStatement.text = sql;
  9.     try {
  10.         queryStatement.execute();
  11.     }
  12.     catch(error:SQLError) { 
  13.         Alert.show("Error al crear la tabla cliente: " + error.toString());  
  14.     }
  15. }

Este código es similar al de la función createTBLCliente en cuanto a la creación de la variable del SQLStatement, la creación del query y su asignación a la propiedad text. Sin embargo, presta atención en la forma en cómo se le pasan los valores al query; esto es usando dos puntos seguidos de un nombre cualquiera que quieras asignarle. Posteriormente debes establecer el valor de estos parámetros usando la propiedad parameters la cual recibe un arreglo asociativo con los valores del parámetro especificado.

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.


]]> http://www.codigometropoli.com/sistema-de-clientes-parte-i/feed/ 34 Crear archivo en AIR con Flex Builder 3 http://www.codigometropoli.com/crear-archivo-en-air-con-flex-builder-3/ http://www.codigometropoli.com/crear-archivo-en-air-con-flex-builder-3/#comments Mon, 02 Jun 2008 07:26:52 +0000 Carla Macías http://www.codigometropoli.com/?p=18 Adobe AIRAdobe AIR permite a los desarrolladores web, crear aplicaciones de escritorio con todo lo que una aplicación web puede proveer. Estas aplicaciones pueden ser ejecutadas en cualquier sistema operativo. Para instalar AIR necesitas tener instalado el Flex Builder 3 (o bien bajarte el SDK de Adobe AIR). En esta entrada aprenderemos a crear un archivo HTML con Adobe AIR.Puedes bajarte una versión de prueba del Flex Builder 3 aquí. Además, deberás bajar Adobe AIR de aquí. Una vez instalado estas dos aplicaciones inicia Flex Builder y haz click en el menú File -> New -> Flex Project. Te aparecerá una ventana en la cual deberás establecer el nombre del proyecto y el tipo de aplicación. En este caso deberás seleccionar la opción de Desktop application (runs in Adobe AIR). Como nombre de proyecto le pondremos AIRCreateFile.

Figura 1: Nuevo proyecto de Adobe AIR en Flex

Después de poner los datos anteriores y de hacer click en el botón de Finish, observarás del lado derecho (Flex Navigator) la lista de archivos y proyectos que tenemos dentro de Flex Builder. El icono rojo al lado del nombre del proyecto inidica que se trata de un proyecto de Adobe AIR. Dentro de la carpeta src (source) se almacenarán los archivos de nuestro proyecto, si observas, el programa Flex ya nos creó nuestro primer archivo (el cual será el punto de arranque de la aplicación) el cual se llama igual que nuestro proyecto.

Adobe AIR no sólo nos creo el archivo AIRCreateFile.mxml sino que también nos lo abrió (en la ventana grande de la derecha) y está listo para que empecemos a programar.

Figura 2: Nuestro proyecto de AIR en Flex Builder 3

Como puedes observar en el código, el componente WindowedApplication es el componente padre de nuestra aplicación en AIR. Dentro de estos tags <WindowedApplication> y </WindowedApplication> debemos escribir todo nuestro código. Comenzaremos haciendo unos cambios al diseño de la aplicación, posteriormente veremos el código necesario para crear el archivo y cargarlo con el componente HTML de Adobe AIR.

Si observas la imagen anterior, arriba del editor de código está el botón de Source (Fuente) y el botón de Design (diseño). Ahorita estamos en la vista del código fuente, por lo tanto el botón de Source está activado. Para realizar los cambios en el diseño de la aplicación lo haremos directamente desde la vista Design, por lo tanto da click en ese botón. Al darle click al botón de diseño, los paneles laterales cambian (En esta vista podemos ver del lado derecho el panel Flex Properties (Propiedades de Flex), el panel States (Estados), Components (Componentes), entre otros. En el panel Style, dentro de la sección Fill, al hacer click en el primer botón (el de una cubeta de pintura) podemos cambiar el color de fondo de la aplicación. Para este ejercicio cambia el botón de fondo a blanco (#FFFFFF).

En el panel Components dentro de la sección de Controls, arrastra al área de diseño el item que dice Label. Da click sobre él y escribe "Crear archivo HTML en AIR"; dale el formato que quieras y dentro de la sección Layout del panel de propiedades da click en el botón de enmedio horizontal que está debajo de Constraints. Este botón permite que la etiqueta (Label) que acabamos de poner siempre está centrada horizontalmente cuando se ejecuta la aplicación.

Figura 3: Panel Flex Properties

En el mismo panel de componentes, se encuentra como penéltima categoría los componentes de Adobe AIR, busca el componente HTML y arrástralo al área de diseño. Selecciona el componente que acabas de arrastrar y pon los siguientes valores en la sección de Layout del panel de propiedades:

Figura 4: Definiendo las propiedades de nuestro componente HTML

Da click en el botón de Source y observa cómo Flex Builder fue creando el código referente a los cambios de layout y diseño del archivo mxml.  Como esta va a ser una pequeña aplicación de ejemplo, vamos a poner todo el código en este archivo; sin embargo, es recomendable para aplicaciones más grandes tener nuestro código organizado en clases y archivos .AS para poder reutilizarlos y para poder actualizarlos fácilmente cuando se requieran cambios. Agrega estos elementos a los siguientes tags:

Texto Plano
Actionscript:
  1. /* Una vez que se haya creado la ventana de la aplicación, se mandará a llamar la función init(); */
  2. <mx:WindowedApplication creationComplete="init();"
  3. /* Le estamos asignando el id de HTMLLoader al componente HTML */
  4. <mx:HTML id="HTMLLoader"

Dentro de los tags <WindowedApplication> introduce esta línea de código y presiona la tecla Enter:

Texto Plano
Actionscript:
  1. <mx:Script>

Verás que Flex Builder te completará el código cerrando el tag:

Figura 6: Estableciendo los tags de Script para poner nuestro código ActionScript

Dentro del CDATA de nuestro tag Script deberá ir todo nuestro código ActionScript que necesitemos. Para poder crear un archivo desde AIR necesitamos importar la librería File:

Texto Plano
Actionscript:
  1. // Importar las siguientes librerías:
  2. import flash.filesystem.File;
  3. import flash.html.HTMLLoader; // Esta librería la usaremos más adelante para mostrar en nuestra aplicación el archivo HTML que generamos

Además, crearemos estas variables que usaremos más adelante:

Texto Plano
Actionscript:
  1. private var _encodeType:String = "iso-8859-1"; /* Tipo de codificación para que nos permita acentos en el archivo */
  2. private var stream:FileStream = new FileStream(); /* Estamos declarando una variable de tipo FileStream para poder crear y escribir en el archivo */

Debajo del código anterior escribe las siguientes funciones:

Texto Plano
Actionscript:
  1. /* Esta es la primera función que mandamos a llamar en creationComplete */
  2. public function init() {
  3.      this.maximize(); /* Cuando ejecutamos la aplicación la ventana estará maximizada */
  4.      var htmlFile:File = new File(File.applicationStorageDirectory.nativePath + "/miArchivo.html"); /* Una referencia al archivo HTML que vamos a crear, en ese caso nuestro archivo se llamará miArchivo.html */
  5.      if(stream != null) { /* Si ya existe un stream abierto hay que cerrarlo */
  6.           stream.close();
  7.      }
  8.      stream = new FileStream();
  9.      stream.open(htmlFile, FileMode.WRITE); /* Abrimos el archivo en modo de escritura */
  10.      stream.addEventListener(IOErrorEvent.IO_ERROR, writeIOErrorHandler); /* Asignamos un listener al stream para ver si hubo error de lectura o escritura de archivo */
  11.                          
  12.      stream.writeMultiByte(getFirstTags(), _encodeType); /* Escribimos en nuestro archivo el texto (que en nuestro caso es el código HTML de nuestro ejemplo) que nos regresa la función getFirstTags() declarada más adelante, con codificación ISO para los acentos */
  13.      stream.writeMultiByte(getDataTable(), _encodeType); /* Escribimos en nuestro archivo el texto que nos regresa la función getDataTable */
  14.      stream.writeMultiByte(getEndTags(), _encodeType);  /* Escribimos en nuestro archivo el texto que nos regresa la función getEndTags*/
  15.                          
  16.      stream.close(); /* Cerramos nuestro stream */
  17.                              
  18.      HTMLLoader.location = File.applicationStorageDirectory.nativePath + "/miArchivo.html"; /* Mostramos en el componente HTML el archivo que acabamos de crear */
  19. }
  20. public function getFirstTags():String {
  21.      var _texto:String = '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">\n' +
  22.                 '<html xmlns="http://www.w3.org/1999/xhtml">\n' +
  23.                 '<head>\n' +
  24.                 '<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2" />\n' +
  25.                 '<title>Crear archivo HTML en Adobe AIR</title>\n' +
  26.                 '<style>\n' +
  27.                 'body {\n' +
  28.                 '   font:Arial, Helvetica, sans-serif;\n' +
  29.                 '   font-family:Arial, Helvetica, sans-serif;\n' +
  30.                 '   font-size:12px;\n' +
  31.                 '   margin-left:30px;\n' +
  32.                 '}\n' +
  33.                 'hr.Ruler {\n' +
  34.                 '   margin-left:-20px !important;\n' +
  35.                 '   color:#003366;\n' +
  36.                 '   border:1px solid #003366;\n' +
  37.                 '   background-color:#003366;\n' +
  38.                 '   width:800px;\n' +
  39.                 '}\n' +
  40.                 '.Estilo3 {\n' +
  41.                 '   color: #993300;\n' +
  42.                 '   font-weight: bold;\n' +
  43.                 '   font-size: 14px;\n' +
  44.                 '}\n' +
  45.                 '.Estilo4 {font-size: 12px; color: #666666;}\n' +
  46.                 'a:hover, a:link, a:visited, a:active {font-size: 12px; color: #666666; text-decoration:none; }\n' +
  47.                 '.Tabla_Datos td {\n' +
  48.                 '   height:25px;\n' +
  49.                 '}\n' +
  50.                 '</style>\n' +
  51.                 '</head>\n' +      
  52.                 '<body>\n';
  53.                 return _texto;
  54. }
  55.                    
  56. private function getEndTags():String {
  57.      var _texto:String = '</body></html>';
  58.      return _texto;                               
  59. }
  60.                        
  61. private function writeIOErrorHandler(event:Event):void {
  62.      trace("Error al abrir o escribir el archivo");
  63. }

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

Texto Plano
Actionscript:
  1. <![CDATA[
  2.     import flash.filesystem.File;
  3.     import flash.html.HTMLLoader;
  4.  
  5.     private var _encodeType:String = "iso-8859-1";
  6.     private var stream:FileStream = new FileStream();
  7.  
  8.     public function init() {
  9.         this.maximize();
  10.  
  11.         var htmlFile:File = new File(File.applicationStorageDirectory.nativePath + "/miArchivo.html");
  12.         if(stream != null) {
  13.             stream.close();
  14.         }
  15.         stream = new FileStream();
  16.         stream.open(htmlFile, FileMode.WRITE);
  17.         stream.addEventListener(IOErrorEvent.IO_ERROR, writeIOErrorHandler);
  18.  
  19.         stream.writeMultiByte(getFirstTags(), _encodeType);
  20.         stream.writeMultiByte(getDataTable(), _encodeType); 
  21.         stream.writeMultiByte(getEndTags(), _encodeType);   
  22.  
  23.         stream.close();
  24.  
  25.         HTMLLoader.location = File.applicationStorageDirectory.nativePath + "/miArchivo.html";   
  26.     }
  27.  
  28.     public function getFirstTags():String {
  29.         var _texto:String = '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">\n' +
  30.         '<html xmlns="http://www.w3.org/1999/xhtml">\n' +
  31.         '<head>\n' +
  32.         '<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2" />\n' +
  33.         '<title>Crear archivo HTML en Adobe AIR</title>\n' +
  34.         '<style>\n' +
  35.         'body {\n' +
  36.         '   font:Arial, Helvetica, sans-serif;\n' +
  37.         '   font-family:Arial, Helvetica, sans-serif;\n' +
  38.         '   font-size:12px;\n' +
  39.         '   margin-left:30px;\n' +
  40.         '}\n' +
  41.         'hr.Ruler {\n' +
  42.         '   margin-left:-20px !important;\n' +
  43.         '   color:#003366;\n' +
  44.         '   border:1px solid #003366;\n' +
  45.         '   background-color:#003366;\n' +
  46.         '   width:800px;\n' +
  47.         '}\n' +
  48.         '.Estilo3 {\n' +
  49.         '   color: #993300;\n' +
  50.         '   font-weight: bold;\n' +
  51.         '   font-size: 14px;\n' +
  52.         '}\n' +
  53.         '.Estilo4 {font-size: 12px; color: #666666;}\n' +
  54.         'a:hover, a:link, a:visited, a:active {font-size: 12px; color: #666666; text-decoration:none; }\n' +
  55.         '.Tabla_Datos td {\n' +
  56.         '   height:25px;\n' +
  57.         '}\n' +
  58.         '</style>\n' +
  59.         '</head>\n' +      
  60.         '<body>\n';
  61.         return _texto;
  62.     }
  63.  
  64.     private function getDataTable():String {
  65.         var _texto:String = '<br />\n' +
  66.         '<span class="Estilo3">Archivo HTML en Adober AIR</span>&nbsp;&nbsp;<span class="Estilo4"><a href="http://codigometropoli.com">(http://codigometropoli.com)</a></span><br />\n' +
  67.         '<br />\n' +
  68.         '<table class="Tabla_Datos" width="700" border="0" cellspacing="0" cellpadding="0">\n' +
  69.         '  <tr>\n' +
  70.         '    <td width="138"><strong>Nombre:</strong></td>\n' +
  71.         '    <td width="237">Juan Carlos</td>\n' +
  72.         '    <td width="169"><strong>Fecha de Nacimiento:</strong></td>\n' +
  73.         '    <td width="156">20/03/1981</td>\n' +
  74.         '  </tr>\n' +
  75.         '  <tr>\n' +
  76.         '    <td><strong>Pa&iacute;s:</strong></td>\n' +
  77.         '    <td>M&eacute;xico</td>\n' +
  78.         '    <td><strong>Ciudad:</strong></td>\n' +
  79.         '    <td>Distrito Federal</td>\n' +
  80.         '  </tr>\n' +
  81.         '  <tr>\n' +
  82.         '    <td><strong>N&uacute;mero de Cliente: </strong></td>\n' +
  83.         '    <td>541232</td>\n' +
  84.         '    <td>&nbsp;</td>\n' +
  85.         '    <td>&nbsp;</td>\n' +
  86.         '  </tr>\n' +
  87.         '</table>\n' +
  88.         '<hr class="Ruler" />';
  89.         return _texto;
  90.     }
  91.  
  92.     private function getEndTags():String {
  93.         var _texto:String = '</body></html>';
  94.         return _texto;       
  95.     }
  96.  
  97.     private function writeIOErrorHandler(event:Event):void
  98.     {
  99.         trace("Error al abrir o escribir el archivo");
  100.     }
  101. ]]>

El resultado final se muestra en la siguiente imagen:

Figura 7: Nuestra aplicación de Adobe AIR en acción

Descargar Archivo

]]> http://www.codigometropoli.com/crear-archivo-en-air-con-flex-builder-3/feed/ 11