Share
Välkommen till den andra delen i vår serie om databasdriven Titanium Mobile-utveckling. I denna handledning kommer vi att infoga värden i en lokal SQLite-databas och läsa och skriva data till en avlägsen MySQL-databas. Denna handledning kommer att ha mycket kod, men jag har försökt att vara så noggrann som möjligt utan att tråkiga någon. Ta med dina frågor till kommentarerna!
I den första delen av denna serie skapade vi en lokal SQLite-databas och byggde bara tre filer som genererade sidor med enskilda specifikationer för varje post. Med hjälp av denna metod blir vår applikation lättare att hantera och har ett mindre fotavtryck. Vi använder det mesta av koden från den första tutningen.
OBS! Jag har ändrat två saker i källan från föregående tut. En var ett dåligt databasnamn och det andra var ett variabelt namn som hade orsakat viss förvirring. Vänligen ladda ner källan ovan för att spara lite huvudvärk.
Open Titanium Developer och skapa ett nytt projekt. Välja Mobil och fyll i all nödvändig information. Klicka sedan Skapa projekt. Kopiera mappen "produkter" och "products.sqlite" -databasen till den nya resurskatalogen. Dessa filer behöver inte röras. Vi är nu redo att få rulla.
Vi behöver fyra flikar för denna tut. Jag gillar att bara använda app.js-filen som en gateway till programmet. Jag tycker personligen att det är lättare att hålla saker organiserade på detta sätt. Vi ska skapa flikarna och få dem att öppna nya filer. Här är den slutliga koden för app.js. Det är ganska enkelt och linjärt.
var tabGroup = Ti.UI.createTabGroup (); var win1 = Ti.UI.createWindow (title: 'Local Read', url: 'products / product_category.js'); var tab1 = Ti.UI.createTab (ikon: 'images / tabs / KS_nav_ui.png', titel: 'Local Read', fönster: win1); var win2 = Ti.UI.createWindow (title: 'Local Insert', url: 'products / products_write.js'); var tab2 = Ti.UI.createTab (ikon: 'images / tabs / KS_nav_ui.png', titel: 'Lokal infoga', fönster: win2); var win3 = Ti.UI.createWindow (title: 'Remote Read', url: 'remote_read.js'); var tab3 = Ti.UI.createTab (ikon: 'images / tabs / KS_nav_ui.png', titel: 'Remote Read', fönster: win3); var win4 = Ti.UI.createWindow (title: 'Remote Insert', url: 'remote_write.js'); var tab4 = Ti.UI.createTab (ikon: 'images / tabs / KS_nav_ui.png', titel: 'Remote Insert', fönster: win4); tabGroup.addTab (tab1); tabGroup.addTab (tab2); tabGroup.addTab (tab3); tabGroup.addTab (tab4); tabGroup.open ();
Flik 1 är hela föregående tut. Vi kommer inte att röra dessa filer, men fortsätt och skapa platshållarfilerna för de andra tre flikarna.
Öppna filen "products_write.js". I den här filen måste vi skapa ett textfält för varje fält i vår databas, skapa en knapp och bifoga ett eventListener till det att både utföra någon validering och exekvera en funktion och skapa en funktion för att infoga data. Det är mycket upprepad kod. Här är slutprodukten:
Den avtagna koden kommer att se ut som följande. Alla textfälten har samma attribut med undantag för variablerna "topp" och "hintText". Vi kommer bara att titta på en.
Accentsconagua
// skapa var för currentWindow var currentWin = Ti.UI.currentWindow; funktionen insertRows (dbData) ** FUNKTION HÄR **; var kategori = Ti.UI.createTextField (färg: '# 336699', topp: 10, vänster: 10, bredd: 300, höjd: 40, hintText: 'Kategori', keyboardType: Ti.UI.KEYBOARD_DEFAULT, borderStyle: Ti .UI.INPUT_BORDERSTYLE_ROUNDED); currentWin.add (kategori); var namn = Ti.UI.createTextField (...); currentWin.add (namn); 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 (st); var btn = Ti.UI.createButton (title: 'Sätt in post', topp: 310, bredd: 130, höjd: 35, borderRadius: 1, typsnitt: fontFamily: 'Arial', fontWeight: 14); currentWin.add (BTN); btn.addEventListener ('klick', funktion (e) if (category.value! = "&& name.value! =" && pwidth.value! = "&& pheight.value! =" && pcolor.value! = "&& qty.value! = ") var dbData = kategori: category.value, name: name.value, pwidth: pwidth.value, pheight: pheight.value, pcolor: pcolor.value, qty: qty.value; insertRows (dbData); else alert ("Vänligen fyll i alla fält");;); Textfälten skapas och attribut tilldelas. Det variabla namnet är vad vi ska använda senare. Knappen är skapad, och sedan lägger vi till en eventListener. Här kontrollerar vi först att textfälten inte är lika med (! =) "Blank" och skapar sedan ett var med textfältvärdena. Dessa värden skickas sedan till funktionen insertRows (). Om ett fält är tomt kommer en varning att skjuta.
Funktionen tar emot textfältvärdena från dbData. Vi skapar sedan vårt SQL-formulär, använder vår db var och "execute" för att skapa en annan var, ring det var och slutligen varna för att raderna infördes. Om ett fel inträffar vid inmatning, kommer denna varning inte att avfyra. Vad som sannolikt kommer att hända är att applikationen kommer att krascha.
funktion insertRows (dbData) var db = Ti.Database.install ('... /products.sqlite','products'); var theData = db.execute ('INSERT INTO produkter (kategori, namn, pwidth, pheight, pcolor, antal) VÄRDEN ("' + category.value + '", "' + name.value + '", "' + pwidth.value + '', '' + pheight.value + '","' + pcolor.value + '","' + qty.value + '")'); uppgifterna; alert ("Rows Inserted"); ; 
Här är vår nu uppdaterade lokala databas. Obs! Jag har ingen förklaring till detta, men iOS-simulatorn visar inte uppdateringarna i din databas tills du avslutar och omstartar. Detta gäller för lokala och fjärranslutna databaser.
Fjärrdatabaser kan inte ringas direkt från en applikation. Vi måste använda Ti.Network.createHTTPClient (); för att öppna en PHP-fil som kommer att ansluta till vår databas, fråga den och returnera värdena till programmet. Vi gör det här med JSON.
Först måste vi skapa vår fjärranslutna databas. För enkelhets skyld exporterade jag min databas. Du kan använda phpMyAdmin för att importera det. Vi ska jobba från servern till ansökan.
fråga ("SET NAMES" utf8 '"); $ json = array (); $ result = $ mysqli-> query ("välj * från färger")) while ($ row = $ result-> fetch_assoc ()) $ json [] = array skugga "]); $ result-> close (); header ("Content-Type: text / json"); echo json_encode (array ('colors' => $ json)); $ Mysqli-> close (); ?> Om du arbetar mycket med PHP och MySQL ska det se ganska bekant ut. Vi använder mysqli (vilket är den förbättrade versionen av PHP: s MySQL-drivrutin) för att skapa anslutningen till vår databas, returnera ett fel om det inte kopplar samman, skapa vår array och returnera den till vår applikation. Det enda jag verkligen vill påpeka är när det gäller att fylla upp arrayen. Jag har hållit det här väldigt enkelt för tidens skull. Om du vill vidarebefordra fler värden lägger du bara till på frågan och lägger sedan till värdena i arrayen.
Applikationsfilen är också enkel. Vi skapar vår var med Ti.Network.createHTTPClient (), ange webbadressen med "öppen" till PHP-filen, skicka förfrågan och sedan ta emot den och analysera svaret. Vi använder samma metod som vi gjorde från den första tut för att generera array här, men med .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; för (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); Du borde nu kunna se online-databasen:
Den lokala applikationsfilen för fjärrinsatsen är nästan exakt densamma som ovan. Det finns två skillnader: Vi använder en PHP-fil och Ti.Network och måste fånga några fel eller varningar från PHP-filen. Här är infogningsfliken:
var currentWin = Ti.UI.currentWindow; var skugga = Ti.UI.createTextField (färg: '# 336699', översta: 70, vänster: 10, bredd: 300, höjd: 40, hintText: 'Färg', keyboardType: Titanium.UI.KEYBOARD_DEFAULT, borderStyle: Titanium .UI.INPUT_BORDERSTYLE_ROUNDED); currentWin.add (skugga); var btn = Ti.UI.createButton (title: 'Infoga inspelning', övre: 130, bredd: 130, höjd: 35, borderRadius: 1, typsnitt: fontFamily: 'Arial', fontWeight: 14); currentWin.add (BTN); var request = Ti.Network.createHTTPClient (); request.onload = function () if (this.responseText == "Infoga misslyckades") btn.enabled = true; btn.opacity = 1; alert (this.responseText); else var alertDialog = Ti.UI.createAlertDialog (title: 'Alert', meddelande: this.responseText, buttonNames: ['OK']); alertDialog.show (); alertDialog.addEventListener ('klicka', funktion (e) currentWin.tabGroup.setActiveTab (2);); ; btn.addEventListener ('klick', funktion (e) if (shade.value! = ") request.open (" POST "," http://danstever.com/sandbox/mobile_tuts/insert.php "); var params = skugga: shade.value; request.send (params); else alert ("Vänligen ange en färg.");;); Onload-funktionen lyssnar på svar från PHP-sidan. Om ett fel uppstår kommer det att orsaka att applikationen utfärdar en varning. Det här är mycket användbart för felsökning. I händelseListor till knappen kontrollerar vi igen för att försäkra dig om att värdet inte är tomt och sedan vidarebefordra det till PHP-filen.
query ($ insats); printf ("Tack för den nya färgen!"); $ Mysqli-> close (); ?> Vi gör anslutningen och deklarerar variabeln och tilldelar den till det värde som skickas från vår ansökan med $ _POST [ 'YourVarHere'];. Vi skapar inlägget, varnar om det lyckades och stäng databasanslutningen.
Vi har nu vår glänsande nya post i vår databas, men kom ihåg att du kanske måste starta om simulatorn för att den ska visas!
Jag vet att det var mycket att täcka och kanske inte en massa förklaringar. Om du fortfarande kämpar för att förstå vad som händer uppmuntrar jag dig att ladda ner källan och ställa in den i en separat applikation och arbeta bort din aktuella app. Kom ihåg att vi har en mycket stark och hjälpsam gemenskap. Vänligen kommentera och fråga några frågor.
