Share
Bienvenido a la tercera parte de nuestra serie sobre desarrollo de Titanium Mobile basado en bases de datos. Este tutorial continuará basándose en los principios introducidos en publicaciones anteriores, pero estaremos alterando el diseño de nuestra aplicación de una manera muy significativa. En lugar de usar un objeto TableView para mostrar una interfaz personalizada, vamos a cambiar a usar un objeto WebView. La razón de esto es que el objeto WebView nos permitirá controlar nuestra interfaz mediante CSS y HTML, y TableView no. Para aquellos de ustedes que vienen de un fondo de desarrollo web, deberían sentirse como en casa con este enfoque.
La primera parte de esta serie sentó las bases para una aplicación basada en bases de datos. La segunda parte extendió la funcionalidad al crear la capacidad de leer una base de datos remota e insertar valores en nuestras tablas. Este tutorial utilizará el código fuente de las dos primeras partes de esta serie..
Abre Titanium Developer y crea un nuevo proyecto. Escoger Móvil y complete toda la información requerida. Entonces haga clic Crear proyecto. Copia el productos carpeta de su aplicación anterior y la productos.sqlite Base de datos en el nuevo directorio de recursos. Descarga jQuery y colócalo en el directorio de recursos también. Además, crea una nueva carpeta y nómbrela. imagenes. Ahora deberías estar listo para ir.
Vamos a eliminar el archivo app.js por simplicidad. Quitar todo excepto donde creamos el tabGroup. Abra el grupo de pestañas y cree nuestra primera y única pestaña. Aquí está:
var tabGroup = Ti.UI.createTabGroup (); var main = Ti.UI.createWindow (title: 'Product Categories', url: 'products / product_category.js'); var tab = Ti.UI.createTab (icon: 'images / tabs / KS_nav_ui.png', título: 'Products', window: main); tabGroup.addTab (tab); tabGroup.open ();
Si ejecutas la aplicación, debería parecerte familiar:
NOTA: Si copió su base de datos de la Parte 2 de esta serie, puede preguntarse por qué no están allí los valores adicionales agregados (aquellos agregados desde dentro de la aplicación). Esto se debe a que la base de datos local activa está instalada en el dispositivo. Nuestro archivo local permanece intacto. Si elimina la aplicación anterior del simulador y la reinstala, su base de datos también volverá a su estado original.
El primer archivo que carga nuestra aplicación es "product_category.js". Vamos a dejar este archivo completamente solo. Lo siguiente que podemos hacer para mantener todo limpio es eliminar el archivo "product_specs.js". Usaremos un WebView para reemplazar la función de este archivo. Abre "products.js" y vamos a piratear. Aparte de eventListener, solo hay una cosa que necesitamos cambiar en este archivo. Eliminar el camino desde donde construimos nuestra matriz:
Accentsconagua
var dataArray = []; while (rows.isValidRow ()) dataArray.push (title: "+ rows.fieldByName ('name') +", hasChild: true); rows.next (); ;… Si ejecutamos nuestra aplicación en este punto, es probable que falle debido a que eliminamos archivos y cambiamos la información anterior. Sin embargo, este es el aspecto que tendría:
Nuestro eventListener ahora está completamente a cargo del resultado del evento click. Lo primero que debemos cambiar es nuestra sentencia if. Anteriormente, estábamos comprobando si había un camino. Desde que eliminamos el camino, necesitamos adjuntar algo más para verificar. También necesitamos usar esto para determinar qué artículo fue seleccionado. Utilice "título". Este es el único valor que tenemos que es un identificador único. Asegúrate de cambiar este valor cuando creamos la ventana también.
tableview.addEventListener ('click', function (e) if (e.rowData.title) var win = Ti.UI.createWindow (title: e.rowData.title, backgroundColor: "# 000");… Pensemos en los siguientes pasos. Necesitamos crear un WebView y establecer su ruta, consultar la base de datos según la fila seleccionada (tenemos que hacer esto aquí porque no se puede acceder a Ti.Database desde un WebView), crear nuestras variables desde nuestra consulta de la base de datos y finalmente pasarlas. a la vista web. Una cosa a tener en cuenta es que no podemos pasar nada a WebView hasta que se cree. Usaremos una función setTimeout para retrasar el paso de las variables. Aquí es cómo el código termina buscando:
var web = Ti.UI.createWebView (url: 'productsWebview.html'); var db2 = Ti.Database.install ('… /products.sqlite','products '); var specs = db2.execute ('SELECT * FROM Products WHERE name = "' + e.rowData.title + '"'); nombre var = specs.fieldByName ('nombre'); var pwidth = specs.fieldByName ('pwidth'); var pheight = specs.fieldByName ('pheight'); var pcolor = specs.fieldByName ('pcolor'); var qty = specs.fieldByName ('qty'); var stripName = removeSpaces (specs.fieldByName ('name')); función removeSpaces (strip) return strip.split ("). join ("); ; // Agrega el webView a la ventana win.add (web); // Crear un tiempo de espera: queremos que la ventana esté lista antes de iniciar el evento setTimeout (function () Ti.App.fireEvent ("webPageReady", name: name, pwidth: pwidth, pheight: pheight, pcolor : pcolor, cantidad: cantidad, nombre de tira: nombre de tira);, 500); Ti.UI.currentTab.open (win, animated: true);… Creamos una segunda instancia de la base de datos (como una variable local dentro de la función. Estamos usando el alcance aquí para asegurarnos de no estropear nada) y creamos nuestra consulta con los datos del valor del título de la fila seleccionada. Creamos nuestras variables individuales para los datos de la columna de la base de datos, y creamos una segunda variable con el nombre del producto, eliminando solo los espacios con la función "eliminar espacios". Esto es para que podamos crear una ruta de acceso a una imagen usando el nombre del producto en nuestro WebView.
Luego agregamos nuestro WebView a las ventanas actuales. Nuestras variables se pasan a WebView y se llaman "webPageReady" por TI.App.fireEvent. Esto se dispara una vez que la cantidad de tiempo especificada ha pasado desde la función setTimeout. En nuestro caso, es de 500 milisegundos, o la mitad de un segundo..
Si tuviéramos que crear nuestro WebView en este momento, todo funcionaría bien. Sin embargo, habría algo que simplemente no sensación derecho al usuario. Se crearía la vista web y el conjunto de datos, pero habría un segundo o más de tiempo en el que la página estaba en blanco o faltaban elementos. Parecería que algo está roto. Los usuarios se han acostumbrado a saber siempre que algo está sucediendo. Para los usuarios de Windows, existe ese pequeño reloj de arena, los usuarios de OS X tienen la rueda de colores giratoria, etc..
Los usuarios se han acostumbrado a saber siempre que algo está sucediendo..
Para nuestro indicador de actividad, debemos crear una nueva ventana, crear el indicador de actividad, establecer el tiempo que se mostrará y luego ocultar la ventana. También debemos asegurarnos de agregar el indicador de actividad a la nueva ventana y la nueva ventana a la vista actual.
var actWin = Ti.UI.createWindow (backgroundColor: '# 000', opacidad: 0.8); var actInd = Ti.UI.createActivityIndicator (style: Ti.UI.iPhone.ActivityIndicatorStyle.PLAIN); actWin.add (actInd); if (Ti.Platform.name == 'iPhone OS') actInd.show (); actInd.color = '#FFF'; actInd.message = 'Cargando…'; setTimeout (function () actInd.hide ();, 1500); ; setTimeout (function () actWin.hide ();, 1500); // Agrega el webView a la ventana win.add (web, actWin);…
Cuando creamos el indicador, estamos configurando el estilo para que se vea como el indicador estándar de iPhone. Entonces también queremos que esto se vea como nativo como sea posible y dejar que el usuario sepa lo que está pasando. Usamos una instrucción if, configurándola para verificar el tipo de plataforma, agregar un mensaje y establecer el período de tiempo antes de ocultar la ventana.
Este tiempo de espera está dentro de la sentencia if, por lo que necesitamos crear otra función de tiempo de espera para ocultar la ventana. En ambos casos estamos configurando el tiempo a 1500 milisegundos. Recordando el último paso, permitimos 500 milisegundos antes de que se pasen nuestros datos. Esto permitirá otro segundo para que los datos se carguen realmente en el WebView.
Cree un nuevo archivo html con el nombre y la ubicación que establecimos anteriormente cuando creamos nuestro WebView. No es necesario agregar todas las estándar Información del encabezado HTML. Me gusta declarar mi doctype y añadir el
etiquetas Necesitaremos esto porque necesitamos usar algunos scripts.Primero, crea el contenido del cuerpo. Usando una tabla, agregue la cantidad requerida de filas y columnas. Para este tutorial, necesitamos cuatro filas y dos columnas. La etiqueta estará en la columna izquierda y la especificación en la derecha. Use un espacio de no separación () en la celda de especificaciones. Así es como se ve nuestra mesa:
Anchura Altura Color Cantidad
También es una gran idea agregar una hoja de estilo para que podamos personalizar cómo se muestra nuestra página. Directamente debajo del div "contenido" queremos crear alguna forma de nuestro propio encabezado. Creo que es una gran idea mostrar el nombre del producto y mostrar una imagen. Lo más importante que hacer al construir nuestra tabla es agregar un "id" a la celda que contendrá nuestras especificaciones. Por el bien del estilo, también deberíamos agregar una clase a las celdas similares.
En los tutoriales anteriores, creamos una variable en una página y la adjuntamos a la nueva ventana. Se accedió a esta variable utilizando Ti.UI.currentWindow.varName y luego se puede acceder globalmente a la página. Debido a que este es un WebView no podemos hacer esto. Lo que debemos hacer es agregar un EventListener y capturar las variables pasadas.
La consola en Titanium Developer registra las variables y los valores que se están pasando. Esto puede ser muy útil para la depuración.
En el EventListener especificamos el evento que estamos escuchando (webPageReady) y declaramos nuestras variables usando nuestra devolución de llamada.
Ahora que hemos declarado nuestras variables, necesitamos averiguar cómo usarlas en nuestra página. No podemos devolverlos desde la función y luego usar las variables en nuestra tabla, así que tenemos que ser creativos. Cargue jQuery en su página y ajuste el EventListener actual dentro de una función document.ready.
Luego use la identificación para cada celda definida en el paso anterior y reemplace el elemento usando jQuery y la variable correcta.
El último elemento que estamos reemplazando en el código anterior es nuestra variable de imagen del producto. Use la variable del nombre del producto del que eliminamos los espacios para construir el enlace a la imagen. Además, asegúrese de crear el directorio y las imágenes para cada producto. Por motivos de estilo, es una gran idea hacer que todas las imágenes del producto tengan el mismo tamaño. Algo así como 150px por 150px es un buen tamaño para la mayoría de las pantallas.
Finalmente deberíamos tener una aplicación operativa con todo el código completado. Aquí es cómo se verá el WebView:
Una vez que nuestras imágenes se crean para todos los productos, es muy fácil utilizar algunos CSS estándar en nuestra hoja de estilos y hacer que nuestras páginas de productos se vean exactamente como queremos que aparezcan. Si la información que estamos mostrando y utilizando en nuestra aplicación se actualiza con frecuencia, una base de datos remota puede ser el camino a seguir..
