RAZVOJ APLIKACIJ ZA PRENOSNE TELEFONE V ...Razvoj mobilnih aplikacij za prenosne telefone ni tako enostavno opravilo. Potrebno je veliko spretnosti in znanja, da se na napravah z majhnimi

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

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


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.


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.


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].


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


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].


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


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


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.


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…).


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.


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].


Slika 3.3: Emulator S60.


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].


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


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.


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.


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: .


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.


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.


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.


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.


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.


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).


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.


// 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,


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);

}


// 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


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.


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.


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.


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.


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.


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.


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.


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].


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).


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.


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().


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.


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.


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


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.


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


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.


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.


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.


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


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 ).


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.


Slika 5.3: Glavno okno.

Okno za prikaz sporočil

Okno prikaţe

Documents

RAZVOJ APLIKACIJ ZA PRENOSNE TELEFONE V ...Razvoj mobilnih aplikacij za prenosne telefone ni tako enostavno opravilo. Potrebno je veliko spretnosti in znanja, da se na napravah z majhnimi