Share
Willkommen zum dritten Teil unserer Serie zur datenbankgestützten Entwicklung von Titanium Mobile. Dieses Tutorial wird weiterhin auf den in früheren Beiträgen eingeführten Prinzipien aufbauen, aber wir werden unser App-Design auf eine sehr wichtige Weise verändern. Anstatt ein TableView-Objekt zum Anzeigen einer benutzerdefinierten Schnittstelle zu verwenden, wechseln wir zur Verwendung eines WebView-Objekts. Der Grund dafür ist, dass das WebView-Objekt uns erlaubt, unsere Schnittstelle mit CSS und HTML zu steuern, TableView dagegen nicht. Für diejenigen, die aus einem Web-Entwicklungshintergrund kommen, sollten Sie sich mit diesem Ansatz wie zu Hause fühlen.
Der erste Teil dieser Serie legte den Grundstein für eine datenbankgestützte Anwendung. Im zweiten Teil wurde die Funktionalität erweitert, indem die Möglichkeit geschaffen wurde, eine entfernte Datenbank zu lesen und Werte in unsere Tabellen einzufügen. In diesem Tutorial wird der Quellcode aus den ersten beiden Teilen dieser Serie verwendet.
Öffnen Sie Titanium Developer und erstellen Sie ein neues Projekt. Wählen Handy, Mobiltelefon und füllen Sie alle erforderlichen Informationen aus. Dann klick Projekt erstellen. Kopiere das Produkte Ordner aus Ihrer vorherigen Anwendung und die products.sqlite Datenbank in das neue Ressourcenverzeichnis. Laden Sie jQuery herunter und legen Sie es auch im Ressourcenverzeichnis ab. Erstellen Sie außerdem einen neuen Ordner und benennen Sie ihn Bilder. Jetzt sollten Sie bereit sein zu gehen.
Wir werden die app.js-Datei der Einfachheit halber entpacken. Entfernen Sie alles, außer wo wir die tabGroup erstellt haben. Öffnen Sie die tabGroup und erstellen Sie unsere erste und einzige Registerkarte. Hier ist es:
var tabGroup = Ti.UI.createTabGroup (); var main = Ti.UI.createWindow (title: 'Product Categories', URL: 'products / product_category.js'); var tab = Ti.UI.createTab (icon: 'images / tabs / KS_nav_ui.png', Titel: 'Products', window: main); tabGroup.addTab (tab); tabGroup.open ();
Wenn Sie die Anwendung starten, sollte es Ihnen bekannt vorkommen:
HINWEIS: Wenn Sie Ihre Datenbank aus Teil 2 dieser Serie kopiert haben, fragen Sie sich vielleicht, warum zusätzliche Werte (die innerhalb der Anwendung hinzugefügt wurden) nicht vorhanden sind. Dies liegt daran, dass die aktive lokale Datenbank auf dem Gerät installiert ist. Unsere lokale Datei bleibt unberührt. Wenn Sie die vorherige Anwendung aus dem Simulator entfernen und neu installieren, wird Ihre Datenbank auch wieder in den ursprünglichen Zustand versetzt.
Die erste von unserer Anwendung geladene Datei ist "product_category.js". Wir werden diese Datei vollständig in Ruhe lassen. Das nächste, was wir tun können, um die Dinge sauber zu halten, ist das Löschen der Datei "product_specs.js". Wir werden ein WebView verwenden, um die Funktion dieser Datei zu ersetzen. Öffne "products.js" und lass uns hacken. Abgesehen vom eventListener müssen Sie in dieser Datei nur eines ändern. Entferne das Pfad von wo aus wir unser Array bauen:
Accentsconagua
var dataArray = []; while (rows.isValidRow ()) dataArray.push (title: "+ rows.fieldByName ('name') +", hasChild: true); Zeilen.next (); ;… Wenn wir unsere Anwendung zu diesem Zeitpunkt ausführen, schlägt dies wahrscheinlich fehl, weil wir Dateien löschen und die obigen Informationen ändern. Dies würde jedoch so aussehen:
Unser eventListener ist nun vollständig für das Ergebnis des Click-Events verantwortlich. Das erste, was wir ändern müssen, ist unsere if-Aussage. Zuvor haben wir überprüft, ob es einen Pfad gibt. Da wir den Pfad entfernt haben, müssen wir etwas anderes anhängen, um zu überprüfen. Wir müssen dies auch verwenden, um zu bestimmen, welcher Artikel ausgewählt wurde. Verwenden Sie "title". Dies ist der einzige Wert, den wir haben und einen eindeutigen Bezeichner haben. Stellen Sie sicher, dass Sie diesen Wert ändern, wenn Sie auch das Fenster erstellen.
tableview.addEventListener ('click', Funktion (e) if (e.rowData.title) var win = Ti.UI.createWindow (title: e.rowData.title, backgroundColor: "# 000");… Lassen Sie uns die nächsten Schritte durchdenken. Wir müssen ein WebView erstellen und seinen Pfad festlegen, die Datenbank basierend auf der ausgewählten Zeile abfragen (dies ist hier erforderlich, da auf Ti.Database nicht über ein WebView zugegriffen werden kann), unsere Variablen werden aus unserer Datenbankabfrage erstellt und schließlich übergeben zur WebView. Dabei ist zu beachten, dass wir dem WebView erst dann etwas übergeben können, wenn es erstellt wurde. Wir werden eine setTimeout-Funktion verwenden, um das Übergeben der Variablen zu verzögern. So sieht der Code aus:
var web = Ti.UI.createWebView (url: 'productsWebview.html'); var db2 = Ti.Database.install ('… /products.sqlite', 'products'); var specs = db2.execute ('SELECT * FROM Products WHERE name = "' + e.rowData.title + '' '); var name = specs.fieldByName ('name'); var pwidth = specs.fieldByName ('pwidth'); var pheight = specs.fieldByName ('pheight'); var pcolor = specs.fieldByName ('pcolor'); var qty = specs.fieldByName ('qty'); var stripName = removeSpaces (specs.fieldByName ('name')); function removeSpaces (strip) return strip.split ("). join ("); ; // füge das WebView zum Fenster hinzu win.add (web); // Zeitlimit erstellen - Wir möchten, dass das Fenster bereit ist, bevor das Ereignis setTimeout (function () Ti.App.fireEvent ("webPageReady", name: name, name, pwidth: pwidth, pheight, pheight, pcolor) ausgelöst wird : pcolor, qty: qty, stripName: stripName);, 500); Ti.UI.currentTab.open (win, animated: true);… Wir haben eine zweite Instanz der Datenbank erstellt (als lokale Variable innerhalb der Funktion. Wir verwenden hier den Bereich, um sicherzustellen, dass wir nichts vermischen.) Und erstellte unsere Abfrage mit den Daten aus dem ausgewählten Zeilentitelwert. Wir haben unsere individuellen Variablen für die Datenbankspaltendaten erstellt und eine zweite Variable unter Verwendung des Produktnamens erstellt. Dabei werden nur die Leerzeichen mit der Funktion "removeSpaces" entfernt. Auf diese Weise können wir mithilfe des Produktnamens in unserem WebView einen Pfad zu einem Bild erstellen.
Wir fügen dann unser WebView zu den aktuellen Fenstern hinzu. Unsere Variablen werden an das WebView übergeben und vom TI.App.fireEvent als "webPageReady" bezeichnet. Dies wird ausgelöst, sobald die angegebene Zeit von der Funktion setTimeout vergangen ist. In unserem Fall sind es 500 Millisekunden oder eine halbe Sekunde.
Wenn wir jetzt unser WebView erstellen würden, würde alles gut funktionieren. Es würde jedoch etwas geben, was einfach nicht stimmt Gefühl Recht auf den Benutzer. Das WebView würde erstellt und der Datensatz erstellt, aber es würde ungefähr eine Sekunde dauern, bis die Seite leer war oder Elemente fehlten. Es scheint, dass etwas kaputt ist. Die Benutzer haben sich daran gewöhnt, immer zu wissen, dass etwas passiert. Für Windows-Benutzer gibt es diese schöne kleine Sanduhr, OS X-Benutzer haben das rotierende Farbrad usw.
Die Benutzer haben sich daran gewöhnt, immer zu wissen, dass etwas passiert.
Für unseren Aktivitätsindikator müssen wir ein neues Fenster erstellen, den Aktivitätsindikator erstellen, die Zeitdauer für die Anzeige festlegen und dann das Fenster ausblenden. Wir müssen außerdem sicherstellen, dass das Aktivitätskennzeichen dem neuen Fenster und das neue Fenster der aktuellen Ansicht hinzugefügt werden.
var actWin = Ti.UI.createWindow (backgroundColor: '# 000', Deckkraft: 0,8); var actInd = Ti.UI.createActivityIndicator (Stil: Ti.UI.iPhone.ActivityIndicatorStyle.PLAIN); actWin.add (actInd); if (Ti.Platform.name == 'iPhone OS') actInd.show (); actInd.color = '#FFF'; actInd.message = 'Laden…'; setTimeout (function () actInd.hide ();, 1500); ; setTimeout (function () actWin.hide ();, 1500); // Füge das WebView zum Fenster win.add (web, actWin) hinzu;…
Wenn Sie den Indikator erstellen, wird der Stil so eingestellt, dass er wie der Standardindikator für das iPhone aussieht. Wir wollen dann auch so aussehen gebürtig wie möglich und lassen Sie den Benutzer wissen, was los ist. Wir verwenden eine if-Anweisung, um den Plattformtyp zu überprüfen, eine Nachricht hinzuzufügen und die Zeitdauer festzulegen, bevor das Fenster ausgeblendet wird.
Dieses Timeout ist in der if -Anweisung enthalten. Daher müssen Sie eine weitere Timeout-Funktion erstellen, um das Fenster auszublenden. In beiden Fällen setzen wir die Zeit auf 1500 Millisekunden. Beim Rückblick auf den letzten Schritt haben wir 500 Millisekunden zugelassen, bevor unsere Daten übergeben wurden. Dadurch können die Daten in einer weiteren Sekunde tatsächlich in die WebView geladen werden.
Erstellen Sie eine neue HTML-Datei mit dem Namen und dem Speicherort, den Sie beim Erstellen unserer WebView festgelegt haben. Es ist nicht notwendig, alle zu ergänzen Standard HTML-Header-Informationen Ich erkläre gerne meinen Doctype und füge das hinzu
Stichworte. Wir werden das brauchen, weil wir einige Skripte verwenden müssen.Erstellen Sie zunächst den Inhalt des Körpers. Fügen Sie mithilfe einer Tabelle die erforderliche Anzahl von Zeilen und Spalten hinzu. Für dieses Tutorial benötigen wir vier Zeilen und zwei Spalten. Die Beschriftung befindet sich in der linken Spalte und die Spezifikation in der rechten Spalte. Verwenden Sie ein Leerzeichen () in der Spezifikationszelle. So sieht unser Tisch aus:
Breite Höhe Farbe Menge
Es ist auch eine gute Idee, ein Stylesheet hinzuzufügen, damit wir die Darstellung unserer Seite anpassen können. Direkt unter dem "content" -Div wollen wir eine Form unseres eigenen Headers erstellen. Ich denke, es ist eine gute Idee, den Produktnamen anzuzeigen und ein Bild anzuzeigen. Das Wichtigste beim Erstellen unserer Tabelle ist, der Zelle, die unsere Angaben enthält, eine "ID" hinzuzufügen. Der Stilgebung halber sollten wir den ähnlichen Zellen auch eine Klasse hinzufügen.
In den vorherigen Tutorials haben wir eine Variable auf einer Seite erstellt und an das neue Fenster angehängt. Auf diese Variable wurde mit Ti.UI.currentWindow.varName zugegriffen und anschließend global für die Seite aufgerufen. Da dies eine WebView ist, können wir dies nicht tun. Wir müssen einen EventListener hinzufügen und die übergebenen Variablen abfangen.
Die Konsole in Titanium Developer protokolliert die übergebenen Variablen und Werte. Dies kann zum Debuggen sehr praktisch sein.
Im EventListener geben wir das Ereignis an, auf das wir warten (webPageReady), und deklarieren unsere Variablen mit unserem Callback.
Nachdem wir nun unsere Variablen deklariert haben, müssen wir herausfinden, wie sie auf unserer Seite verwendet werden. Wir können sie nicht aus der Funktion zurückgeben und dann die Variablen in unserer Tabelle verwenden, also müssen wir kreativ werden. Laden Sie jQuery auf Ihre Seite und verpacken Sie den aktuellen EventListener in eine document.ready-Funktion.
Verwenden Sie dann die ID für jede im vorherigen Schritt definierte Zelle und ersetzen Sie das Element mit jQuery und der korrekten Variablen.
Das letzte Element, das wir im obigen Code ersetzen, ist unsere Produktabbildvariable. Verwenden Sie die Variable aus dem Produktnamen, aus der die Leerzeichen entfernt wurden, um die Verknüpfung zum Bild herzustellen. Stellen Sie außerdem sicher, dass Sie das Verzeichnis und die Bilder für jedes Produkt erstellen. Für das Styling ist es eine gute Idee, alle Produktbilder auf dieselbe Größe zu bringen. So etwas wie 150 x 150 x 150 ist für die meisten Bildschirme eine gute Größe.
Schließlich sollten wir eine funktionierende Anwendung mit vollständigem Code haben. So sieht das WebView aus:
Sobald unsere Bilder für alle Produkte erstellt wurden, ist es sehr einfach, ein paar Standard-CSS in unserem Stylesheet zu verwenden, damit unsere Produktseiten genau so aussehen, wie wir sie haben möchten. Wenn die Informationen, die wir in unserer Anwendung anzeigen und verwenden, häufig aktualisiert werden, ist möglicherweise eine entfernte Datenbank der Weg.
