Share
In dieser Tutorial-Serie werde ich Ihnen zeigen, wie Sie mit Raphael JS, Titanium Mobile und YQL-Webdienst von Yahoo eine Aktienanwendung erstellen. Raphael JS-Diagramme werden zur grafischen Darstellung der Aktienkursinformationen verwendet, Titanium Mobile zum Kompilieren einer nativen iOS-App und YQL-Datentabellen rufen tatsächlich die Aktieninformationen ab.
YQL ist eine SQL-ähnliche Sprache, mit der Sie Daten aus mehreren Quellen abfragen, filtern und kombinieren können. Netzwerk und andere offene Datenquellen. Normalerweise ist der Zugriff von Entwicklern auf Daten aus mehreren Ressourcen unterschiedlich und erfordert Aufrufe an mehrere APIs von verschiedenen Anbietern, häufig mit unterschiedlichen Feedformaten. YQL eliminiert dieses Problem, indem ein einzelner Endpunkt bereitgestellt wird, um die angeforderten Daten abzufragen und zu gestalten. In diesem Lernprogramm verwenden wir die von Yahoo Finance bereitgestellten offenen YQL-Datentabellen, um Aktienkursinformationen abzurufen und darzustellen.
Bei dieser Darstellung dieser Informationen kommen die Diagramme von Raphael JS zum Einsatz. Diagramme und Grafiken stellen die einfachste und logischste Art dar, einen Zeitplan für Finanzdaten darzustellen, und Titanium Mobile verfügt nicht über eine native Diagramm-API. Raphael ist Open-Source- und MIT-lizenziert und zum Glück sehr mobilfreundlich, da es in Standard-JavaScript geschrieben ist, einen geringen Verarbeitungsaufwand hat und tatsächlich im SVG-Format wiedergegeben wird, was bedeutet, dass es problemlos an jeden Bildschirm angepasst werden kann eine Abnahme der Bildqualität!
Das Folgende ist eine Vorschau der Anwendung, die wir in dieser Serie erstellen werden:
Öffnen Sie Titanium Developer und erstellen Sie ein neues Projekt. Sie können dem Projekt einen beliebigen Namen geben, aber der Einfachheit halber verwende ich den Titel "StockQuotes". Jetzt ist es an der Zeit, auch die Quelldateien für dieses Projekt herunterzuladen. Laden Sie die an diesen Beitrag angehängten Projektdateien herunter, entpacken Sie sie und kopieren Sie den Ordner "images" in das Verzeichnis "Resources" Ihres neuen Titanium-Projekts. Standardmäßig enthält Titanium auch zwei Symboldateien im Stammverzeichnis Ihres "Resources" -Verzeichnisses KS_nav_ui.png und KS_nav_views.png - Wir brauchen auch nicht, also begeben Sie sich in den Müll.
Öffnen Sie die Datei app.js im Stammverzeichnis Ihres "Resources" -Verzeichnisses in Ihrem bevorzugten Editor. Wir benötigen keinen automatisch generierten Code. Löschen Sie den gesamten Code und ersetzen Sie ihn durch Folgendes:
Accentsconagua
// Hiermit wird die Hintergrundfarbe des Masters festgelegt. UIView Titanium.UI.setBackgroundColor ('# 000'); // Das Anwendungsfenster erstellen var win1 = Titanium.UI.createWindow (backgroundImage: 'images / background.png'); // Erstelle das Titeletikett für unsere App var titleLabel = Titanium.UI.createLabel (text: 'Search Quotes', Farbe: '#fff', Höhe: 20, Breite: 320, top: 6, textAlign: 'center' , font: fontSize: 15, fontFamily: 'Helvetica', fontWeight: 'fett'); win1.add (titleLabel); // Erzeuge den Bildlaufbereich, alle Inhalte gehen hier hinein var varAreaArea = Titanium.UI.createScrollView (top: 40, width: 320, height: 420, contentHeight: 'auto'); // Das Suchfeld für die Aktienkurse erstellen var searchBox = Titanium.UI.createView (width: 300, left: 10, top: 10, height: 50, borderRadius: 5, backgroundImage: 'images / gradient-small.png') ); scrollArea.add (searchBox); // Erzeuge das Angebotsinformationsfeld var quoteInfoBox = Titanium.UI.createView (Breite: 300, links: 10, oben: 70, Höhe: 200, borderRadius: 5, backgroundImage: 'images / gradient.png'); scrollArea.add (quoteInfoBox); // Erstellen Sie das Zitatdiagramm-Feld var quoteChartBox = Titanium.UI.createView (Breite: 300, links: 10, Oberseite: 280, Höhe: 300, borderRadius: 5, backgroundImage: 'images / gradient.png'); scrollArea.add (quoteChartBox); // Diese kleine Ansicht fügt der Unterseite von // unserer Bildlaufansicht (scrollArea) nur 10 Pixel hinzu. Var emptyView = Titanium.UI.createView (height: 10, top: 580); scrollArea.add (emptyView); // Füge den Scrollview zum Fenster hinzu win1.add (scrollArea); // Öffne das Fenster win1.open (); Was wir oben gemacht haben, ist eine einfache, schön gestaltete Hülle für unsere Anwendung. Oben gibt es ein Feld zum Erstellen eines Suchfelds und zwei weitere leere Felder, in denen unsere Aktieninformationen und unser Chart platziert werden. All dies wurde zu einem ScrollView hinzugefügt, sodass wir unsere App problemlos scrollen können, um alle Informationen anzuzeigen, die außerhalb der Bildschirmgrenzen verborgen sind. Führen Sie Ihre App im iPhone-Emulator aus. Die folgende Abbildung sollte nun aussehen:
Der nächste Schritt besteht darin, das Textfeld und die Suchschaltfläche zu erstellen, die der Benutzer zur Interaktion mit unserer Anwendung verwenden wird, indem ein Aktiensymbol (z. B. APPL für Apple Computer) zur Suche bereitgestellt wird. Geben Sie den folgenden Code vor der Zeile ein, in der Sie Ihr hinzugefügt haben Suchbox Einwände gegen die scrollArea (Zeile 39).
// Dies ist das Eingabetextfeld für unseren Bestandscode var txtStockCode = Titanium.UI.createTextField (hintText: 'Bestandscode, z. B. APPL', borderWidth: 0, width: 200, left: 10, height: 30, font: fontSize: 14, fontColor: '# 262626', fontFamily: 'Helvetica', autoCorrect: false, Autokapitalisierung: Titanium.UI.TEXT_AUTOCAPITALIZATION_ALL); searchBox.add (txtStockCode); // Erzeuge die Suchschaltfläche aus unserem search.png image var btnSearch = Titanium.UI.createButton (backgroundImage: 'images / search.png', Breite: 80, Höhe: 30, rechts: 10, borderRadius: 3); // Füge den Event Listener für diese Schaltfläche hinzu. BtnSearch.addEventListener ('click', searchYQL); searchBox.add (btnSearch); Was wir oben erreicht haben, ist das Erstellen der zwei Eingabekomponenten, die für den Benutzer erforderlich sind, um Daten einzugeben (in diesem Fall ein Aktienkurs), und eine auf dieser Eingabe basierende Aktion durch Antippen der Suchschaltfläche auszuführen. Wenn Sie es noch nicht bemerkt hätten, unser btnSearch Das Schaltflächenobjekt verfügt über einen Ereignis-Listener, der ausgelöst wird, wenn der Benutzer darauf tippt und eine Funktion mit dem Namen aufgerufen wird searchYQL. Wenn Sie die App jetzt im Emulator ausführen, wird am Ende ein großer roter Fehlerbildschirm angezeigt, da diese Funktion noch nicht erstellt wurde. Lass uns das jetzt machen.
Geben Sie im Folgenden oben in Ihrer app.js-Datei nach dem ein Titanium.UI.setBackgroundColor Linie:
// Diese Funktion wird beim Antippen der Suchschaltfläche aufgerufen. YQL wird für unsere Aktiendatenfunktion searchYQL () abgefragt.
Wenn Sie dies noch nicht getan haben, speichern Sie Ihre app.js Datei und führen Sie es im Emulator aus. Sie sollten einen Bildschirm ähnlich dem folgenden sehen:
Bevor wir nun in YQL nach Informationen zu unseren Beständen suchen, müssen wir einige Etiketten und Bilder erstellen, die in unseren Bestand aufgenommen werden quoteInfoBox und präsentieren die Informationen dem Benutzer. Dies ist ein ziemlich einfacher Prozess. Der folgende Code sollte vor dem Hinzufügen von eingefügt werden quoteInfoBox zum scrollArea in Zeile 93.
// Fügen Sie die Beschriftungen und Bilder hinzu, die einige grundlegende Bestandsinformationen enthalten sollen. Var lblCompanyName = Titanium.UI.createLabel (width: 280, height: 30, left: 10, top: 10, color: '# 003366', font: fontSize: 17, fontWeight: 'fett', fontFamily: 'Helvetica', Text: 'Kein Unternehmen ausgewählt'); quoteInfoBox.add (lblCompanyName); var lblDaysLow = Titanium.UI.createLabel (width: 280, height: 20, left: 10, top: 50, Farbe: '# 000', Schriftart: fontSize: 14, fontWeight: 'fett', fontFamily: 'Helvetica ', Text:' Days Low: '); quoteInfoBox.add (lblDaysLow); var lblDaysHigh = Titanium.UI.createLabel (width: 280, height: 20, left: 10, top: 80, Farbe: '# 000', Schriftart: fontSize: 14, fontWeight: 'fett', fontFamily: 'Helvetica ', Text:' Days High: '); quoteInfoBox.add (lblDaysHigh); var lblLastOpen = Titanium.UI.createLabel (width: 280, height: 20, left: 10, top: 110, Farbe: '# 000', Schriftart: fontSize: 14, fontWeight: 'fett', fontFamily: 'Helvetica ', Text:' Last Open: '); quoteInfoBox.add (lblLastOpen); var lblLastClose = Titanium.UI.createLabel (width: 280, height: 20, left: 10, top: 140, Farbe: '# 000', Schriftart: fontSize: 14, fontWeight: 'fett', fontFamily: 'Helvetica ', Text:' Last Close: '); quoteInfoBox.add (lblLastClose); var lblVolume = Titanium.UI.createLabel (width: 280, height: 20, left: 10, top: 170, Farbe: '# 000', Schriftart: fontSize: 14, fontWeight: 'fett', fontFamily: 'Helvetica ', Text:' Volume: '); quoteInfoBox.add (lblVolume);
Nachdem Sie Ihre Beschriftungen und den Pfeil für unser Bestandsbewegungsbild hinzugefügt haben, sollten Sie in der Lage sein, den Emulator auszuführen und einen Bildschirm wie diesen zu erhalten:
Lassen Sie uns nun etwas Nützliches mit diesem Layout tun und es mit Bestandsdaten von Yahoo! füllen. Dazu müssen wir unsere Leere erweitern searchYQL () Funktion und Durchsuchen der Yahoo YQL-Finanzdatentabellen mithilfe einer Kombination aus YQL-Syntax und Titanium Titan.Yahoo.yql () Methode.
// Diese Funktion wird beim Antippen der Suchtaste aufgerufen. YQL wird nach unserer Bestandsdatenfunktion searchYQL () // abgefragt. // Durch einige grundlegende Validierung wird sichergestellt, dass der Benutzer einen Bestandscode eingegeben hat, wenn (txtStockCode.value! = ") TxtStockCode.blur (); // die Tastatur verborgen ist // Erstellen Sie die Abfragezeichenfolge mit einer Kombination aus YQL-Syntax und dem Wert des Felds "txtStockCode". Var query = 'select * aus yahoo.finance.quotes wobei symbol = "' + txtStockCode.value + '' '; // Ausführen der Abfrage und erhalten Sie die Ergebnisse Titanium.Yahoo.yql (Abfrage, Funktion (e) var data = e.data; // Iff ErrorIndicationreturnedforsymbolchangedinvalid ist null. Dann haben wir einen gültigen Bestand gefunden, wenn (data.quote.ErrorIndicationreturnedforsymbolchangedinvalid == null) // Wir haben einige Daten! Lass uns unsere Labels usw. zuweisen. lblCompanyName.text = data.quote.Name; lblDaysLow.text = 'Days Low:' + data.quote.DaysLow; lblDaysHigh.text = 'Days High:' + data. quote.DaysHigh; lblLastOpen.text = 'Last Open:' + data.quote.Open; lblLastClose.text = 'Last Close:' + data.quote.PreviousClose; lblVolume.text = 'Volume:' + data.quote.Volume; lblPercentChange.text = data.quote.PercentChange; // Wenn der vorherige Schlusskurs gleich oder höher als der Eröffnungskurs war, ist die // Aktienrichtung oben? sonst ging es runter! if (data.quote.PreviousClose> = data.quote.Open) imgStockDirection.image = 'images / arrow-up.png'; else imgStockDirection.image = 'images / arrow-down.png'; else // Zeigt einen Alertdialog an, der besagt, dass nichts gefunden wurde. alert ('Für' + txtStockCode.value + 'wurden keine Bestandsinformationen gefunden!); ); else alert ('Sie müssen einen Bestandscode angeben, nach dem gesucht werden soll, beispielsweise AAPL oder YHOO'); Also, was ist hier eigentlich los in der searchYQL () Funktion? Erstens führen wir eine sehr grundlegende Validierung des Textfelds durch, um sicherzustellen, dass der Benutzer ein Aktienkurs eingegeben hat, bevor Sie auf Suchen klicken. Wenn ein Aktienkurs gefunden wird, verwenden wir die verwischen() Methode des Textfelds, um sicherzustellen, dass die Tastatur ausgeblendet wird. Das Kernstück des Codes besteht darin, eine Yahoo YQL-Abfrage mit der richtigen Syntax zu erstellen und den Textfeldwert als Symbolparameter bereitzustellen. Diese YQL-Abfrage ist einfach eine Zeichenfolge, die mithilfe des + -Symbols zusammengefügt wird, ähnlich wie bei jeder anderen Zeichenfolgenmanipulation in JavaScript. Wir führen dann unsere Abfrage mit der Titan.Yahoo.yql () Diese Methode gibt die Ergebnisse innerhalb des 'e'-Objekts der Inline-Funktion zurück.
Die Daten innerhalb des "e" -Objekts sind einfach JSON, ein allgemeines, schnelles Datenformat, das im Web und mit allen wichtigen APIs allgegenwärtig wird. Die Verwendung dieser Daten ist eine Frage der einfachen Punktnotation. In unserem Code überprüfen wir zuerst die aufgerufene Eigenschaft data.quote.ErrorIndicationreturnedsymbolsangeändert ungültig Um sicherzustellen, dass das vom Benutzer eingegebene Symbol eine gültige Bestandsnummer ist. Wenn ja, können wir unseren Etiketten dann alle Werte zuweisen! Als letztes überprüfen wir, ob der Aktienkurs höher geschlossen wurde, als er sich öffnete. Wenn dies der Fall ist, können wir das Bild der Aktienbewegung auf einen grünen Pfeil nach oben setzen, um anzuzeigen, dass der Wert gestiegen ist. Wenn der Wert gefallen ist, können Sie das Bild auf einen roten Pfeil nach unten verschieben.
Führen Sie den Code in Ihrem Emulator aus und geben Sie einen Code wie AAPL ein. Nach dem Drücken der Suchtaste sollten Sie den folgenden Bildschirm mit ähnlichen Daten erhalten:
Im nächsten Tutorial dieser Serie, das nächste Woche veröffentlicht wird, gehe ich Sie durch das Einrichten der Raphael JS-Chartbibliothek, das Einrichten einer Webansicht zum Anzeigen des Diagramms, das Sammeln historischer Bestandsdaten mit YQL und natürlich tatsächlich eine grafische Darstellung für den Benutzer auf dem Bildschirm! Abonnieren Sie unbedingt RSS oder Twitter, wenn Sie benachrichtigt werden möchten, wenn der nächste Beitrag veröffentlicht wird!
