Share
Questo tutorial ti introdurrà a SQLite e allo sviluppo basato su database con Titanium Mobile. Nello specifico, imparerai a creare un'applicazione per la gestione dei prodotti con un database invece del solo file system.
Non ha alcun senso logico dover gestire un singolo file per un prodotto. Soprattutto quando c'è un grande catalogo di prodotti da mantenere. Ecco un esempio.
Le cartelle e i file sulla sinistra sono come il nostro progetto guarderà alla fine. Solo alcuni file in una cartella e un file di database. A destra c'è una directory fuori controllo, scoraggiante. Sento che questa immagine dovrebbe essere una motivazione sufficiente. Uno degli altri vantaggi sarà l'ingombro ridotto dell'app.
Avremo bisogno di Titanium Mobile, un buon editor di testo (chiunque funzioni con te funzionerà) e un gestore di database SQLite. Ecco i due gestori di SQLite che utilizzo:
Entrambe queste sono grandi opzioni. Mi piace molto SQLite Manager, ma personalmente non mi piace che funzioni come plugin per Firefox piuttosto che come applicazione standalone. SQLite Database Browser non sembra lucidato, ma può essere eseguito come applicazione standalone. Per questo motivo, tendo ad usare SQLite Database Browser.
Apri Titanium Developer e crea un nuovo progetto. Scegliere Mobile e inserire tutte le informazioni richieste. Lo sviluppatore Titanium rileva automaticamente se iPhone SDK e Android SDK sono installati correttamente. Quindi fare clic Crea progetto.
Apri qualsiasi programma tu scelga e fai clic su Nuovo database. Denominare il database "products.sqlite". I nomi di applicazioni, database e file non contano. Ricorda solo quello che usi. Salva il file nella cartella Risorse creata da Titanium Developer. Compila il database con le informazioni sul prodotto. Assicurati di salvare Salva.
Apri il file Resources / app.js dell'app (se non hai ancora lavorato con Titanium Developer, "app.js" è il file principale della tua applicazione).
Rimuovi tutto il codice esistente.
Con la semplicità in mente, voglio mantenere tutti i file per i prodotti in una singola cartella. Andiamo alla cartella Risorse e creiamo una cartella denominata "prodotti". Salveremo i nostri altri file qui.
Di nuovo in app.js, vogliamo creare un gruppo di schede perché così facendo sarà facile aggiungere più schede e contenuti in seguito. Imposta l'etichetta della finestra, fai in modo che la finestra apra il nostro file prodotti e aggiungi la finestra alla nostra vista corrente. Avrai bisogno di un'immagine per l'immagine della tua scheda. Ho copiato un'immagine dalle schede nell'app KitchenSink, che è il progetto demo showcase fornito da Appcelerator per mostrare tutte le loro funzionalità.
// crea il gruppo di schede var tabGroup = Ti.UI.createTabGroup (); // crea la finestra principale var main = Ti.UI.createWindow (title: 'Product Categories', url: 'products / product_category.js'); // scheda principale di craete var tab = Ti.UI.createTab (icona: 'images / tabs / KS_nav_ui.png', titolo: 'Prodotti', finestra: main); // aggiungi la scheda al gruppo di schede tabGroup.addTab (scheda); // apre il gruppo di schede tabGroup.open ();
Non dovremo più toccare il codice in app.js, quindi puoi procedere e chiuderlo se lo desideri.
Crea un nuovo file JavaScript nella nostra cartella prodotti denominata product_category.js. La cosa importante da tenere a mente con questa pagina è che sarà il primo a caricare quando la nostra applicazione si avvia inizialmente. Ciò significa che avremo la maggior parte del nostro codice in questo file. La cosa bella è che questo codice verrà riutilizzato per il nostro prossimo file, con solo poche modifiche.
Prima di codificare questa pagina, dovremmo pensare a cosa deve accadere. La pagina deve aprire un database, leggere la colonna della categoria e visualizzare i risultati in una vista tabella. Per allegare i risultati del database a tableView, dobbiamo creare una matrice e inviarci i dati. Il modo migliore per farlo è creare una funzione. In questo modo non dobbiamo sapere in anticipo quante righe del database devono essere lette. Lasceremo semplicemente la funzione iterare attraverso il database finché non leggerà tutte le righe attive.
Abbiamo anche bisogno di creare un EventListener per quando viene cliccata una delle righe. Iniziamo mettendo tutto insieme eccetto la funzione e EventListener.
Accentsconagua
// crea var per currentWindow var currentWin = Ti.UI.currentWindow; // imposta i dati dal database alla funzione array setData () ** FUNCTION HERE **; // create table view var tableview = Ti.UI.createTableView (); tableview.addEventListener ('click', function (e) ** EVENTLISTENER HERE **); // aggiungi la tabellaView alla finestra corrente currentWin.add (tableview); // chiama la funzione setData per allegare i risultati del database all'array setData (); Questo è tutto abbastanza semplice. Ora la funzione setData (). Inizia collegandoti al database e interrogandoli per la categoria. Per rimuovere i duplicati e restituire solo una riga per ogni categoria, useremo il comando SQL DISTINCT.
var db = Ti.Database.install ('... /products.sqlite','products'); var rows = db.execute ('SELECT DISTINCT category FROM products'); Crea la matrice e usa a mentre dichiarazione per iterare attraverso il database. Interrogare il database per il nome del campo "categoria" e impostarlo sul titolo della riga. (Titanium Developer utilizza "fieldByName" per leggere dalla colonna definita in un database e viene utilizzato insieme alla nostra query per selezionare il nostro contenuto.) Specificare che esiste un elemento figlio e impostare il percorso per il file successivo.
var dataArray = []; while (rows.isValidRow ()) dataArray.push (title: "+ rows.fieldByName ('category') +", hasChild: true, percorso: '... /products/products.js'); rows.next (); ; Infine, collega l'array al nostro TableView.
tableview.setData (dataArray);
Ora, dobbiamo creare EventListener per aprire la pagina successiva. Una cosa che dovremo fare anche qui è passare le variabili al prossimo file. Questo sarà usato per costruire la successiva query SQL e impostare il titolo della finestra. Imposteremo anche il callback dall'ascoltatore al percorso del file successivo, anche se è statico.
tableview.addEventListener ('click', function (e) if (e.rowData.path) var win = Ti.UI.createWindow (url: e.rowData.path, title: e.rowData.title); var prodCat = e.rowData.title; win.prodCat = prodCat; Ti.UI.currentTab.open (win);); L'ascoltatore cattura il clic, quindi crea una nuova finestra. Questa nuova finestra apre il file successivo e imposta il titolo della nuova finestra sul contenuto della riga. Nel nostro caso è la categoria del prodotto. Creiamo quindi una variabile dal contenuto della riga e la passiamo alla nuova finestra, nominando la var. Infine, il listener apre il nuovo gruppo di schede, che è la pagina successiva.
Ecco cosa mostra il file "product_category.js":
Seleziona tutto il codice nel file "product_category.js" e fai clic su copia. Crea un nuovo file JavaScript denominato "products.js" e incolla il codice. Abbiamo solo bisogno di apportare alcune modifiche e aggiungere la variabile che abbiamo passato per far funzionare questa pagina.
All'interno della nostra funzione, al di sotto della nostra chiamata per aprire il database, aggiungi il seguente codice, scoprendo var passato.
var prodCat = Ti.UI.currentWindow.prodCat;
Ora dobbiamo cambiare la nostra query al database e usare la nostra nuova variabile. Vogliamo ora leggere i nomi dei prodotti dalla nostra categoria precedentemente selezionata e visualizzare quei prodotti.
var rows = db.execute ('SELECT * FROM prodotti WHERE category = "' + prodCat + '"'); Cambia il campoByName nella riga da "categoria" a "nome" e il percorso del file successivo.
dataArray.push (title: "+ rows.fieldByName ('name') +", hasChild: true, percorso: '... /products/product_specs.js'); L'ultima cosa necessaria per completare questa pagina è di cambiare la varata passata in EventListener. Cambialo per passare il nome del prodotto e usa un nome var che abbia senso.
var prodName = e.rowData.title; win.prodName = prodName;
Fatto. Ecco come appare "products.js":
Questo è l'ultimo file che dobbiamo creare per questo tutorial. L'obiettivo di questa pagina sarà di visualizzare il contenuto della riga per il singolo prodotto. Diamo un'occhiata a tutto il codice e poi scomporlo.
// crea var per 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 prodotti WHERE name = "' + prodName + '"' '); var data = [title: "+ rows.fieldByName ('width') +", intestazione: 'Width', title: "+ rows.fieldByName ('height') +", intestazione: 'Height', title: "+ rows.fieldByName ('color') +", intestazione: 'Color', title: "+ rows.fieldByName ('qty') +", intestazione: 'Quantity']; var tableview = Ti.UI.createTableView (data: data); currentWin.add (Tableview); Quello che sta succedendo è la stessa cosa che abbiamo fatto nelle pagine precedenti, non stiamo semplicemente ascoltando un'azione, e stiamo popolando l'array da soli, piuttosto che usare una funzione. In questo modo siamo in grado di etichettare le informazioni con un'intestazione di riga e ordinare il contenuto come vogliamo che venga visualizzato.
Tutto ciò che doveva essere fatto era creare una singola riga nell'array usando i nomi delle colonne del nostro database.
All'inizio sembra molto lavoro, ma ne vale la pena. La parte migliore è che una volta che il codice è completo nei primi due file di prodotto, non dovrà mai essere toccato. La funzione setData () si ridimensiona senza alcun aiuto. Lo stesso codice funzionerà indipendentemente dal fatto che il database abbia una riga o cinquantatre!
