En un tutorial anterior vimos como desarrollar una aplicación simple con Apache Cordova, Jquery mobile, html5 y css que nos permitiera añadir registros a una base de datos Sqlite, en este caso veremos que hace cada función dentro del código.
Función Opendatabase()La función opendatabase sirve para crear una base de datos o abrirla si ya estuviese creada, necesitamos cuatro parámetros, nombre de la base de datos, versión, nombre de la base de datos que se vera y el tamaño en bytes. Cuando creamos a abrimos una base de datos es se guarda en la variable que asignamos en este caso db.
function CreartDB() { db = window.openDatabase(“Clientes”, “1.0″, “Lista Clientes”, 1000000);}También podemos ejecutar la función cuando inicia la aplicación en el dispositivo Android
Mientras inicia la aplicación, llamamos a la función que crea la base de datos
//Añadimos un evento cuando la aplicación se ha iniciado document.addEventListener("deviceready", InicioDispositivo, false); function InicioDispositivo() { db = window.openDatabase(“Clientes”, “1.0″, “Lista Clientes”, 1000000); }También podemos necesitar hacer alguna tarea mientras la aplicación esta iniciando en el caso anterior vimos como llamar a una función cuando la aplicación ya se había iniciado.
function Iniciando() { document.addEventListener("deviceready", ConfigurarApp(), false); } function ConfiguraAPP() { document.addEventListener("resume", OtraFuncion(), false); } <body onload="Iniciando()">Desde el HTML con el evento onload es decir al cargar la pagina llamamos a la función Iniciando, mientras al iniciarse (deviceready) llama a la función ConfigurarAPP que pasara a ejecutarse en segundo plano (resume).
Algunos eventos que podemos utilizar disponibles en Android son:
deviceready: este evento ocurre cuando la aplicación se ha iniciado.
pause: este evento se activa cuando una aplicación se pasa a ejecutarse en segundo plano.
resume: este evento se produce cuando la aplicación pasa a ejecutarse de segundo a primer plano.
online y offline: este evento se produce cuando la aplicación se conecta o desconecta de una red.
Existen otros eventos referidos a interacción con el teléfono pero veremos estos que están mas asociados al control del código.
Función Transaction()Cuando queremos realizar una transacción de tipo SQL utilizamos el método transaction. La función consta de tres parámetros una función con la consulta sql, una función para mostrar error si falla la consulta y una función para mostrar si la consulta se realizo con éxito.
La función de consulta se realizara mediante el método ExecuteSQL. Crearemos tres funciones para ejecutar en cadena al iniciar la aplicación estas son:
consultarDB: con la consulta sql
errorCDB(): mostrara si hay un error en la consulta sql
exitoCDB(): mostrara un mensaje si la consulta se realizo con éxito.
script type="text/javascript" charset="utf-8"> //Al iniciar la aplicación realizamos alguna consultas sql document.addEventListener("deviceready", IniciaSQL, false); function IniciaSQL() { var db = window.openDatabase("Contactos", "1.0", "Lista de contactos", 400000); db.transaction(consultarDB, errorCB,exitoCB); } function consultaDB(tx) { //Crear la tabla contactos si no esta creada tx.executeSql('CREATE TABLE IF NOT EXISTS Contactos (id, nombre, email)'); //Insertar datos en la tabla tx.executeSql('INSERT INTO Contactos (id, nombre, email) VALUES (1, "José Cordova”,”jc@gmail.com”)'); tx.executeSql('INSERT INTO Contactos (id, nombre, email) VALUES (2, "Maria Alpei”,”ma@gmail.com”)'); } // función para capturar el error en la transacción function errorCDB(error) { alert("Error en la consulta SQL: "+error.code); } // Funcion para mostrar un mensaje de exito function exitCDB() { alert("Consulta exitosa!"); }Como consultar datos y mostrarlos mediante una consulta sql que devuelve un array o matriz tipo SQLResultSetList
function consultaDB(tx) { tx.executeSql('SELECT * FROM Contactos', [], exitoCDB, errorCDB); } function exitoDB(tx, results) { //obtenemos la cantidad de filas var totalcontactos = results.rows.length; //mostramos la cantidad de contactos console.log("Total Contactos: " + totalcontactos); //Mostramos los registros en un bucle donde mostramos cada campo del array for (var i=0; i<len; i++){ console.log(" Nombre = " +results.rows.item(i).nombre + " Email = " + results.rows.item(i).email); } } //función que captura el error function errorCDB(error) { alert("Error en la consulta SQL: "+error.code); } //Al iniciar ejecutamos la apertura de la base de datos y la transacción var db = window.openDatabase("Contactos", "1.0", "Lista de contactos", 400000); db.transaction(consultaDB, errorCDB);La función SQLResultSetList tiene la propiedad rows que contiene los registros cada fila de la tabla consultada. Este array se recorre con la función rows.item(i) y el numero de fila. Además debemos indicar que campo de esa fila queremos mostrar. Ejemplo results.rows.item(i).nombre.También podemos mostrar este campo en algún elemento html como por ejemplo un campo de texto haciendo referencia a su identificador.
function querySuccess(tx, results) { var len = results.rows.length; document.getElementById("divmostrar").innerHTML += "<tr><td>Id</td><td>Nombre</td></tr>"; for (var i=0; i<len; i++){ document.getElementById("divmostrar").innerHTML += "<tr><td>" + results.rows.item(i).id + "</td><td>" + results.rows.item(i).n ombre + "</td></tr>"; } }Luego en el código html deberemos tener en este caso el div con el identificador divmotrar para que se muestre la tabla con los datos de la consulta.
<div id=”#divmostrar”></div>Los corchetes en la función executeSQL sirven para enviar parámetros esta propiedad es opcional ya que no siempre necesitaremos enviar parámetros a la consulta SQL Si queremos enviar parámetros a una consulta por ejemplo para actualizar datos de la base de datos:
function Actualizar(id, nombre) { db.transaction(function(tx) { tx.executeSql("UPDATE Contactos SET nombre " = ? WHERE id = ?", [nombre, id], errorCDB); });También podemos acceder desde html a las funciones con evento como clic en un botón. Veamos un ejemplo como si tenemos el archivo index por defecto de un proyecto Apache Cordova podemos añadir el código para la base de datos y el código html con el botón Grabar, al hacer clic en el botón Grabar se ejecutara una función que insertara datos en la base de datos.
<head> <script type="text/javascript" src="cordova.js"></script> <script type="text/javascript" src="js/index.js"></script> <script type="text/javascript"> app.initialize(); </script> <script> function onDeviceReady() { var db = window.openDatabase("Contactos", "1.0", Amigos", 200000); db.transaction(consultaDB, errorCB, successCB); //Cuando se hace clic en el botón nuevo se ejecuta la funcion para grabar datos $("#grabar").click(function() { db.transaction(grabarDB, errorCDB, exitCDB); }); } function consultaDB(tx) { tx.executeSql('CREATE TABLE IF NOT EXISTS Contactos (id, nombre, email)'); } function grabarDB(tx) { //Tomamos los valores de los elementos html según sus identificadores, los asignamos a variables y luego ejecutamos la transacción, en este caso insertar un registro en la tabla. var id = document.getElementById("id").value; var nombre = document.getElementById("nombre").value; var email = document.getElementById("email").value; var sql = "INSERT INTO Contactos (id, nombre, email) VALUES (?, ?, ?)"; db.transaction(function(tx) {tx.executeSql(sql, [id, nombre, email])}, errorCDB, exitoCDB); } </script> </head> <body> <div class="app"> <h1>Apache Cordova</h1> <br/><button id="grabar">Grabar</button><br/> </div> </body> </html>
Es un proyecto distinto de Android por lo que incorpora funcionalidades mucho desde de la versión nativa.
Como hacerlo con una base de datos sqlite existente???