Share
Velkommen til den andre delen i serien vår med databasert Titanium Mobile-utvikling. I denne opplæringen vil vi sette inn verdier i en lokal SQLite-database og lese og skrive data til en ekstern MySQL-database. Denne opplæringen vil ha mye kode, men jeg har forsøkt å være så grundig som mulig uten å kjedelig noen. Ta med spørsmålene dine til kommentarene!
I den første delen av denne serien opprettet vi en lokal SQLite-database og bygget kun tre filer som genererte sider med individuelle spesifikasjoner for hver oppføring. Ved hjelp av denne metoden blir applikasjonen enklere å håndtere og har et mindre fotavtrykk. Vi bruker mesteparten av koden fra første tut.
MERK: Jeg har endret to ting i kilden fra forrige tut. Den ene var en dårlig database navn og den andre var et variabelt navn som hadde forårsaket litt forvirring. Vennligst last ned kilden ovenfor for å lagre noen hodepine.
Open Titanium Developer og opprett et nytt prosjekt. Velge Mobil og fyll ut all nødvendig informasjon. Klikk deretter Opprett prosjekt. Kopier mappen "produkter" og "products.sqlite" -databasen til den nye ressursmappen. Disse filene må ikke berøres. Vi er nå klar til å bli rullende.
Vi skal ha fire faner for denne tut. Jeg liker bare å bruke app.js-filen som en gateway til programmet. Jeg personlig føler at det er lettere å holde orden på denne måten. Vi skal lage fanene og få dem til å åpne nye filer. Her er den endelige koden for app.js. Det er ganske enkelt og lineært.
var tabGroup = Ti.UI.createTabGroup (); var win1 = Ti.UI.createWindow (tittel: 'Local Read', url: 'products / product_category.js'); var tab1 = Ti.UI.createTab (ikon: 'images / tabs / KS_nav_ui.png', tittel: 'Local Read', vindu: 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', tittel: 'Local Insert', vindu: win2); var win3 = Ti.UI.createWindow (tittel: 'Remote Read', url: 'remote_read.js'); var tab3 = Ti.UI.createTab (ikon: 'images / tabs / KS_nav_ui.png', tittel: 'Remote Read', vindu: 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', tittel: 'Remote Insert', vindu: win4); tabGroup.addTab (tab1); tabGroup.addTab (tab2); tabGroup.addTab (tab 3); tabGroup.addTab (tab4); tabGroup.open ();
Fane 1 er hele forrige tut. Vi vil ikke røre disse filene, men fortsett og opprett plassholderfiler for de tre andre kategoriene.
Åpne filen "products_write.js". I denne filen må vi opprette et tekstfelt for hvert felt i databasen, lage en knapp og legge til en hendelseListener for å utføre noen validering og utføre en funksjon, og opprett en funksjon for å sette inn dataene. Det er mye gjentatt kode. Her er sluttproduktet:
Den fjernede koden vil se ut som følgende. Alle tekstfeltene har de samme attributter med unntak av variablene "topp" og "hintText". Vi vil bare se på en.
Accentsconagua
// lage var for den nåværendeWindow var currentWin = Ti.UI.currentWindow; funksjonen insertRows (dbData) ** FUNKSJON HER **; var kategori = Ti.UI.createTextField (farge: '# 336699', topp: 10, venstre: 10, bredde: 300, høyde: 40, hintText: 'Kategori', keyboardType: Ti.UI.KEYBOARD_DEFAULT, borderStyle: Ti .UI.INPUT_BORDERSTYLE_ROUNDED); currentWin.add (kategori); var navn = Ti.UI.createTextField (...); currentWin.add (navn); 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 (ant); var btn = Ti.UI.createButton (title: 'Sett inn post', topp: 310, bredde: 130, høyde: 35, borderRadius: 1, font: fontFamily: 'Arial', fontWeight: 14); currentWin.add (BTN); btn.addEventListener ('klikk', funksjon (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 ("Vennligst fyll ut alle feltene");;); Tekstfeltene er opprettet og attributter tilordnet. Det variable navnet er det vi vil bruke senere. Knappen er opprettet, og så legger vi til en eventListener. Her kontrollerer vi først for å forsikre oss om at tekstfeltene ikke er lik (! =) "Blank" og deretter oppretter en var med tekstfeltverdiene. Disse verdiene sendes deretter til insertRows () -funksjonen. Hvis et felt er tomt, vil et varsel skje.
Funksjonen mottar tekstfeltverdiene fra dbData. Vi lager deretter vår SQL-setning, bruker vår db var og "utfør" for å opprette en annen var, ring det var, og til slutt varsle om at radene ble satt inn. Hvis det oppstår en feil ved innsetting, vil dette varslet ikke brann. Hva som sannsynligvis vil skje er at søknaden vil krasje.
funksjon insertRows (dbData) var db = Ti.Database.install ('... /products.sqlite','products'); var theData = db.execute ('INSERT INTO produkter (kategori, navn, pwidth, pheight, pcolor, tall) VALUES ("' + category.value + '", "' + name.value + '", "' + pwidth.value + '","' + pheight.value + '","' + pcolor.value + '","' + qty.value + '")'); dataen; varsling ("Innstilt rad"); ; 
Her er vår nå oppdaterte lokale database. Merk: Jeg har ingen forklaring på dette, men iOS-simulatoren viser ikke oppdateringene til databasen din før du avslutter og starter på nytt. Dette gjelder for lokale og eksterne databaser.
Eksterne databaser kan ikke kalles direkte fra et program. Vi må bruke Ti.Network.createHTTPClient (); å åpne en PHP-fil som vil koble til vår database, spørre den og returnere verdiene til programmet. Vi vil gjøre dette ved hjelp av JSON.
Først må vi opprette vår eksterne database. For enkelhets skyld eksporterte jeg databasen min. Du kan bruke phpMyAdmin til å importere den. Vi skal jobbe fra serveren til søknaden.
spørring ("SET NAMES 'utf8'"); $ json = array (); hvis $ result = $ mysqli-> spørring ("velg * fra farger")) mens ($ rad = $ result-> fetch_assoc ()) $ json [] = array ('shade' => $ rad [' skygge ']); $ result-> close (); header ("Content-Type: text / json"); ekko json_encode (array ('colors' => $ json)); $ Mysqli-> close (); ?> Hvis du jobber med PHP og MySQL mye, bør dette se ganske kjent ut. Vi bruker mysqli (som er den forbedrede versjonen av PHPs MySQL-driver) for å opprette tilkoblingen til databasen, returnere en feil hvis den ikke kobler til, oppretter vårt array og returnerer det til vår applikasjon. Det eneste jeg virkelig vil påpeke er med hensyn til å fylle opp arrayet. Jeg har holdt dette veldig enkelt for tiden skyld. Hvis du vil overføre flere verdier, legger du ganske enkelt til på spørringen og legger til verdiene i gruppen.
Programfilen er også enkel. Vi lager vår var med Ti.Network.createHTTPClient (), sett URLen med "åpen" til PHP-filen, send forespørselen, og mottar den og analyser svaret. Vi bruker samme metode som vi gjorde fra den første tut for å generere arrayet her, men bruker .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; for (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 bør nå kunne se online databasen:
Den lokale applikasjonsfilen for fjernkontrollen er nesten nøyaktig den samme som ovenfor. Det er to forskjeller: Vi bruker en PHP-fil og Ti.Network og må ta feil eller varsler fra PHP-filen. Her er innsatsfanen:
var currentWin = Ti.UI.currentWindow; var skygge = Ti.UI.createTextField (color: '# 336699', topp: 70, venstre: 10, bredde: 300, høyde: 40, hintText: 'Farge', keyboardType: Titanium.UI.KEYBOARD_DEFAULT, borderStyle: Titanium .UI.INPUT_BORDERSTYLE_ROUNDED); currentWin.add (nyanse); var btn = Ti.UI.createButton (title: 'Sett inn post', topp: 130, bredde: 130, høyde: 35, borderRadius: 1, font: fontFamily: 'Arial', fontWeight: 'bold', fontSize: 14); currentWin.add (BTN); var request = Ti.Network.createHTTPClient (); request.onload = function () if (this.responseText == "Sett inn feil") btn.enabled = true; btn.opacity = 1; alert (this.responseText); else var alertDialog = Ti.UI.createAlertDialog (title: 'Alert', melding: this.responseText, buttonNames: ['OK']); alertDialog.show (); alertDialog.addEventListener ('klikk', funksjon (e) currentWin.tabGroup.setActiveTab (2);); ; btn.addEventListener ('klikk', funksjon (e) if (shade.value! = ") request.open (" POST "," http://danstever.com/sandbox/mobile_tuts/insert.php "); var params = skygge: shade.value; request.send (params); else alert ("Vennligst skriv inn en farge.");;); Onload-funksjonen lytter etter svar fra PHP-siden. Hvis det oppstår en feil, vil det føre til at applikasjonen utsteder et varsel. Dette er veldig nyttig for feilsøking. I tilfelleListener til knappen, kontrollerer vi igjen for å sikre at verdien ikke er tom, så send den videre til PHP-filen.
spørring ($ innsats); printf ("Takk for den nye fargen!"); $ Mysqli-> close (); ?> Vi lager tilkoblingen og erklærer variabelen og tildeler den til verdien sendt fra vår søknad med $ _POST [ 'YourVarHere'];. Vi lager innstikkerklæringen, varsle om den var vellykket, og lukk databasetilkoblingen.
Vi har nå vår skinnende nye oppføring i vår database, men husk at du må starte simulatoren for at den skal vises!
Jeg vet at det var mye å dekke og kanskje ikke tonnevis av forklaringer. Hvis du fremdeles sliter med å forstå hva som skjer, oppfordrer jeg deg til å laste ned kilden og sette den opp i et eget program, og jobbe til side din nåværende app. Husk at vi har et veldig sterkt og hjelpsomt fellesskap. Vennligst kommenter og still spørsmål.
