Share
Denna handledning kommer att introducera dig till SQLite och databasdriven utveckling med Titanium Mobile. Specifikt lär du dig att bygga en applikation för att hantera produkter med en databas istället för bara filsystemet.
Det är ingen logisk mening att behöva hantera en enskild fil för en produkt. Speciellt när det finns en stor produktkatalog för att upprätthålla. Här är ett exempel.
Mapparna och filerna till vänster är hur vårt projekt kommer att se på slutet. Bara några filer i en mapp och en databasfil. Till höger är en out of control, skrämmande katalog. Jag tycker att bilden ska vara tillräckligt motiverad. En av de andra fördelarna är det minskade appfotavtrycket.
Vi behöver Titanium Mobile, en bra textredigerare (någon du är bekväm med kommer att arbeta), och en SQLite databashanterare. Här är de två SQLite-cheferna jag använder:
Båda dessa är bra alternativ. Jag gillar verkligen SQLite Manager, men jag gillar inte att den körs som ett Firefox-plugin istället för en fristående applikation. SQLite Database Browser ser inte ut som polerad, men den kan köras som en fristående applikation. På grund av detta brukar jag använda SQLite Database Browser.
Open Titanium Developer och skapa ett nytt projekt. Välja Mobil och fyll i all nödvändig information. Titanium-utvecklaren upptäcker automatiskt om iPhone SDK och Android SDK är korrekt installerade. Klicka sedan Skapa projekt.
Öppna vilket program du väljer och klicka på Ny databas. Namn databasen "products.sqlite". Applikations-, databas- och filnamn spelar ingen roll. Kom bara ihåg vad du använder. Spara filen i mappen Resurser som Titanium Developer har skapat. Fyll i databasen med din produktinformation. Se till att du slår spara.
Öppna appens Resources / app.js-fil (Om du inte har arbetat med Titanium Developer tidigare, är "app.js" huvudfilen för din ansökan).
Ta bort all befintlig kod.
Med enkelhet i åtanke vill jag behålla alla filer för produkter i en enda mapp. Låt oss gå till mappen Resurser och skapa en mapp med namnet "produkter". Vi kommer att spara våra andra filer här.
Tillbaka i app.js vill vi skapa en flikgrupp eftersom det gör det enkelt att lägga till fler flikar och innehåll senare. Ställ in fönstretiketten, fönstret öppnar vår produktfil och lägg till fönstret i vår nuvarande vy. Du behöver en bild för din flikbild. Jag kopierade en bild från flikarna i KitchenSink-appen, vilket är det showcase-projekt som Appcelerator tillhandahållit för att visa alla sina funktioner.
// skapa flikgrupp var tabGroup = Ti.UI.createTabGroup (); // skapa huvudfönster var main = Ti.UI.createWindow (title: 'Produktkategorier', url: 'products / product_category.js'); // craete huvudfliken var flik = Ti.UI.createTab (ikon: 'bilder / flikar / KS_nav_ui.png', titel: 'Produkter', fönster: main); // lägg till fliken till flikgrupps-flikenGroup.addTab (flik); // Öppna flikgruppsgruppGroup.open ();
Vi behöver inte röra koden igen i app.js, så du kan fortsätta och stänga den om du vill.
Skapa en ny JavaScript-fil i vår produktmapp med namnet product_category.js. Det viktiga att komma ihåg med den här sidan är att det blir den första som laddas när vår ansökan initialt startar. Det betyder att vi kommer att ha huvuddelen av vår kod i den här filen. Det bästa är att den här koden kommer att återanvändas för vår nästa fil, med några få ändringar.
Innan vi kodar den här sidan borde vi tänka igenom vad som behöver hända. Sidan måste öppna en databas, läsa kategorikolonnen och visa resultaten i en tabellvy. För att bifoga databasresultaten till tableView måste vi skapa en array och trycka in data till den. Det bästa sättet att göra detta är genom att skapa en funktion. På så sätt behöver vi inte veta hur många rader i databasen som ska läsas före tid. Vi kommer helt enkelt att låta funktionen iterera via databasen tills den läser alla aktiva rader.
Vi måste också skapa en EventListener för när en av raderna klickas. Låt oss börja med att hämta allt tillsammans med funktionen och EventListener.
Accentsconagua
// skapa var för currentWindow var currentWin = Ti.UI.currentWindow; // ställa in data från databasen till array-funktionen setData () ** FUNCTION HERE **; // skapa tabellvyn var tableview = Ti.UI.createTableView (); tableview.addEventListener ('klicka', funktion (e) ** EVENTLISTENER HERE **); // lägg till tabellenVisa det nuvarande fönstret currentWin.add (tabellvyn); // ringa setData-funktionen för att bifoga databasresultaten till array setData (); Detta är allt ganska enkelt. Nu funktionen setData (). Börja med att ansluta till databasen och fråga den för kategorin. För att ta bort dubbletter och bara returnera en rad för varje kategori, kommer vi att använda kommandot DISTINCT SQL.
var db = Ti.Database.install ('... /products.sqlite','products'); var rader = db.execute ("SELECT DISTINCT category FROM products"); Skapa array och använd a medan uttalande att iterera genom databasen. Fråga databasen för fältnamnet "kategori" och sätt det till radens titel. (Titanium Developer använder "fieldByName" för att läsa från den definierade kolumnen i en databas. Den används tillsammans med vår fråga för att välja vårt innehåll.) Ange att det finns ett barnelement och ställa in sökvägen till nästa fil.
var dataArray = []; medan (rows.isValidRow ()) dataArray.push (title: "+ rows.fieldByName ('category') +", harChild: true, path: '... /products/products.js'); rows.next (); ; Slutligen bifoga matrisen till vår tableView.
tableview.setData (dataArray);
Nu måste vi skapa EventListener för att öppna nästa sida. En sak som vi också behöver göra här är att skicka variablerna till nästa fil. Detta kommer att användas för att bygga nästa SQL-fråga och ställa in fönstertiteln. Vi ställer också återuppringningen från lyssnaren till sökvägen till nästa fil, även om den är statisk.
tableview.addEventListener ("klicka", funktion (e) if (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 (win);); Lyssnaren fångar klicket och skapar sedan ett nytt fönster. Det här fönstret öppnar nästa fil och ställer in det nya fönsterets titel till innehållet i raden. I vårt fall är det produktens kategori. Vi skapar sedan en variabel från radinnehållet och skickar det till det nya fönstret och namnger varen. Slutligen öppnar lyssnaren den nya flikgruppen, vilken är nästa sida.
Här är vad filen "product_category.js" visar:
Markera all kod i filen "product_category.js" och hit-kopia. Skapa en ny JavaScript-fil med namnet "products.js" och klistra in koden. Vi behöver bara göra några ändringar och lägg till den variabel vi passerade för att denna sida ska fungera.
Inuti vår funktion, under vårt samtal för att öppna databasen, lägg till följande kod, ta ut passerade var.
var prodCat = Ti.UI.currentWindow.prodCat;
Nu behöver vi ändra vår fråga till databasen och använda vår nya variabel. Vi vill nu läsa produktnamnen från vår tidigare valda kategori och visa dessa produkter.
var rader = db.execute ('VÄLJ * FRÅN produkter WHERE category = "' + prodCat + '"'); Ändra fältByName i raden från "kategori" till "namn" och sökvägen till nästa fil.
dataArray.push (title: "+ rows.fieldByName ('name') +", harChild: true, path: '... /products/product_specs.js'); Det sista som behövs för att slutföra den här sidan är att ändra den passerade varen i EventListener. Ändra det för att skicka produktnamnet och använd ett varnamn som är meningsfullt.
var prodName = e.rowData.title; win.prodName = prodName;
Gjort. Här är vad "products.js" ser ut som:
Det här är den sista filen vi behöver för att skapa den här handledningen. Målet med den här sidan är att visa innehållet i raden för den enskilda produkten. Låt oss titta på hela koden och sedan bryta ner den.
// skapa var för currentWindow var currentWin = Ti.UI.currentWindow; var db = Ti.Database.install ('... /products.sqlite','productSpecs'); var prodName = Ti.UI.currentWindow.prodName; var rader = db.execute ('VÄLJ * FRÅN produkter WHERE name = "' + prodName + '"'); var data = [title: "+ rows.fieldByName ('width') +", rubrik: 'Bredd', title: "+ rows.fieldByName title: "+ rows.fieldByName ('color') +", rubrik: 'Färg', title: "+ rows.fieldByName ('qty') +", rubrik: 'Quantity']; var tableview = Ti.UI.createTableView (data: data); currentWin.add (Tableview); Vad som häller ovan är samma sak som vi har gjort på de föregående sidorna, vi lyssnar bara inte på en åtgärd och fyller själva uppställningen istället för att använda en funktion. På så sätt kan vi märka informationen med en radhuvud och beställa innehållet hur vi vill att det ska visas.
Allt som behövde göras var att skapa en enskild rad i arrayen med våra databas kolumnnamn.
Det verkar som mycket arbete i början, men resultatet är väl värt det. Det bästa är att när koden är färdig i de två första produktfilerna behöver den aldrig tas i kontakt. Funktionen setData () vågar utan hjälp. Samma kod kommer att fungera oavsett om databasen har en rad eller femtiofem!
