Titanium Mobile Tablas basadas en bases de datos con SQLite - Parte 2

Bienvenido a la segunda parte de nuestra serie sobre desarrollo de Titanium Mobile basado en bases de datos. En este tutorial, insertaremos valores en una base de datos SQLite local y leeremos y escribiremos datos en una base de datos MySQL remota. Este tutorial tendrá mucho código, pero he tratado de ser lo más completo posible sin aburrir a nadie. Traiga sus preguntas a las secciones de comentarios.!

Resumen

En la primera parte de esta serie, creamos una base de datos SQLite local y creamos solo tres archivos que generaron páginas con especificaciones individuales para cada entrada. Usando este método, nuestra aplicación se vuelve más fácil de administrar y tiene una huella más pequeña. Usaremos la mayor parte del código desde el primer momento..

NOTA: Cambié dos cosas en la fuente del tut anterior. Uno era un mal nombre de la base de datos y el otro era un nombre de variable que había causado cierta confusión. Por favor, descargue la fuente de arriba para guardar algunos dolores de cabeza.

Paso 1: Configurar la aplicación

Abre Titanium Developer y crea un nuevo proyecto. Escoger Móvil y complete toda la información requerida. Entonces haga clic Crear proyecto. Copie la carpeta "productos" y la base de datos "products.sqlite" en el nuevo directorio de recursos. Estos archivos no tendrán que ser tocados. Ahora estamos listos para empezar a rodar..

Paso 2: Construyendo app.js

Vamos a necesitar cuatro pestañas para este tut. Me gusta usar el archivo app.js solo como puerta de entrada a la aplicación. Personalmente siento que es más fácil mantener las cosas organizadas de esta manera. Vamos a crear las pestañas y hacer que abran nuevos archivos. Aquí está el código final para app.js. Es bastante simple y lineal..

 var tabGroup = Ti.UI.createTabGroup (); var win1 = Ti.UI.createWindow (title: 'Local Read', url: 'products / product_category.js'); var tab1 = Ti.UI.createTab (icon: 'images / tabs / KS_nav_ui.png', título: 'Local Read', ventana: win1); var win2 = Ti.UI.createWindow (title: 'Local Insert', url: 'products / products_write.js'); var tab2 = Ti.UI.createTab (icon: 'images / tabs / KS_nav_ui.png', título: 'Local Insert', ventana: win2); var win3 = Ti.UI.createWindow (title: 'Remote Read', url: 'remote_read.js'); var tab3 = Ti.UI.createTab (icon: 'images / tabs / KS_nav_ui.png', título: 'Remote Read', window: win3); var win4 = Ti.UI.createWindow (title: 'Remote Insert', url: 'remote_write.js'); var tab4 = Ti.UI.createTab (icono: 'images / tabs / KS_nav_ui.png', título: 'Insertar remoto', ventana: win4); tabGroup.addTab (tab1); tabGroup.addTab (tab2); tabGroup.addTab (tab3); tabGroup.addTab (tab4); tabGroup.open ();

La pestaña 1 es todo el tut anterior. No tocaremos estos archivos, sino que creamos los archivos de marcador de posición para las otras tres pestañas.

Paso 3: Escribir en la base de datos local

Abra el archivo "products_write.js". En este archivo necesitaremos crear un campo de texto para cada campo en nuestra base de datos, crear un botón y adjuntar un EventListener para realizar una validación y ejecutar una función, y crear una función para insertar los datos. Es un montón de código repetido. Aquí está el producto final:

El código reducido se verá como el siguiente. Todos los campos de texto tienen los mismos atributos con la excepción de las variables "top" y "hintText". Solo veremos una.

 // crear var para el currentWindow var currentWin = Ti.UI.currentWindow; function insertRows (dbData) ** FUNCTION HERE **; var category = Ti.UI.createTextField (color: '# 336699', parte superior: 10, izquierda: 10, ancho: 300, altura: 40, texto de sugerencia: 'Categoría', tipo de teclado: Ti.UI.KEYBOARD_DEFAULT, borderStyle: Ti .UI.INPUT_BORDERSTYLE_ROUNDED); currentWin.add (categoría); nombre var = Ti.UI.createTextField (…); currentWin.add (nombre); var pwidth = Ti.UI.createTextField (…); currentWin.add (pwidth); var pheight = Ti.UI.createTextField (…); currentWin.add (pheight); var pcolor = Ti.UI.createTextField (…); currentWin.add (pcolor); var qty = Ti.UI.createTextField (…); currentWin.add (qty); var btn = Ti.UI.createButton (title: 'Insert Record Record', top: 310, width: 130, height: 35, borderRadius: 1, font: fontFamily: 'Arial', fontWeight: 'bold', tamaño de fuente: 14); currentWin.add (btn); btn.addEventListener ('clic', función (e) si (category.value! = "&& name.value! =" && pwidth.value! = "&& pheight.value! =" && pcolor.value! = "&& qty.value! = ") var dbData = category: category.value, name: name.value, pwidth: pwidth.value, pheight: pheight.value, pcolor: pcolor.value, qty: qty.value; insertRows (dbData); else alert ("Rellene todos los campos");;);

Los campos de texto se crean y los atributos asignados. El nombre de la variable es lo que usaremos más adelante. Se crea el botón y luego agregamos un eventListener. Aquí estamos comprobando primero para asegurarnos de que los campos de texto no sean iguales a (! =) "En blanco" y luego crear una var con los valores del campo de texto. Estos valores se pasan luego a la función insertRows (). Si un campo se deja en blanco, se disparará una alerta..

La función recibe los valores del campo de texto de dbData. Luego creamos nuestra declaración SQL, usamos nuestra db var y "ejecutamos" para crear otra var, llamamos a esa var y finalmente alertamos que las filas fueron insertadas. Si hay un error al insertar, esta alerta no se disparará. Lo que probablemente sucederá es que la aplicación se bloqueará..

 function insertRows (dbData) var db = Ti.Database.install ('… /products.sqlite','products'); var theData = db.execute ('INSERT INTO products (categoría, nombre, pwidth, pheight, pcolor, qty) VALUES ("' + category.value + '", "' + name.value + '", "' + pwidth.value + '","' + pheight.value + '","' + pcolor.value + '"," + qty.value +' ") '); los datos; alerta ("Filas insertadas"); ;

Aquí está nuestra base de datos local ahora actualizada. Nota: no tengo una explicación para esto, pero el simulador de iOS no mostrará las actualizaciones de su base de datos hasta que salga y vuelva a iniciar. Esto se aplica a las bases de datos locales y remotas.

Paso 4: Lectura desde la base de datos remota

Las bases de datos remotas no se pueden llamar directamente desde una aplicación. Necesitamos usar Ti.Network.createHTTPClient (); para abrir un archivo PHP que se conectará a nuestra base de datos, consulte y devuelva los valores a la aplicación. Haremos esto usando JSON.

Primero necesitamos crear nuestra base de datos remota. Por conveniencia, exporté mi base de datos. Puedes usar phpMyAdmin para importarlo. Vamos a trabajar desde el servidor a la aplicación..

 consulta ("SET NAMES 'utf8'"); $ json = array (); if ($ result = $ mysqli-> query ("select * from colors")) while ($ row = $ result-> fetch_assoc ()) $ json [] = array ('shade' => $ row [' sombra '],);  $ result-> close (); encabezado ("Tipo de contenido: texto / json"); echo json_encode (array ('colors' => $ json)); $ mysqli-> close (); ?>

Si trabajas mucho con PHP y MySQL, esto debería parecerte bastante familiar. Estamos utilizando mysqli (que es la versión mejorada del controlador MySQL de PHP) para crear la conexión a nuestra base de datos, devolver un error si no se conecta, crear nuestra matriz y devolverla a nuestra aplicación. Lo único que realmente quiero señalar es con respecto a poblar la matriz. He mantenido esto muy simple por el tiempo. Si desea pasar más valores, simplemente agregue a la consulta y luego agregue los valores a la matriz.

El archivo de aplicación también es sencillo. Creamos nuestra var con el Ti.Network.createHTTPClient (), establecemos la URL con "abierto" en el archivo PHP, enviamos la solicitud, la recibimos y analizamos la respuesta. Estamos usando el mismo método que usamos desde el primer tut para generar la matriz aquí, pero usando .push.

 var currentWin = Ti.UI.currentWindow; var sendit = Ti.Network.createHTTPClient (); sendit.open ('GET', 'http://www.danstever.com/sandbox/mobile_tuts/read.php'); sendit.send (); sendit.onload = function () var json = JSON.parse (this.responseText); var json = json.colors; var dataArray = []; var pos; para (pos = 0; pos < json.length; pos++) dataArray.push(title:"+ json[pos].shade +"); // set the array to the tableView tableview.setData(dataArray); ; ; var tableview = Ti.UI.createTableView( ); currentWin.add(tableview);

Ahora debería poder ver la base de datos en línea:

Paso 5: Escribir en la base de datos remota

El archivo de aplicación local para la inserción remota es casi exactamente igual al anterior. Hay dos diferencias: estamos usando un archivo PHP y Ti.Network y tenemos que detectar cualquier error o alerta del archivo PHP. Aquí está la pestaña de inserción:

 var currentWin = Ti.UI.currentWindow; var shade = Ti.UI.createTextField (color: '# 336699', parte superior: 70, izquierda: 10, ancho: 300, altura: 40, texto de anotación: 'Color', tipo de teclado: Titanio.UI.KEYBOARD_DEFAULT, borderStyle: Titanio .UI.INPUT_BORDERSTYLE_ROUNDED); currentWin.add (sombra); var btn = Ti.UI.createButton (title: 'Insert Record Record', top: 130, width: 130, height: 35, borderRadius: 1, font: fontFamily: 'Arial', fontWeight: 'bold', tamaño de fuente: 14); currentWin.add (btn); solicitud var = Ti.Network.createHTTPClient (); request.onload = function () if (this.responseText == "Error al insertar") btn.enabled = true; btn.opacity = 1; alerta (this.responseText);  else var alertDialog = Ti.UI.createAlertDialog (title: 'Alert', mensaje: this.responseText, buttonNames: ['OK']); alertDialog.show (); alertDialog.addEventListener ('clic', función (e) currentWin.tabGroup.setActiveTab (2);); ; btn.addEventListener ('clic', función (e) if (shade.value! = ") request.open (" POST "," http://danstever.com/sandbox/mobile_tuts/insert.php "); var params = shade: shade.value; request.send (params); else alert ("Introduzca un color.");;);

La función onload está escuchando las respuestas de la página PHP. Si hay un error, la aplicación emitirá una alerta. Esto es muy útil para la depuración. En el eventListener al botón, nuevamente verificamos que el valor no esté en blanco, luego lo pasamos al archivo PHP.

 consulta ($ insertar); printf ("Gracias por el nuevo color!"); $ mysqli-> close (); ?>

Hacemos la conexión y declaramos la variable y la asignamos al valor enviado desde nuestra aplicación con $ _POST ['YourVarHere'];. Creamos la declaración de inserción, alertamos si tuvo éxito, y cerramos la conexión de la base de datos.

Ahora tenemos nuestra nueva y brillante entrada en nuestra base de datos, pero recuerde que es posible que deba reiniciar el simulador para que se muestre.!

Envolver

Sé que eso era mucho para cubrir y tal vez no un montón de explicación. Si aún está luchando por comprender lo que está sucediendo, lo aliento a descargar la fuente, configurarlo en una aplicación separada y dejar de lado su aplicación actual. Recuerda, tenemos una comunidad muy fuerte y servicial. Por favor comenta y haz cualquier pregunta..

Código