1. No category

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.
2.
Johdanto .................................................................................................................... 1
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
Joukko tekniikoita, joiden avulla web-sovelluksista saadaan
tehtyä dynaamisia. (engl. Asynchronous JavaScript and
XML).
CSS
W3C:n kehittämä ja ylläpitämä tyylikieli rakenteisten dokumenttien esitystavan muotoiluun. (engl. Cascading Style
Sheets).
Dojo
Suosittu JavaScript-sovelluskehys.
DOM
Dokumenttioliomalli on ohjelmointirajapinta, joka mahdollistaa HTML- ja XML-dokumenttien muokkaamisen. (engl.
Document Object Model).
GPL-lisenssi
Vapaa ohjelmistolisenssi, jolla lisensoituja tuotoksia saa
vapaasti muokata ja käyttää sillä edellytyksellä, että muunnellun tuotteen jakelu tapahtuu myös GPL-lisenssin alla.
GPRS
Matkapuhelimen tai GPRS-sovittimen avulla käytettävä
GSM-verkossa toimiva pakettikytkentäinen tiedonsiirtopalvelu. (engl. General Packet Radio Service).
HTTP
Alun perin web-sivujen siirtämiseen suunniteltu tilaton tietoliikenneprotokolla. (engl. HyperText Transfer Protocol).
JavaScript
Ohjelmointikieli, joka kehitettiin vuorovaikutuksen lisäämiseksi web-sivuille.
JSON
Yksinkertainen tiedonsiirtomuoto, joka muistuttaa JavaScript-ohjelmointikielen olioiden merkintätapaa. (engl. JavaScript Object Notation).
jQuery
Suosittu JavaScript-sovelluskehys.
MIT-lisenssi
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
Käyttöliittymä, jonka avulla eri ohjelmat voivat vaihtaa
tietoa eli keskustella keskenään.
SGML
Standardoitu metakieli dokumenttien merkintäkielten määrittelyyn. (engl. Standard Generalized Markup Language).
SMIL
Multimediaesityksiä varten kehitetty XML-pohjainen kuvauskieli. (engl. Synchronized Multimedia Integration Language).
SOAP
XML-kieleen pohjautuva tietoliikenneprotokolla, jonka
pääasiallisena tehtävänä on mahdollistaa proseduurien etäkutsut. (engl. Simple Object Access Protocol).
Sovelluskehys
Ohjelmistotuote, joka muodostaa rungon sen päälle rakennettavalle ohjelmalle. (engl. Software Framework).
SVG
XML:ään pohjautuva kaksiulotteisten vektorikuvien kuvauskieli. (engl. Scalable Vector Graphics).
W3C
Kansainvälinen yhteisö, jonka tavoitteena on kehittää suosituksia ja protokollia Web:in kehityksen varmistamiseksi.
(engl. World Wide Web Consortium).
Web-sovelluspalvelu
Ohjelmointirajapinta joka tarjoaa palveluja muille sovelluksille tietoverkon, esimerkiksi Internetin, yli (engl. Web Service).
WSDL
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
Kuvauskieli jota käytetään dokumenttien kuvaamiseen ja
formaattina tiedonvälityksessä. Pohjautuu SGML:ään.
(engl. eXtensible Markup Language).
XUL
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.
3.
911
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ä jQueryJavaScript-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
21
arvon päälle. Myös kuvaajan lähentäminen ja loitontaminen sekä kuvaajan paikan liikuttaminen kuvassa on mahdollista. [29.]
3.3.1.3 jqPlot
jqPlot on Flotin tapaan jQueryn pohjalle rakentuva kirjasto kuvaajien luomiseen. Se on
käytettävissä MIT- ja GPL-lisenssien alla. jqPlotin avulla on mahdollista luoda viivapylväs- ja ympyrädiagrammeja. Arvot merkitään automaattisesti kuvaan pisteillä ja akselit muotoillaan automaattisesti, mikäli niille ei erikseen anneta asetuksia. Asteikot on
mahdollista muotoilla myös logaritmisiksi tai ajan mukaan. Aikamuotoiluun on monipuoliset asetukset ja asteikkojen arvot voi antaa melkein missä tahansa yleisesti käytetyssä muodossa. Arvoasteikoita ja niiden otsikoita voi muotoilla melko vapaasti ja arvojen merkinnät voi kääntää haluamaansa kulmaan vaakatasoon nähden. Tästä on hyötyä
erityisesti kun käytetään asteikon arvoina päivämääriä tai vastaavia pidempiä merkintöjä. Lisäksi kirjasto sisältää niin kutsutun tooltip-toiminnon, eli pisteen arvo saadaan näkyviin viemällä hiiren osoittimen pisteen päälle. [30.]
Kuva 3.9. Yksinkertainen jqPlot:illa luotu kuvaaja ilman lisämääreitä.
Ohjelma 3.4. Kuvan 3.9 luomiseen vaadittu JavaScript-koodi.
Kuvassa 3.9 on esitetty ohjelmalla 3.4 luotu kuvaaja. jqPlotille on annettu ainoastaan kohde-elementti sekä taulukko, josta kuvaaja halutaan piirtää. Kirjasto suorittaa
automaattisesti kaiken muotoilun. Kuten kuvasta 3.9 voidaan havaita, on jqPlotin avulla
helppo luoda tyylikkäitä kaavioita pienellä koodimäärällä. Kuvaajan ulkoasua ja piirtoasetuksia voi myös melko vapaasti muokata mieleisekseen, mikäli automaattisesti muotoiltu kuvaaja ei sovi käyttötarkoituksiin.
3.3.2.
Tiedonsiirto ja -käsittely
jQueryn mainostetaan muuttavan tavan, jolla kirjoitat JavaScriptiä. Sovelluskehyksen
toiminta rakentuu hyvin jQuery-funktion ympärille, jonka avulla päästään helposti käsiksi dokumenttioliomalliin. Erityisen lyhyttä syntaksista tekee se, että jQuery-nimen
voi korvata kirjoittamalla pelkän dollarimerkin $. jQuery-funktiolle voi antaa CSS-
22
valitsimen, jonka perusteella etsitään kaikki täsmäävät elementit ja muodostetaan niistä
jQuery-olio. Kaikki dokumentin div-elementit voitaisiin etsiä yksinkertaisesti komennolla jQuery(’div’); tai lyhyemmin $(’div’);. Verrattuna dokumenttioliomallin tarjoamaan ohjelmointirajapintaan jQueryn tarjoama dokumentin käsittelytapa
vähentää tarvittavaa koodin määrää huomattavasti. Haettujen elementtien sisällön ja
ominaisuuksien lisäämiseen, muokkaamiseen ja poistamiseen löytyy myös useita funktioita. [19.]
jQueryn peruskirjasto tarjoaa Dojon tapaan selainriippumattoman AJAXtoteutuksen. jQueryssa se on toteutettu yhdellä funktiolla, jonka toiminta määritetään
parametreilla. Haettaessa XML-muotoista tietoa ajax:illa muodostaa jQuery sovelluspalvelun palauttamasta tiedosta automaattisesti dokumenttiolion, jota voidaan käsitellä
jQueryn tarjoamilla funktioilla samaan tapaan kuin web-sivua. Matalan tason ajaxfunktion lisäksi jQuery tarjoaa korkeamman tason get- ja post-funktiot kyseisistä httpmetodeista. Nämä funktiot tarvitsevat vähemmän parametreja verrattuna ajax:iin eivätkä
ole yhtä yleiskäyttöisiä. Lisäksi jQuery tarjoaa load-funktion, joka mahdollistaa
HTML:n lataamisen suoraan määrättyyn sivun elementtiin, sekä omat funktiot JSONmuotoisen tiedon sekä JavaScript-koodin lataamiseen. [19.]
jQuery tarjoaa Dojon forEach-funktiota vastaavan each-funktion taulukko- ja
tietorakenteiden läpikäyntiin. Alkioita ei tarvitse iteroida läpi silmukassa, vaan funktio
suorittaa sille parametrina annetun toisen funktion jokaiselle alkiolle. [19.]
3.3.3.
Käyttöliittymäkomponentit
Sovelluskehyksen käyttöliittymäosa jQueryUI tarjoaa valikoiman komponentteja käyttöliittymän toteuttamiseksi. jQueryn web-sivuilta saa ladattua räätälöidyn käyttöliittymäpaketin, johon voi itse valita tarvitsemansa käyttöliittymäkomponentit ja lisäksi käyttöliittymäkomponenteissa käytettävän valmiin teeman eli CSS-tyylipaketin. Valmiita
teemoja on valittavana yli kaksikymmentä, ja lisäksi sivulta löytyy editori omien teemojen helppoon luomiseen. Teemojen lisäksi käyttöliittymäosuuden tarjoamat ominaisuudet jakautuvat karkeasti kolmeen osaan: vuorovaikutuksen luomiseen elementteihin,
varsinaisiin käyttöliittymäkomponentteihin ja visuaalisiin efekteihin. [19.]
Vuorovaikutusosuus tarjoaa mahdollisuuden elementtien siirtämiseen ja niiden
koon muuttamiseen hiiren avulla. Elementeillä voi myös olla määrätyt paikat, mutta
niiden järjestystä näillä paikoilla voi muuttaa liikuttamalla elementtejä hiirellä. Efektiosio tarjoaa osittain samoja efektejä kuin peruskirjastokin, mutta valinnanvaraa on
enemmän ja lisäksi efekteistä on havainnolliset esimerkit sivulla. Varsinaisista käyttöliittymäelementeistä löytyy muiden vertailtavien sovelluskehysten tapaan kalenterisovellus. jQueryUI tarjoaa useita komponentteja valikkojen luomiseen, kuten välilehdet.
Erilaisia painike- ja syötteenvalintaelementtejä on myös tarjolla. Monet elementeistä
ovat tavallisia html-elementtejä, joihin on lisätty käyttöliittymän teemaa hyväksi käyttäen tyylikäs ulkoasu. Erikoisempia komponentteja ovat latauspalkki sekä automaattinen
tekstikentän täydennys, joka hyödyntää AJAX:ia. [19.]
23
3.3.4.
Muut ominaisuudet
jQuery mahdollistaa tapahtumankäsittelyn liittämisen elementteihin hyödyntäen kappaleessa 3.2.2 kuvattua elementtien etsimistoimintoa. Lyhyesti sanottuna jQuery tarjoaa
suurimman osan dokumenttioliomallin tarjoamista mahdollisuuksista dokumentin
muokkaamiseen huomattavasti lyhyemmällä syntaksilla. Sivun elementtien halutaan
yleensä latautuvan ennen kuin JavaScript-koodia suoritetaan. Tämän varmistamiseen
JavaScript ja DOM tarjoavat onLoad-funktion. [19.]
Funktion huonona puolena on kuitenkin se, että JavaScript-koodia ei suoriteta
ennen kuin kaikki sivun elementit, kuten kuvat, ovat kokonaan latautuneet. Tätä varten
jQuery sisältää oman funktion, jolla voi tarkistaa dokumentin kaikkien elementtien latautuneen ennen kuin koodia suoritetaan, mutta joka ei odota esimerkiksi edellä mainittujen kuvien latautumista. Lisäksi peruskirjasto sisältää muun muassa joitakin efektejä
joita on mahdollista liittää sivun elementteihin. [19.]
3.3.5.
Soveltuvuus
jQuery on monipuolinen ja kypsä JavaScript-sovelluskehys, joka tarjoaa kaikki tarvittavat ominaisuudet sääaseman käyttöliittymän toteuttamiseen. Vaikka aivan kaikkia ominaisuuksia kuten kuvaajien luomiseen vaadittavia työkaluja ei sisälly suoraan sovelluskehykseen, on jQueryn sivuilla listattu paljon sitä hyödyntäviä laajennuksia, esimerkiksi
jqPlot ja Flot, jotka tarjoavat varsinaisesta sovelluskehyksestä puuttuvia toimintoja. Sovelluskehyksen suosio aiheuttaa sen, että sille on tarjolla jopa parempi valikoima erilaisia työkaluja verrattuna sellaisiin sovelluskehyksiin, jotka pyrkivät sisällyttämään edes
jonkinlaisen toteutuksen esimerkiksi kuvaajista osaksi varsinaista sovelluskehystä.
jQueryn käytön omaksuminen on helppoa tarjotun kattavan ohjeistuksen avulla. Sen
voidaan todeta soveltuvan hyvin sääaseman käyttöliittymäkehitykseen.
3.4.
Käytettävän kirjaston valinta
Kuten luvussa 3.1 todettiin, Ample SDK ei keskeneräisyytensä vuoksi sovellu vielä
sääaseman käyttöliittymäkehitykseen, joten vaihtoehdoiksi toteutusta varten jäävät Dojo
ja jQuery.
Molemmilla sovelluskehyksillä olennaisimpien toimintojen, kuten selainriippumattoman AJAX-pyynnön luominen ja dokumenttioliomallin helppo manipulointi on
mahdollista. Dojon valintaa tukevat laajempi käyttöliittymäkirjasto, joustavampi mahdollisuus sovelluskehyksen eri komponenttien käyttöönottoon vasta tarvittaessa, sekä
luokka-mallisen olio-ohjelmoinnin mahdollisuus. jQuery puolestaan sisältää hieman
lyhyemmän syntaksin ja suuremman valikoiman laajennuksia. Myös jQuery:n ajaxfunktion toteutus on hieman monipuolisempi.
24
Käytettäväksi sovelluskehykseksi valikoitui jQuery. Valinta johtui pääosin
jQuerylle saatavilla olevien kuvaajien piirtoon tarkoitettujen laajennusten laadusta verrattuna Dojon kuvaaja-työkaluun. Kuvaajien luominen Dojon avulla oli huomattavasti
työläämpää ja sillä tuotetut kuvaajat eivät olleet visuaalisesti yhtä näyttäviä kuin jQueryn laajennuksilla luodut. Lisäksi Dojon puolesta puhuvat komponenttien lataaminen
vasta tarvittaessa ja luokka-mallinen olio-ohjelmointi eivät ole tarpeellisia tämän kokoluokan ohjelmistoprojektissa.
25
4.
KÄYTTÖLIITTYMÄN TOTEUTUS
Tässä luvussa käydään läpi jQueryn avulla toteutetun sääaseman selainkäyttöliittymän
toteutus. Tavoitteena toteutettavalle käyttöliittymälle on selkeys, helppokäyttöisyys sekä
tyylikäs ulkonäkö. Käyttöliittymä toteutetaan mahdollisimman pitkälle JavaScriptiä
hyödyntäen siten, että käyttöliittymäsivu tarvitsee ladata palvelimelta ainoastaan kerran.
Latauksen jälkeen käyttöliittymän sisällön muuttaminen ja päivittäminen tapahtuu manipuloimalla dokumenttioliota jQueryn avulla ja tiedonsiirtoa tapahtuu ainoastaan haettaessa uutta mittausta sääaseman sovelluspalvelulta. Liitteissä B ja C on esitetty käyttöliittymän toteuttava HTML-dokumentti sekä käyttöliittymää varten itse tuotettu JavaScript-koodi.
4.1.
Rajoitukset
Suurimmat rajoitukset toteutettavalle käyttöliittymälle aiheutuvat sääaseman sovelluspalvelusta. Siltä on mahdollista hakea maksimissaan 100 viimeisintä lämpötilamittausta.
Koska sääasemalta saadaan uusi mittaus viiden minuutin välein, on käyttöliittymässä
mahdollista käsitellä tietoa hieman yli kahdeksan tunnin ajalta. Lisäksi käyttöliittymän
toteutusta rajoittaa se, että ainoa sovelluspalvelulta saatava mittaus on lämpötila.
Muita rajoituksia ja toteutuksessa huomioon otettavia asioita ovat AJAX:in rajoitteet sekä käyttöliittymän toimivuus eri selaimissa. Käyttöliittymän tulee toimia ainakin suosituimmissa web-selaimissa, eli Internet Explorerissa sekä Mozilla Firefoxissa
[31]. Koska selaimet rajoittavat turvallisuussyistä AJAX:in käyttöä kuten luvussa 2.3.
on todettu, on sovelluspalvelulta mahdollista hakea mittauksia ainoastaan käyttöliittymän ollessa sijoitettu samaan verkko-osoitteeseen sovelluspalvelun kanssa.
4.2.
Käyttöliittymän rakenne ja navigointi
Käyttöliittymä koostuu kolmesta näkyvästä pääkomponentista: navigointivalikosta, kehyksestä, jonka sisällä kaikki käyttöliittymän sisältö esitetään sekä kehyksen alapuolella
olevasta tiedonsiirtoon liittyvästä latauspalkista. Nämä käyttöliittymän elementit ovat
aina näkyvissä ja sivua käyttäessä ainoastaan kehyksen sisältö muuttuu. Tämä luo mielikuvan siitä, että kehyksen sisälle ladattaisiin toinen sivu, joka navigoidessa vaihtuisi.
Koska monet Internetin käyttäjät ovat tottuneet tämän tyylisiin navigointiratkaisuihin,
helpottaa tämä mielikuva sivun käyttöä.
Käyttöliittymän alareunassa on jQueryUI-kirjaston tarjoama latauspalkkikäyttöliittymäelementti. Luodulle elementille asetetaan arvo elementille määritetyltä
26
arvoväliltä (oletuksena 0-100), joka ilmoittaa kuinka suuri osa palkista täytetään. Väritys määräytyy automaattisesti käytettävän käyttöliittymäteeman perusteella. Toteutettavassa käyttöliittymässä latauspalkkia käytetään kuvaamaan seuraavan mittauksen hakuun jäljellä olevaa aikaa. Käyttöliittymän kehys on kiinteän kokoiseksi määritetty
html:n div-elementti, jolle on CSS-tyylien avulla määritetty ympäröivä kehys.
Navigointivalikko on myös toteutettu jQueryUI:n tarjoamien painikkeiden avulla. Käytettävä painikeryhmä on käyttöliittymäkirjaston tarjoama visuaalinen muotoilu
html:n valintaelementille, jossa ainoastaan yksi valinta voi olla kerrallaan aktiivinen.
Tätä varsinaista valintaominaisuutta ei käytetä käyttöliittymässä muuhun kuin sen ilmoittamiseen, mikä käyttöliittymänäkymä on valittuna. Tämä näkyy kyseiseen näkymään liittyvän painikkeen tummempana värinä. Navigointi, eli tässä tapauksessa käyttöliittymän sisällön muokkaus JavaScriptillä, perustuu painikkeisiin liitettyihin tapahtumiin. Jokaiseen valikon painikkeeseen on liitetty jQueryn tarjoama click-tapahtuma.
Kaikkien näkymien luomiseen on omat funktionsa, jotka tapahtumien avulla liitetään
oikeisiin painikkeisiin. Kun painike valitaan hiirellä, aiheutuu siitä tapahtuma joka kutsuu käyttöliittymän sisältöä muokkaavaa funktiota.
4.3.
Tiedonsiirto
Käyttöliittymän lataamista lukuun ottamatta sovelluksen tiedonsiirto on toteutettu jQueryn ajax-funktiolla, joka palauttaa XMLHttpRequest-olion. Tätä oliota ei tarvitse itse
suoraan käsitellä, mutta se on mahdollista. [19.] Tiedonsiirto sääaseman sovelluspalvelun ja käyttöliittymän välillä tapahtuu luvun 2.3 kuvan 2.4 esittämällä tavalla. Sovelluspalvelua käyttäessä http-metodiksi valitaan POST, jotta SOAP-pyyntö saadaan välitettyä palvelulle. SOAP-viesti asetetaan ajax:in data-kentän arvoksi. Vastaanotettavan
tiedon tyypiksi asetetaan xml ja lisäksi beforeSend-määritteen avulla pyyntöön lisätään
ennen lähetystä ”SOAPAction”-otsikkokenttä. Sovelluspalvelu vaatii tämän kentän
pyyntöön, jotta mittauksia palautetaan. Kentälle ei kuitenkaan tarvitse antaa mitään arvoa, vaan riittää kun se on lisätty XMLHttpRequest-olioon.
Onnistuneen pyynnön jälkeen sovelluspalvelulta saatu vastaus käsitellään ajaxfunktion success-kohdassa määritellyn funktion avulla. Toteutetussa käyttöliittymässä
tämä funktio etsii jQuery:n valitsimia käyttäen kaikki SOAP-vastauksen measurementelementit. Löydetyt elementit käydään läpi ja niille suoritetaan funktio, joka etsii kyseisen mittauksen ajankohdan sekä arvon. Näistä arvoista muodostetaan taulukko, joka
lisätään toiseen taulukkoon. Tuloksena saadaan siis taulukko taulukoita, jossa sisemmät
taulukot sisältävät yhden mittauksen ajan ja arvon. Tämä taulukko on käyttöliittymän
muiden funktioiden käytettävissä.
Käyttöliittymän latautuessa haetaan sovelluspalvelulta sata mittausta. Sovelluspalvelulle tulee sääasemalta yksi uusi mittaus viiden minuutin välein. Siirrettävän tiedon
määrän minimoimiseksi lataamisen jälkeen sovelluspalvelulta haetaan ajastetusti viiden
minuutin välein ainoastaan uusin mittaus. Se käsitellään edellisessä kappaleessa kuva-
27
tulla tavalla ja lisätään tiedot taulukkoon. Samalla taulukosta poistetaan vanhin mittaus,
eli se pysyy aina sadan alkion kokoisena.
Ajastus on toteutettu hyödyntäen JavaScript-kielen setInterval- ja clearIntervalfunktioita. Ensimmäisellä määritetään jonkin funktion suoritus tapahtuvaksi millisekunteina annetun ajan välein. Funktiota suoritetaan annetun ajan välein siihen asti, kunnes
käynnistetty ajastus keskeytetään clearInterval-funktiolla. Pelkkä uuden mittauksen
haun ajastaminen on hyvin yksinkertaista. Käyttöliittymän toteutuksessa on ajastusta
varten kuitenkin luotu oma ajastus-funktio, joka hyödyntää edellä mainittuja funktioita.
Sille annetaan ajastusväli sekunteina ja funktio huolehtii ajan kuluessa latauspalkin päivittämisestä sekä suorittaa halutun ajan kuluttua uusimman mittauksen hakemisen.
Käyttöliittymässä on myös hyödynnetty jQueryn tarjoamaa ajaxCompletefunktiota. Se suoritetaan aina kun ajax-tiedonhaku on suoritettu loppuun (eli myös paluufunktio on suoritettu). ajaxComplete-funktion sisällä luodaan uusimmista mittauksista kuvaaja ja taulukko sekä käynnistetään ajastus seuraavaan tiedonhakuun.
4.4.
Kuvaaja
Käyttöliittymän tärkein visuaalinen elementti on sovelluspalvelulta haetuista mittauksista piirretty kuvaaja. Työkaluksi kuvaajan luomiseen valikoitui jqPlot helppokäyttöisyyden ja riittävän monipuolisten ominaisuuksien vuoksi. Erityisesti aika-arvojen lisääminen akselin arvoiksi halutussa muodossa oli selvä etu Flotiin nähden.
Kuvaaja luodaan omaan div-elementtiinsä ensimmäisen tiedonhaun jälkeen. Oletuksena kuvaaja piirretään kaikista haetuista mittauksista. Kuvaajan yhteydessä on valikko, josta voi valita tarkasteltavaksi kaikki viimeisimmät mittaukset, tai mittaukset
ainoastaan yhden, kahden, neljän tai kuuden tunnin ajalta. Yhden ja kahden tunnin aikaväliä tarkasteltaessa aika-akselin arvoasteikko on jaettu viidentoista minuutin väleihin ja
pidemmällä aikavälillä asteikon arvot ovat puolen tunnin välein. Lämpötila-akseli on
jätetty automaattisesti skaalautuvaksi. Vuorovaikutuksen lisäämiseksi kaavioon on otettu käyttöön tooltip-toiminto, jolla mittauspisteen arvot saadaan näkyviin viemällä hiiren
osoitin pisteen päälle. jqPlotin työkalut mahdollistavat sovelluspalvelulta saatavan mittaukseen liittyvän aikaleiman antamisen suoraan kuvaajalle. Asetuksista voidaan säätää
mitkä osat aikaleimasta näytetään arvoakselilla ja tooltip-työkalussa. Näin aikaleimaa ei
tarvitse itse muokata merkkijonona. Käyttöliittymän kuvaajanäkymä on esitetty liitteen
1 kuvassa B.
4.5.
Taulukko
Sovelluspalvelulta saatuja mittauksia on mahdollista tarkastella taulukkona. Taulukon
toteuttamiseen on käytetty jQuerylle tehtyä Flexigrid-laajennusta. Käyttöliittymän taulukkonäkymä on esitetty liitteen A kuvassa C. Tämä laajennus mahdollistaa ulkonäöltä
tyylikkäiden, dynaamisten taulukkojen luonnin käyttäen apuna ajax-tiedonhakua. Taulukon alkioita voi tällöin esimerkiksi järjestää haluamansa sarakkeen mukaan. [32.]
28
Flexigrid vaatii kuitenkin haettavan tiedon määrätynlaisessa muodossa, joten
edellä mainittujen ominaisuuksien hyödyntämiseksi tarvittaisiin välipalvelin hakemaan
tietoa sääasemalta ja tarjoamaan sitä laajennukselle oikeassa muodossa. Näin ollen käyttöliittymän taulukko on toteutettu tavallisena staattisena html-taulukkona joka muotoillaan Flexigridin avulla. Taulukon kokoa ja sarakkeiden leveyttä on mahdollista muuttaa
hiiren avulla. [32.] Taulukossa esitetään ensimmäisessä sarakkeessa mittauksen päivämäärä ja kellonaika sekä toisessa sarakkeessa mittauksen arvo. Kuten kuvaajaan, myös
taulukkoon voidaan valita tarkasteltavaksi viimeisimmät mittaukset viideltä eri ajanjaksolta.
4.6.
Jatkokehitysideoita
Sääaseman käyttöliittymän toiminta testattiin Mozilla Firefox 3.6.3 ja Internet Explorer
8 -selaimilla. Käyttöliittymälle olisi hyvä tehdä myös laajempaa testausta suosituimmilla selaimilla, kuten Operalla, Safarilla ja Google Chromella. Selaimista tulisi testata
uusimpien versioiden lisäksi myös vanhempia versioita, sillä vanhempia versioita on
usein laajalti käytössä pitkään uuden version julkaisun jälkeen [33]. Mikäli testauksen
yhteydessä ilmenisi yhteensopivuusongelmia, tulisi käyttöliittymään tehdä vaadittavat
muutokset ongelmien korjaamiseksi.
Toiminnallisuuden osalta käyttöliittymää voisi kehittää edelleen tarjoamalla
joustavammin erilaisia mahdollisuuksia tarkasteltavien mittausten valintaan. Mittauksia
voisi valita tarkasteltavaksi mielivaltaisen määrän väliltä 1-100 ja myös ensimmäinen
tarkasteltava mittaus olisi käyttäjän määritettävissä, jolloin tarkasteltavaksi valitut mittaukset eivät välttämättä olisi viimeisimmät mittaukset. Lisäksi mittauksista voisi laskea
keskiarvoja halutulta ajalta ja tarkastella näitä keskiarvoja kuvaaja- ja taulukkomuodossa. Käyttöliittymällä olisi mahdollista tarkastella esimerkiksi viimeisimpien kahdeksan
tunnin tuntikohtaisia lämpötilojen keskiarvoja.
Pidemmän ajanjakson mittaustietojen tarkastelun mahdollistamiseksi käyttöliittymää varten voisi pystyttää välipalvelimen. Palvelimelle haettaisiin mittaustietoja sääaseman sovelluspalvelulta ajastetusti. Tiedot tallennettaisiin palvelimelle, joka puolestaan tarjoaisi käyttöliittymälle rajapinnat mittaustietoihin. Tämä mahdollistaisi myös
taulukon tietojen hakemisen asynkronisesti, jolloin kaikki taulukon ominaisuudet, kuten
taulukon arvojen järjestäminen, olisivat käytettävissä.
29
5.
YHTEENVETO
Työn tavoitteena oli selvittää JavaScript-sovelluskehysten soveltuvuutta Tampereen
teknillisen yliopiston systeemitekniikan laitoksen sääaseman selainkäyttöliittymän toteutukseen ja vastaaviin ohjelmistoprojekteihin, sekä toteuttaa sääasemalle uusi käyttöliittymä. Vaatimuksena toteutettavalle käyttöliittymälle oli asynkroninen tiedonsiirto
selaimen ja sääaseman sovelluspalvelun välillä sekä tyylikäs ulkoasu.
Kymmenien JavaScript-sovelluskehysten joukosta vertailtaviksi valittiin kolme
ominaisuuksiltaan lupaavinta sovelluskehystä: Ample SDK, Dojo ja jQuery. Valinnan
ensisijaisena perusteena olivat kehyksien tarjoamat rajapinnat kuvaajien luomiseen.
Kuvaajien lisäksi sovelluskehyksiä tarkasteltaessa keskityttiin erityisesti tarjottuihin
käyttöliittymäkomponentteihin sekä tiedonsiirtoa ja käsittelyä helpottaviin ominaisuuksiin. Sovelluskehysten analysoinnin tuloksena todettiin Dojon ja jQueryn soveltuvan
käyttöliittymän sovelluskehitykseen.
Käyttöliittymän toteutukseen valittu jQuery-sovelluskehys tarjoaa monipuolisen
käyttöliittymäkirjaston sekä laajennusten kautta useita komponentteja kuvaajien ja taulukkojen luomiseen. jQuery toteuttaa omana funktionaan selainriippumattoman toteutuksen asynkroniseen tiedonsiirtoon käytettävästä XMLHttpRequest-oliosta. Se pitää
sisällään myös dokumenttioliomallin tarjoamaa rajapintaa selkeämmän ja helppokäyttöisemmän rajapinnan dokumenttien käsittelyyn ja muokkaamiseen. Rajapinnan hyödyntäminen vähentää dokumenttien käsittelyssä vaadittavan koodin määrää huomattavasti.
Toteutettu käyttöliittymä tarjoaa mahdollisuuden sääaseman mittaustietojen tarkasteluun kuvaaja- ja taulukkomuodossa. Sääaseman sovelluspalvelulta haetaan uusia
mittauksia ajastetusti. Mittaustietojen päivittäminen ei vaadi käyttäjältä sivun uudelleenlataamista eikä myöskään häiritse sovelluksen käyttöä. Sovelluskehyksen lupaama selainriippumattomuus todettiin testaamalla käyttöliittymän toimivuus useammalla eri
selaimella. jQueryn tarjoamien käyttöliittymäkomponenttien avulla käyttöliittymästä
saatiin helppokäyttöinen ja tyylikäs. Työn tavoitteet saavutettiin siis kaikilta osin. Ennen
käyttöliittymän käyttöönottoa sille tulisi suorittaa kattavampaa testausta useammilla
selaimilla ja myös selainten vanhemmilla versioilla.
Käyttökelpoisiksi todetut sovelluskehykset ja suurin osa niiden laajennuksista
ovat vapaasti käytettävissä myös kaupalliseen käyttöön. Koneiden ja kenttälaitteiden
kehittyessä selainkäyttöliittymien käyttömahdollisuudet erilaisten prosessien ja tuotannon valvomosovelluksissa lisääntyvät. JavaScript-sovelluskehyksiä voidaan hyödyntää
esimerkiksi edellä mainittujen selainkäyttöliittymien toteuttamiseen, erityisesti vähemmän aikakriittisiin sovelluksiin, kuten tuotantoinformaation tarjoamiseen yrityksen joh-
30
dolle. Sovelluskehyksiä hyödyntävien selainkäyttöliittymien etuina ovat alusta- ja käyttöjärjestelmäriippumattomuus sekä oleellisesti perinteisiä työpöytäsovelluksia helpompi
ylläpidettävyys. Sovelluksen käyttö ei näin ollen rajoitu enää tietyille koneille, vaan
käyttöliittymä on tarpeen tullen käytettävissä millä tahansa laitteella josta löytyy yleisimpiä web-tekniikoita tukeva selain ja Internet-yhteys.
31
LÄHTEET
[1] Stallings, W. Data and Computer Communications. 7. Edition. Upper Saddle River,
2004. Pearson Education. 847 p.
[2] Peltomäki, J. & Nykänen, O. Web-selainohjelmointi. 1. painos. Porvoo 2006, WS
Bookwell. 312 s.
[3] World Wide Web Consortium [WWW]. [viitattu 24.5.2010]. Saatavissa:
http://www.w3.org/
[4] Extensible Markup
http://www.w3.org/XML/
Language
[WWW].
[5]
XML
Tutorial
[WWW].
http://www.w3schools.com/xml/
[viitattu
[viitattu
3.5.2010].
29.5.2010].
Saatavissa:
Saatavissa:
[6] Negrino, T. & Smith, D. Javascript – Tehokas hallinta. 1. painos. Jyväskylä 2007,
Gummerus Kirjapaino Oy. 493 s.
[7] Asleson, R. & Scutta, N.T. Ajax – Tehokas hallinta. Jyväskylä 2007, Gummerus
Kirjapaino Oy. 273 s.
[8] Hammond, D. Web browser DOM support [WWW]. [viitattu 6.5.2010]. Saatavissa:
http://www.webdevout.net/browser-support-dom
[9] Lastra, J.L.M. & Delamer, I.M. Automation 2.0: Current trends in Factory Automation. The IEEE International Conference on Industrial Informatics, DCC, Daejeon, Korea, 13.-16.7.2008. IEEE. pp.1321-1323.
[10] Latest SOAP versions
http://www.w3.org/TR/soap/
[WWW].
[viitattu
7.5.2010].
Saatavissa:
[11] Web Services Description Language (WSDL) 1.1 [WWW]. [viitattu 8.5.2010] Saatavissa: http://www.w3.org/TR/wsdl
[12] Vaisala ROSA Weather Station [WWW]. [viitattu 24.5.2010]. Saatavissa:
http://www.vaisala.com/weather/products/rosa.html
[13] Salonen, M. Vaisala Rosa -sääaseman etäkäyttö Telit GE863-GPS moduulin avulla
[WWW].
[viitattu
7.5.2010].
Saatavissa:
http://ae.tut.fi/research/AIN/Publications/Salonen_Mikko_-_ROSA_loppuraportti.pdf
32
[14] Mnkandla, E. About Software Engineering Frameworks and Methodologies. IEEE
AFRICON, Nairobi, Kenia, 23.-25.9.2009. IEEE. pp.1-5.
[15] Compare JavaScript Frameworks [WWW]. [viitattu 11.5.2010]. Saatavissa:
http://www.ibm.com/developerworks/web/library/wa-jsframeworks/
[16] JavaScript Multipurpose Frameworks [WWW]. [viitattu 8.5.2010]. Saatavissa:
http://ajaxpatterns.org/Javascript_Multipurpose_Frameworks
[17] Ample SDK, open-source GUI framework [WWW]. [viitattu 12.4.2010]. Saatavissa: http://www.amplesdk.com
[18] Dojo Toolkit [WWW]. [viitattu 13.4.2010]. Saatavissa: http://www.dojotoolkit.org/
[19] jQuery: The Write Less, Do More, JavaScript Library [WWW]. [viitattu
26.4.2010]. Saatavissa: http://jquery.com/
[20] Clientside Oy [WWW]. [viitattu 12.4.2010]. Saatavissa: http://www.clientside.fi/
[21]
Ample
SDK
blog
http://blog.amplesdk.com/
[WWW].
[viitattu
12.4.2010].
Saatavissa:
[22] The GNU General Public License [WWW]. [viitattu 15.5.2010]. Saatavissa:
http://www.gnu.org/licenses/gpl.html
[23] Open Source Initiative OSI: The MIT License [WWW]. [viitattu 15.5.2010]. Saatavissa: http://www.opensource.org/licenses/mit-license.php
[24] Dojo Toolkit Reference Guide [WWW]. [viitattu 13.4.2010]. Saatavissa
http://www.dojotoolkit.org/reference-guide/index.html
[25] jQuery project [WWW]. [viitattu 16.5.2010]. Saatavissa: http://jquery.org
[26] JavaScript Usage Statistics
http://trends.builtwith.com/javascript
[WWW].
[viitattu
16.5.2010].
Saatavissa:
[27] Highcharts [WWW]. [viitattu 26.4.2010]. Saatavissa: http://www.highcharts.com/
[28] Flot - Attractive Javascript plotting for jQuery [WWW]. [viitattu 26.4.2010]. Saatavissa: http://code.google.com/p/flot/
33
[29]
Flot
Examples
[WWW].
http://people.iola.dk/olau/flot/examples/
[viitattu
26.4.2010].
Saatavissa:
[30] jqPlot – Pure JavaScript Plotting [WWW]. [viitattu 26.4.2010]. Saatavissa:
http://www.jqplot.com/
[31]
Browser
Statistics
[WWW].
[viitattu
http://www.w3schools.com/browsers/browsers_stats.asp
17.5.2010].
Saatavissa:
[32] Flexigrid – Web 2.0 JavaScript Grid for jQuery [WWW]. [viitattu 17.5.2010]. Saatavissa: http://flexigrid.info/
[33] Firefox Browser – Firefox Version Statistics [WWW]. [viitattu 29.5.2010]. Saatavissa: http://www.w3schools.com/browsers/browsers_firefox.asp
34
LIITE A: KÄYTTÖLIITTYMÄKUVAT
Kuva A. Toteutetun sääaseman käyttöliittymän Etusivu-näkymä.
35
Kuva B. Toteutetun sääaseman käyttöliittymän Kuvaaja-näkymä.
36
Kuva C. Toteutetun sääaseman käyttöliittymän Taulukko-näkymä.
37
LIITE B: KÄYTTÖLIITTYMÄN HTML-MERKINTÄ
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<script type="text/javascript" src="js/jqplot/excanvas.js" />
<link type="text/css"
href="css/eggplant/jquery-ui-1.8.custom.css" rel="stylesheet" />
<script type="text/javascript" src="jquery.js" />
<script type="text/javascript" src="js/jquery-ui-1.8.custom.min.js" />
<script type="text/javascript" src="js/jqplot/jquery.jqplot.min.js" />
<link rel="stylesheet" type="text/css" href="js/jqplot/jquery.jqplot.css" />
<script type="text/javascript" src="js/flexigrid/flexigrid.js" />
<link rel="stylesheet" type="text/css" href="js/flexigrid/flexigrid.css" />
<script type="text/javascript"
src="js/jqplot//plugins/jqplot.canvasTextRenderer.min.js" />
<script type="text/javascript"
src="js/jqplot/plugins/jqplot.canvasAxisTickRenderer.min.js" />
<script type="text/javascript"
src="js/jqplot/plugins/jqplot.dateAxisRenderer.min.js" />
<script type="text/javascript"
src="js/jqplot/plugins/jqplot.categoryAxisRenderer.min.js" />
<script type="text/javascript"
src="js/jqplot/plugins/jqplot.highlighter.js" />
<script type="text/javascript" src="js/saascript.js" />
</head>
<body>
<div id="main" align="center">
<!-- Valikko -->
<div id="menu">
<form>
<input type="radio" id="etusivu" name="radio"
checked="checked" />
<label for="etusivu">Etusivu</label>
<input type="radio" id="kuva" name="radio" />
<label for="kuva">Kuvaaja</label>
<input type="radio" id="taulukko" name="radio" />
<label for="taulukko">Taulukko</label>
</form>
</div>
<!-- Kehys jonka sisälle tulee kaikki tieto, kuvaajat yms -->
<div id="kehys">
<div id="sisadiv">
<div id="kuvadiv" style="width:550px;height:330px;"></div>
<div id="tauludiv"></div>
<div id="topvalinta" class="menupos2">
<div>
<button id="valinta">
<span class="ui-button-text">
Mittaukset ajalta:
</span>
</button>
</div>
<ul id="navi">
<li><a href="#" id="1h">1h</a></li>
<li><a href="#" id="2h">2h</a></li>
<li><a href="#" id="4h">4h</a></li>
<li><a href="#" id="6h">6h</a></li>
<li><a href="#" id="kaikki">kaikki</a></li>
<li></li>
</ul>
38
</div>
<div id="tekstidiv"></div>
</div>
</div>
<br />
<!-- Ajan kuluminen seuraavaan säätietojen hakuun -->
<div id="lataus">
<div align="center" id="progressbar"></div>
Seuraava päivitys
</div>
</div>
</body>
</html>
39
LIITE C: KÄYTTÖLIITTYMÄN JAVASCRIPT-KOODI
(SAASCRIPT.JS)
//"Etusivu"-näkymän sisällön luominen
function etuSivu(){
var sisalto =
'<br/><br/><img src="tty.gif"/>'+
"<h1>" + vastaus[99][1] + " C&#176;</h1><br/>"+
"<p>Tämä sivu on toteutettu osana TTY:n Automaatiotekniikan"+
" koulutusohjelman kandidaatintyötä. Sivu toimii käyttöliitty"+
"mänä TTY:n Systeemitekniikan laitoksen sääasemaan, joka "+
"sijaitsee Sähkötalon katolla. Sää- asemaan liitetyltä"+
" web-sovelluspalvelulta on saatavissa sata viimeisintä lämpötila"+
"mittausta. Näitä mittauksia on mahdollista tarkastella"+
" käyttöliittymällä kuvaaja- ja taulukkomuodossa.</p><p>"+
"Käyttöliittymän toteutuksessa on käytetty "+
"<a href='http://jquery.com/'>jQuery</a>- JavaScript-sovelluskehystä, "+
"sekä sitä hyödyntäviä <a href='http://www.jqplot.com/'>jqPlot</a>- "+
"ja <a href='http://flexigrid.info/'>Flexigrid</a>-laajennuksia. Käyttö"+
"liittymän toimivuus on testattu Internet Explorer 8:lla sekä" +
" Mozilla Firefox 3.6.3:lla.</p><br/>";
$("#tekstidiv").append(sisalto);
}
//Kasvatetaan kulunutta aikaa yhdellä sekunnilla sekä päivitetään progress baria
function kasvatus(sekuntit){
kulunut++;
prosentit = Math.floor(kulunut*100/sekuntit);
if (prosentit != edellinen) {
$("#progressbar").progressbar("option", "value", prosentit);
edellinen = prosentit;
}
if(kulunut > sekuntit){
//Halutun ajan kuluttua sammutetaan ajastin ja väläytetään palkkia
//sekä suoritetaan datan päivitys
clearInterval(ajastin);
$("#progressbar").effect('pulsate','',400);
datanHaku();
}
}
//ajastus-funktio palauttaa truen kun aikaa on kulunut parametrina
//saatujen sekuntien verran
function ajastus(sekunnit){
asetusaika = sekunnit;
kulunut = 0;
prosentit = 0;
edellinen = 0;
//Kutsutaan ajankasvatusta sekunnin välein
ajastin = setInterval("kasvatus(asetusaika);",1000);
return true;
}
40
//Funktio jossa luodaan käyttöliittymäelementit sivulle
function luoElementit(){
//Päävalikon luominen
$("#menu").buttonset();
$("#etusivu").click(function(){
etusivuSel();
});
$("#kuva").click(function(){
kuvaSel();
});
$("#taulukko").click(function(){
taulukkoSel();
});
//Piilottaa valikon klikatessa missä vaan
$(document).click(function(){
$("#navi").hide();
})
// Progressbar
$("#progressbar").progressbar({
value: 0
});
}
//Luo kuvaajan ja taulukon annetusta mittausmäärästä
function piirra(vastaus,maara){
piirraKuvaaja(vastaus,maara);
piirraTaulukko(vastaus,maara);
}
//Luodaan valikko, josta valitaan piirrettäven datapisteiden määrä
function luoPiirtoValikko(){
$("#valinta").button({
text: true,
icons: {
primary: "ui-icon-triangle-1-s"
}
}).click(function() {
$("#navi").slideDown('fast').show();
$("#navi").hover(function(){}, function(){
$("#navi").slideUp('fast');
});
})
//alasvetovalikon tapahtumankäsittely
$("#1h").click(function(){
datamaara=12;
piirra(vastaus,datamaara);});
$("#2h").click(function(){
datamaara=24;
piirra(vastaus,datamaara);});
$("#4h").click(function(){
datamaara=48;
piirra(vastaus,datamaara);});
$("#6h").click(function(){
datamaara=72;
piirra(vastaus,datamaara);});
$("#kaikki").click(function(){
datamaara=100;
piirra(vastaus,datamaara);});
}
//Funktiot valintapainikkeiden tominnallisuudelle:
//-----------------------------------------------//Etusivu-painike
function etusivuSel(){
$("#valinta").hide();
$("#tauludiv").hide();
$("#kuvadiv").fadeOut("",function(){
$("#tekstidiv").empty();
etuSivu();
41
});
}
//Kuvaaja-painike
function kuvaSel(){
$("#topvalinta").removeClass('menupos1').addClass("menupos2");
$("#tekstidiv").empty();
$("#tauludiv").hide();
$("#kuvadiv").show();
$("#kuvadiv").effect('slide',[],[],function(){
lampoplot.redraw();
$("#valinta").show();
});
}
//Taulukko-painike
function taulukkoSel(){
$("#kuvadiv").fadeOut("",function(){
$("#valinta").hide();
$("#topvalinta").removeClass('menupos2').addClass("menupos1");
$("#valinta").show();
$("#tekstidiv").empty();
$("#tauludiv").show();
});
}
//Tiedonsiirtoon liittyvät funktiot:
//-----------------------------------------------//uusi ajastus
function ajastusKierros(){
piirraKuvaaja(vastaus,datamaara);
ajastus(15);
}
//Funktio joka tekee ajax-kyselyn sivun latauksen yhteydessä
function alkuDatanHaku(){
$.ajax({
type: 'POST',
url: 'http://192.168.0.1:8080/TVPAWS/services/WeatherService',
dataType: "xml",
data: '<?xml version="1.0"?><SOAP-ENV:Envelope xmlns:SOAP-ENV'+
'="http://schemas.xmlsoap.org/soap/envelope/"><SOAP-ENV:Body>'+
'<impl:request xmlns:tns1="http://schemas.ain.rd.tut.fi" ' +
'xmlns:impl="http://ain.rd.tut.fi">'+
'<tns1:amountOfmeasurements>100</tns1:amountOfmeasurements>'+
'</impl:request></SOAP-ENV:Body></SOAP-ENV:Envelope>',
cache: false,
beforeSend: function(xhr) {
xhr.setRequestHeader("Content-Type", "text/xml");
xhr.setRequestHeader("SOAPAction", "");
},
success: function(xml) {
$(xml).find("measurement").each(function(){
//luodaan vastauksen arvoista taulukko
//joka lisätään vastaus-tauluun
var pari = new Array;
pari.push(
$(this).find("ns1\\:timestamp").text().substring(0,16)
);
pari.push( parseFloat($(this).find("ns1\\:value").text())
);
vastaus.push(pari);
});
//Käännetään taulukon järjestys piirtämistä varten
vastaus.reverse();
etuSivu();
},
error: function(xhr, status, errorThrown){
alert(errorThrown+", ei toimi");
}
});
}
42
function datanHaku(){
$.ajax({
type: 'POST',
url: 'http://192.168.0.1:8080/TVPAWS/services/WeatherService',
dataType: "xml",
data: '<?xml version="1.0"?><SOAP-ENV:Envelope xmlns:SOAP-ENV'+
'="http://schemas.xmlsoap.org/soap/envelope/"><SOAP-ENV:Body>'+
'<impl:request xmlns:tns1="http://schemas.ain.rd.tut.fi" ' +
'xmlns:impl="http://ain.rd.tut.fi">'+
'<tns1:amountOfmeasurements>1</tns1:amountOfmeasurements>'+
'</impl:request></SOAP-ENV:Body></SOAP-ENV:Envelope>',
cache: false,
beforeSend: function(xhr) {
xhr.setRequestHeader("Content-Type", "text/xml");
xhr.setRequestHeader("SOAPAction", "");
},
success: function(xml) {
$(xml).find("measurement").each(function(){
//luodaan vastauksen arvoista taulukko
//joka lisätään vastaus-tauluun
var pari = new Array;
pari.push(
$(this).find("ns1\\:timestamp").text().substring(0,16)
);
pari.push( parseFloat($(this).find("ns1\\:value").text())
);
vastaus.shift();
vastaus.push(pari);
});
}
});
}
//Funktio taulukon luomista varten
function piirraTaulukko(taulukko,maara){
var eka_alkio = 100 - maara;
var datasarja = taulukko.slice(eka_alkio);
datasarja.reverse();
$("#tauludiv").empty();
$("#tauludiv").append('<table id="taulu" style="display:none"></table>');
//luodaan sisältö piirrettävään taulukkoon
$("#taulu").append("<tbody>");
$.each(datasarja, function(index,arvo){
var rivi = "<tr><td>" + arvo[0] + "</td><td>" + arvo[1] + "</td></tr>";
$("#taulu").append(rivi);
});
$("#taulu").append("</tbody>");
//Luodaan flexigrid-taulukko tavallisesta #taulu-taulukosta
$("#taulu").flexigrid({
//asetukset lämpötilataulun luomiseen
colModel : [
{display: 'Aika', name : 'aika', width : 100, align: 'center'},
{display: 'Lämpötila C&#176;', name : 'lampo', width : 60, align: 'center'}
],
sortname: "aika",
sortorder: "desc",
title: 'Lämpötilamittaukset',
width: 220,
height: 309
});
}
43
//Funktio kuvaajan piirtämistä varten
function piirraKuvaaja(taulukko,maara){
var otsikko = "Viimeisimmät " + maara + " mittausta:";
var eka_alkio = 100 - maara;
//Luodaan kuvaajan piirtoa varten uusi taulukko joka on osa täyttä arvotaulua
var datasarja = taulukko.slice(eka_alkio);
//Tarkistetaan pienin ajan arvo ja päätetään sen perusteella kuvaajan aloitusaika
//ensimmäistä arvoa edeltäväksi tasatunniksi tai puoleksi
var alkuaika = datasarja[0][0].substring(0,14);
var eka_mit_min = parseFloat(datasarja[0][0].substring(14,16));
//kuvaajan taustaruudukon piirtoväli
var piirtotiheys = '0.5 hour';
//Piirretään tiheämpi taustaristikko pienemmälle datamäärälle
if(maara < 25){
piirtotiheys = '0.25 hour';
}
//valitaan mistä arvosta kuvaajan x-akseli alkaa
if (eka_mit_min >= 45 && maara < 25) {
alkuaika = alkuaika + "45";
}
else if(eka_mit_min >= 30){
alkuaika = alkuaika + "30";
}
else if(eka_mit_min >= 15 && maara < 25){
alkuaika = alkuaika + "15";
}
else{
alkuaika = alkuaika + "00";
//aloitetaan tasatunnilta
}
//asetukset kuvaajan piirtämiseen
plot_asetukset = {
title: otsikko,
axes: {
xaxis: {
min: alkuaika,
max:datasarja[maara-1][0],
renderer: $.jqplot.DateAxisRenderer,
rendererOptions: {
tickRenderer: $.jqplot.CanvasAxisTickRenderer
},
tickNumber: 10,
tickOptions: {
formatString: '%H:%M',
angle: -45,
show: true
},
tickInterval: piirtotiheys
}
},
highlighter: {
tooltipOffset: 2,
show: true,
formatString: '<table class="jqplot-highlighter"><tr><td>Aika:</td>' +
'<td>%s</td></tr><tr><td>Lämpö:</td><td>%s C&#176;</td></tr></table>'
}
};
//poistetaan vanha kuvaaja ja piirretään uusi
$("div#kuvadiv").empty();
lampoplot = $.jqplot("kuvadiv", [datasarja], plot_asetukset);
}
44
/*
* ----------------------------------------------------------------------* TÄSTÄ ALKAA VARSINAINEN OHJELMA, JOSSA KUTSUTAAN YLLÄ OLEVIA FUNKTIOITA
* ----------------------------------------------------------------------*/
//Ensimmäiseen tiedonhakuun tarvittavat funktiot
var vastaus = new Array;
var lampoplot = null;
var plot_asetukset = null;
var datamaara = 100;
//Dokumentin latauduttua suoritetaan:
$(document).ready(function(){
//jQuery käyttöliittymäelementtien luominen: valikko ja latauspalkki
luoElementit();
luoPiirtoValikko();
//Funktio joka suoritetaan, kun ajax-pyyntö on suoritettu loppuun
$(document).ajaxComplete(function(){
//Kutsutaan funktiota kuvaajan piirtämistä varten.
//Kutsu tehdään aina kun ajastus päättyy. Jos käyttöliittymässä ei ole
//Kuvaaja-näkymä valittuna, kuvaaja piirtyy piilotettuun div-elementtiin
piirraTaulukko(vastaus,datamaara);
piirraKuvaaja(vastaus,datamaara);
//Käynnistetään ajastus seuraavaan lämpötilan hakuun ajaxilla
ajastus(300); //ajastus viiden minuutin päähän
});
//Haetaan sääaseman mittaukset ajax:illa
alkuDatanHaku();
});