Share
In deze tutorialserie zal ik je leren hoe je een aandelenkoersapp maakt met Raphael JS, Titanium Mobile en Yahoo's YQL-webservice. Raphael JS-grafieken zullen worden gebruikt om de aandelenofferte-informatie grafisch weer te geven, Titanium Mobile zal worden gebruikt om een native iOS-app te compileren, en YQL-gegevenstabellen zullen de aandeleninformatie daadwerkelijk ophalen.
De laatste zelfstudie in deze serie introduceerde YQL en Raphael JS als componenten van een Titanium Mobile-toepassing en demonstreerde de stappen die nodig waren om onze app-app-interface te maken en naar aandelenkoersen te zoeken met behulp van YQL. In deze zelfstudie maken we onze aandelenkoersen-app af door Raphael JS-kaarten toe te voegen die historische gegevens weergeven die zijn verkregen met behulp van YQL.
Voordat we een diagram in onze Stocks-app kunnen implementeren, moeten we eerst de Raphael-bibliotheken downloaden, inclusief de JavaScript-bestanden in kaart brengen die we nodig hebben om onze staafdiagram te maken. Hiertoe gaat u als volgt te werk:
Voer nu je app opnieuw uit, mogelijk krijg je een paar validatiewaarschuwingen in de Titanium-console van de Raphael-code, maar alles moet nog steeds worden uitgevoerd en werken zoals het was in stap 4.
We gaan een WebView gebruiken om onze grafiek op het scherm te presenteren. Laten we nu een WebView toevoegen en hem verwijzen naar een HTML-bestand dat we in de volgende stap zullen maken. We zullen ook een label toevoegen om de WebView te beschrijven. Deze code moet vóór de regel staan scrollArea.add (quoteChartBox);, die aan het einde van uw codebestand staat:
// Voeg het diagramlabel en de webview toe die we nodig hebben om ons raphaeldiagram var lblChartName = Titanium.UI.createLabel (width: 280, height: 30, left: 10, top: 10, colour: '# 003366', font: fontSize: 17, fontWeight: 'bold', 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 twelveWeekStartLabel = Titanium.UI.createLabel (width: 100, left: 10, top: 285, height: 10, textAlign: 'left', font: fontSize: 9, fontFamily: 'Helvetica', color: '# 000 '); quoteChartBox.add (twelveWeekStartLabel); var twelveWeekEndLabel = Titanium.UI.createLabel (width: 100, right: 10, top: 285, height: 10, textAlign: 'right', font: fontSize: 9, fontFamily: 'Helvetica', color: '# 000 '); quoteChartBox.add (twelveWeekEndLabel);
Voer uw app uit in de emulator en u ziet nu een lege WebView en een label in het derde vak. Je zult naar het einde van het scherm moeten scrollen om het derde vakje in zijn geheel te zien.
Nu gaan we een HTML-bestand maken dat alle benodigde Raphael-bibliotheken bevat en een leeg bevat
RaphaelJS-kaart
Red je chart.html bestand in uw "Resources" -directory als u dat nog niet hebt gedaan. Wat deze code aan het doen is, is het maken van een eenvoudige HTML-sjabloon, inclusief de raphael-bibliotheken die je eerder hebt gedownload, en het maken van een div genaamd chartDiv, dat is waar Raphael onze kaart in zal plaatsen. Met de scripttags onder deze div maken we een standaard Titanium-gebeurtenislistener, die wordt uitgevoerd wanneer een evenement genaamd renderChart wordt ergens vanuit Titanium afgeschoten. Deze functie neemt alle doorgegeven gegevens over en trekt die naar Raphael voor rendering. De r.g.barchart () functie neemt de volgende lijst met parameters om het diagram te maken (in volgorde):
Links, Boven, Breedte, Hoogte, Data (een array van arrays met enkele waarde), Stijlattributen. De zweeffunctie aan het einde van deze methode vertelt Raphael een fade-in, fade-out en kolomwaarden weer te geven wanneer een streepjeslijn wordt aangeboord.
Het is nu tijd voor de laatste stap in onze tutorial: de grafiek weergeven! Ga naar je searchYQL functie en typ na uw vorige code voor het verkrijgen van de voorraadgegevens het volgende in:
Accentsconagua
// Haal de datum van vandaag en breek die op in de waarden voor de maand, de dag en het jaar var currentTime = new Date (); var month = currentTime.getMonth () + 1; var day = currentTime.getDate (); var year = currentTime.getFullYear (); // maak nu de twee datums opgemaakt in yyyy-mm-dd-indeling voor YQL-query var today = year + '-' + month + '-' + day; // vandaag // de datum 12 weken geleden krijgen? 1000 milliseconden * seconden in minuut * minuten in uur * 2016 uren (12 weken, 12 * 7 dagen) var currentTimeMinus12Weeks = nieuwe datum ((nieuwe datum ()). GetTime () - (1000 * 60 * 60 * 2016)); var month2 = currentTimeMinus12Weeks.getMonth () + 1; var day2 = currentTimeMinus12Weeks.getDate (); var year2 = currentTimeMinus12Weeks.getFullYear (); var todayMinus12Weeks = year2 + '-' + month2 + '-' + day2; // vandaag - 12 weken // voer een historische query uit voor de aandelencode voor onze grafiek var query2 = 'select * from yahoo.finance.historicaldata where symbol = "' + txtStockCode.value + '" en startDate = "' + todayMinus12Weeks + '"en endDate ="' + vandaag + '"'; // voer de query uit en verkrijg de resultaten Titanium.Yahoo.yql (query2, functie (e) var data = e.data; var chartData = []; // loop onze geretourneerde json-gegevens voor de afgelopen 12 weken voor (var i = (data.quote.length -1); i> = 0; i--) // duw dit tijdsbestek dicht bij waarde in onze chartData-array chartData.push (parseFloat (data.quote [i] .Close)); if (i == (data.quote.length - 1)) twelveWeekStartLabel.text = data.quote [i] .Close; if (i == 0) twelveWeekEndLabel.text = data.quote [i] .Close ; // raphael verwacht een array met arrays, dus laten we die var opmakenChartData = [diagramdata]; // een gebeurtenis starten die de diagramgegevens doorgeeft aan het chart.html-bestand // waar het door Raphael wordt gerenderd JS-diagramgenerator Ti.App.fireEvent ('renderChart', data: formattedChartData, startDatum: todayMinus12Weeks, endDate: today);); Het laatste codeblok doet nog een YQL-oproep, maar deze keer wordt de oproep naar de servicedatatabel genoemd yahoo.finance.historicaldata die een JSON-matrix van historische gegevenswaarden aan ons gaat teruggeven. In ons geval zoeken we in de afgelopen twaalf weken naar gegevens voor de geselecteerde aandelencode. Zodra we deze gegevens hebben, is het gewoon een kwestie van iteratie achterwaarts (het oudste item is het laatst in de JSON-array) en de Dichtbij eigenschapswaarde in onze nieuwe array genaamd Grafiekgegevens. Raphael gebruikt de zwevende waarden om de waarden op het staafdiagram weer te geven. Eindelijk gebruiken we Ti.App.fireEvent om de renderChart-gebeurtenis te starten die we in de vorige stap hebben gemaakt, door onze waarden door te geven aan de chart.html bestand terwijl we dat doen!
Start de applicatie nu in je simulator en je zou eindigen met een grafiek die wordt gepresenteerd in ons derde vak!
Nou, zoals Porky zegt, dat zijn allemaal mensen! We hebben veel aandacht besteed aan deze tutorial, inclusief het bevragen en gebruiken van gegevens van Yahoo YQL, het implementeren van een externe bibliotheek in Raphael JS Charts en het bouwen van een handige, mooi ontworpen app met Titanium Mobile terwijl we bezig waren. Ik hoop dat je het leuk vond om mee te doen en ik zou graag zien wat je nog meer doet met Appcelerator Titanium. Het is echt een geweldig mobiel platform. Veel plezier met coderen!
