Share
Benvenuti alla terza parte della nostra serie su sviluppo Titanium Mobile basato su database. Questo tutorial continuerà a basarsi sui principi introdotti nei post precedenti, ma modificheremo la nostra progettazione di app in un modo molto significativo. Invece di utilizzare un oggetto TableView per visualizzare un'interfaccia personalizzata, stiamo per passare all'utilizzo di un oggetto WebView. La ragione di ciò è che l'oggetto WebView ci permetterà di controllare la nostra interfaccia usando CSS e HTML, e TableView no. Per quelli di voi che provengono da uno sfondo di sviluppo web, dovreste sentirvi a casa con questo approccio.
La prima parte di questa serie ha gettato le basi per un'applicazione basata su database. La seconda parte ha esteso la funzionalità creando la possibilità di leggere un database remoto e inserire valori nelle nostre tabelle. Questo tutorial utilizzerà il codice sorgente delle prime due parti di questa serie.
Apri Titanium Developer e crea un nuovo progetto. Scegliere Mobile e inserire tutte le informazioni richieste. Quindi fare clic Crea progetto. Copia il prodotti cartella dalla tua precedente applicazione e il products.sqlite database nella nuova directory delle risorse. Scarica jQuery e inseriscilo anche nella directory delle risorse. Inoltre, crea una nuova cartella e nominala immagini. Ora dovresti essere pronto per andare.
Stiamo per rimuovere il file app.js per semplicità. Rimuovi tutto eccetto dove abbiamo creato il tabGroup. Apri il gruppo schede e crea la nostra prima e unica scheda. Ecco qui:
var tabGroup = Ti.UI.createTabGroup (); var main = Ti.UI.createWindow (title: 'Product Categories', url: 'products / product_category.js'); var tab = Ti.UI.createTab (icona: 'images / tabs / KS_nav_ui.png', titolo: 'Prodotti', finestra: main); tabGroup.addTab (tab); tabGroup.open ();
Se si avvia l'applicazione, dovrebbe sembrare familiare:
NOTA: Se hai copiato il tuo database dalla Parte 2 di questa serie, potresti chiederti perché eventuali valori aggiunti addizionali (quelli aggiunti dall'interno dell'applicazione) non ci sono. Questo perché il database locale attivo è installato sul dispositivo. Il nostro file locale rimane intatto. Se rimuovi l'applicazione precedente dal simulatore e la reinstalla, il database tornerà allo stato originale.
Il primo file caricato dalla nostra applicazione è "product_category.js". Stiamo per lasciare questo file completamente da solo. La prossima cosa che possiamo fare per mantenere le cose pulite è eliminare il file "product_specs.js". Utilizzeremo una WebView per sostituire la funzione di questo file. Apri "products.js" e otteniamo l'hacking. A parte l'eventListener, c'è solo una cosa che dobbiamo cambiare in questo file. Rimuovi il sentiero da dove costruiamo il nostro array:
Accentsconagua
var dataArray = []; while (rows.isValidRow ()) dataArray.push (title: "+ rows.fieldByName ('name') +", hasChild: true); rows.next (); ; ... Se eseguiremo la nostra applicazione a questo punto, probabilmente falliremo a causa della cancellazione di file e della modifica delle informazioni di cui sopra. Tuttavia, questo è come sarebbe:
Il nostro eventListener è ora completamente responsabile del risultato dell'evento click. La prima cosa che dobbiamo cambiare è la nostra dichiarazione if. In precedenza, stavamo controllando se esistesse un percorso. Da quando abbiamo rimosso il percorso, dobbiamo allegare qualcos'altro da verificare. Dobbiamo anche usarlo per determinare quale elemento è stato selezionato. Usa "titolo". Questo è l'unico valore che abbiamo che è un identificatore univoco. Assicurati di cambiare questo valore anche quando creiamo la finestra.
tableview.addEventListener ('click', function (e) if (e.rowData.title) var win = Ti.UI.createWindow (title: e.rowData.title, backgroundColor: "# 000"); ... Pensiamo attraverso i prossimi passi. Dobbiamo creare una WebView e impostare il suo percorso, interrogare il database in base alla riga selezionata (dobbiamo farlo qui perché Ti.Database non è accessibile da una WebView), creare le nostre variabili dalla nostra query di database e infine passarle alla WebView. Una cosa da tenere a mente è che non possiamo passare nulla a WebView finché non viene creato. Useremo una funzione setTimeout per ritardare il nostro passaggio delle variabili. Ecco come il codice finisce per apparire:
var web = Ti.UI.createWebView (url: 'productsWebview.html'); var db2 = Ti.Database.install ('... /products.sqlite','products'); var specs = db2.execute ('SELECT * FROM Prodotti WHERE name = "' + e.rowData.title + '"' '); var name = specs.fieldByName ('name'); 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')); function removeSpaces (strip) return strip.split ("). join ("); ; // Aggiungi la webView alla finestra win.add (web); // Crea un timeout: vogliamo che la finestra sia pronta prima di attivare l'evento setTimeout (function () Ti.App.fireEvent ("webPageReady", nome: nome, pwidth: pwidth, pheight: pheight, pcolor : pcolor, qty: qty, stripName: stripName);, 500); Ti.UI.currentTab.open (vittoria, animato: true); ... Abbiamo creato una seconda istanza del database (come una variabile locale all'interno della funzione, stiamo usando lo scope qui per assicurarci di non rovinare nulla) e abbiamo creato la nostra query con i dati dal valore del titolo della riga selezionata. Create le nostre singole variabili per i dati della colonna del database e creato una seconda variabile utilizzando il nome del prodotto, rimuovendo solo gli spazi con una funzione "removeSpaces". Questo è così che possiamo creare un percorso per un'immagine usando il nome del prodotto nella nostra WebView.
Quindi aggiungiamo la nostra WebView alle finestre attuali. Le nostre variabili vengono passate a WebView e denominate "webPageReady" da TI.App.fireEvent. Questo si attiva quando è trascorso il tempo specificato dalla funzione setTimeout. Nel nostro caso, è 500 millisecondi, o la metà di un secondo.
Se dovessimo creare il nostro WebView adesso, tutto funzionerebbe bene. Tuttavia, ci sarebbe qualcosa che semplicemente non ha sentire diritto per l'utente. Verrebbe creata la WebView e il set di dati, ma ci sarebbe stato un secondo o più di tempo in cui la pagina era vuota o gli articoli mancanti. Sembrerebbe che qualcosa sia rotto. Gli utenti si sono abituati a sapere sempre che sta succedendo qualcosa. Per gli utenti di Windows, c'è un bel vetro dell'ora, gli utenti di OS X hanno la ruota dei colori rotante, ecc.
Gli utenti si sono abituati a sapere sempre che sta succedendo qualcosa.
Per il nostro indicatore di attività, dobbiamo creare una nuova finestra, creare l'indicatore di attività, impostare il tempo di visualizzazione e quindi nascondere la finestra. Dobbiamo anche assicurarci di aggiungere l'indicatore di attività alla nuova finestra e la nuova finestra alla vista corrente.
var actWin = Ti.UI.createWindow (backgroundColor: '# 000', opacity: 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 = 'Caricamento in corso ...'; setTimeout (function () actInd.hide ();, 1500); ; setTimeout (function () actWin.hide ();, 1500); // Aggiungi la webView alla finestra win.add (web, actWin); ...
Quando creiamo l'indicatore, stiamo impostando lo stile per assomigliare all'indicatore standard di iPhone. Inoltre, vogliamo che questo sia come nativo possibile e far sapere all'utente cosa sta succedendo. Usiamo un'istruzione if, impostandola per verificare il tipo di piattaforma, aggiungere un messaggio e impostare il periodo di tempo prima di nascondere la finestra.
Questo timeout è all'interno dell'istruzione if, quindi è necessario creare un'altra funzione di timeout per nascondere la finestra. In entrambi i casi impostiamo il tempo a 1500 millisecondi. Ripensando all'ultimo passaggio, abbiamo consentito 500 millisecondi prima che i nostri dati vengano trasmessi. Ciò consentirà un altro secondo per i dati in realtà vengono caricati in WebView.
Crea un nuovo file html con il nome e il percorso che abbiamo impostato sopra quando abbiamo creato la nostra WebView. Non è necessario aggiungere tutto il standard Informazioni di intestazione HTML. Mi piace dichiarare il mio doctype e aggiungere il
tag. Ne avremo bisogno perché abbiamo bisogno di usare alcuni script.In primo luogo, crea il contenuto del corpo. Utilizzando una tabella, aggiungi la quantità richiesta di righe e colonne. Per questo tutorial, abbiamo bisogno di quattro righe e due colonne. L'etichetta sarà nella colonna di sinistra e le specifiche a destra. Utilizzare uno spazio non interruzione () nella cella specifica. Ecco come appare il nostro tavolo:
Larghezza Altezza Colore Quantità
È anche una buona idea aggiungere un foglio di stile in modo che possiamo personalizzare il modo in cui viene visualizzata la nostra pagina. Direttamente sotto il div "content" vogliamo creare una qualche forma della nostra intestazione. Penso che sia una buona idea mostrare il nome del prodotto e mostrare un'immagine. La cosa più importante da fare quando si costruisce la nostra tabella è aggiungere un "id" alla cella che conterrà le nostre specifiche. Per motivi di stile, dovremmo anche aggiungere una classe alle celle simili.
Nelle esercitazioni precedenti, abbiamo creato una variabile su una pagina e l'abbiamo allegata alla nuova finestra. Questa variabile è stata letta utilizzando Ti.UI.currentWindow.varName e quindi accessibile globalmente alla pagina. Poiché questa è una WebView, non possiamo farlo. Quello che dobbiamo fare è aggiungere un EventListener e catturare le variabili passate.
La console in Titanium Developer registra le variabili e i valori che vengono passati. Questo può essere molto utile per il debug.
In EventListener specifichiamo l'evento che stiamo ascoltando (webPageReady) e dichiariamo le nostre variabili usando il nostro callback.
Ora che abbiamo le nostre variabili dichiarate abbiamo bisogno di capire come usarle nella nostra pagina. Non possiamo restituirli dalla funzione e quindi utilizzare le variabili nella nostra tabella, quindi dobbiamo essere creativi. Carica jQuery sulla tua pagina e avvolgi l'EventListener corrente all'interno di una funzione document.ready.
Quindi utilizzare l'id per ogni cella definita nel passaggio precedente e sostituire l'elemento utilizzando jQuery e la variabile corretta.
L'ultimo elemento che stiamo sostituendo nel codice precedente è la nostra variabile dell'immagine del prodotto. Usa la variabile dal nome del prodotto da cui abbiamo rimosso gli spazi per creare il link all'immagine. Inoltre, assicurati di creare la directory e le immagini per ciascun prodotto. Per motivi di stile, è una buona idea rendere tutte le immagini del prodotto delle stesse dimensioni. Qualcosa come 150px per 150px è una buona dimensione per la maggior parte degli schermi.
Infine dovremmo avere un'applicazione funzionante con tutto il codice completato. Ecco come apparirà la WebView:
Una volta create le nostre immagini per tutti i prodotti, è molto semplice utilizzare alcuni CSS standard nel nostro foglio di stile e fare in modo che le nostre pagine dei prodotti appaiano esattamente come vogliamo che vengano visualizzate. Se le informazioni che stiamo visualizzando e utilizziamo nella nostra applicazione sono aggiornate frequentemente, un database remoto potrebbe essere la soluzione giusta.
