Share
In diesem Lernprogramm werden Sie mit SQLite und der datenbankgestützten Entwicklung mit Titanium Mobile vertraut gemacht. Insbesondere lernen Sie, eine Anwendung zum Verwalten von Produkten mit einer Datenbank und nicht nur mit dem Dateisystem zu erstellen.
Es ist nicht logisch sinnvoll, eine einzelne Datei für ein Produkt verwalten zu müssen. Vor allem, wenn ein großer Produktkatalog gepflegt werden muss. Hier ist ein Beispiel.
Die Ordner und Dateien auf der linken Seite sehen aus, wie unser Projekt am Ende aussehen wird. Nur ein paar Dateien in einem Ordner und einer Datenbankdatei. Auf der rechten Seite befindet sich ein außer Kontrolle geratenes Verzeichnis. Ich denke, dieses Image sollte Motivation genug sein. Zu den weiteren Vorteilen zählt der reduzierte Footprint der App.
Wir benötigen Titanium Mobile, einen guten Texteditor (jeder, mit dem Sie sich auskennen, wird arbeiten) und einen SQLite-Datenbankmanager. Hier sind die zwei SQLite-Manager, die ich verwende:
Beides sind großartige Optionen. Ich mag SQLite Manager wirklich, aber ich persönlich mag es nicht, dass es als Firefox-Plugin und nicht als eigenständige Anwendung ausgeführt wird. Der SQLite-Datenbankbrowser sieht nicht so aus, als könnte er als eigenständige Anwendung ausgeführt werden. Aus diesem Grund neige ich dazu, SQLite Database Browser zu verwenden.
Öffnen Sie Titanium Developer und erstellen Sie ein neues Projekt. Wählen Handy, Mobiltelefon und füllen Sie alle erforderlichen Informationen aus. Titan-Entwickler erkennt automatisch, ob das iPhone-SDK und das Android-SDK ordnungsgemäß installiert sind. Dann klick Projekt erstellen.
Öffnen Sie das gewünschte Programm und klicken Sie auf Neue Datenbank. Benennen Sie die Datenbank "products.sqlite". Anwendungs-, Datenbank- und Dateinamen spielen keine Rolle. Denken Sie einfach daran, was Sie verwenden. Speichern Sie die Datei im Ressourcenordner, den Titanium Developer erstellt hat. Füllen Sie die Datenbank mit Ihren Produktinformationen aus. Stellen Sie sicher, dass Sie auf Speichern klicken.
Öffnen Sie die Resources / app.js-Datei der App (wenn Sie zuvor noch nicht mit Titanium Developer gearbeitet haben, ist "app.js" die Hauptdatei für Ihre Anwendung.).
Entfernen Sie den gesamten vorhandenen Code.
Der Einfachheit halber möchte ich alle Dateien für Produkte in einem einzigen Ordner aufbewahren. Gehen wir zum Ressourcen-Ordner und erstellen Sie einen Ordner mit dem Namen "Produkte". Wir speichern unsere anderen Dateien hier.
Zurück in app.js möchten wir eine Registerkartengruppe erstellen, da es später einfacher ist, weitere Registerkarten und Inhalte hinzuzufügen. Legen Sie die Fensterbeschriftung fest, lassen Sie die Produktdatei dieses Fenster öffnen, und fügen Sie das Fenster unserer aktuellen Ansicht hinzu. Sie benötigen ein Bild für Ihr Tab-Bild. Ich habe ein Bild von den Registerkarten in der KitchenSink-App kopiert, dem Showcase-Demoprojekt, das von Appcelerator bereitgestellt wird, um alle ihre Funktionen zu präsentieren.
// Tab-Gruppe erstellen var tabGroup = Ti.UI.createTabGroup (); // Hauptfenster erstellen var main = Ti.UI.createWindow (title: 'Product Categories', URL: 'products / product_category.js'); // craete main tab var tab = Ti.UI.createTab (icon: 'images / tabs / KS_nav_ui.png', Titel: 'Products', window: main); // füge die Registerkarte zur Tab-Gruppe hinzu tabGroup.addTab (tab); // offene Tab-Gruppe tabGroup.open ();
Wir müssen den Code in app.js nicht erneut berühren, sodass Sie ihn schließen können, wenn Sie möchten.
Erstellen Sie in unserem Produktordner eine neue JavaScript-Datei mit dem Namen product_category.js. Das Wichtigste an dieser Seite ist, dass sie beim ersten Start unserer Anwendung zuerst geladen wird. Das bedeutet, dass wir den Großteil unseres Codes in dieser Datei enthalten werden. Das Tolle ist, dass dieser Code mit nur wenigen Änderungen für unsere nächste Datei wiederverwendet wird.
Bevor wir diese Seite kodieren, sollten wir uns überlegen, was passieren muss. Die Seite muss eine Datenbank öffnen, die Kategoriespalte lesen und die Ergebnisse in einer Tabellensicht anzeigen. Um die Datenbankergebnisse an die tableView anzuhängen, müssen Sie ein Array erstellen und die Daten in das Array verschieben. Dies erreichen Sie am besten, indem Sie eine Funktion erstellen. Auf diese Weise müssen wir nicht vorab wissen, wie viele Zeilen in der Datenbank gelesen werden müssen. Wir lassen die Funktion einfach durch die Datenbank iterieren, bis alle aktiven Zeilen gelesen werden.
Wir müssen auch einen EventListener erstellen, wenn auf eine der Zeilen geklickt wird. Beginnen wir damit, alles außer der Funktion und dem EventListener zusammen zu bekommen.
Accentsconagua
// var für das currentWindow erstellen var currentWin = Ti.UI.currentWindow; // Setze die Daten aus der Datenbank auf das Array function setData () ** FUNCTION HERE **; // Erzeuge Tabellenansicht var tableview = Ti.UI.createTableView (); tableview.addEventListener ('click', Funktion (e) ** EVENTLISTENER HERE **); // füge die tableView zum aktuellen Fenster hinzu currentWin.add (tableview); // Die setData-Funktion aufrufen, um die Datenbankergebnisse an das Array anzuhängen. setData (); Das ist alles ziemlich einfach. Nun die Funktion setData (). Stellen Sie zunächst eine Verbindung zur Datenbank her und fragen Sie nach der Kategorie. Um Duplikate zu entfernen und nur eine Zeile für jede Kategorie zurückzugeben, verwenden wir den DISTINCT-SQL-Befehl.
var db = Ti.Database.install ('… /products.sqlite', 'products'); var Zeilen = db.execute ('SELECT DISTINCT Kategorie FROM Produkte'); Erstellen Sie das Array und verwenden Sie a während Anweisung zum Durchlaufen der Datenbank. Fragen Sie die Datenbank nach dem Feldnamen "category" ab, und legen Sie den Zeilentitel fest. (Titanium Developer verwendet "fieldByName", um aus der definierten Spalte in einer Datenbank zu lesen. Er wird in Verbindung mit unserer Abfrage verwendet, um unseren Inhalt auszuwählen.) Geben Sie an, dass ein untergeordnetes Element vorhanden ist, und legen Sie den Pfad zur nächsten Datei fest.
var dataArray = []; while (rows.isValidRow ()) dataArray.push (title: "+ rows.fieldByName ('category') +") hasChild: true, Pfad: '… /products/products.js'); Zeilen.next (); ; Zum Schluss hängen Sie das Array an unsere tableView an.
tableview.setData (dataArray);
Nun müssen wir den EventListener erstellen, um die nächste Seite zu öffnen. Eine Sache, die wir auch hier tun müssen, ist, die Variablen an die nächste Datei zu übergeben. Dies wird verwendet, um die nächste SQL-Abfrage zu erstellen und den Fenstertitel festzulegen. Wir werden auch den Rückruf vom Listener auf den Pfad zur nächsten Datei setzen, obwohl es statisch ist.
tableview.addEventListener ('click', Funktion (e) if (e.rowData.path) var win = Ti.UI.createWindow (url: e.rowData.path, Titel: e.rowData.title); var prodCat = e.rowData.title; win.prodCat = prodCat; Ti.UI.currentTab.open (win);; Der Listener fängt den Klick ab und erstellt ein neues Fenster. Dieses neue Fenster öffnet die nächste Datei und setzt den Titel des neuen Fensters auf den Inhalt der Zeile. In unserem Fall handelt es sich um die Produktkategorie. Wir erstellen dann eine Variable aus dem Zeileninhalt und übergeben sie an das neue Fenster, wobei die var benannt wird. Zuletzt öffnet der Listener die neue Registerkartengruppe, die die nächste Seite ist.
Die Datei "product_category.js" zeigt Folgendes:
Wählen Sie den gesamten Code in der Datei "product_category.js" aus und klicken Sie auf "Kopieren". Erstellen Sie eine neue JavaScript-Datei mit dem Namen "products.js" und fügen Sie den Code ein. Wir müssen nur einige Änderungen vornehmen und die für diese Seite übergebene Variable hinzufügen.
Fügen Sie in unserer Funktion unter unserem Aufruf zum Öffnen der Datenbank den folgenden Code hinzu, um die übergebene var herauszufinden.
var prodCat = Ti.UI.currentWindow.prodCat;
Jetzt müssen wir unsere Abfrage in die Datenbank ändern und unsere neue Variable verwenden. Wir möchten nun die Produktnamen aus unserer zuvor ausgewählten Kategorie lesen und diese Produkte anzeigen.
var Zeilen = db.execute ('SELECT * FROM Produkte WHERE category = "' + prodCat + '' '); Ändern Sie das FeldByName in der Zeile von "Kategorie" in "Name" und den Pfad zur nächsten Datei.
dataArray.push (title: "+ rows.fieldByName ('name') +", hasChild: true, Pfad: '… /products/product_specs.js'); Das Letzte, was Sie zum Abschließen dieser Seite benötigen, ist das Ändern der übergebenen var im EventListener. Ändern Sie es, um den Produktnamen zu übergeben, und verwenden Sie einen sinnvollen Variablennamen.
var prodName = e.rowData.title; win.prodName = Produktname;
Erledigt. So sieht "products.js" aus:
Dies ist die letzte Datei, die wir für dieses Tutorial erstellen müssen. Ziel dieser Seite ist es, den Inhalt der Zeile für das einzelne Produkt anzuzeigen. Schauen wir uns den gesamten Code an und brechen ihn dann auf.
// var für das currentWindow erstellen var currentWin = Ti.UI.currentWindow; var db = Ti.Database.install ('… /products.sqlite', 'productSpecs'); var prodName = Ti.UI.currentWindow.prodName; var Zeilen = db.execute ('SELECT * FROM Produkte WHERE Name = "' + Produktname + '' '); var data = [title: "+ rows.fieldByName ('width') +", Kopfzeile: 'width', title: "+ rows.fieldByName ('height') +", Kopfzeile: 'height', title: "+ rows.fieldByName ('color') +", Kopfzeile: 'Color', title: "+ rows.fieldByName ('qty') +", Kopfzeile: 'Quantity']; var tableview = Ti.UI.createTableView (data: data); currentWin.add (tableview); Was oben passiert, ist dasselbe, was wir auf den vorherigen Seiten getan haben. Wir hören einfach nicht auf eine Aktion und füllen das Array selbst aus, anstatt eine Funktion zu verwenden. Auf diese Weise können wir die Informationen mit einem Zeilenheader kennzeichnen und den Inhalt so anordnen, wie er angezeigt werden soll.
Es musste lediglich eine einzelne Zeile im Array mit den Datenbankspaltennamen erstellt werden.
Das scheint anfangs viel Arbeit zu sein, aber das Ergebnis ist es wert. Das Beste ist, dass der Code, sobald er in den ersten beiden Produktdateien vollständig ist, nie mehr berührt werden muss. Die setData () - Funktion skaliert ohne Hilfe. Derselbe Code funktioniert unabhängig davon, ob die Datenbank eine oder dreiundfünfzig Zeilen hat!
