Share
Benvenuti alla seconda parte della nostra serie su sviluppo Titanium Mobile basato su database. In questo tutorial, inseriremo i valori in un database SQLite locale e i dati di lettura e scrittura in un database MySQL remoto. Questo tutorial avrà un sacco di codice, ma ho cercato di essere il più accurato possibile senza annoiare nessuno. Porta le tue domande alle sezioni dei commenti!
Nella prima parte di questa serie, abbiamo creato un database SQLite locale e creato solo tre file che hanno generato pagine con specifiche individuali per ogni voce. Utilizzando questo metodo, la nostra applicazione diventa più facile da gestire e ha un ingombro ridotto. Useremo la maggior parte del codice dal primo tut.
NOTA: ho cambiato due cose nella fonte dal precedente tutorial. Uno era un cattivo nome di database e l'altro era un nome di variabile che aveva causato una certa confusione. Si prega di scaricare la fonte di cui sopra per salvare alcuni mal di testa.
Apri Titanium Developer e crea un nuovo progetto. Scegliere Mobile e inserire tutte le informazioni richieste. Quindi fare clic Crea progetto. Copia la cartella "prodotti" e il database "products.sqlite" nella nuova directory delle risorse. Questi file non dovranno essere toccati. Ora siamo pronti per iniziare.
Avremo bisogno di quattro schede per questo tut. Mi piace utilizzare il file app.js solo come gateway per l'applicazione. Personalmente ritengo che sia più facile mantenere le cose organizzate in questo modo. Creeremo le schede e apriremo nuovi file. Ecco il codice finale per app.js. È abbastanza semplice e lineare.
var tabGroup = Ti.UI.createTabGroup (); var win1 = Ti.UI.createWindow (title: 'Local Read', url: 'products / product_category.js'); var tab1 = Ti.UI.createTab (icona: 'images / tabs / KS_nav_ui.png', titolo: 'Local Read', window: win1); var win2 = Ti.UI.createWindow (title: 'Local Insert', url: 'products / products_write.js'); var tab2 = Ti.UI.createTab (icona: 'images / tabs / KS_nav_ui.png', titolo: 'Local Insert', window: win2); var win3 = Ti.UI.createWindow (title: 'Remote Read', url: 'remote_read.js'); var tab3 = Ti.UI.createTab (icona: 'images / tabs / KS_nav_ui.png', titolo: 'Remote Read', window: win3); var win4 = Ti.UI.createWindow (title: 'Remote Insert', url: 'remote_write.js'); var tab4 = Ti.UI.createTab (icona: 'images / tabs / KS_nav_ui.png', titolo: 'Remote Insert', window: win4); tabGroup.addTab (TAB1); tabGroup.addTab (tab2); tabGroup.addTab (TAB3); tabGroup.addTab (TAB4); tabGroup.open ();
La scheda 1 è l'intero tutorial precedente. Non toccheremo questi file, ma proseguiamo e creiamo i file segnaposto per le altre tre schede.
Apri il file "products_write.js". In questo file avremo bisogno di creare un campo di testo per ogni campo nel nostro database, creare un pulsante e allegare un eventListener ad esso per eseguire sia la validazione che l'esecuzione di una funzione, e creare una funzione per inserire i dati. È un sacco di codice ripetuto. Ecco il prodotto finale:
Il codice ridotto apparirà come il seguente. Tutti i campi di testo hanno gli stessi attributi ad eccezione delle variabili "top" e "hintText". Ne vedremo solo uno.
Accentsconagua
// crea var per currentWindow var currentWin = Ti.UI.currentWindow; function insertRows (dbData) ** FUNCTION HERE **; var category = Ti.UI.createTextField (color: '# 336699', top: 10, left: 10, width: 300, height: 40, hintText: 'Category', keyboardType: Ti.UI.KEYBOARD_DEFAULT, borderStyle: Ti .UI.INPUT_BORDERSTYLE_ROUNDED); currentWin.add (categoria); var name = Ti.UI.createTextField (...); currentWin.add (nome); 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', top: 310, width: 130, height: 35, borderRadius: 1, font: fontFamily: 'Arial', fontWeight: 'bold', fontSize: 14); currentWin.add (BTN); btn.addEventListener ('click', function (e) if (category.value! = "&& name.value! =" && pwidth.value! = "&& pheight.value! =" && pcolor.value! = "&& qty.value! = ") var dbData = categoria: category.value, nome: nome.valore, pwidth: pwidth.value, pheight: pheight.value, pcolor: pcolor.value, qty: qty.value; insertRows (dbData); else alert ("Si prega di compilare tutti i campi");;); I campi di testo vengono creati e gli attributi assegnati. Il nome della variabile è ciò che useremo in seguito. Il pulsante viene creato e quindi aggiungiamo un eventListener. Qui stiamo prima controllando che i campi di testo non siano uguali a (! =) "Vuoto", quindi creando una var con i valori del campo di testo. Questi valori vengono quindi passati alla funzione insertRows (). Se un campo viene lasciato in bianco, viene generato un avviso.
La funzione riceve i valori del campo di testo da dbData. Quindi creiamo la nostra istruzione SQL, usiamo il nostro db var e "eseguiamo" per creare un'altra var, chiamiamo quel var e infine avvisiamo che le righe sono state inserite. Se si verifica un errore durante l'inserimento, questo avviso non verrà attivato. Quello che succederà probabilmente è che l'applicazione si bloccherà.
function insertRows (dbData) var db = Ti.Database.install ('... /products.sqlite','products'); var theData = db.execute ('INSERT INTO prodotti (categoria, nome, pwidth, pheight, pcolor, qty) VALORI ("' + categoria.valore + '", "' + nome.valore + '", "' + pwidth.value + '","' + pheight.value + '","' + pcolor.value + '","' + qty.value + '")'); i dati; avviso ("Righe inserite"); ; 
Ecco il nostro database locale ora aggiornato. Nota: non ho una spiegazione per questo, ma il simulatore iOS non mostrerà gli aggiornamenti al database finché non si esce e si riavvia. Questo vale per i database locali e remoti.
I database remoti non possono essere richiamati direttamente da un'applicazione. Dobbiamo utilizzare Ti.Network.createHTTPClient (); per aprire un file PHP che si connetterà al nostro database, interrogarlo e restituire i valori all'applicazione. Lo faremo usando JSON.
Per prima cosa dobbiamo creare il nostro database remoto. Per comodità, ho esportato il mio database. Puoi usare phpMyAdmin per importarlo. Lavoreremo dal server all'applicazione.
query ("SET NAMES 'utf8'"); $ json = array (); if ($ result = $ mysqli-> query ("select * from colors")) while ($ row = $ result-> fetch_assoc ()) $ json [] = array ('shade' => $ row [' ombra '],); $ result-> close (); intestazione ("Content-Type: text / json"); echo json_encode (array ('colors' => $ json)); $ Mysqli-> close (); ?> Se lavori con PHP e MySQL molto, questo dovrebbe sembrare abbastanza familiare. Stiamo usando mysqli (che è la versione migliorata del driver MySQL di PHP) per creare la connessione al nostro database, restituire un errore se non si connette, creare il nostro array e restituirlo alla nostra applicazione. L'unica cosa che voglio veramente sottolineare riguarda il popolamento dell'array. Ho mantenuto questo molto semplice per il tempo. Se si desidera passare più valori, è sufficiente aggiungere alla query e quindi aggiungere i valori all'array.
Anche il file dell'applicazione è semplice. Creiamo la nostra var con Ti.Network.createHTTPClient (), impostiamo l'URL con "apri" nel file PHP, inviamo la richiesta, quindi la riceviamo e analizziamo la risposta. Stiamo usando lo stesso metodo che abbiamo fatto dal primo tut per generare l'array qui, ma 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; per (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); Ora dovresti essere in grado di visualizzare il database online:
Il file dell'applicazione locale per l'inserto remoto è quasi esattamente lo stesso di sopra. Ci sono due differenze: stiamo usando un file PHP e Ti.Network e dobbiamo catturare eventuali errori o avvisi dal file PHP. Ecco la scheda Inserisci:
var currentWin = Ti.UI.currentWindow; var shade = Ti.UI.createTextField (color: '# 336699', inizio: 70, a sinistra: 10, larghezza: 300, altezza: 40, hintTesto: 'Colore', keyboardType: Titanium.UI.KEYBOARD_DEFAULT, borderStyle: Titanium .UI.INPUT_BORDERSTYLE_ROUNDED); currentWin.add (ombra); var btn = Ti.UI.createButton (title: 'Insert Record', top: 130, width: 130, height: 35, borderRadius: 1, font: fontFamily: 'Arial', fontWeight: 'bold', fontSize: 14); currentWin.add (BTN); var request = Ti.Network.createHTTPClient (); request.onload = function () if (this.responseText == "Insert failed") btn.enabled = true; btn.opacity = 1; alert (this.responseText); else var alertDialog = Ti.UI.createAlertDialog (title: 'Alert', messaggio: this.responseText, buttonNames: ['OK']); alertDialog.show (); alertDialog.addEventListener ('click', function (e) currentWin.tabGroup.setActiveTab (2);); ; btn.addEventListener ('click', function (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 ("Please enter a color.");;); La funzione onload sta ascoltando le risposte dalla pagina PHP. Se si verifica un errore, l'applicazione emetterà un avviso. Questo è molto utile per il debug. Nel eventListener al pulsante, controlliamo nuovamente che il valore non sia vuoto, quindi lo passiamo al file PHP.
query ($ inserimento); printf ("Grazie per il nuovo colore!"); $ Mysqli-> close (); ?> Effettuiamo la connessione e dichiariamo la variabile assegnandola al valore inviato dalla nostra applicazione con $ _POST [ 'YourVarHere'];. Creiamo l'istruzione insert, avvisiamo se ha avuto successo e chiudiamo la connessione al database.
Ora abbiamo la nostra nuova brillante voce nel nostro database, ma, ricordate, potrebbe essere necessario riavviare il simulatore per farlo visualizzare!
So che era molto da coprire e forse non un sacco di spiegazioni. Se stai ancora cercando di capire cosa sta succedendo, ti incoraggio a scaricare il codice sorgente e a configurarlo in un'applicazione separata e a mettere da parte la tua app corrente. Ricorda, abbiamo una comunità molto forte e utile. Si prega di commentare e fare domande.
