Share
Welkom bij het tweede deel in onze serie over databasegedreven ontwikkeling van Titanium Mobile. In deze zelfstudie voegen we waarden toe aan een lokale SQLite-database en lezen en schrijven we gegevens naar een externe MySQL-database. Deze tutorial zal veel code bevatten, maar ik heb geprobeerd zo grondig mogelijk te zijn zonder iemand te vervelen. Breng uw vragen naar de opmerkingensecties!
In het eerste deel van deze serie hebben we een lokale SQLite-database gemaakt en slechts drie bestanden gemaakt die pagina's met individuele specificaties voor elk item genereerden. Met deze methode wordt onze applicatie eenvoudiger te beheren en heeft deze een kleinere footprint. We zullen de meeste code uit de eerste tut gebruiken.
OPMERKING: ik heb twee dingen in de bron van de vorige tut veranderd. Een daarvan was een slechte databasenaam en de andere was een variabelenaam die enige verwarring had veroorzaakt. Download de bovenstaande bron om wat hoofdpijn te besparen.
Open Titanium Developer en maak een nieuw project. Kiezen mobiel en vul alle vereiste informatie in. Dan klikken Maak een project. Kopieer de map "products" en de "products.sqlite" -database naar de nieuwe bronnenmap. Deze bestanden hoeven niet te worden aangeraakt. We zijn nu klaar om aan de slag te gaan.
We hebben vier tabbladen nodig voor deze tut. Ik gebruik het app.js-bestand graag alleen als een gateway voor de toepassing. Ik vind persoonlijk dat het gemakkelijker is om dingen zo georganiseerd te houden. We gaan de tabbladen maken en ze nieuwe bestanden laten openen. Hier is de definitieve code voor app.js. Het is vrij eenvoudig en lineair.
var tabGroup = Ti.UI.createTabGroup (); var win1 = Ti.UI.createWindow (title: 'Local Read', url: 'products / product_category.js'); var tab1 = Ti.UI.createTab (icon: 'images / tabs / KS_nav_ui.png', titel: 'Local Read', venster: win1); var win2 = Ti.UI.createWindow (title: 'Local Insert', url: 'products / products_write.js'); var tab2 = Ti.UI.createTab (icon: 'images / tabs / KS_nav_ui.png', titel: 'Local Insert', window: win2); var win3 = Ti.UI.createWindow (title: 'Remote Read', url: 'remote_read.js'); var tab3 = Ti.UI.createTab (icon: 'images / tabs / KS_nav_ui.png', titel: 'Remote Read', venster: win3); var win4 = Ti.UI.createWindow (title: 'Remote Insert', url: 'remote_write.js'); var tab4 = Ti.UI.createTab (icon: 'images / tabs / KS_nav_ui.png', titel: 'Remote Insert', window: win4); tabGroup.addTab (tab1); tabGroup.addTab (tab2); tabGroup.addTab (tab3); tabGroup.addTab (TAB4); tabGroup.open ();
Tab 1 is de volledige vorige tut. We zullen deze bestanden niet aanraken, maar ga door en maak de placeholder-bestanden voor de andere drie tabbladen.
Open het bestand "products_write.js". In dit bestand moeten we een tekstveld voor elk veld in onze database maken, een knop maken en een eventListener eraan koppelen om zowel een bepaalde validatie uit te voeren en een functie uit te voeren, en een functie te maken om de gegevens in te voegen. Het is veel herhaalde code. Hier is het eindproduct:
De uitgeklede code ziet er als volgt uit. Alle tekstvelden hebben dezelfde kenmerken met uitzondering van de variabelen 'top' en 'hintText'. We zullen er slechts één bekijken.
Accentsconagua
// maak var voor de currentWindow var currentWin = Ti.UI.currentWindow; functie insertRows (dbData) ** FUNCTIE HIER **; 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 (categorie); var name = Ti.UI.createTextField (...); currentWin.add (name); 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 (aantal); 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 ('klik', functie (e) if (category.value! = "&& name.value! =" && pwidth.value! = "&& pheight.value! =" && pcolor.value! = "&& qty.value! = ") var dbData = category: category.value, name: name.value, pwidth: pwidth.value, pheight: pheight.value, pcolor: pcolor.value, qty: qty.value; insertRows (dbData); else alert ("Vul alle velden in");;); De tekstvelden worden gemaakt en attributen worden toegewezen. De naam van de variabele is wat we later zullen gebruiken. De knop is gemaakt en vervolgens voegen we een eventListener toe. Hier controleren we eerst of de tekstvelden niet gelijk zijn aan (! =) "Leeg" en vervolgens een var te maken met de tekstveldwaarden. Deze waarden worden vervolgens doorgegeven aan de functie insertRows (). Als een veld leeg blijft, wordt een waarschuwing geactiveerd.
De functie ontvangt de tekstveldwaarden van dbData. Vervolgens maken we onze SQL-instructie, gebruiken we onze db var en "execute" om een andere var te maken, die var aan te roepen en ten slotte te waarschuwen dat de rijen zijn ingevoegd. Als er een fout is opgetreden tijdens het invoegen, wordt deze waarschuwing niet geactiveerd. Wat waarschijnlijk zal gebeuren, is dat de applicatie crasht.
functie insertRows (dbData) var db = Ti.Database.install ('... /products.sqlite','products'); var theData = db.execute ('INSERT INTO producten (categorie, naam, pwidth, pheight, pcolor, aantal) VALUES (' '+ category.value +' ", '' + naam.value + '", "' + pwidth.value + '","' + pheight.value + '","' + pcolor.value + '","' + qty.value + '")'); de data; alert ("Rijen ingevoegd"); ; 
Hier is onze nu bijgewerkte lokale database. Opmerking: ik heb hier geen verklaring voor, maar de iOS-simulator toont de updates in uw database pas als u afsluit en opnieuw start. Dit is van toepassing op lokale en externe databases.
Externe databases kunnen niet rechtstreeks vanuit een toepassing worden gebeld. We moeten Ti.Network.createHTTPClient () gebruiken; om een PHP-bestand te openen dat verbinding maakt met onze database, ernaar te vragen en de waarden terug te geven aan de toepassing. We doen dit met JSON.
Eerst moeten we onze externe database maken. Voor het gemak heb ik mijn database geëxporteerd. U kunt phpMyAdmin gebruiken om het te importeren. We gaan werken van de server naar de applicatie.
query ("SET NAMES 'utf8'"); $ json = array (); if ($ result = $ mysqli-> query ("selecteer * uit kleuren")) while ($ row = $ result-> fetch_assoc ()) $ json [] = array ('shade' => $ row [' schaduw'], ); $ resultaat-> sluiten (); header ("Inhoudstype: tekst / json"); echo json_encode (array ('colors' => $ json)); $ Mysqli-> close (); ?> Als je veel met PHP en MySQL werkt, ziet dit er best bekend uit. We gebruiken mysqli (de verbeterde versie van PHP's MySQL-stuurprogramma) om de verbinding met onze database tot stand te brengen, een fout terug te sturen als deze geen verbinding maakt, onze array te maken en deze terug te sturen naar onze applicatie. Het enige waar ik echt op wil wijzen is met betrekking tot het vullen van de array. Ik heb dit eenvoudig gehouden ter wille van de toekomst. Als u meer waarden wilt doorgeven, voegt u eenvoudigweg de query toe en voegt u de waarden aan de array toe.
Het applicatiebestand is ook eenvoudig. We maken onze var met het Ti.Network.createHTTPClient (), stellen de URL met "open" in op het PHP-bestand, sturen het verzoek en ontvangen het vervolgens en ontleden het antwoord. We gebruiken dezelfde methode als bij de eerste tut om de array hier te genereren, maar met .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; voor (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); U zou nu de online database moeten kunnen bekijken:
Het lokale toepassingsbestand voor de externe invoeging is bijna precies hetzelfde als hierboven. Er zijn twee verschillen: we gebruiken een PHP-bestand en Ti.Network en moeten eventuele fouten of waarschuwingen van het PHP-bestand opvangen. Hier is het invoegen tabblad:
var currentWin = Ti.UI.currentWindow; var shade = Ti.UI.createTextField (color: '# 336699', boven: 70, links: 10, width: 300, height: 40, hintText: 'Color', keyboardType: Titanium.UI.KEYBOARD_DEFAULT, borderStyle: Titanium .UI.INPUT_BORDERSTYLE_ROUNDED); currentWin.add (schaduw); 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 == "Invoegen mislukt") btn.enabled = true; btn.opacity = 1; alert (this.responseText); else var alertDialog = Ti.UI.createAlertDialog (title: 'Alert', bericht: this.responseText, buttonNames: ['OK']); alertDialog.show (); alertDialog.addEventListener ('klik', functie (e) currentWin.tabGroup.setActiveTab (2);); ; btn.addEventListener ('klik', functie (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 ("Voer een kleur in.");;); De onload-functie luistert naar antwoorden van de PHP-pagina. Als er een fout optreedt, zal de toepassing een waarschuwing geven. Dit is erg handig voor foutopsporing. In de gebeurtenis Luisteraar naar de knop controleren we opnieuw of de waarde niet leeg is en geef deze door aan het PHP-bestand..
vraag ($ insert); printf ("Bedankt voor de nieuwe kleur!"); $ Mysqli-> close (); ?> We maken de verbinding en declareren de variabele en wijzen deze toe aan de waarde verzonden vanuit onze applicatie met $ _POST [ 'YourVarHere'];. We maken de invoeginstructie, waarschuwen of deze is geslaagd en sluiten de databaseverbinding.
We hebben nu onze glanzende nieuwe vermelding in onze database, maar vergeet niet dat je de simulator moet herstarten om deze weer te geven!
Ik weet dat dat veel te behandelen was en misschien niet heel veel uitleg. Als je nog steeds moeite hebt om te begrijpen wat er aan de hand is, raad ik je aan de bron te downloaden en deze in een afzonderlijke applicatie in te stellen en je huidige app opzij te zetten. Vergeet niet dat we een erg sterke en behulpzame community hebben. Geef alsjeblieft commentaar en stel eventuele vragen.
