TURO VALAVAARA JAVASCRIPT-SOVELLUSKEHYKSET SÄÄASEMAN KÄYTTÖ- LIITTYMÄKEHITYKSESSÄ

I. I11 TURO VALAVAARA JAVASCRIPT-SOVELLUSKEHYKSET SÄÄASEMAN KÄYTTÖ- LIITTYMÄKEHITYKSESSÄ Kandidaatintyö Tarkastaja: Tutkija, DI Jari Seppälä 13. kesäkuuta 2010

II TIIVISTELMÄ TAMPEREEN TEKNILLINEN YLIOPISTO Automaatiotekniikan koulutusohjelma VALAVAARA, TURO: JavaScript-sovelluskehykset sääaseman käyttöliittymäkehityksessä Kandidaatintyö, 33 sivua, 11 liitesivua Kesäkuu 2010 Pääaine: Automaation tietotekniikka Tarkastaja: Tutkija, DI Jari Seppälä Avainsanat: AJAX, XML, XMLHttpRequest, JavaScript, selainkäyttöliittymä, web-sovelluspalvelu, jquery, Dojo, Ample SDK Työn tavoitteena on selvittää JavaScript-sovelluskehysten soveltuvuus sääaseman selainkäyttöliittymän toteutukseen sekä toteuttaa sääasemalle uusi käyttöliittymä. Vaatimuksina toteutettavalle käyttöliittymälle ovat asynkronisen tiedonsiirron hyödyntäminen sekä tyylikäs ulkoasu. Käyttöliittymän avulla on mahdollista tarkastella sääaseman lämpötilamittauksia viimeisimpien kahdeksan tunnin ajalta havainnollisessa muodossa. Kymmenien JavaScript-sovelluskehysten joukosta vertailtaviksi valittiin kolme ominaisuuksiltaan lupaavinta sovelluskehystä: Ample SDK, Dojo ja jquery. Sovelluskehyksiä tarkasteltaessa keskityttiin erityisesti niiden tarjoamiin kuvaaja- ja käyttöliittymäkomponentteihin sekä tiedonsiirtoa ja käsittelyä helpottaviin ominaisuuksiin. Sovelluskehysten analysoinnin tuloksena todettiin Dojon ja jqueryn soveltuvan sääaseman käyttöliittymän sovelluskehitykseen ja vastaaviin ohjelmistoprojekteihin. Käyttöliittymän toteutuksessa käytettäväksi sovelluskehykseksi valittiin jquery. Toteutettu käyttöliittymä tarjoaa mahdollisuuden sääaseman mittaustietojen tarkasteluun kuvaaja- ja taulukkomuodossa. Mittaustietojen päivittäminen ei vaadi käyttäjältä sivun uudelleenlataamista eikä myöskään häiritse sovelluksen käyttöä. jqueryn tarjoamien käyttöliittymäkomponenttien avulla käyttöliittymästä saatiin helppokäyttöinen ja tyylikäs. Myös sovelluskehysten soveltuvuuden selvitys onnistui hyvin, eli työlle asetetut tavoitteet saavutettiin. Kattavampaa testausta eri selaimilla kannattaisi vielä tehdä ennen käyttöliittymän käyttöönottoa.

III ALKUSANAT Tämä tekniikan kandidaatintyö on tehty Tampereen teknillisen yliopiston systeemitekniikan laitokselle keväällä 2010. Kandidaatintyö tarjosi mahdollisuuden tutustua kiinnostavaan aihealueeseen, jonka tuntemisesta on varmasti hyötyä tulevaisuudessa. Haluan kiittää työn ohjaajaa Jari Seppälää rakentavasta palautteesta sekä avusta aiheen valinnassa ja rajaamisessa. Kiitos myös Aki Kössilälle lähes valmiin työn lukemisesta ja kommentoinnista. Tampereella 13. kesäkuuta 2010 Turo Valavaara

IV SISÄLLYS 1. Johdanto... 1 2. Käytetävät tekniikat... 2 2.1. XML... 2 2.2. JavaScript & Dokumenttioliomalli... 3 2.3. XMLHttpRequest... 5 2.4. Web-sovelluspalvelu & SOAP... 7 2.5. Sovelluskohde... 8 3. Sovelluskehykset... 9 3.1. Ample SDK... 9 3.1.1. Työkalut kaavioiden luomiseen... 10 3.1.2. Kuvauskielet... 11 3.1.3. Tiedonsiirto ja -käsittely... 12 3.1.4. Käyttöliittymäkomponentit... 12 3.1.5. Soveltuvuus... 12 3.2. Dojo... 13 3.2.1. Työkalut kaavioiden luomiseen... 14 3.2.2. Tiedonsiirto ja -käsittely... 16 3.2.3. Käyttöliittymäkomponentit... 16 3.2.4. Muut ominaisuudet... 17 3.2.5. Soveltuvuus... 17 3.3. jquery... 18 3.3.1. Työkalut kaavioiden luomiseen... 18 3.3.2. Tiedonsiirto ja -käsittely... 21 3.3.3. Käyttöliittymäkomponentit... 22 3.3.4. Muut ominaisuudet... 23 3.3.5. Soveltuvuus... 23 3.4. Käytettävän kirjaston valinta... 23 4. Käyttöliittymän toteutus... 25 4.1. Rajoitukset... 25 4.2. Käyttöliittymän rakenne ja navigointi... 25 4.3. Tiedonsiirto... 26 4.4. Kuvaaja... 27 4.5. Taulukko... 27 4.6. Jatkokehitysideoita... 28 5. Yhteenveto... 29 Lähteet... 31 Liite A: käyttöliittymäkuvat... 34 Liite B: Käyttöliittymän HTML-merkintä... 37 Liite C: Käyttöliittymän JavaScript-koodi (saascript.js)... 39

V LYHENTEET JA TERMIT AJAX CSS Dojo DOM GPL-lisenssi GPRS HTTP JavaScript JSON jquery MIT-lisenssi Joukko tekniikoita, joiden avulla web-sovelluksista saadaan tehtyä dynaamisia. (engl. Asynchronous JavaScript and XML). W3C:n kehittämä ja ylläpitämä tyylikieli rakenteisten dokumenttien esitystavan muotoiluun. (engl. Cascading Style Sheets). Suosittu JavaScript-sovelluskehys. Dokumenttioliomalli on ohjelmointirajapinta, joka mahdollistaa HTML- ja XML-dokumenttien muokkaamisen. (engl. Document Object Model). Vapaa ohjelmistolisenssi, jolla lisensoituja tuotoksia saa vapaasti muokata ja käyttää sillä edellytyksellä, että muunnellun tuotteen jakelu tapahtuu myös GPL-lisenssin alla. Matkapuhelimen tai GPRS-sovittimen avulla käytettävä GSM-verkossa toimiva pakettikytkentäinen tiedonsiirtopalvelu. (engl. General Packet Radio Service). Alun perin web-sivujen siirtämiseen suunniteltu tilaton tietoliikenneprotokolla. (engl. HyperText Transfer Protocol). Ohjelmointikieli, joka kehitettiin vuorovaikutuksen lisäämiseksi web-sivuille. Yksinkertainen tiedonsiirtomuoto, joka muistuttaa JavaScript-ohjelmointikielen olioiden merkintätapaa. (engl. JavaScript Object Notation). Suosittu JavaScript-sovelluskehys. Vapaa ohjelmistolisenssi, jolla lisensoituja tuotoksia saa vapaasti muokata ja käyttää myös suljetun lähdekoodin ohjelmistoissa, kunhan lisenssin teksti säilyy lähdekoodissa.

VI Ohjelmointirajapinta SGML SMIL SOAP Sovelluskehys SVG W3C Web-sovelluspalvelu WSDL Käyttöliittymä, jonka avulla eri ohjelmat voivat vaihtaa tietoa eli keskustella keskenään. Standardoitu metakieli dokumenttien merkintäkielten määrittelyyn. (engl. Standard Generalized Markup Language). Multimediaesityksiä varten kehitetty XML-pohjainen kuvauskieli. (engl. Synchronized Multimedia Integration Language). XML-kieleen pohjautuva tietoliikenneprotokolla, jonka pääasiallisena tehtävänä on mahdollistaa proseduurien etäkutsut. (engl. Simple Object Access Protocol). Ohjelmistotuote, joka muodostaa rungon sen päälle rakennettavalle ohjelmalle. (engl. Software Framework). XML:ään pohjautuva kaksiulotteisten vektorikuvien kuvauskieli. (engl. Scalable Vector Graphics). Kansainvälinen yhteisö, jonka tavoitteena on kehittää suosituksia ja protokollia Web:in kehityksen varmistamiseksi. (engl. World Wide Web Consortium). Ohjelmointirajapinta joka tarjoaa palveluja muille sovelluksille tietoverkon, esimerkiksi Internetin, yli (engl. Web Service). XML-kieleen pohjautuva kieli web-sovelluspalvelujen kuvaamiseen. (engl. Web Services Description Language). XHTML WWW-sivujen kuvaamiseen luodusta HTMLkuvauskielestä kehitetty XML:ään pohjautuva kuvauskieli, jossa on tiukemmat tyylisäännöt kuin HTML:ssä. (engl. extensible HyperText Markup Language). XML XUL Kuvauskieli jota käytetään dokumenttien kuvaamiseen ja formaattina tiedonvälityksessä. Pohjautuu SGML:ään. (engl. extensible Markup Language). Käyttöliittymien toteuttamiseen suunniteltu XML-pohjainen kuvauskieli. (engl. XML User Interface Language).

1 1. JOHDANTO Selainkäyttöliittymät ovat muodostuneet varteenotettavaksi vaihtoehdoksi perinteisille graafisina työpöytäsovelluksina toteutetuille käyttöliittymille. Näiden sovellusten ongelmina ovat alustariippuvaisuus ja hankala päivitettävyys. Sovelluksista on tehtävä oma toteutus kaikille eri alustoille, joilla niiden halutaan toimivan. Tästä seuraa, että sovellus on käytettävissä vain rajatuissa käyttöympäristöissä tai vaihtoehtoisesti sovelluksen hinta on korkea. Lisäksi sovellusten päivittämisestä aiheutuu huomattavaa vaivaa, sillä päivitykset on usein asennettava manuaalisesti. Kaikki sovellukset tulisi kuitenkin pitää ajan tasalla, sillä eri käyttöliittymäversioiden samanaikainen käyttö saattaa aiheuttaa ongelmia. Päätelaitteiden lisääntynyt suorituskyky yhdessä tietoliikenneyhteyksien nopeuden huiman kasvun kanssa luovat edellytykset selainkäyttöliittymien toteuttamiselle ja käytölle. Selaimet tukevat yleisesti keskenään samoja tekniikoita kuten JavaScriptiä. Käyttöliittymää toteuttaessa tarvitsee siis ottaa huomioon ainoastaan käyttöliittymän toimivuus eri selaimilla sekä mahdolliset päätelaitteen fyysisen rakenteen aiheuttamat rajoitteet. Tämä on huomattavasti helpompaa kuin käyttöliittymän kehittäminen monelle eri käyttöjärjestelmälle. Päivitykseen liittyvistä ongelmista päästään eroon, sillä käyttöliittymä ladataan uudestaan joka käyttökerralla ja siihen tehdyt muutokset ovat heti voimassa. Tampereen teknillisen yliopiston (TTY) systeemitekniikan laitoksen sääaseman nykyinen käyttöliittymä on toteutettu perinteisillä staattisilla web-tekniikoilla. Tavoitteena on kehittää dynaaminen ja tyylikäs selainkäyttöliittymä sääasemalle käyttäen apuna JavaScript-sovelluskehystä. Alussa perehdytään yleisimpiin web-sovelluksissa käytettyihin tekniikoihin alan kirjallisuuden ja verkkomateriaalin avulla. Toteutusta varten analysoidaan kolmea JavaScript-sovelluskehystä ja niiden soveltuvuutta sääaseman selainkäyttöliittymän kehitykseen sekä vastaaviin projekteihin. Sovelluskehyksiin tutustuminen ja niiden arviointi tapahtuu pääasiassa sovelluskehysten web-sivujen sekä käytännön testauksen avulla. Parhaiten sääaseman käyttöliittymäkehitykseen soveltuvaa sovelluskehystä hyödyntäen toteutetaan käyttöliittymä sääasemalle PC-päätelaitteita varten.

2 2. KÄYTETÄVÄT TEKNIIKAT Tavoitteena on tehdä käyttöliittymästä mahdollisimman dynaaminen siten, että käyttäjän tarvitsee odottaa käyttöliittymän latautumista käytön aikana mahdollisimman vähän ja suurimman osan tiedonsiirrosta tulee tapahtua käyttäjän huomaamatta. Käyttöliittymän ensimmäisen lataamisen jälkeen käyttäjän on mahdollista käyttää sovellusta jatkuvasti myös uuden tiedon hakemisen aikana. Näiden tavoitteiden saavuttamiseksi käytetään useita tekniikoita, joihin perehdytään seuraavaksi tarkemmin. Asiakasohjelmien ja palvelimien välinen tiedonsiirto Internetissä tapahtuu suurilta osin http-protokollan (engl. HyperText Transfer Protocol) avulla. Tämä protokolla kehitettiin alun perin WWW-sivujen siirtämistä varten, mutta sitä voi käyttää kaikentyyppisen tiedon siirtoon asiakassovelluksen ja palvelimen välillä. [1, s.762.] Http on tilaton protokolla. Tämä tarkoittaa käytännössä sitä, että palvelimelle tehtyyn httppyyntöön eivät vaikuta mitenkään aiemmat pyynnöt. Palvelin tietää ainoastaan viimeisimmästä sille lähetetystä pyynnöstä ja palauttaa tietoa vain sen perusteella [1, s.762.] Lisäksi tiedonsiirto on synkronista, eli asiakasohjelma, esimerkiksi selain, jää odottamaan vastausta palvelimelta ja tällöin myös käyttäjä joutuu odottamaan. Tällainen tiedonsiirtomalli sopii hyvin yksinkertaisille linkitetyille tekstidokumenteille, mutta toimii huonosti monimutkaisemmilla sivuilla ja sovelluksilla. AJAX-tekniikat (engl. Asynchronous JavaScript and XML) tarjoavat ratkaisun tiedonsiirron synkronisuuden aiheuttamiin ongelmiin. Termi tarkoittaa tiedonsiirron toteuttamista asynkronisesti käyttäen hyväksi JavaScriptiä sekä XML:ää [2, s.296] tai muuta kuvauskieltä, kuten JSON:ia (engl. JavaScript Object Notation). W3C (engl. World Wide Web Consortium) on kansainvälinen yhteisö jonka tavoitteena on taata Internetin kehitys ja luoda siihen liittyviä suosituksia ja protokollia. Sen ylläpitämiä suosituksia ovat esimerkiksi HTML (engl. HyperText Markup Language), XML (engl. extensible Markup Language) ja CSS (engl. Cascading Style Sheets). Useat W3C:n suosituksista ovat de facto -standardeja. [3.] Seuraavaksi käydään lyhyesti läpi XML ja JavaScript sekä XMLHttpRequest-olio, joka toimii AJAX:in perustana. Lisäksi käsitellään lyhyesti Tampereen teknillisen yliopiston Systeemitekniikan laitoksen sääasemaan liittyvää sovelluspalvelua ja siihen liittyviä tekniikoita. 2.1. XML XML on yksinkertainen ja joustava SGML-standardiin (engl. Standard Generalized Markup Language) pohjautuva kieli rakenteisen tiedon kuvaamiseen. Se muistuttaa merkinnältään läheisesti HTML-kuvauskieltä, mutta XML kehitettiin erityisesti tiedon välitykseen ja varastointiin, kun HTML puolestaan suunniteltiin tiedon esittämistä var-

3 ten. [4.] XML on pohjimmiltaan tiettyjen sääntöjen mukaisesti muotoiltua tekstiä. Tämä tarkoittaa korkeaa sovellus- ja alustariippumattomuutta, sillä kaikki sovellukset jotka pystyvät käsittelemään tekstiä voivat käsitellä myös XML-muotoista tietoa. Täyden hyödyn saamiseksi ohjelman tulee kuitenkin ymmärtää XML-merkintää. [5.] XMLkielen avulla voidaan määritellä sovelluskohtaisten tietojen kuvaamiseen tarkoitettuja merkintäkieliä [2, s.4]. XML tarjoaa tavan kuvata varsinaisen tiedon lisäksi myös tiedon merkityksen ja rakenteen, jotka ovat niin kutsuttua metatietoa. Tämä mahdollistaa tiedon tehokkaan käsittelyn ohjelmallisesti. [2, s.7.] XML-kielessä ei ole ennalta määritettyjä avainsanoja, vaan dokumentin luoja määrittää ne itse. Dokumentin tulkinta riippuu täysin sovelluksesta jolla sitä käsitellään: eri sovellukset voivat käsitellä samaa XML-avainsanaa eri lailla. Rakenteellisesti XML-dokumentti koostuu vapaaehtoisesta esittelyosasta sekä esiintymäosasta, joka sisältää varsinaisen dokumentin esittämän tiedon. Esittelyosa kuvaa XML-dokumentin sekä mahdollisen tyyppijulistuksen. Kuva 2.1. Esimerkki kirjan kuvaavasta XML-dokumentista. Rakenteellisesti XML-dokumentti koostuu elementeistä. Elementti muodostuu alku- ja loppuavainsanoista. Avainsanan alku ja loppu puolestaan merkitään kulmasuluilla. Elementin alku- ja loppumerkinnän tulee sisältää täsmälleen sama avainsana ja loppuavainsana merkitään nimeä edeltävällä kauttaviivalla. Elementin sisältämä tieto sijoitetaan avainsanojen väliin. Näin ollen Hei maailma! -merkkijonon sisältävän teksti-elementin merkintä on <teksti>hei maailma!</teksti>. Elementti voi olla myös tyhjä, jolloin merkinnäksi riittää yksi avainsana. Tällöinkin elementin loppuminen on merkittävä kauttaviivalla. Tyhjän teksti-elementin merkintä on siis <teksti></teksti> tai <teksti />. Elementit voivat sisältää myös toisia elementtejä. Elementteihin on mahdollista liittää myös attribuutteja eli ominaisuuksia. Nämä ominaisuudet merkitään nimen jälkeen aloitusavainsanan merkinnän sisälle. [2, s.20 23.] Kuvassa 2.1 on esitetty yksinkertainen XML-dokumentti joka kuvaa yhden kirjan tiedot. Kuvan dokumentin esittelyosan elementti sisältää ominaisuudet version ja encoding. 2.2. JavaScript & Dokumenttioliomalli JavaScript on ohjelmointikieli joka tukee perinteistä lausepohjaista ohjelmointia sekä olio-ohjelmointia. Se suunniteltiin kevyeksi ja yleiskäyttöiseksi tulkattavaksi kieleksi, joka mahdollistaa dynaamisten web-sivujen luomisen. Kielen kehitti Netscape vuonna

4 1995 Navigator-selaintaan varten. Kielellä ei ole juurikaan tekemistä Javan kanssa, vaan se nimettiin JavaScriptiksi siinä toivossa, että Javan ympärillä ollut kohu edesauttaisi myös JavaScriptin menestymistä. Käytännössä JavaScript on vakiintunut käyttöön webselaimissa ja muut sovelluskohteet ovat harvassa. [2, s.90.] Kieltä on kuitenkin mahdollista käyttää nykyisin erilaisissa ympäristöissä ja tästä syystä sen standardoitu versio ECMAScript erotettiin isäntäympäristöstä, joka alun perin oli web-selain [2, s.94]. Kaikki suosituimmat selaimet kuten Mozilla Firefox, Internet Explorer ja Opera sisältävät tuen JavaScriptille. Koodia ei tarvitse erikseen kääntää, vaan tulkattaville kielille tyypilliseen tapaan isäntäsovellus, esimerkiksi selain, tulkkaa ja suorittaa koodia rivi kerrallaan [2, s.97]. Tämä tekee sovelluksista helposti muokattavia, sillä kaikki muutokset tulevat voimaan kun sivu ladataan uudestaan selaimeen. JavaScript-koodi voidaan upottaa web-sivuun omaksi elementikseen, tai vaihtoehtoisesti se voidaan ladata erillisestä tiedostosta sivun latautuessa. Jälkimmäinen tapa on suositeltava varsinkin koodimäärän kasvaessa ja se mahdollistaa saman koodin käytön useammalla eri sivulla [6, s.23, 26]. Kaikkien elementtien tulee kuitenkin sijaita sivun otsikko- tai runkoelementin sisällä. Kuva 2.2. Yksinkertainen HTML-dokumentti. Kuva 2.3. Dokumenttioliomallin mukainen puuesitys kuvassa 2.2.

5 JavaScriptin tarkoituksena oli alun perin luoda sivulle dynaamisuutta ja tästä syystä sillä oli pystyttävä muokkaamaan dokumenttia johon koodi on liitetty. Tähän tarkoitukseen kehitettiin dokumenttioliomalli (DOM, engl. Document Object Model), joka esittää HTML- tai XML-dokumentin puumaisena tietorakenteena. [2, s.168.] Dokumenttioliomalli on ohjelmointirajapinta, jonka kautta dokumentin sisältöön ja rakenteeseen pääsee käsiksi JavaScriptin tai jonkin muun ohjelmointikielen avulla. Dokumenttioliomallissa dokumentin elementit esitetään solmuina (engl. node). Kuvassa 2.3 on esitetty kuvan 2.2 yksinkertaisen HTML-dokumentin dokumenttioliomallin puurakenne. HTML-dokumentin runkoelementin (body) sisällä olevat elementit h2, p ja img ovat sen lapsisolmuja ja puumallissa ne esitetään haarautuviksi runkoelementistä. Elementtien sisällä oleva teksti puolestaan esitetään tekstisolmuna #text. Kaikilla solmuilla on äitisolmu ja lisäksi mahdollisesti sisaruksia. Kuvassa 2.3 meta ja title ovat sisarsolmuja, sillä head on niiden molempien äitisolmu. Dokumenttioliomalli mahdollistaa solmujen luomisen, muokkaamisen ja poiston. Tämä puolestaan mahdollistaa sen, että sivua voidaan ohjelmointikielen avulla muokata ja sen sisältöä päivittää lataamatta koko sivua uudestaan. [7, s.39.] Dokumenttioliomalli tarjoaa tapahtumankäsittelyrajapinnan, jonka avulla sivulle saadaan luotua vuorovaikutusta. Rajapinnan avulla voidaan elementteihin liittää erityyppisiä tapahtumia [2, s.178]. Tapahtumalle määritetään jokin toiminto, joka tavallisesti on funktiokutsu. Tyypillisiä esimerkkejä tapahtumista ovat muun muassa elementin ulkoasun muokkaaminen, kun hiiren osoitin siirretään elementin päälle ja tekstikentän automaattinen täydentäminen, joka hyödyntää AJAX:ia. Tätä ominaisuutta hyödynnetään muun muassa Googlen hakukoneessa. DOM 1 on W3C:n kehittämä ensimmäinen yhtenäinen malli dokumenttioliolle. Sitä edelsi niin kutsuttu DOM 0, jolla viitataan Internet Explorer 3.0:n ja Netscape Navigator 3.0:n mahdollisuuksiin muokata dokumentin elementtejä. DOM 0:aa ei ole muodollisesti määritelty ja toteutukset eri selaimissa eivät olleet yhtenäiset. Vaikka kaikki DOM 0:n ominaisuudet eivät sisälly täysin uudempiin DOM-määrittelyihin, niitä tuetaan edelleen selaimissa, jotta vanhat JavaScript-koodit eivät lakkaisi toimimasta. [2, s.170.] Nykyisistä selaimista Firefox 3 ja Opera 9 tukevat DOM 2:en HTML- ja tapahtumankäsittelyrajapintoja. Internet Explorer 8 tukee DOM 2:en HTML-rajapintaa, mutta tapahtumankäsittelyrajapinnan tuki on puutteellinen [8]. 2.3. XMLHttpRequest XMLHttpRequest-olio on AJAX:in ydin. Se mahdollistaa tiedon hakemisen asynkronisesti http-protokollan avulla ja samalla myös web-sivun osittaisen päivittämisen käyttäen hyväksi JavaScriptiä ja dokumenttioliomallia. Oliolle määritetään toiminto, joka suoritetaan kun vastaus palvelimelta saadaan. Tämä toiminto on hyvin usein vastaanotetun datan käsittelyn suorittava funktio, joka myös päivittää dokumentin sisällön. XMLHttpRequest-oliolla tehty pyyntö ei näy käyttäjälle mitenkään ellei vastausta käsittelevä funktio päivitä web-sivua, sillä asynkronisen pyynnön aikana käyttäjä voi jatkaa

6 web-sivun käyttöä normaalisti. Oliolla tehdyn pyynnön saa määritettyä myös synkroniseksi, mutta sille harvoin on tarvetta, sillä tällöin suurin osa AJAX-tekniikan hyödyistä menetetään. [7, s.26 31.] Microsoft esitteli ActiveX-komponenttina toteutetun XMLHTTP-olion Internet Explorer 5:ssä ja hieman myöhemmin vastaava toteutus tuli myös Firefox- ja Operaselaimiin XMLHttpRequest-nimisenä JavaScript-oliona. Nykyään kaikki suosituimmat selaimet tukevat XMLHttpRequest:ia. Internet Explorer 7:ssa ja sitä uudemmissa versioissa AJAX-toiminnallisuus on toteutettu muiden selainten kanssa yhtenevästi XMLHttpRequest-oliona ActiveX-komponentin sijaan. [7, s.25.] Internet Explorer 6:ssa XMLHTTP-olion luominen tapahtuu hieman eri lailla kuin 5:ssä, eli kaikkien selainten tukemiseksi on sovellukseen tehtävä kolme eri toteutusta AJAX-toiminnallisuudesta. Tämä on hankaloittanut web-sovelluskehitystä huomattavasti, sillä sovellusten toivotaan tavallisesti toimivan käytettävästä selaimesta riippumatta. HTTP-protokollaa hyödyntävänä asiakaspuolen tekniikkana XMLHttpRequest ei aseta erityisiä rajoituksia palvelinpuolen toteutukselle. Sen avulla haettavan tiedon tyyppiä ei ole rajoitettu, joskin XMLmuotoinen tieto on suositeltavaa sen helpon ohjelmallisen käsiteltävyyden vuoksi. [2, s.297.] Kuva 2.4. XMLHttpRequest-olion käyttö tiedonsiirrossa. Kuvassa 2.4 on esitetty pääpiirteittäin tiedonsiirto sääaseman sovelluspalvelun ja käyttöliittymän välillä. Vaiheessa 1. kutsutaan funktiota joka muodostaa XMLHttpRequest-olion. Tämä kutsu voi aiheutua esimerkiksi jostain käyttäjän toimesta käyttöliittymässä. Vaiheessa 2. XMLHttpRequest-olio lähettää muodostetun pyynnön sovelluspalvelulle. Sovelluspalvelu tekee kutsun perusteella tietokantakyselyn kohdassa kolme, ja saa vastauksen kyselyynsä kohdassa neljä. Sovelluspalvelu muodostaa tietokannasta haetusta tiedosta vastauksen ja lähettää sen vaiheessa 5. XMLHttpRequest saa vastauk-

7 sen ja mikäli kysely onnistui, välittää se vastauksena saadun tiedon 6. vaiheessa funktiolle joka käsittelee vastauksen. Tämä funktio voi tehdä saadulla tiedolla mitä vain, esimerkiksi päivittää sen sivulle haluttuun elementtiin tai olla tekemättä tiedolle mitään. Seitsemäs vaihe kuvaa web-sivun päivittämistä vastaanotetun tiedon pohjalta. Turvallisuussyistä selaimet asettavat rajoituksia XMLHttpRequest-olion käytölle. Ne estävät tiedon hakemisen muualta kuin siitä verkkotunnuksesta, jossa olio on luotu. Nämä rajoitteet on toteutettu hieman erilailla riippuen selaimesta, mutta nykyisissä selaimissa AJAX-pyynnöt toiseen verkkotunnukseen estetään oletuksena. [7, s.37, 38.] XMLHttpRequestin käyttö aiheuttaa myös muita ongelmia, sillä sen avulla tehdyt päivitykset eivät tallennu sivuhistoriaan, eli se rikkoo selaimen takaisin-painikkeen. 2.4. Web-sovelluspalvelu & SOAP Web-sovelluspalvelu on eräs hajautetun ohjelmistokehityksen työkalu. Ideana on, että palvelin tarjoaa jotakin palvelua verkon yli muille sovelluksille. Yleensä sovelluspalvelut toteutetaan http-protokollan yli käyttäen tiedonsiirrossa tekstipohjaista protokollaa, kuten XML:ää, SOAP:ia (engl. Simple Object Access Protocol) tai JSON:ia. Näillä saadaan aikaan korkea yhteensopivuus ja toimintavarmuus asiakkaan ja palvelimen alustoista ja ohjelmistoista riippumatta. [7, s.117.] Tyypillisesti web-sovelluspalvelut tarjoavat palveluja nimenomaan asiakasohjelmille. Sovelluspalvelulta saatava tieto sopii muotonsa vuoksi harvoin suoraan käyttäjälle esitettäväksi ja on yleensä ensin käsiteltävä ohjelmallisesti. Automaatiotekniikan liittyen on web-sovelluspalveluita hyödyntäen mahdollista kehittää muun muassa helppokäyttöisempiä, älykkäitä kenttälaitteita ja antureita, joiden konfigurointi ja käyttö on joustavampaa perinteisiin ratkaisuihin verrattuna [9]. SOAP on XML-pohjainen web-sovelluspalveluiden toteuttamiseen suunniteltu W3C:n määrittelemä tiedonsiirtoprotokolla [10]. Yksinkertaisuudessaan sen toiminta perustuu siihen, että http-protokollan POST-metodin [1, s.770] rungossa lähetetään SOAP-muotoinen viesti sovelluspalvelulle. Sovelluspalvelu käsittelee saamansa viestin ja palauttaa sen sisällön perusteella kutsujalle tietoa SOAP-viestiksi muotoiltuna. Rakenteellisesti SOAP-viesti sisältää kuoren, jonka sisällä ovat otsikko- ja runkoelementit sekä elementin virhetilanteista raportoimista varten. Sääaseman sovelluspalvelun kutsumiseen tarvitaan SOAP-kuoreen ainoastaan runkoelementti. Lisäksi websovelluspalveluihin liittyy WSDL-kuvauskieli (engl. Web Services Description Language). WSDL on XML:ään pohjautuva kieli, joka on tehty tarjottavan palvelun kuvaamista varten. Sillä on tarkoitus kuvata sovelluspalvelu niin tarkasti, että kuvauksen perusteella on mahdollista muotoilla SOAP-pyyntö ja toteuttaa asiakasohjelma sovelluspalvelulle. [11.]

8 2.5. Sovelluskohde Toteutettava selainkäyttöliittymä tehdään käytettäväksi Tampereen teknillisen yliopiston Systeemitekniikan laitoksen Vaisala Rosa -sääasemaan [12] kanssa. Sääasemalta saadaan GPRS-yhteyden välityksellä mittauksia tasaisin väliajoin. Mittaukset tallennetaan tietokantaan, josta niitä on mahdollista hakea web-sovelluspalvelun tarjoaman rajapinnan kautta käyttämällä hyväksi SOAP-protokollaa. Sovelluspalvelu tarjoaa mahdollisuuden hakea 1-100 viimeisintä mittausta.. Mittausten tiedot koostuvat sääaseman GPS-tiedoista (engl. Global Positioning System), päivämäärästä, kellonajasta, lämpötilan mittausarvosta sekä sen yksiköstä. [13.] Toteutettavan käyttöliittymän kannalta sääaseman ja palvelimen välisen kommunikoinnin toteutuksella ei ole juuri merkitystä, joten tutkimuksessa keskitytään tarkemmin tarjottuun sovelluspalveluun sekä selainkäyttöliittymän ja sovelluksen väliseen tiedonsiirtoon.

II. 911 3. SOVELLUSKEHYKSET Sovelluskehykset ovat ohjelmistokehityksen apuvälineitä, joiden tarkoituksena on helpottaa ja nopeuttaa uusien sovellusten rakentamista. Ideana on tarjota usein sovelluksissa tarvittavia komponentteja valmiina, jotta sovelluskehityksessä voidaan keskittyä sovelluskohtaisen sisällön ja toiminnallisuuden toteutukseen. [14.] Tyypillisesti sovelluskehykset tarjoavat valmiita komponentteja muun muassa käyttöliittymän toteutukseen sekä tiedon käsittelyyn ja siirtoon. Selainkohtaisten erojen vuoksi joitakin toimintoja, kuten XMLHttpRequestin käyttö, on toteutettava hieman eri lailla eri selaimille. JavaScript-sovelluskehyksissä on usein pyrkimyksenä toteuttaa tällaisia toimintoja uudestaan siten, että sovelluskehys pitää huolen selainkohtaisten erojen huomioimisesta ja piilottaa ne ohjelmistokehittäjältä. [15.] Erilaisia JavaScript-sovelluskehyksiä on tarjolla kymmeniä. Vaikka monet niistä tarjoavatkin käytännössä katsoen samoja palveluja, on toteutuksen laadussa ja ominaisuuksien määrässä suuria kirjastokohtaisia eroja. Osa kirjastoista keskittyy visuaalisten elementtien tarjoamiseen toisten panostaessa enemmän kirjaston helppoon käytettävyyteen tai erilaisiin tiedonsiirto- ja käsittelytapoihin. [16.] Sääaseman käyttöliittymän kehityksessä käytettävästä kirjastosta tulisi löytyä mahdollisuus taulukoiden luomiseen ja erilaisten kuvaajien piirtämiseen vastaanotetusta datasta sekä XML-datan käsittelyä helpottavia ominaisuuksia. Varsinkin kuvaajien piirto puuttuu tällä hetkellä monesta sovelluskehyksestä. Tarkemmin tarkastellaan Ample SDK-, Dojo-, sekä jquery- JavaScript-sovelluskehyksiä, joista kahteen ensin mainittuun sisältyy työkalut kuvaajien piirtämiseen ja kolmanteen on saatavilla useita laajennuksia, jotka mahdollistavat kuvaajien piirron [17;18;19]. Kaavio-ominaisuuksia korostetaankin selvästi vertailussa, sillä sääaseman sovelluspalvelulta saatavista lämpötilamittauksista piirretty kuvaaja on keskeinen osa toteutettavaa käyttöliittymää. 3.1. Ample SDK Ample SDK on melko tuore avoimen lähdekoodin JavaScript-sovelluskehys [17]. Sen kehittämisen aloitti vuonna 2008 perustettu suomalainen Clientside-yhtiö [20]. Ensimmäisen kehitysvuoden jälkeen Ample SDK muuttui avoimeksi projektiksi ja se on käytettävissä sekä GPL- (engl. General Public License) että MIT-lisenssillä, joka on Yhdysvalloissa Massachusetts Institute of Technology -yliopistossa kehitetty ohjelmistolisenssi. [21]. GPL on avoin lisenssi, jota käytetään useimmiten ohjelmistotuotteiden lisensoimiseen. Se sallii ohjelmakoodin kopioimisen, muuttamisen ja jakelun sillä ehdolla, että ohjelmakoodin tai sen osan edelleen jakelu tapahtuu saman lisenssin alla. Näin lisensoitua tuotetta ei siis voi käyttää suljetun lähdekoodin projektissa. Koodiin tehtyjä

10 muutoksia ei tarvitse kuitenkaan julkistaa, mikäli ohjelmaa ei jaella eteenpäin vaan käytetään ainoastaan omaan käyttöön. [22.] MIT-lisenssin ehtona ohjelman kopioimiseen, muuttamiseen ja jakeluun on lisenssitekstin säilyttäminen lähdekoodissa. Lähdekoodia ei kuitenkaan velvoiteta jakamaan, joten MIT-lisenssin alaista koodia voidaan käyttää myös suljetun lähdekoodin ohjelmistoissa. [23.] Kuvassa 3.1 on esitetty Ample SDK:n sovellusarkkitehtuuri pääpiirteittäin. Kuva 3.1. Ample SDK:n arkkitehtuuria havainnollistava kaavio. 3.1.1. Työkalut kaavioiden luomiseen Kotimaisuuden lisäksi Ample SDK:n valintaan vaikutti siitä löytyvät työkalut kuvaajien piirtoon. Ample SDK tarjoaa käytettäväksi kymmenen eri kaaviotyyppiä. Tavallisimpien kaavioiden kuten pylväs-, ympyrä-, pinta-ala- ja viivadiagrammien lisäksi sovelluskehys tarjoaa karttakuvaajan, sekä useita erikoisempia kaavioita. JavaScript kaavioille tyypilliseen tapaan kaaviot eivät ole vain datasta luotuja staattisia kuvia. Kaaviotyypistä riippuen on joka kuvaajasta mahdollista valita joko yksittäinen arvo tai kokonainen arvosarja [17]. Kuva 3.2. Yksinkertainen Ample SDK:lla luotu kuvaaja.

11 Kuva 3.3. Kuvan 3.2 luomiseen vaadittu XML-merkintä. Kaikista kaaviotyypeistä löytyy sovelluskehyksen sivuilta yksi tai useampi esimerkkikaavio sekä koodit esimerkkikaavioiden toteutuksista. Tämän enempää ohjeistusta kaavioiden käyttöön ei ainakaan toistaiseksi ole tarjolla. Lisäksi yhdessäkään esimerkkikaaviossa ei ole merkitty kuvaajiin mitään arvoasteikkoja, joten tällä hetkellä niitä ei oletettavasti ole saatavilla kuvaajiin. Amplen blogissa mainitaankin kaaviotyökalujen olevan vielä keskeneräisiä eikä niiden käyttämistä suositella missään varsinaisissa sovelluksissa [21]. Kaavioiden luomisen syntaksi on kuitenkin hyvin selkeää ja suoraviivaista ja omien kaavioiden luominen onnistuu helposti esimerkkikaavioiden koodin pohjalta. Amplen kaaviotyökalu eroaa muista tarkasteltavista sovelluskehyksistä syntaksin puolesta. Kun muissa kehyksissä mittaukset annetaan taulukkotyökalulle JavaScript-taulukkona, käyttää Ample omaa puhtaasti XML:ään pohjautuvaa merkintää. Mittaukset tulee siis muotoilla määrätyn malliseksi XML-dokumentiksi, josta sovelluskehys muodostaa kuvaajan. Kuvassa 3.2 on yksinkertainen Amplella luotu kaavio. Kuvassa 3.3 esitetty merkintä kirjoitetaan script-elementin sisään ja elementin nimiavaruudeksi on määritettävä Ample SDK:n chart-nimiavaruus. Tällä hetkellä kuvaajan akselit eivät mukaudu automaattisesti arvojen mukaan, eikä sivuilla ole ohjeita akselien muotoiluun. Tästä syystä arvoina on käytetty ainoastaan positiivisia arvoja, kun myöhemmissä esimerkkikaavioissa osa arvoista on negatiivisia. [17.] 3.1.2. Kuvauskielet Mielenkiintoinen piirre Ample SDK:ssa verrattuna muihin JavaScript-sovelluskehyksiin on se, että suurin osa työkalujen käytöstä tapahtuu käyttäen erilaisia kuvauskieliä. JavaScriptin kaltaista syntaksia ei nähdä juuri missään esimerkkikoodeissa ja sovelluskehyksen toiminta perustuukin kuvauskielten tulkkaamiseen JavaScriptin avulla. Sovelluskehyksen tarjoamien toimintojen jaottelu onkin tehty jakamalla ne omiin nimiavaruuksiinsa käytettävän kuvauskielen mukaan. Tämä tekee Amplesta helppokäyttöisemmän sellaisille käyttäjille, joilla on kokemusta kuvauskielistä kuten HTML tai XML, mutta jotka eivät ole käyttäneet JavaScriptiä. Kaiken kaikkiaan Ample SDK:n tarjoamat ominaisuudet perustuvat kuuden kuvauskielen käyttöön. [17.] Ample SDK tarjoaa yksinkertaisen ohjelmointirajapinnan Google Maps - karttapalveluun AML-kuvauskielen (engl. Abstract Markup Language) kautta. Chart-

12 kuvauskieli on puolestaan Amplen kuvaajien luomisessa käytettävä kuvauskieli, josta on esimerkki kuvassa 3.3. SMIL (Synchronized Multimedia Integration Language) on multimediaesityksiä varten suunniteltu kuvauskieli, jonka avulla on mahdollista liittää erilaisia animaatioita sivun elementteihin. SVG (Scalable Vector Graphics) on kuvauskieli kaksiulotteisten vektorikuvien luomiseen. XHTML-kuvauskieltä (engl. extensible HyperText Markup Language) käytetään käyttöliittymän perusrakenteen ja -toimintojen toteuttamiseen. [17.] 3.1.3. Tiedonsiirto ja -käsittely Poiketen monista JavaScript-sovelluskehyksistä Ample SDK ei tarjoa selainriippumatonta toteutusta XMLHttpRequest-oliosta. Amplen web-sivuilla kerrotaan sovelluskehyksen pääpainon olevan nimenomaan graafisen käyttöliittymän toteuttamiseen tarkoitettujen työkalujen tarjoamisessa. Tiedonsiirtoon liittyviä komponentteja ei ole toistaiseksi tarjolla, kuten ei myöskään työkaluja rakenteisen tiedon tehokkaampaan käsittelyyn. Sovelluskehyksen dokumentaation yhteydessä on lyhyesti esitelty XMLHttpRequest, dokumenttioliomalli sekä muita web-sovelluskehitykseen liittyviä tekniikoita, mutta mitään uutta Ample ei näihin tarjoa. 3.1.4. Käyttöliittymäkomponentit XUL (XML User Interface Language) on käyttöliittymien toteuttamiseen tarkoitettu XML-pohjainen kuvauskieli. Sitä hyödyntäen Amplella voidaan luoda erilaisia perinteisen työpöytäsovelluksen kaltaisia ominaisuuksia sisältäviä käyttöliittymiä. Ample SDK ja XUL mahdollistavat muun muassa erilaisten ikkunoiden ja valikoiden luomisen, joiden ulkonäkö muistuttaa työpöytäsovellusten ulkonäköä. Tiedon esittämiseen puumaisena rakenteena sekä erilaisten syötteiden ja valintojen toteuttamisen löytyvät omat komponentit. Päivämäärän valintaan on tarjolla komponentti, jossa syötettävän päivän voi valita hiirellä kalenterista sen sijaan, että syöttäisi päivämäärän käsin tai valitsisi sen alasvetovalikoita käyttäen. Muita Amplen tarjoamia käyttöliittymäkomponentteja ovat muun muassa välilehdet sekä latauspalkki. [17.] 3.1.5. Soveltuvuus Ample SDK on hyvin tuore sovelluskehys ja selvästi vielä keskeneräinen. Useista Amplen sivuilla listatuista ominaisuuksista on vasta osittainen toteutus, eikä kaikista ominaisuuksista löydy vielä mitään esimerkkejä tai dokumentaatiota. Myös valmiiksi mainittujen sovelluskehyksen osien käyttöön on tarjolla hyvin vähän ohjeita tai esimerkkejä. Ohjesivulla on ainoastaan kuuden aiheen lista ja niistäkin vasta kolmeen on lisätty tietoa. [17.] Voidaan todeta, että sovelluskehyksen ilmeisen keskeneräisyyden vuoksi se ei vielä sovellu käyttöliittymän toteutukseen. Projekti vaikuttaa kuitenkin lupaavalta ja on kehittyessään tulevaisuudessa potentiaalinen vaihtoehto ainakin sääaseman selainkäyttöliittymän kaltaisiin projekteihin. SoapRequest-olio ja monipuoliset kaaviotyökalut olisi-

13 vat tehneet Amplesta hyvän valinnan sääaseman käyttöliittymän kehittämiseen, mutta tällä hetkellä kumpikaan mainituista ominaisuuksista ei ole riittävän valmis käytettäväksi. [17.] 3.2. Dojo Dojo on avoimen lähdekoodin JavaScript-sovelluskehys. Sen kehitys aloitettiin vuonna 2004. Dojon kehitystä tukevat monet tunnetut yhtiöt, kuten IBM, AOL, Sun ja Google. Dojo toolkit koostuu kolmesta osasta, jotka on jaettu omiin nimiavaruuksiinsa: Dojo, Dijit ja DojoX. [18.] Dojo-nimiavaruus on sovelluskehyksen pohja. Se jakautuu kahteen osaan: kaiken perustana toimivaan dojo.js JavaScript-tiedostoon, sekä sitä laajentavaan Dojo Core -kirjastoon. Pohjana toimiva dojo.js sisältää perustoimintoja kuten tapahtumankäsittelyä, Ajax-työkaluja ja luokkamallisen ohjelmoinnin. Dojo Core laajentaa tätä peruspakettia lisäämällä siihen esimerkiksi kehittyneempiä animaatioita ja takaisin-painikkeen toiminnan toteutuksen AJAX:ia käytettäessä [24]. Pelkkä dojo.js -tiedosto on suppein vaihtoehto Dojosta ja kaikki laajemmat kokonaisuudet tarvitsevat tämän tiedoston pohjakseen. Dijit-nimiavaruus sisältää Dojon käyttöliittymäkirjaston. Se vaatii pohjakseen dojo.js -tiedoston sekä Dojo Coren. Dijit sisältää suuren valikoiman erilaisia painikkeita, valinta- ja tekstikenttiä, kalentereita, valikoita ja käyttöliittymän ulkoasun muotoiluun kuten kehysten tekoon tarkoitettuja työkaluja [18]. DojoX nimiavaruus pitää sisällään laajennuksia edellisiin nimiavaruuksiin [24]. Sitä kehitetään aliprojekteilla ja sen sisältämät työkalut saattavat kehitysvaiheesta riippuen olla valmiita ja testattuja tai vaihtoehtoisesti hyvinkin keskeneräisiä ja kokeellisia. Kuka tahansa voi saada kehittämänsä lisäominaisuuden lisättyä DojoX-kirjastoon ja se onkin lähinnä kokoelma käyttökelpoisia laajennuksia varsinaiseen sovelluskehykseen. Tästä syystä Dojox sisältää avaruuksista huomattavasti eniten erilaisia työkaluja jotka vaihtelevat Atom-syötteiden käsittelystä aina Googlen rajapintoihin. [18.] Dojon sovellusarkkitehtuuri on kuvattu pääpiirteittäin kuvassa 3.4. Kuvan kaaviossa on esitetty oleellisimmat sovelluskehyksen osat ja niiden sijoittuminen toisiinsa nähden. Kuvan kaaviossa ylempänä olevat kehyksen pääkomponentit tarvitsevat alemmat osat toimiakseen.

14 Kuva 3.4. Dojon arkkitehtuuria havainnollistava kaavio. 3.2.1. Työkalut kaavioiden luomiseen DojoX sisältää kirjaston kaavioiden luomiseen. Mahdollisia kaaviotyyppejä ovat piste-, viiva-, pylväs- ja ympyrädiagrammit. Lisäksi löytyy mahdollisuus pinta-alakaavion luomiseen. Se on käytännössä viivadiagrammi, jossa viivan ja x-akselin välinen osuus on täytetty. Viivadiagrammiin on mahdollista merkitä näkyviin datapisteet joista kuvaaja on piirretty. Erikoisuutena lähes kaikista kaavioista löytyy versiot, joissa seuraavan arvojoukon arvot lisätään edellisen arvojoukon arvoihin ja kuvaaja piirretään näistä yhteenlasketuista arvoista. [18.] Kuvaajiin, joissa on arvoakseli, saa halutessaan lisättyä taustaruudukon helpottamaan arvojen lukemista. Käytännössä tämä taustaruudukko on erillinen kaaviotyyppi, joka piirretään samaan kuvaan varsinaisen kaavion kanssa. Ruudukosta saa määritettyä erikseen pysty- ja vaakasuuntaisten viivojen piirtämisen ja myös sen, piirretäänkö viivat pää- vai apuarvoasteikon arvoille. [18.]

15 Kuva 3.5. Yksinkertainen Dojolla luotu kuvaaja. Ohjelma 3.1. Kuvan 3.5 luomiseen vaadittu koodi. Kuvaajat rakentuvat kolmesta osasta: itse kuvaajasta, akseleista sekä arvoista tai arvojoukoista jotka halutaan esittää. Tämä tekee kuvaajien luomisesta hieman työläämpää, sillä esimerkiksi akseleita ei oletuksena liitetä kuvaajaan vaan ne täytyy aina itse lisätä kuvaajaa luodessa. Pakolliset osat käyttökelpoisen kuvaajan tuottamiseksi ovat kuvaaja ja arvot. Akseleita ei ole pakko lisätä eivätkä kaikki kuvaajatyypit niitä edes tue. Kuvassa 3.5 on esitetty yksinkertainen viivadiagrammi ja ohjelmassa 3.1 sen luomiseen vaadittu koodi. Koodissa luodaan ensin määrätyn muotoinen taulukko, joka sisältää piirrettävät arvoparit. Kuvaajan voi piirtää myös pelkkiä lukuja sisältävästä taulukosta, mutta tällöin x-akselin arvot vastaavat automaattisesti taulukon indeksien arvoja. Taulukon luomisen jälkeen luodaan uusi kaavio-olio kuvaaja-nimiseen div-elementtiin. Tähän olioon lisätään sitten viivadiagrammi-tyyppinen kuvaaja oletusasetuksilla, sekä akselit ja arvosarja, josta kuvaaja piirretään. Kun kaikki halutut ominaisuudet on liitetty kuvaajaan, piirretään se kutsumalla kaavio-olion render-metodia. Jokaisella kuvaajalla on omat tälle kuvaajalle sopivat säädettävät ominaisuudet. Esimerkiksi viivadiagrammissa on mahdollista lisätä viivaan kaarevuutta sen sijaan että se vain yhdistäisi arvopisteet suorilla viivoilla ja pylväsdiagrammeissa puolestaan pystyy vaikuttamaan pylväiden väliin jäävään tilaan. [18.] Akseleiden käyttäminen on joustavaa. Niitä voi lisätä kaavioon mielivaltaisen määrän. Akselit ovat pysty- tai vaakasuuntaisia ja ne voi nimetä haluamallaan tavalla. Akseleiden arvoasteikot ja apuasteikot voi määrittää mielivaltaisesti tarkoituksiin sopivaksi valitsemalla mikä on pääarvojen väli, moneenko osaan yksi pääväli jaetaan apuasteikolla, miltä väliltä asteikon arvot ovat ja niin edelleen. Lisäksi arvoasteikot saa määritettyä sopeutumaan automaattisesti sen mukaan, minkälaisista arvoista kuvaaja piirretään. Arvoasteikosta voi myös määrittää erikseen näkyvyys kaikille eri asteikkomerkeille, kuten pää- ja apuasteikon arvoille. Arvot voi myös korvata esimerkiksi tekstillä, siten

16 että akselilla esitetään arvoina vaikka viikonpäivien nimiä, vaikka ne onkin piirtäessä esitetty numeroilla. Myös arvosarjojen muotoilu on mahdollista. Muotoilumahdollisuudet riippuvat käytettävän kuvaajan tyypistä. Arvosarjoja voi nimetä ja niille voi määrittää haluamansa värin. [18.] Kaavioihin on mahdollista liittää myös paljon toiminnallisuutta. Tapahtumankäsittely ja kaavion koostuminen erillisistä paloista mahdollistaa dynaamisten kaavioiden toteutuksen. Yksittäisten arvojen merkeille voi määrittää toiminnallisuutta kun niitä valitaan hiirellä tai pelkästään viedään hiiren osoitin pisteen päälle. [18.] Vastaavaa tapahtumankäsittelyä voi liittää lähes mihin tahansa kaavion osaan. 3.2.2. Tiedonsiirto ja -käsittely Dojo-nimiavaruus tarjoaa perustyökaluja tiedonsiirtoon ja käsittelyyn. Olennaista onkin selainkohtaisten erojen piilottaminen, jotta käyttäjän ei tarvitse itse miettiä miten eri selainten kohdalla toimitaan, vaan sovelluskehys huolehtii selainten erojen huomioimisesta. Tästä hyvänä esimerkkinä ovat Dojo:n xhr-funktiot, jotka tarjoavat käyttäjälle XMLHttpRequest-olion toiminnallisuuden selainriippumattomassa muodossa. Funktiot ovat korkeamman tason toteutuksia ja jokaista http-metodia kohden löytyy oma funktio. Tämä vähentää käytettävän funktion vaatimien parametrien määrää tehden funktiosta helppokäyttöisemmän. [18.] Dojo tarjoaa omat funktiot dokumenttioliomallin manipulointiin käyttäen hyväksi CSS:n valitsimia (Cascading Style Sheets). Kaikkiin käsiteltävän dokumentin solmuihin päästään käsiksi query-funktion avulla. Verrattuna dokumenttioliomallin tarjoaman ohjelmointirajapinnan syntaksiin, saadaan Dojon avulla dokumentin manipulointiin tarvittavaa koodimäärää vähennettyä huomattavasti. Funktiolle annetaan parametrina CSS-merkinnällä etsittävät solmut esimerkiksi solmun tunnisteen, luokan tai nimen perusteella ja se palauttaa taulukon löydetyistä kriteerit täyttävistä solmuista. Samalla funktiolla voidaan etsiä myös esimerkiksi tietyn solmun kaikki lapsisolmut tai ainoastaan tietyt kriteerit täyttävät lapsisolmut. [18.] Taulukkojen läpikäynti on Dojon avulla helppoa. Mikäli jokin taulukko halutaan käydä kokonaan läpi, ei tarvita perinteisiä iterointifunktioita kuten for-silmukkaa, vaan läpikäynti voidaan suorittaa Dojon foreach-funktiolla. Tämä funktio kohdistetaan haluttuun taulukkoon ja sille annetaan parametriksi funktio, joka suoritetaan kaikille taulukon alkioille. [18.] 3.2.3. Käyttöliittymäkomponentit Sovelluskehyksen Dijit-osa tarjoaa paljon erilaisia komponentteja käyttöliittymän visuaaliseen toteutukseen. Päivämäärän valintaa varten sovelluskehys tarjoaa kalenterikomponentin kuukausinäkymällä. Navigointiin liittyviä komponentteja on tarjolla kattava valikoima. Valikkokomponentit on pyritty luomaan ulkoisesti työpöytäsovelluksien valikkoja vastaaviksi, mikä mahdollistaa ulkonäöltään perinteisiä ohjelmia muistuttavien web-sovellusten toteuttamisen. Varsinaisen päävalikon lisäksi sovellukseen on mah-

17 dollista liittää työkaluvalikoita, väripaletteja, sekä hiiren oikeasta painikkeesta aukeava lisävalikko. Viimeksi mainittu korvaa hiiren oikean painikkeen painamisesta selaimeen normaalisti aukeavan valikon. Dijit tarjoaa tekstieditorin, joka tarjoaa mahdollisuuden tekstidokumenttien luomiseen ja muotoiluun selaimessa. Editorista löytyy tekstin muotoiluun vastaavia ominaisuuksia kuin esimerkiksi Microsoftin WordPad-tekstinkäsittelyohjelmasta. Muita käyttökelpoisia komponentteja ovat muun muassa latauspalkki sekä puumainen navigointivalikko. Käyttöliittymäosio tarjoaa mahdollisuuden myös tavallisia JavaScriptponnahdusikkunoita tyylikkäämpien ilmoitusten toteuttamiseen. [18.] 3.2.4. Muut ominaisuudet JavaScript on oliokieli, mutta siinä olioita ei toteuteta luomalla ensin luokkia kuten C++:ssa tai Javassa. JavaScriptissä toteutetaan ensin niin kutsuttu prototyyppiolio, jolta muut oliot voivat periä ominaisuuksia. Tämä on hyvin erilainen toteutustapa perinteisempään luokkamalliseen olio-ohjelmointiin verrattuna. [2, s.137 140.] Dojo tarjoaa mahdollisuuden luokka-malliseen olio-ohjelmointiin JavaScriptillä, mikä helpottaa luokkiin tottuneen ohjelmoijan JavaScriptin käyttöä. Dojo sisältää myös hieman poikkeavan tavan eri komponenttien käyttöönottoon. Kun tavallisesti kirjastojen komponentit sisällytetään sivulle script-elementtien avulla, tarvitsee Dojoa käyttäessä sivulle ladata näin ainoastaan dojo.js-tiedosto. Kaikki muut käytettävät komponentit voidaan sen jälkeen ottaa käyttöön Dojon require-funktion avulla. Tämä mahdollistaa kirjastojen lataamisen vasta sitten kun niitä oikeasti tarvitaan, mikä puolestaan nopeuttaa sivun ensimmäistä latausta. [18.] Kuten kappaleessa 3.2 todettiin, kaikki erikoisemmat työkalut löytyvät sovelluskehyksen DojoX-osiosta. Se sisältää komponentteja muun muassa flash-videoiden toistamiseen, Atom-syötevirtojen käsittelyyn, paljon JSON-muotoisen tiedon käsittelyyn liittyviä työkaluja, Googleen liittyviä erilaisia hakutyökaluja sekä Flickr-palveluun liittyviä komponentteja kuvien hakemiseen ja jakamiseen. [18.] Kaiken kaikkiaan sovelluskehyksen tarjoama työkaluvalikoima on laaja ja monipuolinen. Suurin osa sivuilla olevista komponenteista on pitkälle kehitettyjä ja käyttövalmiita. 3.2.5. Soveltuvuus Dojo tarjoaa käyttäjälle paljon esimerkkejä ja ohjeita erilaisten työkalujen ja komponenttien käyttöön. Eri ominaisuuksien dokumentointi on hyvää varsinkin kehyksen Dojo- ja Dijit-osissa. Tämän helpottaa sovelluskehyksen käyttöä huomattavasti. Internetistä löytyvän dokumentaation ja ohjeiden lisäksi Dojosta on saatavilla myös kirjallisuutta. DojoX-osa kokoaa hyvin sovelluskehyksen yhteyteen sille tehdyt laajennukset ja helpottaa osaltaan sopivien komponenttien löytämistä. [18.] Hyvän kaaviointityökalun sekä laajan käyttöliittymäkomponenttivalikoiman ansiosta Dojo soveltuu hyvin sääaseman käyttöliittymäkehitykseen.

18 3.3. jquery jquery on Ample SDK:n ja Dojon tapaan avoimen lähdekoodin JavaScriptsovelluskehys. Sen kehitys aloitettiin syksyllä vuonna 2005. Tavoitteena oli saada aikaan sovelluskehys, joka hyödyntäisi CSS-valitsimien käyttöä lyhyemmällä syntaksilla kuin muut sen hetkiset sovelluskehykset. Ensimmäinen versio sovelluskehyksestä julkaistiin vuoden 2006 tammikuussa ja toukokuussa jquery tuli käytettäväksi MITlisenssin alla. [25.] jquery on kehittynyt monipuoliseksi sovelluskehykseksi ja viimeisen vuoden aikana sen käyttö suosituimmilla web-sivuilla on kasvanut huomattavasti. jquery onkin tällä hetkellä suosituimpia JavaScript-sovelluskehyksiä. [26.] Sitä käyttävät muun muassa Google, Dell ja Mozilla [19]. jquery on jaettu kahteen osaan: kaiken olennaisimman toiminnallisuuden sisältävään peruskirjastoon sekä käyttöliittymäkirjastoon, joka vaatii toimiakseen peruskirjaston. Sovelluskehykselle kehitetyistä lisäosista ei ole Dojon tapaan muodostettu omaa kirjastoa, mutta niitä on kuitenkin listattu runsaasti jqueryn web-sivuilla. [19.] jqueryn arkkitehtuuri on kuvattu pääpiirteittäin kuvassa 3.6. jqueryn laajennukset on esitetty osittain varsinaisen kehyksen ulkopuolisena lohkona, sillä ne tarvitsevat pohjakseen kehyksen jquery-osan, mutta eivät varsinaisesti kuulu tarjottuun sovelluskehyspakettiin. Kuva 3.6. jqueryn arkkitehtuuria havainnollistava kaavio. 3.3.1. Työkalut kaavioiden luomiseen jquery ei sisällä itsessään työkaluja kaavioiden luomiseen. Sille on kuitenkin saatavilla suuri valikoima erilaisia laajennuksia, joilla kuvaajien piirtäminen onnistuu. Vertailuun on näistä valittu kolme kypsältä ja visuaalisesti hienolta näyttävää JavaScript-työkalua kuvaajien piirtämistä varten: Flot, jqplot ja Highcharts. Näitä tarkastellaan seuraavissa aliluvuissa tarkemmin. Flot ja jqplot on toteutettu laajennuksiksi jquerya varten, ja ne

19 tarvitsevat jqueryn peruskirjaston toimiakseen. Highcharts puolestaan vaatii toimiakseen joko jqueryn tai MooTools-sovelluskehyksen. 3.3.1.1 Highcharts Highcharts on käytettävissä Creative Commons Attribution Non-Commercial 3.0 - lisenssin alla. Sen käyttäminen on ilmaista ei-kaupalliseen käyttöön. Highcharts tarjoaa mahdollisuuden erilaisten viiva-, pinta-ala-, pylväs- ja ympyrädiagrammien luomiseen. Lisäksi eri diagrammeja on mahdollista yhdistellä samaan kuvaan. Kuvassa voi olla myös useita arvoakseleita. Yleisesti ajatellen sääaseman käyttöliittymän toteutusta tämä mahdollistaa esimerkiksi sademäärien ja lämpötilojen kuvaamisen yhdellä kuvalla, jossa sademäärät voidaan esittää pylväillä ja lämpötila viivadiagrammilla. Sovelluspalvelu, jolle käyttöliittymä toteutetaan, tarjoaa kuitenkin vain lämpötilatietoa. Kaikki kaaviot ovat interaktiivisia ja kuvaajan elementin arvon tai jonkin muun tiedon saa näkymään viemällä hiiren osoittimen elementin päälle. Lisäksi kuvaajaan on mahdollista liittää suurennustoiminto jolla pitkän suuren datasarjan kuvaajaa saa tarkasteltua haluamaltaan väliltä. [27.] Kuva 3.7. Highcharts-laajennuksella luotu esimerkkikuva. Ohjelma 3.2. Kuvan 3.7 luomiseen vaadittu koodi. Kuvaajiin on mahdollista lisätä yksittäisiä datapisteitä. Kuvaajaa ei tarvitse piirtää uudestaan eikä uusinta mittausarvoa tarvitse välttämättä lisätä mihinkään taulukkoon, josta uusi kuvaaja sitten piirrettäisiin. Lisäksi Highcharts tarjoaa kaksi erikoisempaa ominaisuutta kuvaajien tekemiseen: mahdollisuuden käyttäjälle lisätä arvopisteitä hiiren avulla suoraan kuvaajaan, sekä pitkän aikavälin tietoja varten kuvaajan, pienestä koko aikaväliä esittävästä kuvaajasta on mahdollista maalata osa, joka sitten esitetään tarkemmassa kuvaajassa. Visuaalisesti Highcharts on vertailtavista kirjastoista näyttä-

20 vin. Kuvaajiin saa liitettyä valmiita tyylejä jotka helpottavat kuvaajien muokkaamista nopeasti halutunlaisiksi. Myös datapisteiden symbolin saa itse määrittää lisäämällä oman kuvan symboliksi. Kaavioiden luominen on selkeää ja syntaksi helposti ymmärrettävää ja sisäistettävää. Kuvassa 3.7 on mahdollisimman yksinkertainen Highchartsilla luotu esimerkkikuvaaja. Highchartsin sivuilla olevista esimerkeistä saa paremman käsityksen siitä, kuinka tyylikkäitä kaavioita sillä on mahdollista saada aikaan. Kaiken kaikkiaan Highcharts vaikuttaa kypsältä ja monipuoliselta kirjastolta kaavioiden luomiseen. [27.] 3.3.1.2 Flot Flot on jquerylle tehty laajennus kuvaajien piirtoa varten. Sen on käytettävissä MITlisenssin alla. Sivuilla kerrotaan tavoitteina olevan helppo käytettävyys, tyylikäs ulkoasu sekä interaktiiviset toiminnot kuten kuvan lähentäminen. [28.] Kuva 3.8. Yksinkertainen Flot:illa luotu kuvaaja ilman lisämääreitä. Ohjelma 3.3. Kuvan 3.8 luomiseen vaadittu JavaScript-koodi. Flotin tarjoama kuvaajavalikoima on melko suppea. Tällä hetkellä sillä on mahdollista luoda ainoastaan pylväs-, pinta-ala- ja viivadiagrammeja. Kirjaston käyttö puolestaan on helppoa, sillä kaikki asetukset ovat valinnaisia. Kuvaajan piirtoa varten täytyy ainoastaan määrittää sivulle elementti, jonka koko määrätään kiinteäksi sekä taulukko, joka sisältää piirrettävän arvosarjan tai arvoparit. Tämän jälkeen tarvitaan yksi lyhyt komento, jossa määritellään kohde-elementti sekä arvosarja josta kuvaaja piirretään. Flot huolehtii itse arvoakseleiden skaalauksesta saamiensa arvojen perusteella, joten kuvaaja on mahdollista saada aikaan todella pienellä koodimäärällä. Arvoakseleiden asetukset voi myös määrittää erikseen, mikäli automaattinen skaalaus ei sovellu käyttötarpeisiin. [29.] Kuvassa 3.8 on esitetty yksinkertainen Flotilla luotu kuvaaja ja ohjelmassa 3.3 kuvaajan luomiseen vaadittu JavaScript-koodi. Koodin lisäksi vaaditaan ainoastaan jquery- ja Flot-kirjastojen käyttöönotto sekä kohde-elementin luominen sivulle. Ohjelmassa 3.3 kuvaaja luodaan div-elementtiin, jonka tunniste on kuvaaja. Elementin kooksi on määritelty 450x150 kuvapistettä. Flot mahdollistaa myös käyttäjän vuorovaikutuksen arvopisteiden kanssa. Pisteitä voi valita hiirellä ja niiden arvot on mahdollista asettaa näkymään liikuttaessa hiiren