Share
Este tutorial le presentará el desarrollo basado en bases de datos y SQLite con Titanium Mobile. Específicamente, aprenderá a crear una aplicación para administrar productos con una base de datos en lugar de solo el sistema de archivos..
No tiene sentido lógico tener que administrar un archivo individual para un producto. Especialmente cuando hay un gran catálogo de productos para mantener. Aquí un ejemplo.
Las carpetas y archivos de la izquierda muestran cómo se verá nuestro proyecto al final. Sólo unos pocos archivos en una carpeta y un archivo de base de datos. A la derecha hay un directorio fuera de control, desalentador. Siento que esta imagen debería ser suficiente motivación. Uno de los otros beneficios será la huella reducida de la aplicación..
Necesitaremos Titanium Mobile, un buen editor de texto (cualquier persona con la que se sienta cómodo trabajará) y un administrador de base de datos SQLite. Aquí están los dos administradores de SQLite que uso:
Ambas son excelentes opciones. Realmente me gusta el Administrador de SQLite, pero personalmente no me gusta que se ejecute como un complemento de Firefox en lugar de una aplicación independiente. El navegador de base de datos SQLite no se ve tan pulido, pero puede ejecutarse como una aplicación independiente. Debido a esto, tiendo a usar el navegador de base de datos SQLite.
Abre Titanium Developer y crea un nuevo proyecto. Escoger Móvil y complete toda la información requerida. Titanium developer detecta automáticamente si el iPhone SDK y el Android SDK están correctamente instalados. Entonces haga clic Crear proyecto.
Abra el programa que elija y haga clic en Nueva base de datos. Nombre de la base de datos "products.sqlite". Los nombres de aplicaciones, bases de datos y archivos no importan. Solo recuerda lo que usas. Guarde el archivo en la carpeta Recursos que creó Titanium Developer. Complete la base de datos con la información de su producto. Asegúrate de pulsar Guardar.
Abra el archivo Resources / app.js de la aplicación (si no ha trabajado con Titanium Developer anteriormente, "app.js" es el archivo principal para su aplicación).
Eliminar todo el código existente.
Con la simplicidad en mente, quiero mantener todos los archivos de los productos en una sola carpeta. Vayamos a la carpeta de Recursos y creamos una carpeta llamada "productos". Guardaremos nuestros otros archivos aquí..
De vuelta en app.js, queremos crear un grupo de pestañas porque al hacerlo, será más fácil agregar más pestañas y contenido más adelante. Establezca la etiqueta de la ventana, haga que esa ventana abra el archivo de nuestros productos y agregue la ventana a nuestra vista actual. Necesitarás una imagen para tu pestaña. Copié una imagen de las pestañas en la aplicación KitchenSink, que es el proyecto de demostración de muestra provisto por Appcelerator para mostrar todas sus características.
// crear grupo de pestañas var tabGroup = Ti.UI.createTabGroup (); // crear ventana principal var main = Ti.UI.createWindow (title: 'Product Categories', url: 'products / product_category.js'); // craete main tab var tab = Ti.UI.createTab (icon: 'images / tabs / KS_nav_ui.png', título: 'Products', window: main); // agregar la pestaña al grupo tab tabGroup.addTab (tab); // grupo de pestañas abiertas tabGroup.open ();
No tendremos que volver a tocar el código en app.js, para que pueda continuar y cerrarlo si lo desea..
Cree un nuevo archivo JavaScript en nuestra carpeta de productos llamada product_category.js. Lo importante a tener en cuenta con esta página es que será la primera en cargarse cuando nuestra aplicación se inicie inicialmente. Eso significa que vamos a tener la mayor parte de nuestro código en este archivo. Lo bueno es que este código se reutilizará para nuestro próximo archivo, con solo unos pocos cambios..
Antes de codificar esta página, debemos pensar en lo que debe suceder. La página necesita abrir una base de datos, leer la columna de categoría y mostrar los resultados en una vista de tabla. Para adjuntar los resultados de la base de datos a tableView, debemos crear una matriz y enviar los datos a ella. La mejor manera de hacerlo es creando una función. De esta manera, no tenemos que saber de antemano cuántas filas de la base de datos deben leerse. Simplemente dejaremos que la función se repita en la base de datos hasta que lea todas las filas activas.
También necesitamos crear un EventListener para cuando se haga clic en una de las filas. Comencemos por reunir todo excepto la función y EventListener.
Accentsconagua
// crear var para el currentWindow var currentWin = Ti.UI.currentWindow; // establece los datos de la base de datos en la función de matriz setData () ** FUNCTION HERE **; // crear vista de tabla var tableview = Ti.UI.createTableView (); tableview.addEventListener ('clic', función (e) ** EVENTLISTENER HERE **); // agregar el tableView a la ventana actual currentWin.add (tableview); // llamar a la función setData para adjuntar los resultados de la base de datos a la matriz setData (); Todo esto es bastante sencillo. Ahora la función setData (). Comience conectándose a la base de datos y consultando la categoría. Para eliminar duplicados y solo devolver una fila para cada categoría, vamos a utilizar el comando DISTINCT SQL.
var db = Ti.Database.install ('… /products.sqlite','products '); var rows = db.execute ('SELECT DISTINCT category FROM products'); Crea la matriz y usa un mientras Declaración para iterar a través de la base de datos. Consulte la base de datos para el nombre de campo "categoría" y establezca eso en el título de la fila. (Titanium Developer usa "fieldByName" para leer de la columna definida en una base de datos. Se usa junto con nuestra consulta para seleccionar nuestro contenido). Especifique que hay un elemento secundario y establezca la ruta al siguiente archivo.
var dataArray = []; while (rows.isValidRow ()) dataArray.push (title: "+ rows.fieldByName ('category') +", hasChild: true, path: '… /products/products.js'); rows.next (); ; Finalmente, adjunte la matriz a nuestro tableView.
tableview.setData (dataArray);
Ahora, necesitamos crear el EventListener para abrir la página siguiente. Una cosa que también necesitaremos hacer aquí es pasar las variables al siguiente archivo. Esto se usará para construir la próxima consulta SQL y establecer el título de la ventana. También estableceremos la devolución de llamada del oyente a la ruta al siguiente archivo, aunque sea estático..
tableview.addEventListener ('click', function (e) if (e.rowData.path) var win = Ti.UI.createWindow (url: e.rowData.path, título: e.rowData.title); var prodCat = e.rowData.title; win.prodCat = prodCat; Ti.UI.currentTab.open (win);); El oyente atrapa el clic, luego crea una nueva ventana. Esta nueva ventana abre el siguiente archivo y está configurando el título de la nueva ventana al contenido de la fila. En nuestro caso es la categoría del producto. Luego creamos una variable desde el contenido de la fila y la pasamos a la nueva ventana, nombrando la var. Por último, el oyente abre el nuevo grupo de pestañas, que es la página siguiente..
Esto es lo que muestra el archivo "product_category.js":
Seleccione todo el código en el archivo "product_category.js" y haga clic en copiar. Cree un nuevo archivo JavaScript llamado "products.js" y pegue el código. Solo necesitamos hacer algunas modificaciones y agregar la variable que pasamos para que esta página funcione..
Dentro de nuestra función, debajo de nuestra llamada para abrir la base de datos, agregue el siguiente código, detectando la var..
var prodCat = Ti.UI.currentWindow.prodCat;
Ahora necesitamos cambiar nuestra consulta a la base de datos y usar nuestra nueva variable. Ahora queremos leer los nombres de los productos de nuestra categoría previamente seleccionada y mostrar esos productos.
var rows = db.execute ('SELECT * FROM products WHERE category = "' + prodCat + '"'); Cambie el fieldByName en la fila de "categoría" a "nombre" y la ruta al siguiente archivo.
dataArray.push (title: "+ rows.fieldByName ('name') +", hasChild: true, path: '… /products/product_specs.js'); Lo último que se necesita para completar esta página es cambiar la var pasada en el EventListener. Cámbielo para pasar el nombre del producto y use un nombre var que tenga sentido.
var prodName = e.rowData.title; win.prodName = prodName;
Hecho. Aquí es cómo se ve "products.js":
Este es el último archivo que necesitamos crear para este tutorial. El objetivo de esta página será mostrar el contenido de la fila para el producto individual. Vamos a ver todo el código y luego desglosarlo.
// crear var para el currentWindow var currentWin = Ti.UI.currentWindow; var db = Ti.Database.install ('… /products.sqlite','productSpecs '); var prodName = Ti.UI.currentWindow.prodName; var rows = db.execute ('SELECT * FROM products WHERE name = "' + prodName + '"'); var data = [title: "+ rows.fieldByName ('width') +", encabezado: 'Width', title: "+ rows.fieldByName ('height') +", header: 'Height', title: "+ rows.fieldByName ('color') +", encabezado: 'Color', title: "+ rows.fieldByName ('qty') +", header: 'Cantidad']; var tableview = Ti.UI.createTableView (data: data); currentWin.add (tableview); Lo que está ocurriendo arriba es lo mismo que hemos hecho en las páginas anteriores, simplemente no estamos escuchando una acción, y estamos poblando la matriz por nosotros mismos, en lugar de usar una función. De esta manera podemos etiquetar la información con un encabezado de fila y ordenar el contenido como queremos que se muestre.
Todo lo que tenía que hacer era crear una fila individual en la matriz usando los nombres de columna de nuestra base de datos.
Esto parece mucho trabajo al principio, pero el resultado merece la pena. La mejor parte es que una vez que el código esté completo en los dos primeros archivos del producto, nunca será necesario tocarlo. La función setData () se escala sin ninguna ayuda. El mismo código funcionará independientemente de si la base de datos tiene una fila o cincuenta y tres!
