Share
Denne opplæringen vil introdusere deg til SQLite og database-drevet utvikling med Titanium Mobile. Spesielt lærer du å bygge et program for å administrere produkter med en database i stedet for bare filsystemet.
Det er ingen logisk forstand å måtte administrere en individuell fil for et produkt. Spesielt når det er en stor produktkatalog for å opprettholde. Her er et eksempel.
Mappene og filene til venstre er hvordan vårt prosjekt vil se på slutten. Bare noen få filer i en mappe og en databasefil. Til høyre er en ukontrollert, skremmende katalog. Jeg føler at dette bildet skal være nok motivasjon. En av de andre fordelene vil være den reduserte appfotavtrykk.
Vi trenger Titanium Mobile, en god tekstredigerer (noen du er komfortabel med vil fungere), og en SQLite database manager. Her er de to SQLite-lederne jeg bruker:
Begge disse er gode alternativer. Jeg liker SQLite Manager, men jeg liker ikke at den kjører som en Firefox-plugin, i stedet for et frittstående program. SQLite Database Browser ser ikke ut som polert, men det kan kjøres som en frittstående applikasjon. På grunn av dette pleier jeg å bruke SQLite Database Browser.
Open Titanium Developer og opprett et nytt prosjekt. Velge Mobil og fyll ut all nødvendig informasjon. Titanium-utvikleren oppdager automatisk om iPhone SDK og Android SDK er riktig installert. Klikk deretter Opprett prosjekt.
Åpne hvilket program du velger og klikk på Ny database. Navngi databasen "products.sqlite". Søknad, database og filnavn spiller ingen rolle. Bare husk hva du bruker. Lagre filen i Resources-mappen som Titanium Developer opprettet. Fyll ut databasen med produktinformasjonen din. Pass på at du trykker på lagre.
Åpne appens Resources / app.js-fil (Hvis du ikke har jobbet med Titanium Developer før, er "app.js" hovedfilen for søknaden din).
Fjern all eksisterende kode.
Med enkelhet i tankene vil jeg beholde alle filene for produkter i en enkelt mappe. La oss gå til ressursmappen og opprette en mappe med navnet "produkter". Vi lagrer våre andre filer her.
Tilbake i app.js, vil vi opprette en fanegruppe fordi det gjør det enkelt å legge til flere faner og innhold senere. Sett vinduetiketten, la vinduet åpne vår produktfil, og legg til vinduet i vår nåværende visning. Du vil trenge et bilde for fanebildet ditt. Jeg kopierte et bilde fra kategoriene i KitchenSink-appen, som er showcase-prosjektet fra Appcelerator for å vise frem alle funksjonene sine..
// lage kategorien gruppe var tabGroup = Ti.UI.createTabGroup (); // opprett hovedvindu var main = Ti.UI.createWindow (tittel: 'Produktkategorier', url: 'products / product_category.js'); // craete hovedfanen var tab = Ti.UI.createTab (ikon: 'images / tabs / KS_nav_ui.png', tittel: 'Produkter', vindu: main); // legg til fanen til kategorien tabgroup.addTab (tabulator); // Åpne kategorien kategorien tabGroup.open ();
Vi trenger ikke å berøre koden i app.js igjen, så du kan fortsette og lukke den hvis du vil.
Opprett en ny JavaScript-fil i vår produktmappe med navnet product_category.js. Den viktige tingen å huske på med denne siden er at den blir den første som lastes når applikasjonen vår starter. Det betyr at vi skal ha mesteparten av koden vår i denne filen. Det store er at denne koden vil bli gjenbrukt for vår neste fil, med bare noen få endringer.
Før vi kodes denne siden, bør vi tenke gjennom hva som må skje. Siden må åpne en database, lese kategorikolonnen og vise resultatene i en tabellvisning. For å legge til databaseresultatene i tabellvisningen, må vi opprette en matrise og trykke dataene til den. Den beste måten å gjøre dette på er å skape en funksjon. På denne måten trenger vi ikke å vite før tid hvor mange rader i databasen må leses. Vi vil bare la funksjonen iterere gjennom databasen til den leser alle aktive rader.
Vi må også opprette en EventListener for når en av radene er klikket. La oss begynne med å få alt sammen bortsett fra funksjonen og EventListener.
Accentsconagua
// lage var for den nåværendeWindow var currentWin = Ti.UI.currentWindow; // sett dataene fra databasen til array-funksjonen setData () ** FUNKSJON HER **; // lage tabellvisning var tableview = Ti.UI.createTableView (); tableview.addEventListener ('klikk', funksjon (e) ** EVENTLISTENER HERE **); // legg til tabellenVis til nåværende vindu currentWin.add (tabellvisning); // ring setData-funksjonen for å feste databaseresultatene til array setData (); Dette er alt ganske grei. Nå er setData () -funksjonen. Start med å koble til databasen og spørre den for kategorien. For å fjerne duplikater og bare returnere en rad for hver kategori, skal vi bruke DISTINCT SQL-kommandoen.
var db = Ti.Database.install ('... /products.sqlite','products'); var rader = db.execute ('SELECT DISTINCT category FROM products'); Opprett matrisen og bruk a samtidig som erklæring om å lytte gjennom databasen. Spør databasen til feltnavnet "kategori" og sett det til radens tittel. (Titanium Developer bruker "fieldByName" for å lese fra den definerte kolonnen i en database. Den brukes sammen med spørringen vår for å velge vårt innhold.) Angi at det er et barnelement, og sett banen til neste fil.
var dataArray = []; mens (rows.isValidRow ()) dataArray.push (title: "+ rows.fieldByName ('category') +", harChild: true, path: '... /products/products.js'); rows.next (); ; Til slutt legger du matrisen til vårt tableView.
tableview.setData (dataArray);
Nå må vi opprette EventListener for å åpne neste side. En ting vi også trenger å gjøre her er å sende variablene til neste fil. Dette vil bli brukt til å bygge neste SQL-spørring og sette vinduetittel. Vi vil også sette tilbakeringingen fra lytteren til banen til neste fil, selv om den er statisk.
tableview.addEventListener ('klikk', funksjon (e) hvis (e.rowData.path) varwin = Ti.UI.createWindow (url: e.rowData.path, title: e.rowData.title); var prodCat = e.rowData.title; win.prodCat = prodCat; Ti.UI.currentTab.open (seier);); Lytten fanger klikket, og oppretter deretter et nytt vindu. Dette nye vinduet åpner den neste filen og setter tittelen på det nye vinduet på innholdet i raden. I vårt tilfelle er det produktets kategori. Vi lager en variabel fra innholdet i rad og sender det til det nye vinduet, og navngir varen. Til slutt åpner lytteren den nye fanegruppen, som er den neste siden.
Her er hva filen "product_category.js" viser:
Velg all koden i filen "product_category.js" og hitkopi. Opprett en ny JavaScript-fil kalt "products.js" og lim inn koden. Vi trenger bare å gjøre noen få modifikasjoner og legge til variabelen vi passerte for denne siden til å fungere.
I vår funksjon, under vår samtale for å åpne databasen, legger du til følgende kode, fanger ut bestått var.
var prodCat = Ti.UI.currentWindow.prodCat;
Nå må vi endre spørringen til databasen og bruke vår nye variabel. Vi vil nå lese produktnavnene fra vår tidligere valgte kategori og vise disse produktene.
var rader = db.execute ('VELG * FRA produkter WHERE category = "' + prodCat + '"'); Endre feltetByName i raden fra "kategori" til "navn" og banen til neste fil.
dataArray.push (title: "+ rows.fieldByName ('name') +", hasChild: true, path: '... /products/product_specs.js'); Det siste som trengs for å fullføre denne siden, er å bytte passert var i EventListener. Endre det for å passere produktnavnet og bruk et varnavn som gir mening.
var prodName = e.rowData.title; win.prodName = prodName;
Ferdig. Her ser ut som "products.js":
Dette er den siste filen vi trenger for å lage denne opplæringen. Målet med denne siden er å vise innholdet i raden for det enkelte produkt. La oss se på hele koden og deretter bryte den ned.
// lage var for den nåværendeWindow var currentWin = Ti.UI.currentWindow; var db = Ti.Database.install ('... /products.sqlite','productSpecs'); var prodName = Ti.UI.currentWindow.prodName; var rader = db.execute ('VELG * FRA produkter der navnet = "' + prodName + '"'); var data = [title: "+ rows.fieldByName ('width') +", overskrift: 'Bredde', tittel: "+ rows.fieldByName ('height') + title: "+ rows.fieldByName ('color') +", overskrift: 'Color', title: "+ rows.fieldByName ('qty') +", overskrift: 'Quantity']; var tableview = Ti.UI.createTableView (data: data); currentWin.add (Tableview); Det som foregår over er det samme som vi har gjort på de forrige sidene, vi bare ikke lytter etter en handling, og fyller arrayet selv, i stedet for å bruke en funksjon. På denne måten kan vi merke informasjonen med en radoverskrift og bestille innholdet slik vi ønsker at det skal vises.
Alt som trengte å bli gjort var å lage en individuell rad i gruppen ved hjelp av våre databasekolonnenavn.
Dette virker som mye arbeid i begynnelsen, men resultatet er vel verdt det. Den beste delen er at når koden er ferdig i de to første produktfilene, trenger den aldri å bli rørt. Funksjonen setData () skaleres uten hjelp. Den samme koden vil fungere uansett om databasen har en rad eller tre og femti!
