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.
Das letzte Tutorial dieser Serie führte YQL und Raphael JS als Komponenten einer Titanium Mobile-Anwendung ein und demonstrierte die Schritte, die erforderlich sind, um die Benutzeroberfläche für die Aktienquot-App zu erstellen und mit YQL nach Aktienkursen zu suchen. In diesem Lernprogramm beenden wir unsere Aktienkurs-App durch Hinzufügen von Raphael JS-Diagrammen, die historische Daten darstellen, die mit YQL gewonnen wurden.
Bevor wir mit der Implementierung eines Diagramms in unsere Stocks-App beginnen können, müssen wir zunächst die Raphael-Bibliotheken herunterladen, einschließlich der JavaScript-Dateien, die wir zum Erstellen unseres Balkendiagramms benötigen. Führen Sie dazu die folgenden Schritte aus:
Führen Sie Ihre App jetzt erneut aus. Möglicherweise werden einige Überprüfungswarnungen in der Titanium-Konsole über den Raphael-Code angezeigt. Es sollte jedoch weiterhin alles wie in Schritt 4 ausgeführt werden.
Wir werden ein WebView verwenden, um unser Diagramm auf dem Bildschirm anzuzeigen. Fügen Sie jetzt ein WebView hinzu und verweisen Sie auf eine HTML-Datei, die wir im nächsten Schritt erstellen werden. Wir werden auch ein Etikett hinzufügen, um das WebView zu beschreiben. Dieser Code sollte vor der Zeile stehen scrollArea.add (quoteChartBox);, welches nahe am Ende Ihrer Code-Datei sein wird:
// Fügen Sie die Diagrammbeschriftung und die Webansicht hinzu. Wir müssen unser Raphael-Diagramm anzeigen. Var lblChartName = Titanium.UI.createLabel (width: 280, height: 30, left: 10, top: 10, color: '# 003366', font: fontSize: 17, fontWeight: 'fett', fontFamily: 'Helvetica', Text: '12 Week Historical Chart '); quoteChartBox.add (lblChartName); var webview = Titanium.UI.createWebView (width: 280, height: 240, left: 10, top: 40, url: 'chart.html'); quoteChartBox.add (Webview); var twentyWeekStartLabel = Titanium.UI.createLabel (width: 100, left: 10, top: 285, height: 10, textAlign: 'left', Schriftart: fontSize: 9, fontFamily: 'Helvetica', Farbe: '# 000 '); quoteChartBox.add (zwölfWeekStartLabel); var twentyWeekEndLabel = Titanium.UI.createLabel (width: 100, right: 10, top: 285, height: 10, textAlign: 'right', Schriftart: fontSize: 9, fontFamily: 'Helvetica', Farbe: '# 000 '); quoteChartBox.add (twentyWeekEndLabel);
Führen Sie Ihre App im Emulator aus und Sie sollten jetzt ein leeres WebView und ein Label im dritten Feld sehen. Sie müssen zum Ende des Bildschirms blättern, um das dritte Feld in seiner Gesamtheit zu sehen.
Jetzt erstellen wir eine HTML-Datei, die alle notwendigen Raphael-Bibliotheken enthält und eine leere enthält
RaphaelJS Chart
Speichern Sie Ihre chart.html Datei in Ihrem "Resources" -Verzeichnis, falls Sie dies noch nicht getan haben. Dieser Code erstellt eine einfache HTML-Vorlage, einschließlich der zuvor heruntergeladenen Raphael-Bibliotheken, und das Erstellen eines div-Objekts chartDiv, Darin wird Raphael unser Diagramm darstellen. Mit den Skript-Tags unter diesem div erstellen wir einen Standard-Ereignislistener aus Titanium, der ausgeführt wird, wenn ein Ereignis aufgerufen wird RenderChart wird von irgendwo in Titanium abgefeuert. Diese Funktion nimmt alle übergebenen Daten und zieht sie zum Rendern in Raphael. Das r.g.barchart () Die Funktion verwendet die folgende Liste von Parametern, um das Diagramm (in Reihenfolge) zu erstellen:
Left, Top, Width, Height, Data (ein Array von einwertigen Arrays), Stilattribute. Die Hover-Funktion am Ende dieser Methode weist Raphael an, ein Einblenden, Ausblenden und Anzeigen von Spaltenwerten anzuzeigen, wenn eine Taktstrichlinie berührt wird.
Nun ist es Zeit für den letzten Schritt in unserem Tutorial: das Chart rendern! Geh in deine searchYQL Funktion und geben Sie nach Ihrem vorherigen Code zum Abrufen der Bestandsdaten Folgendes ein:
Accentsconagua
// Holen Sie sich das heutige Datum und teilen Sie dieses in Monat, Tag und Jahr auf. Var currentTime = new Date (); var month = currentTime.getMonth () + 1; var day = currentTime.getDate (); var year = currentTime.getFullYear (); // Erstellen Sie jetzt die beiden im Format jjjj-mm-tt formatierten Datumsangaben für die YQL-Abfrage var heute = year + '-' + month + '-' + day; // heute // das Datum vor 12 Wochen erhalten? 1000 Millisekunden * Sekunden in Minute * Minuten in Stunde * 2016 Stunden (12 Wochen, 12 * 7 Tage) var currentTimeMinus12Weeks = new Date ((neues Datum ()). GetTime () - (1000 * 60 * 60 * 2016)); var month2 = currentTimeMinus12Weeks.getMonth () + 1; var day2 = currentTimeMinus12Weeks.getDate (); var year2 = currentTimeMinus12Weeks.getFullYear (); var todayMinus12Weeks = year2 + '-' + month2 + '-' + day2; // heute - 12 Wochen // Eine historische Abfrage für den Aktiencode für unser Diagramm durchführen. var query2 = 'select * from yahoo.finance.historicaldata wobei symbol = "' + txtStockCode.value + '" und startDate = "' + todayMinus12Weeks + '' und endDate = "'+ today +'" '; // führe die Abfrage aus und hol die Ergebnisse ab Titanium.Yahoo.yql (Abfrage2, Funktion (e) var data = e.data; var chartData = []; // // Schleife unsere zurückgegebenen Json-Daten für die letzten 12 Wochen für (var i = (data.quote.length -1); i> = 0; i--) // schiebe diesen Zeitrahmen in den Wert chartData.push (parseFloat (data.quote [i] .Close)); if (i == (data.quote.length - 1)) zwölfWochenStartLabel.text = data.quote [i] .Close; wenn (i == 0) zwölfWeekEndLabel.text = data.quote [i] .Close ; // Raphael erwartet ein Array von Arrays, also lassen wir das var formatattedChartData = [chartData]; // ein Ereignis auslösen, durch das die Diagrammdaten an die Datei chart.html übergeben werden, // wo sie vom Raphael gerendert werden JS chart engine Ti.App.fireEvent ('renderChart', data: formatattedChartData, startDate: todayMinus12Weeks, endDate: today);); Der letzte Codeblock führt einen weiteren YQL-Aufruf aus, aber diesmal erfolgt der Aufruf an die aufgerufene Servicedatentabelle yahoo.finance.historicaldata Dies wird uns ein JSON-Array von historischen Datenwerten zurückgeben. In unserem Fall suchen wir nach den Daten der letzten zwölf Wochen nach dem ausgewählten Aktiencode. Sobald wir diese Daten haben, müssen wir sie einfach rückwärts durchlaufen (das älteste Element ist das letzte im JSON-Array) und die Option Schließen Eigenschaftswert in unser neues Array namens chartData. Raphael verwendet die Float-Werte, um die Werte im Balkendiagramm darzustellen. Zum Schluss verwenden wir Ti.App.fireEvent um das renderChart -Ereignis auszulösen, das wir im vorherigen Schritt erstellt haben, und unsere Werte an das übergeben chart.html Datei wie wir es tun!
Führen Sie die Anwendung jetzt in Ihrem Simulator aus. Am Ende wird ein Diagramm in unserem dritten Feld angezeigt!
Nun, wie Porky sagt, das sind alles Leute! Wir haben in diesem Tutorial viel behandelt, einschließlich der Abfrage und Verwendung von Daten von Yahoo YQL, der Implementierung einer Drittanbieter-Bibliothek in Raphael JS Charts und der Entwicklung einer nützlichen, gut entworfenen App mit Titanium Mobile, als wir gerade dabei waren. Ich hoffe, es hat Ihnen Spaß gemacht, mitzumachen und würde gerne sehen, was Sie sonst noch mit Appcelerator Titanium machen. Es ist wirklich eine großartige mobile Plattform. Viel Spaß beim Codieren!
