View
3
Download
0
Category
Preview:
Citation preview
Jure Gorinšek
RAZVOJ APLIKACIJ ZA PRENOSNE
TELEFONE V OKOLJU NOKIA WEB RUNTIME
Diplomsko delo
Maribor, september 2010
I
Diplomsko delo univerzitetnega študijskega programa
RAZVOJ APLIKACIJ ZA PRENOSNE TELEFONE V OKOLJU NOKIA WEB
RUNTIME
Študent: Jure Gorinšek
Študijski program: UN ŠP – Računalništvo in informatika
Smer: Programska oprema
Mentor: red. prof. dr. Borut Ţalik
Somentor:
Maribor, september 2010
II
III
ZAHVALA
Zahvaljujem se mentorju red. prof. dr. Borutu
Ţaliku za pomoč in vodenje pri opravljanju
diplomskega dela.
Posebna zahvala velja punci Jasmini za pomoč
pri urejanju naloge ter druţini, ki mi je
omogočila študij in me vedno podpirala.
IV
RAZVOJ APLIKACIJ ZA PRENOSNE TELEFONE V OKOLJU
NOKIA WEB RUNTIME
Ključne besede: okolje WebRuntime, gradniki, pametni telefoni, mobilne aplikacije,
javascript, css, html, splet
UDK: 004.8:621.39 (043.2)
Povzetek
V diplomskem delu predstavimo okolje Nokia Web Runtime, ki omogoča razvoj aplikacij
za prenosne telefone. Naloga se začne z opisom okolja ter arhitekture. Nadaljujemo z
opisom razvojnih orodij. Nato podrobneje opišemo razvojni proces gradnikov WRT.
Podamo veliko kratkih primerov ter izpostavimo dobro prakso pri razvoju. S pomočjo
pridobljenega znanja razvijemo aplikacijo, ki omogoča prevajanje besedila.
V
APPLICATION DEVELOPMENT FOR MOBILE PHONES USING
NOKIA WEB RUNTIME PLATFORM
Key words: WebRuntime platform, Widgets, smart phones, mobile applications,
javascript, css, html, web
UDK: 004.8:621.39 (043.2)
Abstract
This thesis describes the Nokia Web Runtime as a platform for development of
applications for mobile phones. Diploma thesis starts with a description of a working
environment and an architecture. We continue with description of development tools.
After that, a development process of WRT Widgets is described. Many examples and
good development practice are provided. Based on the presented knowledge, a mobile
application for text translation is developed.
VI
VSEBINA
1 UVOD ...................................................................................................................... 1
2 SPLOŠNO O OKOLJU NOKIA WEB RUNTIME ............................................ 3
2.1 KAJ JE WEB RUNTIME? ...................................................................................... 4
2.2 RAZLIČICE WRT ............................................................................................... 5
2.3 GLAVNE FUNKCIONALNOSTI .............................................................................. 6
2.4 PREDNOSTI IN SLABOSTI .................................................................................... 7
2.5 VARNOST ........................................................................................................... 7
2.6 CSS ................................................................................................................... 8
2.7 JAVASCRIPT ....................................................................................................... 8
3 RAZVOJNA ORODJA ........................................................................................ 10
3.1 APTANA STUDIO IN VTIČNIK NOKIA WRT ....................................................... 10
3.2 EMULATOR S60 ............................................................................................... 12
4 RAZVOJ GRADNIKOV WRT ........................................................................... 14
4.1 MANIFESTNE DATOTEKE .................................................................................. 14
4.2 UPORABNIŠKI VMESNIKI .................................................................................. 17
4.3 OBJEKTI WRT ................................................................................................. 24
4.4 DELO Z MENIJI ................................................................................................. 26
4.5 STORITVE PLATFORME ..................................................................................... 28
4.6 MINI POGLEDI .................................................................................................. 32
4.7 LOKALIZACIJA ................................................................................................. 37
4.8 AJAX .............................................................................................................. 40
4.9 DOBRE PRAKSE PRI RAZVOJU ........................................................................... 43
4.10 TESTIRANJE IN ISKANJE NAPAK ........................................................................ 45
4.11 DISTRIBUCIJA IN NAMESTITEV ......................................................................... 47
5 PRAKTIČNI PRIMER ........................................................................................ 48
5.1 ZAGON APLIKACIJE .......................................................................................... 48
5.2 UPORABNIŠKI VMESNIK ................................................................................... 51
VII
5.3 PREVAJANJE .................................................................................................... 54
5.4 UVOZ SPOROČIL ............................................................................................... 56
6 SKLEP ................................................................................................................... 58
7 LITERATURA ..................................................................................................... 60
VIII
UPORABLJENE KRATICE
WRT
JS
PS
API
DOM
HTML
CSS
UI
XML
JSON
AJAX
SDK
SMS
IDE
HTTP
URL
Web Runtime (izvajalno okolje spletnih aplikacij)
JavaScript (skriptni jezik)
Platform Services (storitve platforme)
Application Programming Interface (aplikacijski programski vmesnik)
Document Object Model (objektni model dokumentov)
Hypertext markup language (označevalni jezik za oblikovanje)
Cascading Style Sheets (prekrivni slogi)
User Interface (uporabniški vmesnik)
Extensible Markup Language (razširljiv označevalni jezik)
JavaScript Object Narration (objekt JavaScript)
Asynchronous JavaScript and XML (asinhroni JS in XML)
Software Development Kit (okolje za razvoj programske opreme)
Short Messaging Service (storitev za pošiljanje kratkih sporočil)
Integrated Development Environment (razvojno okolje)
Hypertext Transfer Protocol (metoda za prenos informacij na spletu)
Uniform Resource Locator (enolični krajevnik vira)
RAZVOJ APLIKACIJ ZA PRENOSNE TELEFONE V OKOLJU NOKIA WEB RUNTIME Stran 1
1 UVOD
Trg mobilnih aplikacij je danes zelo razširjen. Skoraj vsak proizvajalec ima spletno
trgovino, v kateri ponuja brezplačne in plačljive aplikacije. Vsak razvijalec ima moţnost
ponuditi svoj izdelek in tako tudi zasluţiti, vendar so le redki tisti, ki jim je uspelo
obogateti. Razvoj mobilnih aplikacij za prenosne telefone ni tako enostavno opravilo.
Potrebno je veliko spretnosti in znanja, da se na napravah z majhnimi zasloni, slabo
procesorsko močjo ter baterijo izvajajo kvalitetne aplikacije, ki morajo ponuditi nekaj
koristnega, unikatnega. Popolne dominance nad trgom torej ni. Obstaja veliko različnih
platform, ki se med seboj zelo razlikujejo. Izbira prave platforme, ki bi zadovoljila čim več
končnih uporabnikov predstavlja velik izziv.
Diplomsko delo je sestavljeno iz sedmih poglavij. Po uvodu v drugem poglavju
predstavimo okolje WRT, ki nam omogoča razvijanje aplikacij za prenosne telefone s
pomočjo spletnih tehnologij. Izpostavimo idejo nastanka te tehnologije ter podamo
različice, ki ponujajo različne funkcionalnosti. Izoblikujemo si bolj čisto sliko o tehnologiji
ter delovanju gradnikov WRT.
V tretjem poglavju navedemo nekaj glavnih orodij, s katerimi si pomagamo pri razvoju.
Predstavimo vtičnik WRT, ki ga namestimo v razvojno okolje Aptana Studio. Omenimo
tudi S60 Emulator, ki nam omogoča izvajanje aplikacij v simuliranem okolju.
V četrtem poglavju podrobneje opišemo več tehnik, ki jih moramo poznati pri razvoju
gradnikov WRT. Razlagam podamo slike ter izpise izvorne kode in tako izboljšamo
bralčevo razumevanje. Na začetku poglavja si podrobneje pogledamo manifestne datoteke,
ki so potrebne za delovanje in namestitev gradnika WRT. V nadaljevanju preučimo
različne načine izdelovanja uporabniških vmesnikov. Podrobneje opišemo tudi objekte
JavaScript, ki so vgrajeni v okolje WRT. S pomočjo njih in programskega vmesnika
dostopamo do raznih storitev, ki jih ponujajo prenosni telefoni. Gradnike WRT lahko
dodamo tudi na začetni zaslon, zato podamo enostaven primer mini pogleda. V
nadaljevanju opišemo tehnologijo AJAX, ki se uporablja za prenos oddaljenih podatkov.
Zaradi omejenih virov na prenosnih telefonih, kot sta pomnilnik in procesor, navedemo
RAZVOJ APLIKACIJ ZA PRENOSNE TELEFONE V OKOLJU NOKIA WEB RUNTIME Stran 2
nekaj primerov dobre prakse pri razvijanju. Na koncu še razloţimo različne načine iskanja
napak ter gradnjo namestitvenih paketov.
V petem poglavju uporabimo pridobljeno znanje in razvijemo aplikacijo, ki nam omogoča
prevajanje besedila v različne jezike. Za prevajanje uporabimo brezplačen Googlov
programski vmesnik za prevajanje.
V zadnjem, šestem poglavju povzamemo diplomsko delo.
RAZVOJ APLIKACIJ ZA PRENOSNE TELEFONE V OKOLJU NOKIA WEB RUNTIME Stran 3
2 SPLOŠNO O OKOLJU NOKIA WEB RUNTIME
Kljub veliki konkurenci je Nokia pomemben igralec na trgu pametnih telefonov (angl.
Smartphones) [9]. Nokia ponuja več različnih platform, vendar sta najpomembnejši
platformi S40 in S60. S40 različica predstavlja naprave iz srednje cenovnega razreda, ki so
namenjene manj zahtevnim uporabnikom. Medtem pa je različica S60, ki je zasnovana na
operacijskem sistemu Symbian, namenjena pametnim telefonom. Na obzorju so tudi nove
platforme, ki pa so trenutno še v fazi testiranja in se bodo uveljavile v bliţnji prihodnosti
(Meego, Qt) [10].
Okolje WRT (Web Runtime) je nastalo iz potrebe, da se poenostavi razvoj mobilnih
aplikacij za naprave, ki temeljijo na operacijskemu sistemu Symbian. Tehnologija WRT je
vključena tudi v vse novejše platforme, ki jih Nokia še razvija. Razvoj aplikacij za
platformo Symbian ni enostaven. Primarni programski jezik je C++, ki ob naboru tolikih
višjenivojskih programskih jezikov (NET, Java) ne velja več za najbolj priljubljenega.
Tudi programski vmesnik za izdelovanje uporabniškega vmesnika ni najbolj prijazen, saj
se za dober videz aplikacije porabi preveč časa.
V okolju WRT se za razvoj uporabljajo spletne tehnologije (JavaScript, CSS, HTML), kar
omogoča spletnim razvijalcem, da razvijajo mobilne aplikacije. S to potezo je Nokia
pridobila veliko število razvijalcev, ki so sposobni ustvariti uporabne aplikacije [2].
Spletni brskalnik na Symbian OS
Spletni brskalnik za platformo Symbian je razvila Nokia. Temelji na WebKit, ki ga je
razvilo podjetje Apple in se uporablja predvsem v njihovem spletnem brskalniku
imenovanem Safari. Uporablja pa ga tudi nov Googlov brskalnik Chrome [11].
Krmilnik gradnikov
Krmilnik gradnikov (angl. widget engine) je okolje, namenjeno izvajanju majhnih aplikacij
pod okriljem celotnega grafičnega vmesnika. Te majhne aplikacije ali gradniki (angl.
RAZVOJ APLIKACIJ ZA PRENOSNE TELEFONE V OKOLJU NOKIA WEB RUNTIME Stran 4
widgets) se obnašajo kot prave aplikacije, saj so razvite s pomočjo podobnih tehnologij,
kot so HTML, CSS in JavaScript. Pravimo, da predstavljajo spletno izkušnjo izven
brskalnika (angl. out of browser experiences). Krmilnik gradnikov najdemo v različnih
popularnih sistemih (Windows 7 Sidebar, Google Desktop gadgets) [12].
2.1 Kaj je Web Runtime?
Nokia Web Runtime (WRT) je krmilnik gradnikov (angl. Widget engine) za naprave, ki
temeljijo na platformi Symbian. Temelji na komponenti spletnega brskalnika WebKit.
WebKit skrbi za prikazovanje vsebine HTML. Spodnja slika 2.1 prikazuje sestavo
WRTKit ter ostalih komponent, ki sestavljajo spletni brskalnik in okolje WRT.
Slika 2.1: Arhitektura WebKit [13].
Gradniki WRT
Gradniki WRT (widgets) so mobilne aplikacije, ki jih razvijamo s pomočjo spletnih
tehnologij. Spletni razvijalci lahko uporabijo svoje znanje iz področja spletnih aplikacij ter
razvijejo prijetno mobilno izkušnjo na Nokijinih prenosnih telefonih. Namestijo se enako
kot domorodne (angl. native) aplikacije Symbian. Izvajajo se izven uporabniškega
vmesnika brskalnika tako, da so popolnoma samostojne. Prav tako je tudi njihovo
obnašanje podobno domorodnim aplikacijam. Nepazljiv uporabnik sploh ne bo opazil
razlik med izvajanjem domorodnih aplikacij in gradnikov WRT. Upravljanje nad njimi
izvaja sam operacijski sistem [2].
RAZVOJ APLIKACIJ ZA PRENOSNE TELEFONE V OKOLJU NOKIA WEB RUNTIME Stran 5
2.2 Različice WRT
Nokia okolje WRT je bilo predstavljeno v različici S60 3rd Edition FP2 platforme
Symbian. Glavna ideja je bila, da uporabimo spletni brskalnik in ogrodje Symbian za
razvoj aplikacij, imenovanih gradniki (angl. widgets). V tabeli 2.1 so podane različice in
spremembe okolja WRT [1].
Tabela 2.1: Pregled različic WRT in sprememb funkcionalnosti [1].
Symbian WRT različica Spremembe
1.0 Prva različica WRT
Omogočen dostop do objektov WRT
1.1 Uvedba storitev Platforme (koledarja, lokacije itd.)
7.2
Podpora dodajanja gradnikov na začetni zaslon (začetek z
modelom N97)
Popolna podpora za Flash Lite 3.0
Podpora za večstranski začetni zaslon
Okolje WRT je načeloma kompatibilno za nazaj. Gradniki, ki so razviti za različico WRT
1.0, se izvajajo na WRT 1.1 in v vseh kasnejših različicah. Gradniki, ki uporabljajo storitve
platforme in so razviti za različico WRT 1.1, pa se ne morejo izvajati na različici WRT 1.0,
saj še takrat ni bilo podpore za storitve platforme, kar je razvidno iz tabele 2.1. Oznaka 7.2
se je drastično spremenila zaradi spremenjene različice spletnega brskalnika S60 [1].
V tabeli 2.2 so prikazane različice platforme Symbian in okolja WRT.
Tabela 2.2: Različice WRT ob različnih izdajah Symbian [1].
Izdaja Symbian Različica WRT
S60 3rd Edition, Feature Pack 1 1.0
S60 3rd Edition, Feature Pack 2 1.0 ali 7.2
S60 5th Edition 1.1 ali 7.2
RAZVOJ APLIKACIJ ZA PRENOSNE TELEFONE V OKOLJU NOKIA WEB RUNTIME Stran 6
Vsako leto izide mnogo novih mobilnih naprav. Najbolje je, da si podporo okolja WRT za
posamezni model pogledamo na uradni spletni strani, ki jo najdemo v razdelku 7 kot vir
[6].
2.3 Glavne funkcionalnosti
S pomočjo okolja WRT dostopamo do virov, ki jih po privzetem ponuja brskalnik
Symbian. Za razvoj uporabnih aplikacij pa to še zdaleč ni dovolj. Okolje WRT ponuja še
številne dodatne funkcionalnosti, katerih z brskalnikom ne moremo doseči. Podrobnosti teh
funkcionalnosti bodo opisane v nadaljevanju [3].
Interakcija z uporabnikom
Interakcija med aplikacijo in uporabnikom poteka preko vhodnih komponent kot so mehki
meniji, dotik na zaslonu, tipkovnica ipd [3].
Posodobitve
Gradniki samodejno zaznajo nove različice s preprosto spletno zahtevo na spletno storitev
in se tako samodejno posodobijo [3].
Navigacija
Navigacija poteka preko kazalca ali zavihkov ter smernih tipk na tipkovnici naprave [3].
Rotacija zaslona
Uporabnik menja orientacijo zaslona tako, da zavrti mobilno napravo. Gradniki samodejno
zaznajo ali je zaslon v leţečem ali pokončnem poloţaju [3].
Izvajanje domorodnih aplikacij Symbian
Gradniki zaţenejo domorodne aplikacije s preprostim klicem funkcij (kamera, koledar) [3].
RAZVOJ APLIKACIJ ZA PRENOSNE TELEFONE V OKOLJU NOKIA WEB RUNTIME Stran 7
2.4 Prednosti in slabosti
Pri razvoju domorodnih (angl. native) aplikacij smo praktično neomejeni. Uporabimo
lahko vse razpoloţljive vire na prenosnih telefonih, medtem ko pri razvoju gradnikov te
omejitve vendarle obstajajo. Okolje WRT skrbi za nizkonivojske operacije kot so risanje
vsebine, upravljanje z dogodki in povezovanje z omreţjem. Razvijalec se tako lahko
osredotoči na samo vsebino izdelka. V tabeli 2.3 je navedenih nekaj prednosti in slabosti
gradnikov WRT [3].
Tabela 2.3: Prednosti in slabosti gradnikov WRT [3].
Prednosti Slabosti
Za razporeditev komponent grafičnega
vmesnika lahko uporabimo HTML/CSS. Če
ţelimo zamenjati videz aplikacije, zamenjamo
le datoteke CSS.
S pomočjo stilov CSS moramo simulirati
domorodno obnašanje nekaterih komponent.
JavaScript je fleksibilen, dinamičen skriptni
programski jezik, ki se ga hitro naučimo.
Omogoča nam hiter dostop do elementov DOM
ter enostavno pošiljanje zahtev AJAX.
Ob preveč svobodnem in nepazljivem
programiranju zelo hitro plačamo davek
zmogljivosti.
Do virov in funkcionalnosti dostopamo s
pomočjo storitev platforme.
Storitve platforme niso razširljive. Smo omejeni
s ponujenimi funkcionalnostmi.
Zelo hitra in enostavna metoda nameščanja ter
distribucije paketov (*.wgz).
Izvorna koda je v golem besedilu (plain text),
kar predstavlja tveganje. Za delno rešitev tega
problema lahko uporabimo nekatera orodja.
2.5 Varnost
V tem razdelku bomo navedli nekaj dejstev o varnosti. Vemo, da imajo spletne aplikacije
zelo striktno definiran varnostni model. Spletnim stranem ni dovoljeno dostopati do
datotečnega sistema. Gradniki se obnašajo podobno kot spletne aplikacije in imajo
definirane različne varnostne modele [1].
Varnostni model WRT
Varnostni model WRT temelji na podlagi peskovnika (angl. sandbox). Omogoča laţje
nameščanje in posodabljanje gradnikov, saj nam jih ni potrebno podpisovati tako kot
RAZVOJ APLIKACIJ ZA PRENOSNE TELEFONE V OKOLJU NOKIA WEB RUNTIME Stran 8
domorodne aplikacije Symbian. Posledica tega je, da gradniki samodejno izpišejo
opozorilo, kadar ţelimo dostopati do kakšnega vira prenosnega telefona. Ta opozorila se
pojavijo predvsem pri dostopanju do interneta ali storitev platforme [1].
Varnostni upravljalec izvajanja (angl. Runtime Security Manager)
Varnostni upravljalec med izvajanjem samodejno ugotovi, kdaj ţeli gradnik dostopati do
storitev platforme. Teh varnostnih polic ne moremo spreminjati, ker so določene za vsako
napravo posebej. Varnostni upravljalec izpiše opozorilo za vsak dostop do storitev
platforme. Na sliki 2.2 je prikazano varnostno opozorilo, ki se prikaţe ob prvem
pridobivanju lokacije GPS.
Slika 2.2: Varnostno opozorilo [1].
Po prvi pritrditvi se to opozorilo ne bo več prikazovalo, dokler se gradnik izvaja. Po
ponovnem zagonu se opozorilo ponovno prikaţe [1].
2.6 CSS
Prekrivni slogi (angl. Cascading Style Sheets) ločijo semantični tok HTML-ja od vizualne
predstavitve. Priporočljivo je vključiti eno ali več zunanjih slogov. S pomočjo teh slogov
lahko popolnoma uredimo videz aplikacije. Ustvarimo tudi razne preobleke (angl. skins),
ki jih s pomočjo JS dinamično zamenjamo. Uporaba slogov je podrobneje opisana v
razdelku 4.6 [4].
2.7 JavaScript
JavaScript (JS) je skriptni programski jezik in predstavlja srce gradnikov WRT oziroma
aplikacij. Lahko rečemo, da s pomočjo JS aplikacija zaţivi. Urejamo lahko elemente DOM
RAZVOJ APLIKACIJ ZA PRENOSNE TELEFONE V OKOLJU NOKIA WEB RUNTIME Stran 9
med samim delovanjem ali pošiljamo asinhrone zahtevke AJAX. S pomočjo vgrajenih
objektov JS dostopamo do raznih virov telefona (mehke tipke, meniji,...) ter izvajamo
storitve platforme kot so dostop do koledarja ali kamere, pridobitev lokacije GPS itd [4].
Pri razvoju lahko uporabimo tudi razne odprtokodne knjiţnice, kot so jQuery, MooTools,
Prototype in podobne, ki nam olajšajo delo [14]. Uporabo in dobro prakso programiranja
spoznavamo skozi celotno diplomsko delo.
RAZVOJ APLIKACIJ ZA PRENOSNE TELEFONE V OKOLJU NOKIA WEB RUNTIME Stran 10
3 RAZVOJNA ORODJA
Za razvoj gradnikov WRT ne potrebujemo dragih orodij. Dovolj je le beleţka (angl.
notepad), vendar smo prikrajšani za marsikateri »bombonček«, ki ga prinašajo razvojna
orodja.
V tem poglavju opišemo nekaj najuporabnejših razvojnih orodij. Dobra razvojna orodja
nam zelo olajšajo delo ter povečajo našo produktivnost. Lahko se osredotočimo na
konkretne probleme in se nam ni treba ukvarjati z nepotrebnimi sintaktičnimi teţavami.
3.1 Aptana Studio in vtičnik Nokia WRT
Aptana Studio je zastonjsko odprto kodno razvojno okolje (angl. IDE), ki je v osnovi
namenjeno razvijanju spletnih aplikacij. Vgrajeno ima samodejno izpopolnjevanje izvorne
kode (angl. code completition) za spletne tehnologije kot so HTML, JS ter CSS. Temelji na
platformi Eclipse, ki je zelo razširljiva.
Vtičnik Nokia WRT namestimo v Aptana Studio in skupaj tvorita nepogrešljivo razvojno
okolje za razvijanje gradnikov WRT.
Glavne funkcionalnosti vtičnika so [15]:
uporaba simulatorja, s katerim si pribliţamo ciljno okolje (telefon) in tako testiramo
delovanje aplikacije,
samodejno pakiranje in nameščanje paketov WGZ na prenosne telefone,
samodejno izpopolnjevanje kode JS (widget, menu, device…).
RAZVOJ APLIKACIJ ZA PRENOSNE TELEFONE V OKOLJU NOKIA WEB RUNTIME Stran 11
Simulator WRT
Simulator WRT ponuja predogled aplikacije na simuliranem prenosnem telefonu, ki deluje
podobno kot pravi. Na voljo imamo več različnih nastavitev. S pomočjo Simulatorja WRT
si lahko nastavimo (slika 3.1) [3]:
orientacijo in ločljivost zaslona,
različico WRT,
mini pogled na začetnem zaslonu,
proţilec dogodkov.
Slika 3.1: Nastavitve simulatorja WRT.
V ozadju simulatorja se izvaja spletni brskalnik Firefox. Zatorej je potrebno vzeti v zakup
občasno razlikovanje v samem izrisu med simulatorjem in pravo napravo. Do razlik pride
pri izrisu določenih slogov. Izpostavimo nekaj ključnih razlik, ki se jih je treba zavedati ob
razvoju [3]:
Novi brskalniki kot je Firefox imajo podporo CSS3 za določanje zaobljenih robov
ali senc v tekstu. To na prenosnih telefonih še ni podprto.
Čezdomenske (angl. cross-domain) zahteve AJAX bodo v simulatorju blokirane s
strani Firefoxa zaradi varnostnih predpostavk.
Pazljivi moramo biti z regularnimi izrazi, saj se le-ti na napravah včasih ne
obnašajo tako kot v simulatorju.
Zavedati se moramo, da je zmogljivost prenosnih telefonov precej bolj omejena v
primerjavi s simulatorjem, ki se izvaja na zmogljivejših računalnikih.
RAZVOJ APLIKACIJ ZA PRENOSNE TELEFONE V OKOLJU NOKIA WEB RUNTIME Stran 12
Vtičnik Nokia WRT omogoča enostavno gradnjo namestitvenih paketov za različne
modele naprav. Na sliki 3.2 je prikazano okolje Aptana Studio z zagnanim simulatorjem
WRT. Prikazan je tudi kontekstni meni, pri katerem lahko izberemo način gradnje
gradnika.
Slika 3.2: Aptana Studio.
3.2 Emulator S60
Iz prejšnjega razdelka smo spoznali, da je testiranje na simulatorju, ki v ozadju uporablja
spletni brskalnik Firefox, včasih dvorezen meč. Večkrat se nam namreč zgodi, da se v
simulatorju kakšna stvar obnaša popolnoma drugače kot na pravem prenosnem telefonu.
To teţavo lahko rešimo tako, da vedno testiramo na pravem prenosnem telefonu, vendar je
to včasih zelo zamudno. Zato lahko uporabimo emulator S60.
Emulator S60 si lahko prenesemo iz interneta kot del S60 SDK (angl. Software Developer
Kits). Ima podporo za okolje WRT, zato lahko enostavno testiramo tudi gradnike WRT.
Delovanje gradnika na emulatorju S60 je zelo podobno tistemu na pravi napravi.
Predstavlja nepogrešljivo orodje, predvsem kadar razvijamo hibridne aplikacije. Slabost
emulatorja S60 je v počasnem delovanju. Za uspešno namestitev gradnikov WRT in
predvsem za zagon preteče preveč časa in hitrost delovanja ni na zadovoljivi ravni. Na sliki
3.3 je prikazan emulator S60 z leţeče orientiranim zaslonom [1].
RAZVOJ APLIKACIJ ZA PRENOSNE TELEFONE V OKOLJU NOKIA WEB RUNTIME Stran 13
Slika 3.3: Emulator S60.
RAZVOJ APLIKACIJ ZA PRENOSNE TELEFONE V OKOLJU NOKIA WEB RUNTIME Stran 14
4 RAZVOJ GRADNIKOV WRT
V prejšnjih poglavjih smo navedli nekaj splošnih dejstev ter opisali arhitekturo in
delovanje okolja WRT. Opisali smo tudi razvojna orodja, ki nam olajšajo razvoj gradnikov
WRT. V tem poglavju, po opisu glavnih manifestnih datotek, ki so sestavni del
namestitvenih paketov, nadaljujemo z načrtovanjem in izdelavo uporabniških vmesnikov.
Z opisom vgrajenih objektov WRT spoznamo, kako lahko dostopamo do virov prenosnih
telefonov, ustvarjamo menije ter komuniciramo z napravo s pomočjo definiranih funkcij.
Lotimo se izdelave Mini pogledov, ki predstavljajo poseben segment gradnikov WRT in
jih lahko dodajamo na začetni zaslon. Z opisom lokalizacije spoznamo kako gradnik WRT
popolnoma prilagodimo različnim jezikom. Pravzaprav lahko menjamo celoten videz
aplikacije glede na izbran jezik. WRT gradniki dostopajo do zunanjih podatkov s pomočjo
asinhronih zahtevkov (AJAX). Navedemo primere, kako izvedemo te klice ter razčlenimo
rezultate. Pri razvoju moramo biti pazljivi tudi na porabo pomnilnika ter baterije, zato
prikaţemo nekaj primerov dobre prakse programiranja v JS.
4.1 Manifestne datoteke
Gradnik sestavljajo različne datoteke. V fazi razvoja si lahko gradnik predstavljamo kot
mapo, ki je sestavljena iz različnih datotek. Nekatere izmed njih so obvezne. Na sliki 4.1
so prikazane te obvezne datoteke gradnika.
Slika 4.1: Manifestne datoteke [1].
RAZVOJ APLIKACIJ ZA PRENOSNE TELEFONE V OKOLJU NOKIA WEB RUNTIME Stran 15
Obvezne datoteke se morajo nahajati v korenskem imeniku. Brez njih je namestitev in
izvajanje neuspešno [1].
Info.plist
Info.plist je obvezna manifestna datoteka napisana v formatu XML. Vsebuje različne
lastnosti in nastavitve gradnika. V njej so navedeni vsi podatki, ki so potrebni za uspešno
namestitev in zagon. Prikazan je primer te datoteke (izpis 4.1) [1].
DisplayName
ImeGradnika
Identifier
com.podjetje.gradnik1
RAZVOJ APLIKACIJ ZA PRENOSNE TELEFONE V OKOLJU NOKIA WEB RUNTIME Stran 16
Datoteka HTML
Struktura, vsebina, razporeditev in funkcionalnost aplikacije je v različnih datotekah.
Datoteka HTML definira strukturo uporabniškega vmesnika. V to datoteko se vključijo
datoteke CSS, kjer je definiran videz aplikacije. Datoteke JS vsebujejo implementacijo
delovanja aplikacije. Na sliki 4.2 je prikazan primer datoteke HTML.
Slika 4.2: Primer datoteke HTML.
Začetno točko aplikacije predstavlja funkcija JS, ki se pokliče takoj po uspešnem nalaganju
vsebine. S pomočjo JS lahko dinamično nalagamo vsebino med samim izvajanjem
aplikacije [1].
Iz slike 4.2 je razvidno, da lahko vključimo tudi zunanje datoteke CSS in JS. Priporočljivo
je, da smiselno ločimo navedene datoteke. Slogi za kontroliranje elementov in slogi za
postavitev komponent naj bodo v ločenih datotekah. Podobno velja tudi za datoteke JS.
Poznamo več načinov vključevanja datotek oziroma zunanjih virov. Vključimo lahko tiste,
ki se nahajajo v samem paketu aplikacije (wgz) in tudi tiste, ki se nahajajo na kakšni
oddaljeni lokaciji. V izpisih 4.2 in 4.3 sta prikazana načina vključevanj virov [4].
Izpis 4.2: Vključevanje datoteke JS, ki se nahaja v paketu gradnika.
RAZVOJ APLIKACIJ ZA PRENOSNE TELEFONE V OKOLJU NOKIA WEB RUNTIME Stran 17
Izpis 4.3: Vključevanje datotek, ki so na oddaljenih lokacijah.
Zelo priporočljivo je, da ustvarimo samo eno datoteko HTML in s pomočjo funkcij JS in
DOM spreminjamo vsebino pogledov v aplikaciji. En izmed najpomembnejših razlogov za
to je ta, da je samo glavna datoteka HTML v varnostnem peskovniku. Ta datoteka ima
dostop do storitev platforme in drugih virov ter pošiljanja zahtevkov AJAX. Torej ni
smiselno ustvarjati več datotek HTML, čeprav je to teoretično mogoče [4].
Icon.png (*.jpg)
Ta datoteka predstavlja ikono aplikacije. Predlagana velikost je 88x88 pikslov. Ta ikona je
vidna na mobilnih napravah, kjer se nahajajo nameščene aplikacije [4].
4.2 Uporabniški vmesniki
Preden začnemo z razvojem, je priporočljivo analizirati zahteve in funkcionalnosti, ki jih
bo aplikacija ponujala končnim uporabnikom. Gradniki WRT so namenjeni mobilnim
napravam, torej se moramo zavedati teh karakteristik med samim razvojem. Podanih je
nekaj koristnih napotkov, ki pripomorejo k boljšemu uporabniškemu vmesniku [4]:
Končni uporabniki nam morajo biti znani. Pomembno je vedeti, zakaj bodo našo
aplikacijo uporabljali in kakšne mobilne naprave premorejo.
Zavedati se moramo, da imajo prenosni telefoni majhne zaslone. Potrebno je
preučiti, kakšno vsebino bomo prikazovali. Izpostaviti moramo najpomembnejše
dele vsebine, saj na majhne zaslone ne moremo prikazati preveč informacij.
Uporabniški vmesnik mora biti fleksibilen. Prilagajati se mora različnim
ločljivostim in orientacijam zaslonov.
Zavedati se moramo omejenosti interakcije. Nokijini prenosni telefoni ponujajo
opravljanje aplikacije s pomočjo navigacijskih tipk, mehkih tipk ali zaslona na
dotik.
RAZVOJ APLIKACIJ ZA PRENOSNE TELEFONE V OKOLJU NOKIA WEB RUNTIME Stran 18
Poskrbimo, da bo gradnik odziven. Zahteve pošiljajmo v ozadju s pomočjo
tehnologije AJAX in tako pripomoremo k hitrejšemu in uporabniku bolj prijaznemu
izvajanju.
Pazimo na ţivljenjsko dobo baterije. Mobilne naprave niso vedno priključene na
napajanje, zato moramo pri razvijanju gradnikov misliti tudi na porabo energije.
Izogibajmo se prepogostim in nepotrebnim dostopom do sistemskih virov.
Poskrbimo za primeren čas osveţevanja vsebine.
Upoštevajmo omreţne teţave. Prenosni telefoni niso venomer na dosegu brezţičnih
omreţij WIFI. Mobilni dostop do interneta pa ni brezplačen. Uporabnika moramo
ustrezno opozoriti o stanju omreţja.
Zavedati se moramo omejene procesorske moči ter manjše kapacitete pomnilnika.
Kodirajmo učinkovito ter poskrbimo, da datoteka HTML ne bo vsebovala
nepotrebnih elementov, ki kradejo pomnilniški prostor in posledično upočasnijo
izvajanje.
Uporabniški vmesniki so sestavljeni iz različnih elementov kot so gumbi, seznami, zavihki
ipd. V okolju WRT sestavimo uporabniški vmesnik na več načinov. Lahko uporabimo
standardne elemente HTML in priredimo sloge CSS. Uporabimo lahko tudi Nokia Web
Tamplates, ki vsebuje nabor ţe obstoječih elementov. Zelo popularna je tudi knjiţnica
Guarana UI, ki vsebuje celovito podporo za gradnjo grafičnih vmesnikov.
Standardni elementi HTML predstavljajo odlično začetno točko pri razvijanju gradnikov
WRT. S pomočjo stilov lahko videz teh elementov popolnoma spremenimo [4]:
Glave: , , ... .
Razdelitev vsebnikov: .
Odstavek:
.
Urejeni in neurejeni seznami .
Oznake .
Vnosno besedilo: .
Vnosni gumb: .
Slike: .
RAZVOJ APLIKACIJ ZA PRENOSNE TELEFONE V OKOLJU NOKIA WEB RUNTIME Stran 19
Tabela: , , , , , , .
Povezava: ime .
Za spreminjanje videza elementov HTML uporabimo izključno CSS. Informacije o slogih
hranimo v ločenih datotekah. Tako uporabimo več različnih slogov za en sklop oziroma
stran gradnika. Pravilen način nastavljanja videza in postavitev elementov je pri razvoju
gradnikov zelo pomemben, saj se aplikacije izvajajo na različnih tipih naprav z različnimi
velikostmi zaslonov. Tako lahko z dobrim pristopom stvari precej avtomatiziramo [4].
Določanje slogov CSS
Elementom lahko določiimo sloge CSS na podlagi dveh atributov: class in id. Prikazali
bomo več načinov uporabe CSS [4]:
Elementi HTML so razdeljeni v skupine na podlagi atributa class (class name)
(izpis 4.4).
Sekcija 1
Sekcija 2
Izpis 4.4: Elementa HTML za nastavljenim atributom class.
Vrednost atributa class (class name) uporabimo za določanje slogov v datoteki CSS
(izpis 4.5).
h1.sekcija1 { font-size: 80%; color: blue; }
h1.sekcija2 { font-size: 120%; color: red; }
Izpis 4.5: Določanje slogov na podlagi vrednosti class.
Sloge lahko nastavimo za vse standardne elemente. Brez določanja atributa class,
kot to vidimo v izpisu 4.6.
h1 { font-size: 100%; color: green; }
Izpis 4.6: Določanje slogov standardnih elementov.
Elementom HTML lahko določimo več različnih stilov (izpis 4.7).
Izpis 4.7: Element HTML z dvema vrednostima atributa class.
RAZVOJ APLIKACIJ ZA PRENOSNE TELEFONE V OKOLJU NOKIA WEB RUNTIME Stran 20
Uporabimo lahko tudi psevdo vrednosti atributa class. Te vrednosti se ob določenih
dogodkih samodejno dodajo določenim elementom. Primer kaţe izpis 4.8.
a:link { color: red; }
a:hover { color: fuchsia }
a:active { color: green }
a:visited { color: blue }
Izpis 4.8: Psevdo vrednosti elementa anchor.
Sloge določamo tudi s pomočjo unikatnih identifikatorjev elementa (atribut id). Če
obstajata dva elementa z istim identifikatorjem, se bodo slogi upoštevali le za prvi
najden element (glej izpis 4.9).
/*CSS */
#id123 { text-transform: uppercase }
Izpis 4.9: Nastavljanje stilov na podlagi identifikatorja elementa.
Razširljivost in orientacija uporabniškega vmesnika
Velik izziv je razviti uporabniški vmesnik, ki se samodejno prilagaja različnim ločljivostim
in orientacijam zaslonov. Pozanimati se moramo, katere naprave bo naša aplikacija
podpirala ter si pridobiti informacije o ločljivosti in drugih pomembnih podatkih, ki nam
pomagajo pri načrtovanju razvoja uporabniškega vmesnika. Slika 4.3 prikazuje primer,
kako se elementi uporabniškega vmesnika prilagodijo različni orientaciji zaslona. Vidimo,
da se vnosna polja samodejno razširijo in razdalje med elementi ostanejo v enakem
razmerju.
RAZVOJ APLIKACIJ ZA PRENOSNE TELEFONE V OKOLJU NOKIA WEB RUNTIME Stran 21
Slika 4.3: Uporabniški vmesnik v leţeči in pokončni orientaciji zaslona.
Pozorni moramo biti tudi na različen poloţaj menijev in mehkih gumbov. Za poloţaj teh
skrbi samo okolje WRT in se od različic platforme Symbian ter naprav razlikuje. V
različici 3 in 5 so meniji na desni strani zaslona (slika 4.4) [4].
Slika 4.4: Meniji v leţečem poloţaju zaslona naprav Symbian različice 3 in 5.
V novejših različicah Symbian (Symbina^3), so gumbi vedno na dnu zaslona (glej sliko
4.5).
Slika 4.5: Dimenzija in poloţaj menija leţeče orientiranega zaslona naprav Symbian^3.
RAZVOJ APLIKACIJ ZA PRENOSNE TELEFONE V OKOLJU NOKIA WEB RUNTIME Stran 22
Trenutni poloţaj menijev lahko pridobimo tudi na programski način. To storimo s pomočjo
lastnosti menu.location. Objekt menu je podrobneje opisan v razdelku 4.4. Lastnost
menu.location vsebuje naslednje vrednosti [1]:
-1: poloţaj menijev ni podprt in meniji niso prikazani,
1: poloţaj menijev je na levi strani zaslona,
2: poloţaj menijev je na dnu zaslona (slika 4.5),
3: poloţaj menijev je na desni strani zaslona (slika 4.4).
Naš cilj je izdelati uporabniški vmesnik, ki se prilagaja različnim velikostim zaslonov.
Najbolje je, da poloţaj in velikost elementov podajamo z relativnimi vrednostmi (odstotki).
Pri tem moramo biti pozorni, da ima tudi starš definirane vrednosti, tako da se njegova
velikost lahko izračuna. Velikosti elementov lahko podamo tudi eksplicitno s piksli. V
praksi se po navadi registriramo na dogodek window.onresize, ki se proţi ob vsaki
spremembi orientacije zaslona in tako lahko programsko priredimo velikosti in poloţaje
elementov. Vendar je bolje stremeti k temu, da čim bolje nastavimo sloge CSS in se tako
elementi samodejno prilagajajo [1]. Zamislimo si enostaven primer, da ţelimo imeti okno
(angl. screen), ki je razdeljen na dva stolpca. Vsak stolpec predstavlja ločen pogled.
Poglejmo, kako se to naredi s stili CSS.
/*Glavna struktura*/
html{
height: 100%;
width: 100%;
}
body {
font-size: large;
margin: 0;
height: 100%;
width: 100%;
overflow: hidden;
}
/* Postavitev pogleda v dva stolpca */
#pogled1 {
float:left;
height: 100%;
width: 50%;
}
#pogled2 {
float: right;
height: 100%;
width: 50%;
}
Izpis 4.10: Razdelitev pogledov v dva stolpca s pomočjo slogov CSS.
RAZVOJ APLIKACIJ ZA PRENOSNE TELEFONE V OKOLJU NOKIA WEB RUNTIME Stran 23
Iz izpisa 4.10 je razvidno, da ima starš (body) širino definirano na 100 %, medtem ko imata
oba podelementa (otroka) širino definirano na 50 %. Pomeni, da si stolpca razdelita celoten
zaslon na polovico ne glede na njegovo orientacijo ali velikost.
S pomočjo JS lahko poskrbimo za bolj napredno in zahtevnejše pozicioniranje in
spreminjanje velikosti, ki ga ne moremo doseči samo z definiranjem slogov CSS. Lastnosti
slogov spreminjamo s pomočjo lastnosti style, ki ga vsebuje vsak element DOM. Tak
primer najdemo v izpisu 4.11.
var element = document.getElementById("elementId");
element.style.width = "50px";
element.style.height = "100px";
Izpis 4.11: Nastavljanje stilov s pomočjo JS.
Uporabimo lahko tudi hibridni pristop. Predstavitveno logiko (videz) ločimo od
implementacije obnašanja (interakcijo). Različne datoteke CSS lahko naloţimo glede na
orientacijo zaslona. Za to je najprej potrebno definirati povezavo do stilov v razdelku head
v datoteki HTML (izpis 4.12).
Izpis 4.12: Definiranje povezave do stilov v datoteki HTML.
V JS s pomočjo identifikatorja (id) pridobimo zgoraj definirani element in mu glede na
orientacijo zaslona določimo povezavo do datoteke CSS (izpis 4.13).
// pridobimo element iz head sekcije, ki predstavlja referenco na stile
var style = document.getElementById("style");
if( isLandscape() ) {
// nastavimo stile za lezece orientiran zaslon
style.href = "lezece.css";
} else {
// nastavimo stile za pokoncno orientiran zaslon
style.href = "pokoncno.css";
}
Izpis 4.13: Nalaganje datotek CSS s pomočjo JS.
RAZVOJ APLIKACIJ ZA PRENOSNE TELEFONE V OKOLJU NOKIA WEB RUNTIME Stran 24
Podpora za pisave
V nasprotju s popularnimi spletnimi brskalniki ima brskalnik Symbian omejeno podporo
za različne pisave. Okolje WRT privzeto uporablja za prikazovanje besedila pisavo Nokia
Sans. Navedenih je nekaj kratkih nasvetov za delo s pisavami [1]:
Pisave spreminjajmo s pomočjo slogov CSS. Uporabimo lahko standardne lastnosti
kot so font-size in font-colour.
Normal, Bold, Italic stili pisav so samodejno podprti.
Posebno prirejene pisave prikaţemo kot grafični element (slika, SVGT).
Velikost pisave podajmo v relativnih enotah zaradi različnih velikosti in ločljivosti
zaslonov. Glavnemu elementu (body) nastavimo font:100 % in vsem pod
elementom podamo velikost z odstotki.
4.3 Objekti WRT
Okolje WRT ponuja več vgrajenih objektov JS, ki niso definirani v ostalih spletnih
brskalnikih. S pomočjo teh objektov upravljamo: z mehkimi tipkami (angl. softkeys),
nastavitvenimi meniji in dostopamo do različnih virov, ki jih ponuja naprava. Ti objekti so
[1]:
widget: razširja objekt window. S pomočjo njega odpiramo spletne strani z
brskalnikom Symbian, zaganjamo domorodne aplikacije, shranjujemo podatke v
shrambo, nastavimo orientacijo.
menu: razširja objekt window. S pomočjo tega objekta lahko upravljamo z meniji.
MenuItem: Vsebuje funkcije za dodajanje, brisanje ter urejanje mehkih menijev.
Predstavlja en primerek menija.
device: Ta objekt nam omogoča dostop do storitev platforme. Predstavljen je bil v
različici storitev platforme 2.0 (Platform Services 2.0).
RAZVOJ APLIKACIJ ZA PRENOSNE TELEFONE V OKOLJU NOKIA WEB RUNTIME Stran 25
Objekt widget
Objekt widget je vgrajen v izvajalno okolje WRT. Do njega dostopamo popolnoma enako
kot do drugih standardnih objektov JS (window, document). Ta objekt ponuja veliko
uporabnih funkcij, ki omogočajo, da se naš gradnik obnaša podobno kot domorodne
aplikacije. Navedene so glavne funkcije in lastnosti, ki jih ta objekt ponuja [1]:
openURL(String url): odpiranje spletnega naslova v spletnem brskalniku,
setPreferenceForKey(String prefrence, String key): hranjenje nizov v shrambi
(deluje na podobnem principu kot cookie v spletnih brskalnikih),
preferenceForKey(String key): pridobivanje vrednosti iz shrambe,
prepareForTransition(String transitionMode): onemogočanje posodabljanja
uporabniškega vmesnika zaradi priprave na poseben vizualni efekt,
setNavigationEnabled(Boolean navigation): omogočanje in onemogočanje
navigacije,
setNavigationType(String navigationMode): nastavljanje načina navigacije,
openApplication(HexNumber uid, String param): odpiranje aplikacije Symbian na
podlagi aplikacijske identifikacijske številke (uid),
setDisplayLandscape(): aktiviranje leţeče orientiranega zaslona,
setDisplayPortrait(): aktiviranje pokončno orientiranega zaslona,
identifier: lastnost za branje identifikatorja aplikacije,
onshow: dogodek, ko aplikacija pride iz ozadja v ospredje,
onhide: dogodek, ko gre aplikacija v ozadje,
onexit: dogodek, ko se aplikacija zapre,
wrt objekt: objekt, ki vsebuje informacije o okolju WRT.
Najbolj uporabljeni funkciji sta setPreferenceForKey in preferenceForKey. Omogočata
trajno shranjevanje podatkov na podlagi ključev, ki predstavljajo identifikator posamezne
vrednosti. Vrednosti se iz shrambe izbrišejo, ko odstranimo celotni gradnik iz naprave [4].
Primer uporabe teh funkcij kaţe izpis 4.14.
RAZVOJ APLIKACIJ ZA PRENOSNE TELEFONE V OKOLJU NOKIA WEB RUNTIME Stran 26
// shranjevanje vrednosti
widget.setPreferenceForKey("vrednost",'kljuc');
// pridobivanje vrednosti
var vrednost = widget.preferenceForKey('kljuc');
Izpis 4.14: Uporaba funkcij za trajno shranjevanje in pridobivanje podatkov.
Iz izpisa 4.14 je razvidno, da se shranjujejo nizi znakov. Seveda lahko kakršenkoli objekt
JS ali JSON pretvorimo v niz znakov pred shranjevanjem ter iz niza nazaj v objekt.
V izpisu 4.15 so prikazane informacije, ki jih pridobimo s pomočjo objekta widget.wrt, ki
je del celotnega objekta widget [1]. Vsakemu klicu je podan tudi komentar, tako da lahko
iz izpisa razberemo kakšne lastnosti objekt vsebuje.
if(typeof widget.wrt == 'object')
{
// wrt razlicica, Primer: 1.0, 1.1, 7.2
var razlicica = widget.wrt.version;
// Identifikator operacijskega sistema, Primer: S60 Symbian Device
var id = widget.wrt.platform.id;
// Manufaktura platforme, Primer: Nokia
var manufaktura_platforme = widget.wrt.platform.manufacturer;
//WRT razlicica paketa, Primer: v 31.0.008 24-8-2009 RM-365 (C) NM
var razlicica_paketa = widget.wrt.platform.packageVersion;
// model naprave, Primer : N97
var model = widget.wrt.platform.model;
}
Izpis 4.15: Lastnosti widget.wrt objekta.
4.4 Delo z meniji
Objekt menu je vgrajen objekt JS. Razširja objekt window in ponuja funkcije za dostop in
opravljanje nastavitvenega menija (angl. options menu) ter mehkih tipk (angl. softkeys).
Spreminjamo lahko oznake leve in desne mehke tipke ter sestavimo hierarhijo
nastavitvenih menijev s pomočjo objekta MenuItem, ki ga v nadaljevanju prav tako
opišemo. Nekaj glavnih metod, ki jih objekt menu ponuja [4]:
append(): dodajanje menijskih elementov v nastavitveni meni,
remove(): brisanje menijskih elementov iz nastavitvenega menija,
RAZVOJ APLIKACIJ ZA PRENOSNE TELEFONE V OKOLJU NOKIA WEB RUNTIME Stran 27
getMenuItemById(): pridobivanje menija na podlagi identifikatorja,
getMenuItemByName(): pridobivanje menija na podlagi imena,
setLeftSoftKeyLabel(): spreminjanje oznake leve mehke tipke,
setRightSoftKeyLabel(): spreminjanje oznake desne mehke tipke,
showSoftKeys(): prikaz mehkih tipk,
hideSoftKeys(): skrivanje mehkih tipk,
clear(): izbris vseh trenutnih menijev.
Kot smo ţe omenili, lahko preko objekta menu, dostopamo do mehkih tipk in nastavitvenih
menijev. Vsak element menija je primerek objekta MenuItem. Menijski elementi se
dodajajo s pomočjo funkcije menu.append. Menijske elemente lahko gnezdimo z
istoimensko funkcijo append(). Funkcionalnosti in akcije izvedemo tako, da se
registriramo na dogodek onSelect, ki ga vsebuje vsak primerek objekta MenuItem.
Uporabimo tudi funkcijo remove() za odstranjevanje podelementov elementa. S klicem na
metodo setDimmed() element onemogočimo in se tako ne odziva na akcije [4]. V izpisu
4.16 je prikazan primer ustvarjanja menijev, slika 4.6 pa prikazuje delovanje.
var MENU1_ID = 0
var MENU2_ID = 1;
var MENU2_CHILD1_ID = 2;
function createMenu()
{
// ustvarimo prvi meni
var menu1 = new MenuItem("Meni1" , MENU1_ID);
menu1.onSelect = onMenuItemSelected;
// ustvarimo prvi pod meni
var subMenu1 = new MenuItem("PodMeni1" , MENU2_CHILD1_ID);
subMenu1.onSelect = onMenuItemSelected;
// ustvarimo drugi meni in dodamo pod meni 1
var menu2 = new MenuItem("Meni2" , MENU2_ID);
menu2.append( subMenu1 );
// dodamo dva menija na najnizjem nivoju
menu.append(menu2);
menu.append(menu1);
}
RAZVOJ APLIKACIJ ZA PRENOSNE TELEFONE V OKOLJU NOKIA WEB RUNTIME Stran 28
// implementacija akcij menijev
function onMenuItemSelected( menuId ) {
switch( menuId ) {
case MENU1_ID:
// ... implementacija akcije ob kliku na Meni1
case MENU2_CHILD1_ID:
// ... implementacija akcije ob kliku na PodMeni1
}
}
Izpis 4.16: Primer ustvarjanja menijev.
Slika 4.6: Primer ustvarjenih menijev na napravi.
4.5 Storitve platforme
Storitve platforme (angl. Platform Services) omogočajo dostop do raznih virov, ki jih
ponujajo prenosni telefoni. Programski vmesnik (angl. API) za dostop do storitev je bil
dodan v različici WRT 1.1. V prvi različici WRT 1.0 je bilo podprtih le nekaj osnovnih
funkcionalnosti. Trenutno sta na voljo dve različici programskega vmesnika [1]:
1.0: ta različica se več ne razvija, vendar jo še vedno lahko uporabljamo,
2.0: ta različica se še razvija in nam omogoča poenostavljen način dostopanja do
storitev.
Storitve platforme so zunanji vmesniki, ki so povezani z JS v samem okolju WRT. Kadar
pošljemo kakšno zahtevo oziroma pokličemo kakšno funkcijo, se le-ta posreduje s
pomočjo izvajalnega varnostnega upravljavca (angl. Runtime Security Manager) in se tako
RAZVOJ APLIKACIJ ZA PRENOSNE TELEFONE V OKOLJU NOKIA WEB RUNTIME Stran 29
izvede akcija. Kadar pošljemo prvo zahtevo, se prikaţe varnostno opozorilo, ki ga
uporabnik mora potrditi. Ob vseh naslednjih zahtevah se opozorilo ne prikaţe več.
Storitve so načrtovane tako, da razvijalci v vsak klic navedemo povratno funkcijo (angl.
callback function), preko katere se vrne rezultat zahtevka [1].
Storitve platforme 1.0
V različici storitev platforme 1.0 (angl. Platform Services) dostopamo do storitev s
pomočjo objekta device. Objekt device je vgrajen objekt JS. Dodan je bil v različici WRT
1.1. Uporablja se za ustvarjanje storitvenih objektov za specifičen programski vmesnik. Do
storitvenih objektov (angl. services object) pridemo s klicem funkcije getServiceObject
(provider, interface). S pridobljenimi storitvenimi objekti dostopamo do storitev platforme
s klicanjem definiranih metod [4]. Izpis 4.17 kaţe primer, kako dobiti servisni objekt in
nato pridobiti lokacijo naprave GPS.
function onLocationData( data ) {
// Izpisimo rezultat
console.log("Latitude:" + data.ReturnedValue.Longitude);
console.log("Longitude:" + data.ReturnedValue.Latitude);
console.log("Altitude:" + data.ReturnedValue.Altitude);
}
// Pridobitev storitvenega objekta
var so = device.getServiceObject( "Service.Location", "ILocation" );
// Klic metode za pridobitev lokacije
so.getLocation("", onLocationData );
Izpis 4.17: Pridobitev trenutne lokacije.
Tabela 4.1 prikazuje vse vmesnike za dostop do storitev platforme. Tako enostavneje
vidimo, kakšne parametre lahko vnesemo v metodo getServiceObject, saj sta v tabeli
podana parametra provider in interface.
RAZVOJ APLIKACIJ ZA PRENOSNE TELEFONE V OKOLJU NOKIA WEB RUNTIME Stran 30
Tabela 4.1: Storitve in vmesniki storitev platforme 1.0 [1].
Programski vmesnik Parameter provider Parameter interface
AppManger Service.AppManager IappManager
Calendar Service.Calendar IdataSource
Contacts Service.Contact IdataSource
Landmarsk Service.Landmarks IdataSource
Location Service.Location Ilocation
Logging Service.Logging IdataSource
Media Management Service.MediaManagement IdataSource
Messaging Service.Messaging Imessaging
Sensors Service.Sensor Isensor
System Information Service.SysInfo IsysInfo
Trenutno se razvoj osredotoča na storitve platforme 2.0, zato je priporočljivo, da
uporabljamo novejšo različico. Vendar v različici 1.0 ni treba vključiti zunanjih knjiţnic,
kar pa ne velja za različico 2.0.
Storitve Platforme 2.0
Razlog za uvedbo različice 2.0 je poenotenje uporabe programskega vmesnika za vse
prihodnje izdaje oz. različice WRT. Uveden je predvsem enostavnejši model
programiranja.
Za uspešno delovanje storitev Platforme 2.0 moramo narediti naslednje korake [4]:
Potrebujemo knjiţnico, ki jo najdemo na uradni spletni strani Nokie. Naslov je:
http://www.forum.nokia.com/widgets.
Vključimo knjiţnico (platformservices.js) v glavno datoteko HTML.
Namestimo lahko tudi paket (platformservices.sisx) in prav tako podamo referenco
v glavno datoteko HTML.
RAZVOJ APLIKACIJ ZA PRENOSNE TELEFONE V OKOLJU NOKIA WEB RUNTIME Stran 31
V tabeli 4.2 so podane vse storitve in vmesniki, ki so trenutno na voljo.
Tabela 4.2 Storitve platforme 2.0 [4].
Storitev Vmesnik
Koledar Calendar
Kamera Camera
Kontakti Contacts
Beleţenje krajev Landmarks
Lokacija Geolocation
Beleţka komunikacij Commlog
Upravljanje z medijskimi podatki Media
Sporočila Messaging
Senzorji Sensors
Sistemske informacije Sys-info
Za pridobitev rezultata klicev podamo dve povratni funkciji (angl. dual callback). Povratni
funkciji ločimo za uspešno izvedeno zahtevo ali napako [4].
Poglejmo primer upravljanja s trenutnim poloţajem zaslona. S pomočjo objekta sensor se
registriramo na spremembo orientacije oziroma poloţaja zaslona (izpis 4.18). Ob
spremembi poloţaja se samodejno pokliče povratna funkcija. Senzor nam sporoča, kdaj je
zaslon obrnjen navzdol ali navzgor, na levo ali desno ter zgoraj ali spodaj (slika 4.7) .
Slika 4.7: Orientacija naprave.
RAZVOJ APLIKACIJ ZA PRENOSNE TELEFONE V OKOLJU NOKIA WEB RUNTIME Stran 32
var htmlElement = document.getElementById("izpis");
// povratna funkcija ob spreminjanju položaja naprave
function onOrientNotification(data){
// data.deviceOrientation can be DisplayUp, DisplayDown etc.
htmlElement.innerHTML = "
" + data.deviceOrientation + "
";
}
// povratna funkcija ob napaki pri pridobivanju orientacije
function errorCb(err) {
console.log(err.code);
console.log(err.message);
}
// Inicializacija storitvenega objekta in nastavitve povratnih funkcij
try{
sensor = nokia.device.load("sensors");
sensor.startChannel(onOrientNotification, "Orientation",errorCb);
} catch(e) {console.log(e); }
Izpis 4.18: Primer uporabe storitve sensors.
4.6 Mini pogledi
Mini pogledi (angl. MiniView) so se uveljavili ob izdaji modela Nokie N97 (S60 5th
Edition – touch enabled device). Mini pogledi so del gradnika, ki je prikazan na začetnem
zaslonu. Na začetni zaslon lahko dodamo več mini pogledov. Z enostavnim dotikom na
mini pogled se zaţene aplikacija v celozaslonskem načinu. Na mini pogledih se prikazujejo
osnutki celotnih podatkov, ki jih upravljamo z aplikacijo (slika 4.8) [4].
Slika 4.8: Mini pogledi na začetnem zaslonu.
Če primerjamo gradnike WRT z uporabniškim vmesnikom namiznega računalnika, bi
lahko dejali, da so gradniki maksimirana okna, mini pogledi pa minimizirana okna. Iz
RAZVOJ APLIKACIJ ZA PRENOSNE TELEFONE V OKOLJU NOKIA WEB RUNTIME Stran 33
perspektive razvijalca je mini pogled eden izmed manjših pogledov celotnega gradnika.
Implementira se na enak način kot ostala okna, le paziti moramo na omejeno velikost.
Ločljivost je zmanjšana na 308 x 65 pikslov. Ko je mini pogled na začetnem zaslonu, se
aplikacija ne zapre, ampak še naprej deluje v ozadju. Razlika med navadnim in mini
pogledom je tudi ta, da med uporabnikom in mini pogledom ni interakcije. Lahko bi dejali,
da se ob dotiku nanj gradnik maksimira. Navedimo nekaj implementacijskih nasvetov, ki
jih velja upoštevati [4]:
Na mini pogled ne dodajajmo elementov, ki so namenjeni interakciji z
uporabnikom. To so vpisno polje, gumbi itd. Dodamo le kakšen del najbolj sveţe
informacije (primer: novica RSS).
Prostor, ki je namenjen mini pogledu poskušamo zapolniti s koristnimi
informacijami. Namen je, da se gradnik izvaja v ozadju in prikazuje najbolj sveţe
oziroma pomembne podatke.
Prikaţemo datum in čas zadnje spremembe podatkov v mini pogledu.
Čas posodabljanja podatkov nastavimo na razumen čas. Če pošiljamo zahteve
vsakih nekaj sekund, nam to zelo krajša ţivljenjsko dobo baterije.
Izognimo se raznim animacijam. Mini pogled je dejansko predpomnilnik bitne slike
gradnika (angl. bitmap cache), zato omejimo posodabljanje uporabniškega
vmesnika.
Ob aktivaciji poskušajmo optimizirati porabo pomnilnika. Uničimo velike objekte
DOM in slike, ki jih več ne potrebujemo ter jih ponovno naloţimo, ko se aplikacija
postavi v ospredje oziroma maksimira.
V nadaljevanju prikaţemo primer mini pogleda ter podamo izseke izvorne kode.
Aktiviranje mini pogleda
Za aktiviranje mini pogleda moramo v datoteko info.plist dodati naslednji vrstici (izpis
4.19).
MiniViewEnabled
Izpis 4.19: Aktiviranje mini pogleda.
RAZVOJ APLIKACIJ ZA PRENOSNE TELEFONE V OKOLJU NOKIA WEB RUNTIME Stran 34
Pri omenjeni lastnosti moramo biti pazljivi. Če je zastavica MiniViewEnabled vklopljena,
se ime gradnika prikaţe v nastavitvenem meniju začetnega zaslona. Če naš gradnik mini
pogleda ne podpira, lahko nastane zmeda, saj je uporabniku dovoljeno dodati mini pogled,
vendar ta ni implementiran in se prikaţe le bel zaslon. V tem primeru mora biti zastavica
nastavljena na false [4].
HTML
V glavni datoteki HTML definiramo dva vsebnika. Eden bo sluţil kot vsebnik za vsebino
in elemente, ki se prikazujejo na celotnem zaslonu, torej takrat ko je gradnik maksimiran,
drugi bo namenjen mini pogledu (izpis 4.20).
Pozdravljen Mini pogled
Pozdravljen gradnik!
Izpis 4.20: Primer strukture datoteke HTML za mini pogled.
Slogi
Ustvarimo še datoteko s slogi. Predpostavimo, da je pravilna velikost mini pogleda
izraţena z absolutnimi vrednostmi pikslov (primer vidimo na izpisu 4.21).
html {
width:100%;
height:100%;
}
body {
margin: 0;
width: 100%;
height: 100%;
}
#homescreen {
width: 308px;
height: 85px;
}
Izpis 4.21: Primer datoteke CSS za prikaz mini pogleda.
RAZVOJ APLIKACIJ ZA PRENOSNE TELEFONE V OKOLJU NOKIA WEB RUNTIME Stran 35
Implementacija
Sedaj, ko smo ustvarili sloge in HTML je čas, da zadeve spravimo v pogon. Podan je izpis
4.22, v katerem je prikazano menjavanje med mini pogledom in gradnikom na celotnem
zaslonu.
var MINI_VIEW_TRESHOLD = 150;
var fullScreen = null;
var miniView = null;
var init = function() {
fullScreen = document.getElementById("fullscreen");
miniView = document.getElementById("miniview");
setViewMode();
}
// funkcija, ki preveri ali se nahajamo v mini pogledu
function isMiniViewMode() {
return ( window.innerHeight < MINI_VIEW_TRESHOLD );
}
function setViewMode() {
// Ugotovimo, ali moramo pokazati mini pogled ali celoten zaslon
if( isMiniViewMode() ) {
// Skrijmo celoten pogled
fullScreen.style.display = "none";
// Prikažimo mini pogled
miniView.style.display = "block";
} else {
// Skrijmo mini pogled
miniView.style.display = "none";
// Prikažimo celoten pogled
fullScreen.style.display = "block";
}
}
// Registracija na dogodek ob spremembi velikosti zaslona (orientacije)
window.onresize = setViewMode;
Izpis 4.22: Primer menjavanja mini pogleda in celozaslonskega načina.
Dodajanje mini pogleda na začetni zaslon
Naš gradnik moramo namestiti na mobilno napravo ter dodati mini pogled na začetni
zaslon. To storimo tako, da na začetnem zaslonu zadrţimo dotik. Prikaţe se nam spustni
meni, kjer se nahaja tudi ime našega gradnika [4]. Slika 4.9 prikazuje spustni meni na
začetnem zaslonu.
RAZVOJ APLIKACIJ ZA PRENOSNE TELEFONE V OKOLJU NOKIA WEB RUNTIME Stran 36
Slika 4.9: Spustni meni za dodajanje mini pogleda na začetni zaslon.
Slika 4.10 prikazuje, kako je videti naša implementacija mini pogleda na prenosnem
telefonu (N97). Mini pogled ima belo ozadje ter napis »Pozdravljen Mini pogled«.
Slika 4.10: Mini pogled na mobilni napravi.
Spremembe v Symbian^3
Prvi model nove odprtokodne različice Symbian z oznako Symbian^3 je N8. Različica
WRT je tukaj preskočila kar na različico 7.2 zaradi različice WebKit v spletnem
brskalniku. Začetni zaslon podpira več strani mini pogledov. Model N97 je bil omejen na 6
praznih reţ, namenjenih za mini poglede. Ta pa jih ima veliko več. Slika 4.11 prikazuje
več strani z mini pogledi [4].
Slika 4.11 Strani mini pogledov na Symbian^3.
RAZVOJ APLIKACIJ ZA PRENOSNE TELEFONE V OKOLJU NOKIA WEB RUNTIME Stran 37
4.7 Lokalizacija
Aplikacije za prenosne telefone se uporabljajo po celotnem svetu, zato je prilagajanje v
različne jezike zelo pomembno. Nokiine naprave so izdelane za različne trge in ponujajo
velik nabor različnih jezikov. Lahko bi se zgodilo, da imamo celoten telefon v slovenskem
jeziku, aplikacija oziroma gradnik pa ostane v angleškem, kar je neprijetna situacija in si je
kot razvijalci in ponudniki ne smemo privoščiti.
Okolje Nokia WRT ponuja rešitev. Na zelo enostaven način lahko lokaliziramo razne nize
znakov, slike ipd. Različni viri za jezike se ločijo po lokalizacijskih mapah (.lproj), ki so
glede na trenutni jezik samodejno zaznane ob zagonu aplikacije [1]. V sami implementaciji
poskrbimo za lokalizacijo tako, da vse nize ločimo v datotekah, ki so v lokalizacijskih
mapah in se izognemo direktnemu kodiranju nizov. Strukturo teh map prikazuje slika 4.12.
Slika 4.12: Primer struktur lokalizacijskih map [1].
V lokalizacijskih mapah so viri za vsak jezik oz. lokalizacijo posebej. V njih lahko poleg
slik in nizov navedemo kakršnekoli vire, ki se razlikujejo glede na jezik. Ti viri se
samodejno preberejo iz prave mape s pomočjo okolja WRT.
Ime mape je sestavljeno iz + l.proj. Kode jezikov najdemo na spletni strani,
katere naslov najdemo v razdelku 7 pod vir [5]. Za angleški jezik torej ustvarimo mapo
en.lproj, za slovenskega pa sl.lproj.
Lokalizacija imena aplikacije
Nekateri nizi, ki jih uporablja krmilnik WRT, morajo biti navedeni v posebnih datotekah.
Če ţelimo lokalizirati ime aplikacije za različne jezike, moramo v lokalizacijski mapi
ustvariti datoteko infoplist.strings, kjer navedemo ime aplikacije (izpis 4.23). V tej datoteki
lokaliziramo vse nastavitve datoteke info.plist, v kateri se nahajajo lastnosti gradnika (ime,
id, različica) [1].
RAZVOJ APLIKACIJ ZA PRENOSNE TELEFONE V OKOLJU NOKIA WEB RUNTIME Stran 38
DisplayName = "Ime aplikacije"
Izpis 4.23: Ime aplikacije v infoplist.strings.
Lokalizacija nizov
V vsaki mapi lproj ustvarimo datoteko localizedTextStrings.js, v kateri navedemo vse nize,
ki se pojavijo v aplikaciji. Ustvariti moramo tudi referenco na nize v sekciji header
datoteke HTML (izpis 4.24).
Izpis 4.24: Referenca na datoteko z nizi.
V datoteki localizedTextStrings.js navedemo objekt, ki vsebuje nize. Na izpisih 4.25, 4.26
in 4.27 je prikazan primer za slovenski in angleški jezik ter uporaba v sami implementaciji.
var lang = {
MENU_OPEN: "Open",
MENU_CLOSE: "Close"
}
Izpis 4.25: Primer datoteke en.lproj/localizedTextStrings.js.
var lang = {
MENU_OPEN: "Odpri",
MENU_CLOSE: "Zapri"
}
Izpis 4.26: Primer datoteke sl.lproj/localizedTextStrings.js.
var menuItem = new MenuItem( lang.Open, 0 );
Izpis 4.27: Primer uporabe lokaliziranih nizov.
Lokalizacija virov
Lokaliziramo lahko tudi druge vire. Zamislimo si primer, da ţelimo v aplikaciji prikazati
sliko zastave glede na trenutno izbran jezik. Najprej skopiramo slike zastav v
lokalizacijske mape (sliki 4.13 in 4.14).
RAZVOJ APLIKACIJ ZA PRENOSNE TELEFONE V OKOLJU NOKIA WEB RUNTIME Stran 39
Slika 4.13: sl.lproj/zastava.png. Slika 4.14: en.lproj/zastava.png.
Podajmo še primer sklicevanja na lokaliziran vir v sami kodi. Ustvarimo element img, ki
predstavlja sliko. Podati moramo ime vira (zastava.png) in ta se izbere iz pravilne
lokalozacijske mape glede na izbran jezik (izpis 4.28).
var flag = document.createElement('img');
flag.setAttribute('src', 'zastava.png');
Izpis 4.28: Uporaba lokaliziranih virov.
Lokalizcija postavitve gradnikov
Priporočljivo je, da imamo videz aplikacije ločen v datotekah CSS. Tako je videz
popolnoma ločen od implementacije delovanja aplikacije. Prednost je, da lahko spletni
oblikovalec in programer delujeta popolnoma ločeno in ne pride do spreminjanja
medsebojnih virov. S pomočjo mehanizma lokaliziranja gradnikov WRT lahko prav tako
ločimo videz aplikacije. Tako je lahko videz aplikacije v slovenskem jeziku popolnoma
prilagojen. To pride v poštev pri kakšnih za nas eksotičnih jezikih, kjer branje poteka iz
desne proti levi (angl. RTL – right to left). Takrat je potrebno posebej prirediti sloge za
takšne jezike [4].
V samem korenskem imeniku ustvarimo datoteko stili.css ([koren]/stili.css), kjer
definiramo videz. Če ţelimo drugačen videz za slovenski jezik, ustvarimo istoimensko
datoteko v sl.lproj mapi ([koren]/sl.lproj/stili.css). Takšne stile vključimo v glavno HTML
datoteko na naslednji način (izpis 4.29).
@import "localizedLayout.css";
Izpis 4.29: Vključevanje lokaliziranih stilov.
RAZVOJ APLIKACIJ ZA PRENOSNE TELEFONE V OKOLJU NOKIA WEB RUNTIME Stran 40
4.8 AJAX
Ajax (angl. Asynchronous Javascript and XML) je najbolj uporabljena tehnika pri razvoju
gradnikov WRT. S pomočjo te tehnologije se podatki prenašajo asinhrono. Zahteve po
novih vsebinah izvedemo v ozadju in pri tem ne motimo delovanje aplikacije ter
izboljšamo uporabniško izkušnjo [7]. Podatke pošiljamo ali pridobivamo s pomočjo
standardiziranega objekta XMLHttpRequest. V nadaljevanju podrobneje opišemo objekt
XMLHttpRequest ter podamo nekaj primerov, kako se izvedejo asinhrone zahteve ter
prejete podatke tudi razčlenimo ter shranimo v standardizirane objekte JS.
Pošiljanje asinhronih zahtev
XMLHttpRequest ponuja dve funkciji, s pomočjo katerih izvedemo pošiljanje asinhronih
zahtev [4]:
open(tip, naslov, asinhrono): Inicializacija povezave. Prvi parameter predstavlja tip
poslane zahteve (GET ali POST). Drugi parameter predstavlja naslov, na katerega
bomo zahtevo poslali, tretji parameter pa zastavico, če ţelimo poslati asinhrono
zahtevo.
send(teloSporocila): Pošiljanje zahteve. Metodi kot prvi parameter podamo niz
znakov ali objekt XML, ki je dodan v telo sporočila (POST) ali kot poizvedbeni niz
(angl.query string).
V izpisu 4.30 je prikazan primer, kako pošljemo asinhrono zahtevo na določen naslov
(url).
// ustvarimo objekt XMLHttpRequest
var req = new XMLHttpRequest();
// inicializacija povezave
req.open( "GET" , url, true );
// pošiljanje zahteve
req.send( null );
Izpis 4.30: Pošiljanje zahteve AJAX.
Včasih na zahteve ne dobimo odgovora oziroma le-ta traja predolgo časa. Če ţelimo
zahtevek prekiniti oziroma preklicati, izvedemo klic req.abort().
RAZVOJ APLIKACIJ ZA PRENOSNE TELEFONE V OKOLJU NOKIA WEB RUNTIME Stran 41
Prejemanje odziva
Za prejemanje odziva se moramo registrirat na dogodek onreadystatechange. Dogodek se
samodejno sproţi ob obdelavi zahteve [4]. V izpisu 4.31 vidimo primer, kako se
registriramo na odziv in preverimo, ali je bila zahteva uspešno zaključena.
// ustvarimo objekt XMLHttpRequest
var req = new XMLHttpRequest();
// registriramo povratno funkcijo
req.onreadystatechange = readyStateChangeFunc;
function readyStateChangeFunc() {
// preverimo ali se je zahteva uspešno končala
if( this.readyState == 4 && this.status == 200 ) {
// razčlenimo podatke
parse( this.responseText );
} else {
// Nekaj je šlo narobe
alert("napaka!");
}
}
Izpis 4.31: Prejemanje asinhronega odziva.
Iz izpisa vidimo, da s pomočjo spremenljivk readyState in status preverimo trenutno stanje
zahteve. Spremenljivka readyState ima več vrednosti [4]:
0: zahteva še ni inicializirana,
1: zahteva je pripravljena,
2: zahteva je bila poslana,
3: zahteva se procesira,
4: zahteva je končana.
Zahteva je končana, ko je vrednost spremenljivke readyState enaka 4. Preveriti moramo
tudi status odziva http. Vrednost 200 po specifikaciji http [8] predstavlja uspešen odziv
(OK result). Tako smo se prepričali, da se je zahteva uspešno izvedla in lahko pričnemo z
obdelavo razultata. Do rezultata dostopamo s pomočjo spremenljivk this.responseText ali
this.responseXML [4].
Obdelava rezultata
Vsebina rezultata je lahko kakršnakoli vrednost. Najbolj pogosto uporabljena formata pri
razvoju gradnikov WRT sta XML in JSON.
RAZVOJ APLIKACIJ ZA PRENOSNE TELEFONE V OKOLJU NOKIA WEB RUNTIME Stran 42
Do vsebine XML dostopamo s pomočjo lastnosti this.responseXML, ki predstavlja objekt
XML. To pomeni, da je vgrajeni razčlenjevalnik XML samodejno ustvaril objekt JS [4].
Naveden je enostaven primer odziva (izpis 4.32) ob zahtevi pridobitve novic RSS.
RRS naslov
www.rss.net
Primer RSS novic
RSS primer
www.link.si
Novica
Izpis 4.32: Primer odziva RSS novice.
Primer odziva (izpis 4.32) razčlenimo s pomočjo funkcij DOM. V izpisu 4.33 je prikazan
primer, kako razčlenimo novico RSS ter njen opis prikaţemo v gradniku WRT.
var rssOpisi = req.responseXML.getElementsByTagName('description');
for( var i = 0; i < rssOpisi.length; i++ ) {
// ustvarimo element
var elOpis = document.createElement('p');
// elementu nastavimo vsebino ( RSS )
elOpis.innerHTML = rssOpisi[i].innerHTML;
// dadamo element v vsebnik
container.appendChild( elOpis );
}
Izpis 4.33: Dodajanje vsebine RSS odziva v uporabniški vmesnik.
Zelo razširjen je format JSON. Ustvarjen je bil po sintaksi objektov JS. Razlika je le-ta, da
morajo biti lastnosti v objektu JSON navedene med dvema narekovajema (""). Ravno
zaradi podobnosti in enostavne razčlembe je ta format zelo popularen. Podpirajo ga vse
večje spletne storitve [4]. Primer vidimo v izpisu 4.34..
{"oseba":
{
"ime": "Jure",
"priimek": "Gorinsek",
}
}
Izpis 4.34: Primer odziva JSON.
RAZVOJ APLIKACIJ ZA PRENOSNE TELEFONE V OKOLJU NOKIA WEB RUNTIME Stran 43
Do JSON vsebine v odzivu pridemo s pomočjo lastnosti responseText. Najpreprostejši
način je uporaba funkcije eval, ki izvede izraz JS, vendar to ni priporočljivo. Bolje je
uporabiti kakšno izmed knjiţnic [4]. Najbolj znana je zastonjska knjiţnica JSON Parser, ki
jo najdemo na uradni spletni strani http://www.json.org. Izpis 4.35 kaţe primer razčlembe
odziva JSON.
try {
// klic funckije eval
eval("var oseba = (" + req.repsonseTExt + ")");
// izpis imena in priimka
container.innerHTML = oseba.ime + " " + oseba.priimek;
} catch(e) {
// napaka pri razčlembi
}
Izpis 4.35: Razčlemba formata JSON.
4.9 Dobre prakse pri razvoju
Gradniki WRT so mobilne aplikacije, zato moramo poskrbeti tudi za optimizacijo.
Mobilne naprave niso tako zmogljive kot osebni računalniki, zato je naša pazljivost pri
implementaciji še toliko bolj pomembna. Pozorni moramo biti na preveliko obremenitev
centralno procesorske enote (CPU) ter porabo baterije. Pomagamo si s programsko
opremo, ki nam pomaga pri ugotavljanju pomnilniških lukenj (angl. memory leak). Najbolj
znana sta Nokia Energy Profiler in yTask [17].
JS je zelo svoboden jezik. Marsikaj nam dopušča in to lahko privede do kode, ki je zelo
počasna. Navedimo primere dobre prakse programiranja v programskem jeziku JS, ki
pripomorejo k izboljšanju zmogljivosti gradnikov WRT [17]:
Izogibajmo se uporabi globalnih spremenljivk. Ob referenciranju na njih mora
skriptni upravljalec pregledati celoten doseg (angl. scope).
Funkcije JS se izvedejo hitreje ko funkcije DOM. Bolje je uporabiti niz znakov za
dinamično sestavljanje vsebine HTML (innerHTML), kot pa uporabiti funkcije
document.createElement.
Izogibajmo se uporabi zank for-in. Za iteracijo čez polja raje uporabljajmo
numerične indekse. Bodimo pozorni tudi na to, da se drugi parameter zanke for
ovrednoti ob vsaki iteraciji. Shranimo torej dolţino polja v spremenljivko, da se ne
RAZVOJ APLIKACIJ ZA PRENOSNE TELEFONE V OKOLJU NOKIA WEB RUNTIME Stran 44
bo preverjanje dolţine ovrednotilo ob vsaki iteraciji in upočasnilo delovanje (izpis
4.36).
// shranimo dolzino polja
var l = arr.length;
// iteracija čez elemente
for (var i = 0; i < l; i++) {
var el = arr[i];
//...
}
Izpis 4.36: Zanka for.
Osnovni operatorji so hitrejši kot funkcijski klici (izpis 4.37).
// Počasneje: klici vgrajenih funkcij
var min = Math.min(a, b);
arr.push(val);
// Hitreje: Uporasba primitivnih operatorjev
var min = a < b ? a : b;
arr[arr.length] = val;
Izpis 4.37: Uporaba osnovnih operatorjev.
Lovljenje izjem s try-catch-finally je pogosto nujno opravilo. V bloku try se
ustvarijo dodatni objekti, ki pomnijo sklad klicev (angl. call stack) in porabijo
dragocen pomnilnik. Izjeme lovimo izven zank in ne ponavljamo try-catch za
vsako iteracijo.
Izogibajmo se uporabi začasnih spremenljivk. Uporabimo raje operaterje +, =.
Izogibajmo se veliko komentarjem in dolgim imenom spremenljivk. Preveč
komentarjev upočasni delovanje in poveča velikost datotek. Dobro komentirano
kodo je laţje vzdrţevati, zato je bolje, da si pred produkcijsko izdajo pomagamo z
orodjem YUI Compressor, ki nam iz izvorne kode samodejno odstrani komentarje
ter formatira kodo v eno vrstico. Datoteke so tako manjše in izvajanje posledično
hitrejše.
Minimiziramo osveţevanje postavitve in prerisovanja (angl. re-paints).
Prerisovanje se zgodi ob vsaki spremembi elementov DOM. Temu se izognemo
tako, da element s pomočjo CSS najprej skrijemo, nato ga spremenimo ter znova
prikaţemo. Tako se izognemo prerisovanju celotnega drevesa DOM. Skriti
elementi ne povzročajo prerisovanja.
RAZVOJ APLIKACIJ ZA PRENOSNE TELEFONE V OKOLJU NOKIA WEB RUNTIME Stran 45
Dostop do vrednosti DOM. Izognemo se nepotrebnim klicem getElementById
(izpis 4.38).
// Počasneje
document.getElementById('el').prvaLastnost = 'vrednost1';
document.getElementById('el').drugaLastnost = 'vrednost2';
document.getElementById('el').tretjaLastnost = 'vrednost3';
// Hitreje:
var elem = document.getElementById('el').prvaLastnost= 'vrednost1';
elem.drugaLastnost = 'vrednost2';
elem.tretjaLastnost = 'vrednost3';
Izpis 4.38: Pomnjenje vrednosti DOM.
4.10 Testiranje in iskanje napak
Razhroščevanja in odkrivanje napak se lahko lotimo na več načinov. Najpreprostejši in
najhitrejši način je z uporabo spletnega brskalnika in njegovih vtičnikov za razhroščevanje
aplikacij JS (Firebug). Zelo hitro naletimo na teţave pri uporabi objektov WRT, saj ti v
brskalnikih niso definirani. Orodje, ki deluje na podlagi brskalnika Firefox in vsebuje
podporo za objekte WRT in programski vmesnik (API), je ţe omenjeni Aptana Studio
WRT Simulator. Odkrivamo lahko izjeme ter sintaktične napake. Omogočeno nam je
razhroščevanje v samem simulatorju (slika 4.15) [3].
Slika 4.15: Opozorilo o napaki v Aptana WRT simulatorji [3].
Beleženje
Funkcije JS izpisujejo sporočila v konzolno okno (console.log). Konzole JS so nameščene
v vsakem spletnem brskalniku. Obstaja veliko različnih ogrodij za beleţenje akcij, vendar
RAZVOJ APLIKACIJ ZA PRENOSNE TELEFONE V OKOLJU NOKIA WEB RUNTIME Stran 46
vključevanje preobseţnih ogrodij v gradnik privede do nepotrebnega razširjanja in
povečevanja velikosti aplikacije. Kadar izvajamo gradnik na napravi, se konzolni izpisi
zapišejo v datoteko na prenosnem telefonu. Ta datoteka se nahaja v pomnilniku naprave
(C:\jslog_wodget.log) [1]. Včasih ţelimo, da določene zapise vidimo sproti. Prikazali
bomo implementacijo funkcije za beleţenje, ki jo lahko zelo enostavno vključimo in
izključimo. Sluţi nam kot beleţenje akcij, izpis vrednosti spremenljivk ter pomaga pri
iskanju napak. Primer funkcije, ki izpisuje vrednosti v element, ki ga sami definiramo,
vidimo v izpisu 4.39. Elementu moramo nastaviti pravilen identifikator log. Če ţelimo
beleţenje izklopiti, spremenimo zastavico DEBUG_ENABLED na false.
var DEBUG_ENABLED = true;
var debugElement = null;
function debug( message ) {
// Ali je belezenje aktivirano?
if( DEBUG_ENABLED ) {
// Ce elementa za izpis ni, ga je potrebno ustvariti
if( !debugElement ) {
debugElement = document.createElement("p");
debugElement.innerHTML = "IZPISI:";
document.getElementById('log').appendChild( debugElement );
}
// Posredujmo sporocila tudi v konzolo, ce le ta obstaja
if( console && typeof console.log == "function" ) {
console.log( message );
}
// Zapise dodajamo v element
debugElement.appendChild( document.createElement("br") );
debugElement.appendChild( document.createTextNode(
new Date().toTimeString().split(" ")[0]+ " " + message) );
}
}
function init() {
debug("HTML vsebina je nalozena");
}
Izpis 4.39: Funkcija za beleţenje.
Delovanje zgornjega primera na Aptana Simulatorju WRT je prikazano na sliki 4.16.
Zabeleţeno je nalaganje vsebine HTML. Izpisi se lahko izpisujejo na kakršen koli element
v HTML. Najbolje je ţe na začetku rezervirati del zaslona (ustvariti element), kjer se bodo
ob nujnih primerih iskanja napak izpisovale vrednosti in nam pomagale priti do rešitev.
RAZVOJ APLIKACIJ ZA PRENOSNE TELEFONE V OKOLJU NOKIA WEB RUNTIME Stran 47
Slika 4.16: Primer delovanja opisane funkcije za beleţenje.
4.11 Distribucija in namestitev
Namestitveni paket gradnikov WRT predstavlja mapo, v kateri se nahajajo razvojne
datoteke, ki so podrobneje opisane v poglavju 4.1. Te datoteke moramo stisniti ter ustvariti
namestitveni paket WGZ. Procedura za gradnjo namestitvenega paketa je naslednja [1]:
ustvarimo arhiv .zip celotne mape, kjer se nahajajo razvojne datoteke,
končnico .zip preimenujemo v .wgz,
paket .wgz prenesemo na napravo. Namestitev se sproţi samodejno.
Omenjena procedura gradnje paketov wgz je v razvijalskih okoljih ţe avtomatizirana.
Namestitev
Paket wgz lahko prenesemo in namestimo na več načinov. Prenesemo ga iz spletnih strani
ali preko povezave USB/Bluetooth. Namestitev poteka podobno kot pri domorodnih
aplikacijah. Slika 4.17 prikazuje namestitev gradnika [1].
Slika 4.17: Namestitev gradnika.
RAZVOJ APLIKACIJ ZA PRENOSNE TELEFONE V OKOLJU NOKIA WEB RUNTIME Stran 48
5 PRAKTIČNI PRIMER
Za praktičen primer diplomskega dela smo razvili aplikacijo za mobilne telefone (Widget),
ki s pomočjo Googlovega programskega vmesnika za prevajanje (angl. Google AJAX
Language API ) omogoča prevajanje besedila. Aplikacija omogoča tudi samodejni uvoz ter
prevajanje sporočil SMS. Rezultate prevajanja lahko posredujemo kot SMS ali elektronsko
sporočilo. Aplikacijo smo razvili v okolju WRT, zato jo lahko izvajamo na vseh novejših
prenosnih telefonih Nokia.
Pri razvoju smo uporabili naslednje tehnologije:
okolje Nokia WRT 1.1,
HTML, CSS, JavaScript,
Google AJAX Language API,
orodje Adobe Photoshop CS4 za izdelavo uporabniškega vmesnika,
razvojno okolje Aptana Studio z nameščenim vtičnikom WRT.
V tem poglavju opišemo gradnik, ki smo ga razvili kot plod pridobljenega znanja iz
diplomskega dela. Izpostavimo nekaj teţav, s katerimi smo se soočili ter podamo rešitve.
Tudi v tem poglavju lahko bralec zasledi nekaj dobrih praks, ki pripomorejo k rešitvam
teţav, ki se pogosto pripetijo pri razvoju gradnikov WRT. Celotna izvorna koda aplikacije
je proloţena k diplomskemu delu. Določene dele bomo izpisali tudi v tem poglavju.
5.1 Zagon aplikacije
V tem razdelku izpostavimo problem, na katerega smo naleteli pri zagonu naše aplikacije.
S tem problemom smo se soočili med razvojem, zato podamo tudi rešitev, ki je v praksi
zelo pogosto uporabljena tehnika za pohitritev zagona gradnikov WRT.
RAZVOJ APLIKACIJ ZA PRENOSNE TELEFONE V OKOLJU NOKIA WEB RUNTIME Stran 49
Problem
V našo aplikacijo smo vključili zunanji programski vmesnik za prevarjanje. V izpisu 5.1
vidimo, da lahko vmesnik vključimo v sekcijo head dokumenta HTML. Vključitev virov v
aplikacijo smo podrobneje opisali v poglavju 4.1.
google.load("language", "1");
Izpis 5.1: Vključitev Google AJAX Language API.
Pojavi se problem, ker se zunanji vmesnik vključi takoj ob zagonu oziroma nalaganju in
tako se zahteva dostop do interneta, še preden se prikaţe kakšna vsebina. Okolje WRT
samodejno zazna, kdaj ţeli aplikacija dostopati do virov, ki zahtevajo internetno povezavo.
Zato uporabnik v naši aplikaciji vidi le črn zaslon ter pogovorno okno za vzpostavitev
povezave. To je iz uporabniškega stališča zelo neprijazno.
Rešitev
Za rešitev zgoraj omenjenega problema smo uporabili tehniko lenega nalaganja (lazy
loading) skript oz. virov [18]. Nalaganje virov se prične po uspešnem prikazu pojavnega
okna (angl. popup). Iz izpisa 5.2 lahko razberemo, da kličemo funkcijo startup(), ko se
uspešno naloţi animacija popup_loader.gif.
Loading...
Izpis 5.2: Registracija na dogodek ob uspešni ali neuspešno naloţeni sliki.
Zagotovili smo, da se ob samem zagonu najprej prikaţe pojavno okno, ki prikazuje proces
nalaganja in šele nato se začnejo nalagati ostale datoteke. Te datoteke naloţimo tako, da
ustvarimo elemente , jim nastavimo atribut src ter jih programsko dodamo v
RAZVOJ APLIKACIJ ZA PRENOSNE TELEFONE V OKOLJU NOKIA WEB RUNTIME Stran 50
sekcijo header. Šele ko se naloţijo vsi viri, se začne nalagati vmesnik za prevajanje (glej
izpis 5.3).
var srcs = [];
function startup() {
srcs = [
"js/Utils.js",
"js/ScreenManager.js",
"js/API.js",
"js/screens/Screen.js",
"js/screens/Popup.js",
"js/screens/Header.js",
"js/screens/MainScreen.js",
"js/screens/MessagesScreen.js",
"http://www.google.com/jsapi"
];
srcs.reverse();
startLoad();
}
// funkcija naloži vse vire v sekcijo header
function startLoad() {
if (srcs.length != 0) {
var fileName = srcs.pop();
var callback = function() {
startLoad();
};
loadScript( fileName, callback )
} else {
// nalaganje virov je končano,
// sedaj lahko naložimo Google AJAX Langauge API
google.load("language", "1", {"callback" : init});
}
}
// funkcija, ki ustvari element in ga doda v sekcijo header
function loadScript( src, callback ) {
var head = document.getElementsByTagName("head")[0];
script = document.createElement('script');
script.type = 'text/javascript';
script.src = src;
script.onload = callback;
script.onerror = callback;
head.appendChild(script);
}
Izpis 5.3: Nalaganje skript v sekcijo header HTML.
S takšnim pristopom smo dosegli uporabniku prijaznejši zagon aplikacije. Povprečen čas
nalaganja enostavnega primera gradnika WRT (Hello Wolrd) traja povprečno 3 sekunde.
Ta čas se hitro poveča pri večjih aplikacijah, v katere se vključuje ogromno virov. V tem
primeru uporabniku prikaţemo proces nalaganja preden se pričnejo nalagati datoteke in
ostali viri (slika 5.1 ).
RAZVOJ APLIKACIJ ZA PRENOSNE TELEFONE V OKOLJU NOKIA WEB RUNTIME Stran 51
Slika 5.1: Okno, ki se prikaţe pri zagonu aplikacije.
5.2 Uporabniški vmesnik
V tem razdelku predstavimo uporabniški vmesnik in izpostavimo najpomembnejše dele
obnašanja uporabniškega vmesnika. Za grafično izdelavo smo uporabili orodje Adobe
Photoshop CS4. S pomočjo tega orodja smo izdelali videz gumbov, oken ter ikon.
Aplikacijo lahko uporabljamo v leţeči (angl. lanscape) ter pokončni (angl. portrait)
orinetaciji zaslona. Uporabniški vmesnik se spremembi orientacije samodejno prilagaja.
Sestavljen je iz naslednjih oken (angl. screens): glavno okno, okno za prikaz sporočil ter
pojavno okno za izbiro akcij. Na vrhu vsakega okna je prikazana tudi glava (angl. header),
ki vsebuje dva gumba ter logotip aplikacije (slika 5.2). Gumba, ki sta na levi in desni strani
lahko tudi programsko spreminjamo (oznaka, akcija).
Slika 5.2: Glava oken.
Glavno okno
Okno se prikaţe takoj po zagonu in nalaganju aplikacije (slika 5.3). Sestavljeno je iz dveh
vnosnih polj. V prvem polju vpišemo besedilo, ki ga ţelimo prevesti, v drugem pa se
izpišejo prevodi. Na voljo sta tudi dva spustna menija za izbiro jezikov. Izberemo lahko
izvorni ter ciljni jezik.
RAZVOJ APLIKACIJ ZA PRENOSNE TELEFONE V OKOLJU NOKIA WEB RUNTIME Stran 52
Slika 5.3: Glavno okno.
Okno za prikaz sporočil
Okno prikaţe
Recommended