Share
În această serie de tutori, vă voi învăța cum să construiți o aplicație de cotare la bursă cu serviciul web YQL de la Raphael JS, Titanium Mobile și Yahoo. Graficele Raphael JS vor fi utilizate pentru a prezenta grafic informațiile despre cotațiile acțiunilor, Titanium Mobile va fi folosit pentru a compila o aplicație nativă iOS, iar tabelele de date YQL vor prelua efectiv informațiile despre stoc.
Ultimul tutorial din această serie a introdus YQL și Raphael JS ca componente ale unei aplicații Titanium Mobile și a demonstrat pașii necesari pentru a crea interfața aplicației Quot pentru stoc și pentru a căuta cotațiile de stoc utilizând YQL. În acest tutorial, vom finaliza aplicația noastră de cotare la bursă prin adăugarea în rapoartele Raphael JS care compară datele istorice obținute utilizând YQL.
Înainte de a putea începe să implementăm o diagramă în aplicația noastră Stocuri, trebuie să descărcați mai întâi bibliotecile Raphael, inclusiv fișierele JavaScript care vor fi create pentru a crea graficul de bare. Pentru aceasta, urmați acești pași:
Acum, executați din nou aplicația, puteți primi câteva avertismente de validare în Consola Titanium din codul Raphael, dar totul ar trebui să funcționeze și să funcționeze așa cum a fost la pasul 4.
Vom folosi un WebView pentru a prezenta graficul nostru pe ecran. Să adăugăm acum un WebView și să-l îndreptăm spre un fișier HTML pe care îl vom crea în pasul următor. De asemenea, vom adăuga o etichetă pentru a descrie WebView. Acest cod ar trebui să meargă înainte de linie scrollArea.add (quoteChartBox);, care va fi aproape de sfârșitul fișierului de cod:
// Adăugați eticheta de diagramă și vizualizarea web pentru a afișa diagrama noastră raphael var lblChartName = Titanium.UI.createLabel (width: 280, height: 30, left: 10, top: 10, color: '# 003366' fontSize: 17, fontWeight: 'bold', fontFamily: 'Helvetica', text: '12 Saptamana Istorica Grafic '); quoteChartBox.add (lblChartName); var webview = Titanium.UI.createWebView (lățime: 280, înălțime: 240, stânga: 10, top: 40, url: 'chart.html'); quoteChartBox.add (WebView); var twelveWeekStartLabel = Titanium.UI.createLabel (lățime: 100, stânga: 10, vârful: 285, înălțimea: 10, textAlign: "stânga", font: fontSize: 9, fontFamily: Helvetica 000 '); quoteChartBox.add (twelveWeekStartLabel); var twelveWeekEndLabel = Titanium.UI.createLabel (lățimea: 100, dreapta: 10, partea de sus: 285, înălțimea: 10, textAlign: "dreapta", font: fontSize: 9, fontFamily: Helvetica 000 '); quoteChartBox.add (twelveWeekEndLabel);
Rulați aplicația în emulator și acum ar trebui să vedeți un WebView gol și o etichetă în a treia casetă. Va trebui să derulați până la sfârșitul ecranului pentru a vedea a treia casetă în întregime.
Acum vom crea un fișier HTML care include toate bibliotecile Raphael necesare și conține un document gol
RaphaelJS Chart
Salvați-vă chart.html fișier în directorul "Resurse", dacă nu ați făcut-o deja. Ceea ce face acest cod este crearea unui șablon HTML de bază, inclusiv bibliotecile raphael pe care le-ați descărcat mai devreme, și crearea unui div numit chartDiv, care este ceea ce Raphael va face diagrama noastră. Cu etichetele de scripturi de sub această div, creăm un ascultător standard al evenimentului Titanium, care va fi executat ori de câte ori un eveniment numit renderChart este tras de undeva în Titanium. Această funcție va lua toate datele transmise și va trage în Raphael pentru redare. r.g.barchart () funcția are următoarea listă de parametri pentru a crea graficul (în ordine):
Stânga, Înălțime, Lățime, Înălțime, Date (o matrice de matrice cu o singură valoare), Atribute de stil. Funcția de mutare de la sfârșitul acestei metode îi spune lui Raphael să facă valori de coliziune, decolorare și afișare a coloanei atunci când este lovită o linie de bară.
Acum este timpul pentru ultimul pas în tutorialul nostru: redarea graficului! Du-te în tine searchYQL și după codul anterior pentru obținerea datelor despre stoc, introduceți următoarele:
Accentsconagua
// Obțineți data de astăzi și spargeți-o în lunile, ziua și anul valori var currentTime = new Date (); var luna = actualTime.getMonth () + 1; var zi = actualTime.getDate (); var anul = actualTime.getFullYear (); // creați acum cele două date formatate în format yyyy-mm-dd pentru interogarea YQL var astăzi = an + '-' + lună + '-' + zi; // astăzi // obține data de acum 12 săptămâni? 1000 de milisecunde * secunde în minut * minute în oră * 2016 ore (12 săptămâni, 12 * 7 zile) var currentTimeMinus12Weeks = new Date ((new date)). var luna2 = actualTimeMinus12Weeks.getMonth () + 1; var zi2 = actualTimeMinus12Weeks.getDate (); var anul2 = actualTimeMinus12Weeks.getFullYear (); var todayMinus12Weeks = an2 + '-' + luna2 + '-' + zi2; // astăzi - 12 săptămâni // efectuați o interogare istorică pentru codul de stoc pentru graficul nostru var query2 = 'select * din yahoo.finance.historicaldata unde symbol =' '+ txtStockCode.value +' 'și startDate = "' + todayMinus12Weeks + '' și endDate = '' + astăzi + '' '; // executați interogarea și obțineți rezultatele Titanium.Yahoo.yql (interogare2, funcție (e) var data = e.data; var chartData = []; // loop datele noastre json returnate pentru ultimele 12 săptămâni pentru (var i = (data.quote.length -1); i> = 0; i -) // împingeți această valoare de închidere a cadrului de timp în diagrama diagramăData.push (parseFloat (data.quote [i] .Close)); dacă (i == (date.quote.length - 1)) twelveWeekStartLabel.text = date.quote [i] .Close; dacă (i == 0) twelveWeekEndLabel.text = date.quote [i]. ; // // raphael se așteaptă la o serie de tablouri, deci permite ca var formattedChartData = [chartData]; // să declanșeze un eveniment care va transmite datele din diagramă peste fișierul chart.html // unde va fi redat de Raphael JS motorul grafic Ti.App.fireEvent ('renderChart', date: formattedChartData, startDate: todayMinus12Weeks, endDate: today);); Ultimul bloc de cod face un alt apel YQL, dar de data aceasta apelul este la tabelul de date de serviciu numit yahoo.finance.historicaldata care va reveni la noi o serie de JSON de valori de date istorice. În cazul nostru, căutăm în ultimele douăsprezece săptămâni de date pentru codul stocului selectat. Odată ce avem aceste date, este pur și simplu un caz de iterare prin acesta înapoi (cel mai vechi element este ultimul în matricea JSON) și împingând Închide valoarea proprietății în noua noastră matrice numită chartData. Raphael va folosi valorile flotorului pentru a face valorile din graficul de bare. În cele din urmă, vom folosi Ti.App.fireEvent să declanșăm evenimentul renderChart pe care l-am creat în pasul anterior, trecând valorile noastre către chart.html așa cum procedăm!
Rulați aplicația în simulatorul dvs. acum și ar trebui să terminați cu o diagramă prezentată în cea de-a treia casetă!
Ei bine, așa cum spune Porky, asta e totul! Am acoperit foarte mult acest tutorial, incluzând interogarea și utilizarea datelor de la Yahoo YQL, implementarea unei biblioteci terțe în Raphael JS Charts și construirea unei aplicații utile, bine concepute, cu Titanium Mobile în timp ce eram la ea. Sper că v-ați bucurat de urmărirea și mi-ar plăcea să văd ce altceva faceți cu Appcelerator Titanium. Este într-adevăr o mare platformă mobilă. Bucurați-vă de codificare!
