Share
Deze tutorial zal je kennis laten maken met SQLite en database-gestuurde ontwikkeling met Titanium Mobile. Concreet leer je een applicatie te bouwen voor het beheren van producten met een database in plaats van alleen het bestandssysteem.
Het is niet logisch om een individueel bestand voor een product te beheren. Vooral als er een grote productcatalogus is om te onderhouden. Hier is een voorbeeld.
De mappen en bestanden aan de linkerkant is hoe ons project aan het einde zal zien. Slechts een paar bestanden in een map en een databasebestand. Aan de rechterkant is een uit controle, intimiderend, directory. Ik vind dat dit beeld voldoende motivatie moet zijn. Een van de andere voordelen is de verminderde app-footprint.
We hebben Titanium Mobile nodig, een goede teksteditor (iedereen waar je je comfortabel bij voelt werken) en een SQLite-databasebeheerder. Dit zijn de twee SQLite-managers die ik gebruik:
Beide zijn geweldige opties. Ik vind SQLite Manager erg leuk, maar persoonlijk vind ik het niet leuk dat het wordt uitgevoerd als een Firefox-plug-in in plaats van als een zelfstandige toepassing. SQLite Database Browser ziet er niet zo gepolijst uit, maar kan worden uitgevoerd als een zelfstandige toepassing. Vanwege dit, heb ik de neiging om SQLite Database Browser te gebruiken.
Open Titanium Developer en maak een nieuw project. Kiezen mobiel en vul alle vereiste informatie in. Titaniumontwikkelaar detecteert automatisch of de iPhone SDK en Android SDK correct zijn geïnstalleerd. Dan klikken Maak een project.
Open het programma dat u kiest en klik op Nieuwe database. Geef de database de naam "products.sqlite". Toepassings-, database- en bestandsnamen doen er niet toe. Onthoud gewoon wat je gebruikt. Sla het bestand op in de map Resources die Titanium Developer heeft gemaakt. Vul de database in met uw productinformatie. Zorg ervoor dat je op Opslaan klikt.
Open het bestand Resources / app.js van de app (als u nog niet eerder met Titanium Developer hebt gewerkt, is "app.js" het hoofdbestand voor uw toepassing).
Verwijder alle bestaande code.
Met eenvoud in gedachten wil ik alle bestanden voor producten in één map bewaren. Laten we naar de map Resources gaan en een map maken met de naam "producten". We zullen onze andere bestanden hier opslaan.
Terug in app.js willen we een tabgroep maken, omdat u zo later gemakkelijker meer tabbladen en inhoud kunt toevoegen. Stel het vensterlabel in, laat dat venster ons productenbestand openen en voeg het venster toe aan onze huidige weergave. U heeft een afbeelding nodig voor uw tabbladafbeelding. Ik heb een afbeelding gekopieerd van de tabbladen in de KitchenSink-app, het showcase-demoproject van Appcelerator om al hun functies te presenteren.
// maak tabgroep var tabGroup = Ti.UI.createTabGroup (); // maak hoofdvenster var main = Ti.UI.createWindow (title: 'Product Categories', url: 'products / product_category.js'); // craete hoofdtabblad var tab = Ti.UI.createTab (icon: 'images / tabs / KS_nav_ui.png', title: 'Products', window: main); // voeg het tabblad toe aan de tabbladgroep tabGroup.addTab (tab); // open tabblad groep tabGroup.open ();
We hoeven de code niet opnieuw in app.js aan te raken, dus u kunt doorgaan en sluiten als u dat wilt.
Maak een nieuw JavaScript-bestand in onze productmap met de naam product_category.js. Het belangrijkste om in gedachten te houden met deze pagina is dat deze de eerste is die wordt geladen wanneer onze applicatie aanvankelijk wordt gestart. Dat betekent dat we het grootste deel van onze code in dit bestand zullen hebben. Het mooie is dat deze code zal worden hergebruikt voor ons volgende bestand, met slechts een paar wijzigingen.
Voordat we deze pagina coderen, moeten we nadenken over wat er moet gebeuren. De pagina moet een database openen, de categoriekolom lezen en de resultaten weergeven in een tabelweergave. Om de databaseresultaten aan de tabelView te koppelen, moeten we een array maken en de gegevens ernaar pushen. De beste manier om dit te doen is door een functie te maken. Op deze manier hoeven we niet van tevoren te weten hoeveel rijen in de database moeten worden gelezen. We laten de functie gewoon door de database herhalen totdat alle actieve rijen worden gelezen.
We moeten ook een EventListener maken voor wanneer op een van de rijen wordt geklikt. Laten we beginnen alles samen te krijgen, behalve de functie en EventListener.
Accentsconagua
// maak var voor de currentWindow var currentWin = Ti.UI.currentWindow; // stel de gegevens uit de database in op de array-functie setData () ** FUNCTIE HIER **; // maak een tabelweergave var tableview = Ti.UI.createTableView (); tableview.addEventListener ('klik', functie (e) ** EVENTLISTENER HIER **); // voeg de tabelweergave toe aan het huidige venster currentWin.add (tableview); // de setData-functie aanroepen om de databaseresultaten aan de array setData () te koppelen; Dit is allemaal vrij eenvoudig. Nu de functie setData (). Begin met het maken van verbinding met de database en vraag ernaar voor de categorie. Als u duplicaten wilt verwijderen en slechts één rij voor elke categorie wilt retourneren, gebruiken we de opdracht DISTINCT SQL.
var db = Ti.Database.install ('... /products.sqlite','products'); var rows = db.execute ('SELECT DISTINCT category FROM products'); Maak de array en gebruik a terwijl statement om door de database te herhalen. Zoek in de database naar de veldnaam "categorie" en stel die in op de rijtitel. (Titanium Developer gebruikt "fieldByName" om uit de gedefinieerde kolom in een database te lezen en wordt gebruikt in combinatie met onze vraag om onze inhoud te selecteren.) Specificeer dat er een onderliggende element is en stel het pad naar het volgende bestand in.
var dataArray = []; while (rows.isValidRow ()) dataArray.push (title: "+ rows.fieldByName ('category') +", hasChild: true, path: '... /products/products.js'); rows.next (); ; Bevestig ten slotte de array aan onze tableView.
tableview.setData (dataArray);
Nu moeten we de EventListener maken om de volgende pagina te openen. Een ding dat we hier ook moeten doen is om de variabelen door te geven aan het volgende bestand. Dit wordt gebruikt om de volgende SQL-query te maken en de venstertitel in te stellen. We zullen ook het terugbellen van de luisteraar naar het pad naar het volgende bestand instellen, ook al is dit statisch.
tableview.addEventListener ('klik', functie (e) if (e.rowData.path) var win = Ti.UI.createWindow (url: e.rowData.path, title: e.rowData.title); var prodCat = e.rowData.title; win.prodCat = prodCat; Ti.UI.currentTab.open (win);); De luisteraar vangt de klik op en maakt vervolgens een nieuw venster. Dit nieuwe venster opent het volgende bestand en stelt de titel van het nieuwe venster in op de inhoud van de rij. In ons geval is dit de categorie van het product. Vervolgens maken we een variabele uit de rij-inhoud en geven deze door aan het nieuwe venster, met een naam voor de var. Ten slotte opent de luisteraar de nieuwe tabbladgroep, wat de volgende pagina is.
Dit is wat het bestand "product_category.js" laat zien:
Selecteer alle code in het bestand "product_category.js" en klik op kopiëren. Maak een nieuw JavaScript-bestand met de naam "products.js" en plak de code. We hoeven slechts enkele wijzigingen aan te brengen en de variabele die we hebben doorgegeven aan deze pagina toe te voegen om te werken.
Binnen onze functie, onder onze oproep om de database te openen, voegt u de volgende code toe, waarmee u verouderde var.
var prodCat = Ti.UI.currentWindow.prodCat;
Nu moeten we onze vraag in de database veranderen en onze nieuwe variabele gebruiken. We willen nu de productnamen van onze eerder geselecteerde categorie lezen en die producten weergeven.
var rows = db.execute ('SELECT * FROM producten WHERE category = "' + prodCat + '"'); Wijzig de fieldByName in de rij van "category" in "name" en het pad naar het volgende bestand.
dataArray.push (title: "+ rows.fieldByName ('name') +", hasChild: true, path: '... /products/product_specs.js'); Het laatste dat u nodig hebt om deze pagina te voltooien, is om de doorgegeven var in de EventListener te wijzigen. Verander het om de productnaam door te geven en gebruik een var-naam die logisch is.
var prodName = e.rowData.title; win.prodName = prodName;
Gedaan. Dit is hoe "products.js" eruitziet:
Dit is het laatste bestand dat we moeten maken voor deze zelfstudie. Het doel van deze pagina is om de inhoud van de rij voor het individuele product weer te geven. Laten we eens kijken naar alle code en deze vervolgens opsplitsen.
// maak var voor de currentWindow var currentWin = Ti.UI.currentWindow; var db = Ti.Database.install ('... /products.sqlite','productSpecs'); var prodName = Ti.UI.currentWindow.prodName; var rows = db.execute ('SELECT * FROM producten WHERE name = "' + prodName + '"'); var data = [title: "+ rows.fieldByName ('width') +", header: 'Width', title: "+ rows.fieldByName ('height') +", header: 'Height', title: "+ rows.fieldByName ('color') +", header: 'Color', title: "+ rows.fieldByName ('qty') +", header: 'Quantity']; var tableview = Ti.UI.createTableView (data: data); currentWin.add (Tableview); Wat hierboven gebeurt, is hetzelfde als wat we op de vorige pagina's hebben gedaan, we luisteren gewoon niet naar een actie en vullen de array zelf in plaats van een functie te gebruiken. Op deze manier kunnen we de informatie labelen met een rijheader en de inhoud bestellen zoals we deze willen laten weergeven.
Het enige dat gedaan moest worden, was om een individuele rij in de array te maken met behulp van onze databasekolomnamen.
Dit lijkt in het begin veel werk, maar het resultaat is het zeker waard. Het beste deel is dat als de code eenmaal is voltooid in de eerste twee productbestanden, deze nooit hoeft te worden aangeraakt. De functie setData () schalen zonder hulp. Dezelfde code werkt ongeacht of de database één rij of drieënvijftig heeft!
