Cristalab

                 ¿Quieres registrarte?

Manejo de una base de datos SQLite con AIR y Flex

Por: AXM
24 de Enero del 2008
455 de clabLevel
Otros artículos de AXM
12,944 visitas

Esto es un ejemplo del manejo de una base de datos SQLite con Air. En él se crea una base de datos, se crean tablas, y se insertan, modifican o eliminan registros. También se pasan datos de 2 tablas a una. Y para terminar a lo grande se unen 3 tablas para mostrar un resultado bonito. Todo esto hecho con Flex 3 beta 3 y Actionscript 3.

Quería aprender como se maneja una base de datos SQLite con Air, entonces, después de investigar bastante y ver el tip de Joris Van Spilbergen sobre este mismo tema, quise hacer un programa con AIR que manejara las calificaciones de unos hipotéticos alumnos. El ejemplo es de lo mas cutre, pero sirve para entender el manejo de bases de datos.
No pretendo explicar paso a paso nada. Solo coloco el código para el que lo necesite. Si alguien tiene una pregunta, que la haga en los comentarios.

Bueno, para entender este ejemplo, primero se tiene que saber lo básico del lenguaje SQL (yo hace 2 dias no sabia nada). Si no sabes nada, una buena guia que lo deja muy claro es "Manual Imprescindible de PHP 5" capitulo 11, o el tutorial básico de Cristalab. Si necesitas saber más, ve a la guia de SQLite . Y si quieres saber mucho mas de SQL busca por allí algún libro como La biblia de MySQL, de la editorial Anaya.

Antes de tratar de entender el ejemplo hay que entender bien el tip de Joris Van Spilbergen. También otra buena guía es esta .

Gracias a Zguillez quise utilizar el Patrón Singleton y me fue muy útil. Por eso seria bueno, antes de entender el ejemplo investigar un poco del patron singleton en google. No hay que entenderlo de arriba abajo para utilizarlo y que sea útil.

El funcionamiento de la aplicación es el siguiente: Se tiene el MXML con la interfaz, pero como quiero colocar el menor código posible, creo una clase que va a manejar todo lo de la base de datos. Esta se llama UtilDB.as. Allí está todo el código interesante, (donde se crean, modifican y eliminan registros). Pero como UtilDB.as tiene que saber de alguna forma qué hay en el MXML, creé una clase llamada Variables.as que contiene todas las variables o elementos que comunican el MXML y el UtilDB.as. Para eso es que sirve el patrón Singleton. Una vez que se entiende, es fácil y MUY útil.

Después creo 3 tablas, Alumnos, que solo van ha tener los datos de los alumnos. Nada de notas. Acá las columnas son id, nombre, apellido edad, genero. Luego creo una Tabla que tiene todas las Materias. Solo tiene dos columnas, id, nombre de materia. Después hay una tercera tabla que se llama Calificaciones. Las columnas son id, id Alumno, id Materia y Nota. Acá se relaciona el alumno, la materia y la nota. Y por ultimo, se unen estas tres tablas para que se muestre las notas como uno espera. Un DataGrid con el nombre del alumno, la materia y la nota. Sencillo.

El MXML principal.

Código :

<?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="800" height="600" creationComplete="inicio()">
<mx:Script>
   <![CDATA[
      import mx.collections.ArrayCollection;
      import mx.controls.Alert;
      import flash.events.SQLEvent;
      
      import clases.*;
      
      [Bindable]   public   var _var   :Variables    = Variables.getInstance();
               private var db      :UtilDB;     
      
      private function inicio():void
      {
         _var.listaAlumnos    = listaAlumnos;
         _var.campoNombre   = campoNombre
         _var.campoapellido   = campoApellido;
         _var.comboGenero   = campoGenero;
         _var.campoEdad      = campoEdad;
         _var.campoNota      = campoNota;
         _var.listaMaterias   = listaMaterias;
                  
         db               = new UtilDB();
      }

        private function selecionarAlumno():void
        {
           _var.nombre         = listaAlumnos.selectedItem.nombre;
           _var.apellido      = listaAlumnos.selectedItem.apellido;
           _var.genero         = listaAlumnos.selectedItem.genero;
           _var.edad         = listaAlumnos.selectedItem.edad;
           
           if (listaAlumnos.selectedItem.genero == "Hombre")
           {
              campoGenero.selectedIndex = 0;
           }
           else
           {
              campoGenero.selectedIndex = 1;
           }
        }
   ]]>
</mx:Script>

   <mx:DataGrid width="348" height="201" id="listaAlumnos" left="10" top="10" dataProvider="{_var.datosDB}" itemClick="selecionarAlumno()">
      <mx:columns>
         <mx:DataGridColumn headerText="user_id" dataField="user_id"/>
         <mx:DataGridColumn headerText="nombre" dataField="nombre"/>
         <mx:DataGridColumn headerText="apellido" dataField="apellido"/>
         <mx:DataGridColumn headerText="genero" dataField="genero"/>
         <mx:DataGridColumn headerText="edad" dataField="edad"/>
      </mx:columns>
   </mx:DataGrid>
   <mx:Form x="10" y="219" width="269" height="143">
      <mx:FormItem label="Nombre:">
         <mx:TextInput id="campoNombre" text="{_var.nombre}"/>
      </mx:FormItem>
      <mx:FormItem label="Apellido:">
         <mx:TextInput id="campoApellido" text="{_var.apellido}"/>
      </mx:FormItem>
      <mx:FormItem label="Genero:">
         <mx:ComboBox id="campoGenero">
            <mx:dataProvider>
               <mx:String>Hombre</mx:String>
               <mx:String>Mujer</mx:String>
            </mx:dataProvider>
         </mx:ComboBox>
      </mx:FormItem>
      <mx:FormItem label="Edad:">
         <mx:NumericStepper id="campoEdad" value="{_var.edad}" minimum="5" maximum="20"/>
      </mx:FormItem>
   </mx:Form>
   <mx:Button x="91" y="370" label="Eliminar" click="db.eliminarAlumno()"/>
   <mx:Button x="171" y="370" label="Modificar" click="db.modificarAlumno()"/>
   <mx:Button x="10" y="370" label="Agregar" click="db.agregarAlumno()"/>
   <mx:DataGrid width="171" height="201" top="10" left="366" id="listaMaterias" dataProvider="{_var.materiasDB}"
      itemClick="materiaCalificar.label = listaMaterias.selectedItem.materia;"
      >
      <mx:columns>
         <mx:DataGridColumn headerText="Id" dataField="id_materia"/>
         <mx:DataGridColumn headerText="Materia" dataField="materia"/>
      </mx:columns>
   </mx:DataGrid>
   <mx:DataGrid height="201" left="545" top="10" id="listaCalificaciones" width="243" dataProvider="{_var.calificacionesDB}">
      <mx:columns>
         <mx:DataGridColumn headerText="id_cali" dataField="id_cali"/>
         <mx:DataGridColumn headerText="Alumno" dataField="user_id"/>
         <mx:DataGridColumn headerText="Materia" dataField="id_materia"/>
         <mx:DataGridColumn headerText="nota" dataField="nota"/>
      </mx:columns>
   </mx:DataGrid>
   <mx:DataGrid id="listaNotas" left="330" right="10" top="219" bottom="10" dataProvider="{_var.notasDB}">
      <mx:columns>
         <mx:DataGridColumn headerText="Alumno" dataField="nombre"/>
         <mx:DataGridColumn headerText="Materia" dataField="materia"/>
         <mx:DataGridColumn headerText="Nota" dataField="nota"/>
      </mx:columns>
   </mx:DataGrid>
   <mx:Form x="10" y="400" width="206" height="57">
      <mx:FormItem id="materiaCalificar" label="Nota">
         <mx:NumericStepper id="campoNota" minimum="0" maximum="5"/>
      </mx:FormItem>
   </mx:Form>
   <mx:Button label="Colocar Nota" x="224" y="416" click="db.colocarCalificacion()"/>
</mx:WindowedApplication>


UtilDB.as

Código :

package clases
{
import flash.data.SQLConnection;
import flash.data.SQLStatement;
import flash.errors.SQLError;
import flash.events.*;
import flash.filesystem.File;

import mx.collections.ArrayCollection;
import mx.controls.Alert;


public class UtilDB
{
   [Bindable]   public var _var:Variables = Variables.getInstance();
   
   public function UtilDB()
   {
      _var.conexion = new SQLConnection();
        _var.conexion.addEventListener(SQLEvent.OPEN, crearTablas);
        _var.conexion.addEventListener(SQLErrorEvent.ERROR, 
           function(event:SQLErrorEvent):void
           {
              Alert.show("Error de conexion --> "+event.error.message);
           });        
      _var.conexion.open(File.applicationStorageDirectory.resolvePath("baseDeDatos.db"));
   }

   private function crearTablas(e:SQLEvent):void
   {
        var   consulta1:String   = "CREATE TABLE IF NOT EXISTS alumnos("         +
                        "user_id INTEGER PRIMARY KEY AUTOINCREMENT,"   +
                        "nombre TEXT,"                           +            
                        "apellido TEXT,"                        +
                        "genero TEXT,"                           +
                        "edad NUMERIC"                           +
                        ")";   
      hacerConsulta(consulta1, actualizarAlumnos);
      
        var   consulta2:String   = "CREATE TABLE IF NOT EXISTS materias("      +
                        "id_materia INTEGER PRIMARY KEY AUTOINCREMENT, "+
                        "materia TEXT UNIQUE"                      +
                        ")";   
      hacerConsulta(consulta2);
      crearTodasLasMaterias();
      
        var   consulta3:String   = "CREATE TABLE IF NOT EXISTS calificaciones("   +
                        "id_cali INTEGER PRIMARY KEY AUTOINCREMENT, "+
                        "user_id INTEGER, "                     +
                        "id_materia INTEGER, "                  +
                        "nota NUMERIC"                        +
                        ")";   
      hacerConsulta(consulta3);
      actualizarNotas();
     }

   private function unirTablas():void
   {
        var consulta:String      = "SELECT * FROM alumnos, materias, calificaciones WHERE " + 
                          "alumnos.user_id = calificaciones.user_id AND " + 
                          "materias.id_materia = calificaciones.id_materia";
        hacerConsulta(consulta,
                            function (e:Object):void
                            {
                               _var.notasDB = new ArrayCollection(e.data);
                            }  
        );
   }
     
     public function colocarCalificacion():void
     {
        var consulta:String      = "SELECT user_id, id_materia FROM calificaciones WHERE " + 
                          _var.listaAlumnos.selectedItem.user_id +" = user_id AND " + 
                          _var.listaMaterias.selectedItem.id_materia + "= id_materia";
        hacerConsulta(consulta, buscarCalificacionRepetida);
     }
     private function buscarCalificacionRepetida(e:Object = null):void
     {
         if (e.data == null)
         {
           var consulta:String      = "INSERT INTO calificaciones(user_id, id_materia, nota) VALUES (" + 
                             _var.listaAlumnos.selectedItem.user_id            + ", "  + 
                             _var.listaMaterias.selectedItem.id_materia   + ", "   +
                             _var.campoNota.value                  + ")";
                             
         hacerConsulta(consulta, actualizarNotas);
         }   
     }
     private function actualizarNotas(i:Object = null):void
     {
        var consulta:String      = "SELECT * FROM calificaciones";
        hacerConsulta(consulta,
                            function (e:Object):void
                            {
                               _var.calificacionesDB = new ArrayCollection(e.data);
                            }  
        );
        unirTablas();
     }

     private function crearTodasLasMaterias():void
     {
       crearMateria("Matemáticas");
        crearMateria("Física");
        crearMateria("Química");
        crearMateria("Ingles");
        crearMateria("Español");   
        crearMateria("Historia");              
        actualizarMaterias();            
     }
     private function crearMateria(mate:String):void
     {
        var consulta:String   = "INSERT INTO materias(materia) VALUES ('" + mate + "')";
        
      try
      {
          hacerConsulta(consulta);           
      }
      catch (error:SQLError)
      {
      }
      }
     private function actualizarMaterias():void
     {
      var consulta      :String         = "SELECT * FROM materias"; 
          hacerConsulta(consulta,
                            function (e:Object):void
                            {
                               _var.materiasDB = new ArrayCollection(e.data);
                            }  
          );
     }
     private function actualizarAlumnos(i:Object = null):void
     {
      var consulta      :String         = "SELECT * FROM alumnos"; 
          hacerConsulta(consulta,
                            function (e:Object):void
                            {
                               _var.datosDB = new ArrayCollection(e.data);
                            }  
          );
     }
     public function agregarAlumno():void
     {
        var   consulta:String   =   "INSERT INTO alumnos (nombre, apellido, genero, edad)"   +
                          "VALUES ('"                     +
                          _var.campoNombre.text            + "','" +
                          _var.campoapellido.text            + "','"   +
                          _var.comboGenero.value.toString()   + "',"   +
                          _var.campoEdad.value.toString()      + ")";            
                          
        hacerConsulta(consulta, actualizarAlumnos);
        
      _var.campoNombre.text            = "";
      _var.campoapellido.text            = "";
      _var.comboGenero.selectedIndex      = 0;            
         _var.campoEdad.value            = 10;         
     }
     public function eliminarAlumno():void
     {
          var   consulta:String   =   "DELETE FROM alumnos WHERE user_id = " + _var.listaAlumnos.selectedItem.user_id;
      hacerConsulta(consulta, actualizarAlumnos);    
     }
     public function modificarAlumno():void
     {
        var   consulta:String   =   "UPDATE alumnos SET " + 
                          "nombre   = '"    + _var.campoNombre.text            + "', " +
                          "apellido = '"    + _var.campoapellido.text          + "', " +
                          "genero = '"    + _var.comboGenero.value.toString()   + "', "   +
                          "edad = "       + _var.campoEdad.value.toString()   +  
                          " WHERE  user_id = " + _var.listaAlumnos.selectedItem.user_id;
        
         hacerConsulta(consulta, actualizarAlumnos);
   }      
   private function hacerConsulta(consulta:String, f:Function = null):void
   {
      var declaracion               :SQLStatement    = new SQLStatement();

         declaracion.sqlConnection                = _var.conexion;         
         declaracion.text                     = consulta;
         
         declaracion.addEventListener            (SQLEvent.RESULT,
            function (e:SQLEvent):void
            {
               if(f != null)
               {
                  f(e.target.getResult());                     
               }
            }
         );
            declaracion.addEventListener(SQLErrorEvent.ERROR, 
               function(event:SQLErrorEvent):void
               {
                  Alert.show("Error de conexion --> "+event.error.message);
               });      
         declaracion.execute();
   }      
}
}

Variables.as

Código :

package clases
{
   import flash.data.SQLConnection;
   
   import mx.collections.ArrayCollection;
   import mx.controls.ComboBox;
   import mx.controls.DataGrid;
   import mx.controls.NumericStepper;
   import mx.controls.TextInput;
   
   [Bindable]
   public class Variables
   {
      private   static var variables:Variables;
      
      public   static function getInstance():Variables
      {
         if (variables == null)
         {
            variables = new Variables();
         }
         return variables;
      }
      
      public var datosDB         :ArrayCollection;
      public var materiasDB      :ArrayCollection;      
      public var calificacionesDB   :ArrayCollection;
      public var notasDB         :ArrayCollection;
      public var listaAlumnos      :DataGrid;
      public var listaMaterias   :DataGrid;
      public var listaNotas      :DataGrid;
      public var conexion         :SQLConnection;
      
      public var nombre         :String;
      public var apellido         :String;      
      public var genero         :String;
      public var edad            :int            = 10;
      
      public var campoNombre      :TextInput
      public var campoapellido   :TextInput
      public var comboGenero      :ComboBox;
      public var campoEdad      :NumericStepper;
      public var campoNota      :NumericStepper;
   
   }
}



Pueden descargar la aplicación y ver como queda:

[Descargar Aplicación]


Artículos Relacionados


Etiquetas flex air

Comentarios | Enviar un comentario
buen aporte (Y)
Por: eldervaz
Muy buena utilización de los recursos de AIR. ;)
Por: Lunatic_blog
me parece un excelente ejemplo te felicito
la verdad estoy desarrolando un proyecto en flex 3 pero orienta a la web con flash player y me ayudaria muchismo pero muchisimo que me ayudaras a poner a funcionar tu ejemplo para flash 9 lo he estado intentando pero ne he podido

de antemano muchas gracias
Por: pedroco
No estoy totalmente seguro... pero que yo sepa para flash player 9 no tenes la SQLite :P
Quizás por eso es que no te ande (6)
Por: Raxiro_blog
La verdad no me corre el ejemplo
copiando el codigo
pero cuando corro la aplicacion descargandola me funciona, entonces nose tengo que instalar un software adicional te agradezco si me puedes ayudar
Por: pedroco_blog
Da mas detalles. Que versión de Flex tienes, como creaste e proyecto, como llamaste a las clases.
Por: AXM
no entendi nada
Por: no se-blog
Hola, quería consultarte si la base de datos corre localmente o tiene que estar en un servidor.
Por: Victor-blog
esta muy bien el ejemplo desearia que me mpliara un poco mas la informacion sobre flash player y el yel flex
Por: ludwing -blog
Mira, descargue el codigo pero no me compila, tengo una duda, donde consigo el paquete para que reconozca las librerias de Sqlite?
Por: Yucel-blog
gracias si me sirvio los codigos que se encuentran en este sitio pues muchas gracias por estas ayuda que se brinda
Por: leonardo-blog
Malisimo, se nota que no sabes nada de OOP
ademas si te tomas la molestia de escribir un tip deberias de ordenar y explicar el codigo mejor.
Por: Victor contreras-blog
El codigo ya no es compliant con el nuevo Flex. Pudieras Adaptarlo ?
Por: Anonimos-blog
Deja un comentario
IMPORTANTE

Recuerda ser respetuoso, no insultes a otras personas, ni uses palabrotas, hay una persona al otro lado de la pantalla.

Habla bien, NO ESCRIBAS EN MAYUSCULA TODO, no escribas como en un SMS, evita cosas como "ke", "x q" y demás abreviaciones.

Aquí funcionan las etiquetas de los foros, puedes usar [b] para negrita, [img] para las imágenes, [url] para los enlaces, etc.

Si tienes preguntas técnicas, envíalas mejor al foro.