razvoj spletnih aplikacij z uporabo javafx · future javafx application will also be able to run on...

Iztok Hafner

RAZVOJ SPLETNIH APLIKACIJ Z UPORABO JAVAFX

Diplomsko delo

Maribor, avgust 2009

I

Diplomsko delo visokošolskega strokovnega študijskega programa


Študent: Iztok Hafner

Študijski program: VS ŠP Računalništvo in informatika

Smer: Informatika

Mentor: izr. prof. dr. Branko Matjaţ Jurič, univ. dipl. inţ. rač. in inf.

Somentor: doc. dr. Boštjan Brumen, univ. dipl. inţ. rač. in inf.

Lektor: izr. prof. dr. Joţe Lipnik

Maribor, avgust 2009

V

ZAHVALA

Zahvaljujem se mentorju, izr. prof. dr. Matjaţu

B. Juriču, in somentorju doc. dr. Boštjanu

Brumnu za pomoč in vodenje pri opravljanju

diplomskega dela.

Iskrena zahvala velja staršem, ki so mi

omogočili študij ter me med samim študijem

tudi podpirali. Njihova pomoč in vzpodbuda sta

pripomogli k uresničitvi zastavljenih ciljev.

VII


Ključne besede: razvoj aplikacij, bogata spletna aplikacija, JavaFX, deklarativna

sintaksa.

UDK: 004.43:004.7(043.2)

Povzetek

V diplomskem delu predstavljamo nov del platforme Java, imenovan JavaFX, ki

služi za razvoj bogatih spletnih aplikacij. Ključna prednost tehnologije JavaFX je v

prenosljivosti aplikacije, saj se enaka aplikacija lahko izvaja kot namizna aplikacija,

spletna aplikacija in tudi kot mobilna aplikacija. V prihodnosti pa se bo ta lahko

izvajala tudi na TV napravah, kot so DVD in Blu-ray predvajalniki.

Prav tako smo preučili najpogosteje uporabljeni alternativni tehnologiji, in sicer

Microsoft Silverlight in Adobe Flex, kateri smo primerjali s tehnologijo JavaFX.

Zgrajen odločitveni model nam je pokazal, da so te tri tehnologije zelo izenačene in da

se zaradi hitrega razvoja lahko kmalu tehtnica prevesi v korist katerekoli izmed njih.

Skozi razvito praktično aplikacijo pa predstavljamo tudi ključne elemente in novosti

tehnologije JavaFX, kot sta deklarativna sintaksa in koncept vezanja podatkov. Razvita

aplikacije predstavlja predstavitveno stran virtualnega otoka Ozara - Wellness in mind,

ki se nahaja v virtualnem svetu Second Life in ga je razvila Skupina za razvoj virtualnih

svetov s Fakultete za elektrotehniko, računalništvo in informatiko v Mariboru. Razvita

aplikacija vsebuje tudi veliko elementov tehnologije JavaFX, kot so vektorske in

slikovne animacije.

IX

DEVELOPMENT OF WEB APPLICATIONS USING JAVAFX

Key words: application development, rich internet application, JavaFX, declarative

syntax.

UDK: 004.43:004.7(043.2)

Abstract

In this diploma we present a new Java platform family member called JavaFX,

which is here to deliver richer web applications. Key advantage of JavaFX is within its

capability to run cross-platform as a web, desktop or a mobile application. In near

future JavaFX application will also be able to run on a TV devices as are DVD and Blu-

ray players.

We also studied mostly used alternative technologies Microsoft Silverlight and

Adobe Flex, which we compared with JavaFX. Decision model we built showed us, that

all three technologies are very close to each other and because of rapid development of

such technologies the scale can quickly turn in favor of any of them.

Through developed practical application we present key elements and novelties of

JavaFX technology such as declarative syntax and the concept of data-binding.

Developed application presents a presentation site of a virtual island called Ozara -

Wellness in mind, which lies in virtual world Second Life and was developed by virtual

world development group (Skupina za razvoj virtualnih svetov) from Faculty of

electrical engineering and computer science from Maribor. Developed application also

includes a large number of JavaFX elements as are vector and picture animations.

XI

VSEBINA

1 UVOD ...................................................................................................................... 1

2 PREGLED TEHNOLOGIJ ZA RAZVOJ BOGATIH SPLETNIH

APLIKACIJ .................................................................................................................... 3

2.1 KAJ SO BOGATE SPLETNE APLIKACIJE? .............................................................. 3

2.2 ADOBE FLEX ..................................................................................................... 3

2.3 MICROSOFT SILVERLIGHT ................................................................................. 4

2.4 JAVAFX ............................................................................................................. 5

3 PODROBEN PREGLED JAVAFX ...................................................................... 7

3.1 ZGODOVINA RAZVOJA SPLETNIH TEHNOLOGIJ PRI PLATFORMI JAVA .................. 7

3.2 ARHITEKTURA TEHNOLOGIJE JAVAFX .............................................................. 8

3.3 PREDNOSTI IN ZNAČILNOSTI JAVAFX .............................................................. 10

3.4 JAVAFX SCRIPT SINTAKSA IN JEZIK ................................................................. 11

3.4.1 Deklaracija spremenljivk in primitivni podatkovni tipi .............................. 11

3.4.2 Deklaracija in klic funkcije......................................................................... 13

3.4.3 Polja oz. zaporedja ..................................................................................... 13

3.4.4 Operatorji ................................................................................................... 14

3.4.5 Izrazi ........................................................................................................... 17

3.4.6 Deklaracija in ustvarjanje primerka razreda ............................................. 21

3.4.7 Vezanje podatkov in prožilci ...................................................................... 22

3.5 JAVAFX API ................................................................................................... 24

3.6 RAZVOJ JAVAFX GUI ..................................................................................... 32

3.6.1 Osnovno oblikovanje GUI .......................................................................... 32

3.6.2 Naprednejše oblikovanje GUI z JavaFX .................................................... 34

3.6.3 Uporaba vezanja podatkov in upravljavcev dogodkov z grafičnimi elementi

40

3.6.4 Animiranje grafičnih objektov .................................................................... 41

3.7 NAMEŠČANJE JAVAFX APLIKACIJ V UPORABNIŠKO OKOLJE ............................ 43

XII

4 PRIMERJAVA TEHNOLOGIJ ZA RAZVOJ BOGATIH SPLETNIH

APLIKACIJ (RIA) ....................................................................................................... 45

4.1 KRITERIJI PRIMERJAVE .................................................................................... 45

4.2 PRIMERJAVA JAVAFX – MICROSOFT SILVERLIGHT – ADOBE FLEX ................. 45

4.2.1 Medplatformna prenosljivost aplikacije ..................................................... 45

4.2.2 Hitrost izvajanja ......................................................................................... 48

4.2.3 Zahtevnost učenja ....................................................................................... 51

4.2.4 Popularnost in razširjenost tehnologij za razvoj RIA ................................ 56

4.3 ODLOČITVENI MODEL IN UGOTOVITVE............................................................. 59

5 RAZVOJ JAVAFX APLIKACIJE ..................................................................... 63

5.1 OSNOVNI OPIS .................................................................................................. 63

5.2 NAČRTOVANJE APLIKACIJE .............................................................................. 63

5.2.1 Diagram primerov uporabe ........................................................................ 63

5.2.2 Razredni diagram ....................................................................................... 64

5.2.3 Diagram zaporedja ..................................................................................... 66

5.2.4 Shranjevan je podatkov o uporabnikih in zgodovini klepeta ...................... 67

5.3 IMPLEMENTACIJA ............................................................................................ 69

5.3.1 Definiranje osnovnih lastnosti in okna aplikacije ...................................... 69

5.3.2 Prehodi in animacije .................................................................................. 71

5.3.3 Definiranje svojih vozlišč in vključevanje medijskih vsebin ....................... 74

5.3.4 Delo s podatki in povezovanje s strežnikom ............................................... 78

5.4 PREDSTAVITEV APLIKACIJE ............................................................................. 85

5.5 POVZETEK ....................................................................................................... 89

6 SKLEP ................................................................................................................... 90

7 VIRI, LITERATURA ........................................................................................... 92

8 PRILOGE .............................................................................................................. 95

8.1 SEZNAM SLIK ................................................................................................... 95

8.2 SEZNAM TABEL ................................................................................................ 97

8.3 SEZNAM IZVORNE KODE .................................................................................. 98

8.4 NASLOV ŠTUDENTA ....................................................................................... 101

XIII

8.5 KRATEK ŢIVLJENJEPIS.................................................................................... 101

8.6 ZGOŠČENKA .................................................................................................. 101

8.7 IZJAVA O ISTOVETNOSTI DIPLOMSKEGA DELA ................................................ 102

XV

UPORABLJENE KRATICE

AIR – Apollo Integrated Runtime

AJAX – Asynchronous Javascript And XML

API – Application Programming Interface

CLR – Common Language Runtime

DVD – Digital Versatile Disc

F3 – Form Follows Function

FXD – JavaFX data file

FXM – JavaFX media file

FXZ – JavaFX content file

GPL – General Public License

GUI – Graphic User Interface

HTML – Hyper Text Markup Language

HTTP – Hyper Text Transfer Protocol

IDE – Integrated Development Environment

J2ME – Java 2 Micro Edition

J2SE – Java 2 Standard Edition

J2EE – Java 2 Enterprise Edition

JMF – Java Media Framework

JNLP – Java Network Launching Protocol

JRE – Java Runtime Environment

JSON – JavaScript Object Notation

JVM – Java Virtual Machine

MXML – Macromedia eXtensible Markup Language

RIA – Rich Internet Application

SDK – Software Development Kit

UI – User Interface

URL – Uniform Resource Locator

W3C – World Wide Web Consortium

WMA – Windows Media Audio

WMV – Windows Media Video

WPF – Windows Presentation Foundation

XVI

XAML – eXtensible Application Markup Language

XML – eXtensible Markup Language

Iztok Hafner, RAZVOJ SPLETNIH APLIKACIJ Z UPORABO JAVAFX 1

1 UVOD

Danes postaja vse pomembnejša dostava uporabnikom grafično bogatih in

interaktivnih aplikacij, saj se vse več ljudi, med njimi tudi ljudje z nekoliko manj

računalniškega znanja, srečuje z računalniki in podobnimi napravami. Predvsem ti ljudje

navadno hitro podajo mnenje, da je neka aplikacija »slaba« ţe na podlagi slabše

oblikovane zunanje podobe grafičnega uporabniškega vmesnika. Prav zaradi tega se vse

več pogledov usmerja v tehnologije, ki omogočajo razvoj grafično bogatih in interaktivnih

tako spletnih kakor tudi namiznih aplikacij. Trenutno se bije tiha bitka med najbolj

razširjeno tehnologijo podjetja Adobe, imenovano Flex, dobro »vrinjeno« in ne nazadnje

tudi zelo učinkovito tehnologijo podjetja Microsoft imenovano Silverlight ter najnovejšo

članico bitke, novo pridobitvijo platforme Java, imenovano JavaFX.

Namen diplomskega dela je proučitev tehnologije za razvoj bogatih spletnih aplikacij

JavaFX in predstavitev novih konceptov, ki jih ta vpeljuje, ter tudi pregled ostalih

najpogosteje uporabljenih tehnologij in primerjave le-teh.

Začetek diplomskega dela je namenjen spoznavanju najpogosteje uporabljenih

tehnologij za razvoj RIA (Rich Internet Applications) in tudi spoznavanju, kakšne

aplikacije sploh so RIA aplikacije.

V nadaljevanju se bomo spustili globlje v tehnologijo JavaFX in pregledali, kako je

podjetje Sun Microsystems od samih začetkov razvijalo platformo Java za spletne

aplikacije in prišlo do tehnologije JavaFX. Tukaj si bomo podrobneje pogledali tudi

arhitekturo, osnovne značilnosti, skriptni jezik JavaFX Script in knjiţnice, ki so nam na

voljo. Ko se bomo s tem seznanili, si bomo pogledali primere razvoja grafičnega

uporabniškega vmesnika z JavaFX in ga primerjali z dobro poznanim Java Swing. Na

koncu tretjega poglavja pa si bomo pogledali načine namestitve JavaFX aplikacije.

V četrtem poglavju bomo preizkusili tako imenovani »RIA trio« v resničnih primerih

in primerjali način razvoja in izvajalne zmogljivosti aplikacij, napisanih s pomočjo

različnih RIA tehnologij. Tukaj bomo tudi raziskali priljubljenost in razširjenost teh treh

2 Iztok Hafner, Diplomsko delo: RAZVOJ SPLETNIH APLIKACIJ Z UPORABO JAVAFX

tehnologij od prvih predstavitev do danes. Po preučitvi teh tehnologij bomo zgradili

preprost odločitveni model s kriteriji in tehnologije ocenili.

Praktičen primer aplikacije bomo razvili v petem poglavju, kjer bomo predstavljene

koncepte JavaFX dejansko lahko vključili v neko celoto. Pri razvoju aplikacije pa bomo

seveda pozorni na prenosljivost aplikacije in bomo aplikacijo razvili tako, da bo ponujala

zmoţnost poganjanja na vseh napravah, saj podjetje Sun obljublja moţnost poganjanja

JavaFX aplikacije tudi na mobilnih napravah brez dodatnih sprememb oz. posodobitev

programske kode.


2 PREGLED TEHNOLOGIJ ZA RAZVOJ BOGATIH SPLETNIH

APLIKACIJ

2.1 Kaj so bogate spletne aplikacije?

Večina danes najpopularnejših spletnih strani je še vedno navadna spletna aplikacija.

Da pa bi funkcionalnost navadnih spletnih aplikacij pribliţali namiznim aplikacijam,

(namizne aplikacije so aplikacije, ki za uporabniški vmesnik uporabljajo operacijski sistem

osebnega računalnika, na katerem se izvajajo) so bile razvite t. i. bogate spletne aplikacije,

s kratico poimenovane RIA. To so spletne aplikacije, katere do neke mere spominjajo na

namizne aplikacije, s čimer so bliţje uporabnikom, ki so danes še povečini vajeni namiznih

aplikacij. Bogate spletne aplikacije ponujajo tudi bogatejšo grafično uporabniško izkušnjo,

saj za grafični uporabniški vmesnik lahko uporabljajo tudi animirano vektorsko grafiko.

[16]

Za nemoteno izvajanje bogatih spletnih aplikacij v večini primerov potrebujemo

dodatke oz. vtičnike (angl. plug-in). Primeri tehnologij za razvoj bogatih spletnih aplikacij

so JavaFX, Adobe Flex in Microsoft Silverlight. Sicer jih obstaja še več, vendar so naštete

trenutno najbolj razširjene in zato jih bomo v tem poglavju na kratko tudi opisali. [17]

2.2 Adobe Flex

Adobe Flex je prva v vrsti tehnologij za razvoj bogatih spletnih aplikacij. Ponudilo jo

je podjetje Adobe Systems, ki razvija in distribuira danes najbolj razširjeno multimedijsko

platformo Adobe Flash. Adobe Flash je od svoje predstavitve leta 1996 postal zelo

popularen za dodajanje animacije in interaktivnosti navadnim spletnim stranem. [31]

Flex je odprtokodna platforma, ki zagotavlja bogatim spletnim aplikacijam, razvitim v

njej, konsistentnost tako hitrosti delovanja kakor tudi zunanje grafične podobe na večini

danes najbolj razširjenih spletnih brskalnikih in operacijskih sistemih. Zagotavlja tudi

moderen in standarden programski model, ki podpira najpogostejše načrtovalske vzorce ter


vsebuje tudi razvojno okolje Flex Builder, ki temelji na dobro poznanem Eclipse IDE-u

(Integrated Development Environment). Zagotavlja tudi hitro odjemalčevo izvajanje,

katero temelji na vseprisotnem Adobe Flash Player-ju. Flex omogoča tudi, da razvijemo

visoko interaktivne in grafično bogate aplikacije, ki izboljšajo uporabniško izkušnjo. [1]

Flex aplikacije se lahko izvajajo v spletnem brskalniku s pomočjo izvajalnega okolja

Flash Player, pred kratkim pa so pri Adobe predstavili izvajalno okolje AIR (Apollo

Integrated Runtime), ki omogoča izvajanje Flex aplikacij kot namizne aplikacije. Vse kar

potrebujemo, je nameščeno AIR izvajalno okolje na osebnem računalniku. [2]

Za gradnjo grafičnega uporabniškega vmesnika Flex uporablja jezik, imenovan

MXML, ki je označevalni jezik, podoben XML-u. Za samo interaktivnost spletne

aplikacije pa skrbi ActionScript, kateri temelji na ECMAScript standardu. ActionScript je

tudi glavni skriptni jezik pri Adobe Flash platformi. [3]

Flex prav tako ponuja bogato podporo video, avdio in slikovnih formatov. Tako ponuja

podporo video formatom od mednarodnega standarda MPEG-4 do MP4, 3GP in MOV.

Glavni format platforme Flash pa je vsekakor FLV (Flash Video), kateri je dejansko

vsebniški format, kar pomeni, da sam ni video format, ampak za zapis slike in zvoka

vsebuje druge formate in jih tako povezuje. Za zapis zvoka navadno uporablja format

MP3, za zapis slike pa H.263 ali VP6. [3]

2.3 Microsoft Silverlight

Microsoft je pri ponudbi tehnologij za razvoj bogatih spletnih aplikacij zaostajal, zato

je ponudil svojo različico tehnologije, ki jo je poimenoval Silverlight. Ker pa so se pri

Microsoftu odločili za odprt pristop, je Silverlight mogoče popolnoma normalno izvajati v

brskalnikih Internet Explorer, Firefox, Safari, SeaMonkey, Google Chrome in v

prihodnosti tudi Opera. Brez omejitev deluje tako v operacijskem sistemu Windows kakor

tudi v Mac OS. Se pa pri Microsoftu trudijo, da bi čim prej omogočili tudi izvajanje

Silverlight aplikacij na operacijskem sistemu Linux, in sicer preko projekta Moonlight,

katerega rezultat bo Moonlight izvajalno okolje. [4]

Silverlight temelji na tehnologiji WPF (Windows Presentation Foundation) in integrira

multimedijo, grafiko, animacije in interaktivnost v enem samem izvajalnem okolju.

Grafični uporabniški vmesniki so deklarirani v XAML (eXtensible Application Markup


Language) jeziku, samo interaktivnost pa je mogoče programirati v kateremkoli izmed

.NET programskih jezikov. [5]

Za poganjanje Silverlight aplikacij skrbi Silverlight CoreCLR (Core Common

Language Runtime), katerega dobimo z namestitvijo Silverlight dodatka oz. vtičnika. Pri

operacijskem sistemu Windows se ta vtičnik namesti samodejno preko storitve Windows

Update. [5]

Silverlight ponuja podporo multimedijskim formatom VC-1, WMV, WMA, MP3 ter

720p HD video. [5]

2.4 JavaFX

Podjetje Sun Microsystems je kot odgovor na tehnologijo Silverlight, podjetja

Microsoft, ter Flex, podjetja Adobe, odgovorilo s podobno tehnologijo za razvoj bogatih

spletnih aplikacij, ki temelji na njihovi dobro poznani platformi Java, in sicer tehnologijo

JavaFX. Ta je namenjena hitremu razvoju bogatih aplikacij in se lahko izvaja na veliko

različnih načinov od namizne aplikacije do spletne. Izvaja se lahko tudi na različnih

napravah, kot so mobilne ter kmalu tudi DVD, Blu-ray predvajalniki, TV in podobne. [18]

JavaFX ima svoj skriptni jezik, imenovan JavaFX Script, kateri je popolnoma objektno

usmerjen in uporablja deklarativno sintakso za specificiranje GUI (Graphics User Interface

– grafični uporabniški vmesnik) elementov, tako da se programerjeva skriptna koda

natanko ujema z grafično predstavitvijo. Osrednja prednost JavaFX Script je v njegovem

vezanju podatkov (data binding), ki s preprosto sintakso sinhronizira stanje več objektov in

tudi omogoči GUI komponentam, da avtomatsko spremenijo stanje s spremenjenim

stanjem zadaj leţečih podatkov. [6]

JavaFX prav tako omogoča, da popolnoma uporabimo Javine knjiţnice, tudi tiste, ki

smo jih ţe prej napisali sami. Ta funkcionalnost nam lahko prihrani veliko truda, saj lahko

starejšim aplikacijam preprosto in hitro naredimo novo grafično podobo. [9]

Preko standardnih knjiţnic lahko nadziramo tako novo dodano vektorsko grafiko,

katero vsebujejo knjiţnice v JavaFX API (Application Programming Interface). kakor tudi

klasične in dobro poznane Swing komponente. [9]


Ker se JavaFX aplikacije prevedejo v Java bitno kodo, lahko te izkoristijo prednosti

Java HotSpot virtualnega stroja in tako doseţejo najboljšo moţno hitrost in zmogljivost

izvajanja. [6]

Namen tehnologije JavaFX je bil med drugim ponuditi tudi močno podporo

multimedijskim vsebinam in tako lahko v aplikacijah JavaFX predvajamo najrazličnejšo

paleto multimedijskih formatov. JavaFX ponuja podporo za formate WMV, FLV, AVI,

MOV, MPEG1, 3GP, WAV in MP4. Zraven najbolj razširjenih formatov pa JavaFX

ponuja tudi popolno podporo novemu medplatformnemu formatu, ki se imenuje FX Media

(končnica .fxm), kateri je podoben vsebniškemu formatu FLV platforme Flash in je prav

tako vsebniški format. Tega je podjetje Sun Microsystems predstavilo skupaj s podjetjem

On2 Technologies, katerega produkt Flix lahko uporabimo za pretvorbo kateregakoli

formata v format FXM. [7]


3 PODROBEN PREGLED JAVAFX

3.1 Zgodovina razvoja spletnih tehnologij pri platformi Java

Prvič je podjetje Sun Microsystems stopilo v svet spletnih aplikacij leta 1995, ko je

predstavilo majhne Java aplikacije, ugnezdene v HTML spletne strani. Tako se je prvič

pojavila Java Applet aplikacija, katera pa je delovala samo pod pogojem, da je na

odjemalcu bil nameščen Java navidezni stroj JRE/JVM (Java Runtime Environment/Java

Virtual Machine). Največje slabosti so bile, da je implementacija dodatka za spletne

brskalnike bila močno vezana s samim API in da se Java Applet ni zagnal, dokler ni

deloval JVM, kar je lahko pomenilo velike zakasnitve. [19]

Leta 1996 je podjetje Macromedia kupilo FutureWave in tako v svoje roke dobilo

tehnologijo FutureSplash, katero so preimenovali v Flash in tako začeli zelo uspešno pot te

tehnologije. S tehnologijo Flex pa so resneje nastopili v smeri razvoja bogatih spletnih

aplikacij leta 2004 s prvo izdajo. V ta namen so izdali tudi AIR okolje za izvajanje Flex in

Flash aplikacij preko različnih platform. [19]

Med tem so pri podjetju Sun leta 1997 predstavili JMF (Java Media Framework), s

čimer so hoteli dodati podporo multimedijskim vsebinam Java aplikacijam. Vendar se JMF

nikoli ni začel široko uporabljati, saj je primanjkovalo posodobitev s strani podjetja Sun in

tako onemogočalo normalno uporabo. Kasneje, leta 2001, so predstavili ogrodje Java Web

Start, ki je zagotavljalo zaganjanje Java aplikacij preko spletnega brskalnika, za kar pa se

je uporabljalo protokol JNLP (Java Network Launching Protocol), ki je definiran z XML

shemo in specificira, kako se Java Web Start aplikacije zaţenejo. [19][20]

Microsoft se je aktivno vključil v razvoj bogatih spletnih aplikacij leta 2006 s prvo

izdajo tehnologije Silverlight in jasno je začelo postajati, kljub temu da je Java bila močna

na strani streţniških aplikacij, da je podjetje Sun v zaostanku na področju bogatih spletnih

aplikacij. Ker je bilo teţavno narediti lepo grafično oblikovano aplikacijo z uporabo

Swing, je popularnost tehnologije Java začela upadati, saj so tehnologije Flash, Flex,


Silverlight, Ajax in druge ponudile laţji in hitrejši razvoj bogatih spletnih aplikacij, ki so

bile vrho vsega še grafično atraktivnejše in lepše animirane. [11]

Tako so pri Sun začeli razvijati tehnologijo JavaFX. Skriptni jezik, ki ga danes

uporablja JavaFX, se je sprva imenoval F3 (Form Follows Function), katerega je v osnovi

razvil Christopher Oliver in ga leta 2005 prenesel k Sun Microsystems, ko se je tam tudi

zaposlil. Skriptni jezik so uradno preimenovali v JavaFX Script in spremenili licenco v

odprtokodno GNU GPL (General Public License) na konferenci JavaOne 2007. Jeseni leta

2008 so tako prvič predstavili tehnologijo JavaFX, ki omogoča hiter razvoj grafično in

vsebinsko bogatih aplikacij, ki se lahko izvajajo preko svetovnega spleta in tudi lokalno na

osebnem računalniku. Spomladi 2009 so predstavili JavaFX Mobile, ki omogoča izvajanje

JavaFX aplikacij na mobilnih napravah. Poleti 2009 pa nameravajo izdati še različico

JavaFX TV, ki bo skrbela za delovanje JavaFX tehnologije tudi na TV sprejemnikih, DVD

in Blu-ray predvajalnikih ter podobnih napravah. [6][19]

3.2 Arhitektura tehnologije JavaFX

Arhitektura JavaFX platforme vsebuje medplatformna in platformno specifična

izvajalna okolja ter podporne knjiţnice. Vsebuje deklarativen programski jezik, imenovan

JavaFX Script, kakor tudi nabor razvojnih in oblikovalnih orodij. Vse to omogoča, da

aplikacije obdrţijo konsistenten videz in občutek delovanja na različnih napravah z

različnimi procesorskimi in grafičnimi sposobnostmi. [8]

Arhitekturo tehnologije predstavlja slika 3.1.


Njene komponente so:

Java navidezni stroj (Java Virtual Machine) – Izvajalno okolje vseh Javanskih

aplikacij.

JavaFX platforma

o JavaFX izvajalno okolje (JavaFX Runtime) – Izvajalno okolje,

specifično za JavaFX aplikacije. To izvajalno okolje se namesti samodejno

z namestitvijo JRE, ki je potrebna za izvajanje Javanskih aplikacij.

o Navadni elementi (Common Elements) – JavaFX API-ji, ki delujejo

konsistentno na različnih platformah. Ob uporabi samo teh elementov

zagotovimo konsistentno izvajanje JavaFX aplikacij na katerikoli napravi in

platformi.

o Namizni elementi (Desktop Elements) – JavaFX API-ji, ki so specifični za

namizne platforme. Te elemente uporabljamo v primeru, da razvijamo

aplikacijo za namizne računalnike ali splet.

o Mobilni elementi (Mobile Elements) – JavaFX API-ji, ki so specifični za

mobilne platforme.

Slika 3.1: Arhitektura JavaFX platforme [8]


o TV elementi (TV Elements) – JavaFX API-ji, ki so specifični za TV

platforme. Teh še v verziji 1.2 ni, se pa obljublja, da bodo dostopni kmalu.

o Aplikacijsko ogrodje (Application Framework) – Gradniki aplikacij.

o Orodja

Orodja za oblikovalce – Pomagajo oblikovalcem aplikacije

pretvarjanje katerihkoli medijskih formatov v JavaFX formate in

ogled JavaFX medijev.

Orodja za razvijalce – Pomagajo razvijalcem razvoj JavaFX

aplikacij, vsebin in storitev. [8]

Vse našteto omogoča tehnologiji JavaFX razvoj grafično in vsebinsko bogatih

aplikacij, multimedijskih vsebin in storitev.

3.3 Prednosti in značilnosti JavaFX

Skriptni jezik tehnologije JavaFX se imenuje JavaFX Script in je statično tipiziran (kot

Java) deklarativen skriptni jezik ter predstavlja nov skriptni jezik za Java virtualni stroj. Za

razvoj grafičnega uporabniškega vmesnika (GUI) JavaFX uporablja deklarativno sintakso

in tako predstavlja popolnoma nov pristop platforme Java h gradnji uporabniškega

vmesnika. [6]

JavaFX Script je popolnoma objektno orientiran jezik in izkorišča vso moč Jave, saj

lahko popolnoma uporablja vse Java knjiţnice, ustvarja Java razrede in kliče njene metode.

[9]

Njena preprosta, deklarativna sintaksa, ki se uporablja za oblikovanje grafičnega

uporabniškega vmesnika, predstavlja preprost način konstruiranja uporabniškega

vmesnika za platformno neodvisne aplikacije. Razvijalci lahko tako oblikujejo

bogate (tako funkcionalno kakor tudi grafično) uporabniške vmesnike brez

posebnega predznanja programiranja z Java Swing tehnologijo.

Vgrajen ima zmoţnost podpore vzorca model – pogled – krmilnik (model – view –

controller) zaradi njenega močnega koncepta vezanja podatkov. Prav to dopolnjuje

in omogoča deklarativen način programiranja, saj so atributi objektov (vključno z


objekti uporabniškega vmesnika) lahko vezani na vrednosti, ki so pogosto dobljene

v razredih.

Koncept proţilcev (triggers – to so funkcionalnosti, ki se zgodijo, ko se izpolnijo

določeni pogoji) prav tako omogoča deklarativna sintaksa in naredi razvoj

uporabniškega vmesnika relativno preprosto opravilo, saj so na ta način set in get

metode zamenjane s proţilci in se avtomatično kličejo, ko se vrednost nekega

atributa spremeni.

Aplikacije JavaFX je mogoče poganjati kjerkoli, kjer je mogoče poganjati Java

aplikacije, saj se poganjajo v sklopu Java navideznega stroja (JVM). Ker pa je

projekt OpenJFX Compiler Incubator dosegel zmoţnost pretvorbe JavaFX kode v

JVM bitno kodo (JVM bytecode), se lahko hitrosti izvajanja JavaFX aplikacij

zlahka primerjajo s hitrostmi izvajanja Java aplikacij.

JavaFX Script je prav tako postregla z močno sintakso za definiranje, spreminjanje

in izvajanje povpraševanj v raznih tabelah.

Naslednja prednost je tudi v tem, da omogoča hiter razvoj prototipov aplikacij in

tudi ta, da je zaradi preproste narave skriptnega jezika JavaFX Script zelo lahek za

učenje in je primeren tudi za učenje konceptov programiranja. [9]

Ker pa je tehnologija JavaFX relativno nova, se neprestano izboljšuje in dobiva nove

knjiţnice z novimi moţnostmi, čeprav ima ţe sedaj vključno s knjiţnicami Java veliko

funkcionalno vrednost in zanesljivost. [9]

3.4 JavaFX Script sintaksa in jezik

3.4.1 Deklaracija spremenljivk in primitivni podatkovni tipi

Deklaracija spremenljivk se v JavaFX Script malenkost razlikuje od deklaracije v Javi

in se opravi na naslednji način, ki ga prikazuje izvorna koda 1 (dejanski primer deklaracije

spremenljivk prikazuje izvorna koda 2).

vrsta_dostopanja var_ali_def ime_spremenljivke: podatkovni_tip =

vrednost;

Izvorna koda 1: Deklaracija spremenljivk v JavaFX Script


Primer:

public var spremenljivka: String = "Pozdravljeni!";

def spremenljivka = 1234;

def s;

s = bind 1234;

Izvorna koda 2: Primer inicializacije spremenljivk v JavaFX Script

Spremenljivke so tako kot v Javi lahko tudi tukaj private, public, public-

read, public-init in protected. Kot je razvidno zgoraj, smo v prvem primeru

uporabili določilo var, v drugem pa def. Razlika med tema je v tem, da medtem ko var

dopušča spreminjanje vrednosti spremenljivke, def tega ne dopušča, kar pomeni, da je

spremenljivka označena z def konstanta. Je pa mogoče spremeniti vrednost

spremenljivke, označene z def edino v primeru, če ji vrednost dodelimo z določilom

bind, kot prikazuje zadnji primer. Nato smo definirali podatkovni tip spremenljivke, kar

pa je opcijsko, saj prevajalnik lahko sam ugotovi, katerega podatkovnega tipa je

spremenljivka. [21]

Tabela 1 prikazuje osnovne podatkovne tipe v JavaFX, njene ekvivalentne v Javi ter

način zapisa vrednosti.

Tabela 1: Osnovni podatkovni tipi [21]

JavaFX Java Vrednost

String java.lang.String Besedilo

("Iztok Hafner")

Boolean java.lang.Boolean true ali false

Integer byte, short, int, long,

java.math.BigInteger

Cela števila

(0, -100, 5,…)

Number java.lang.Number Decimalna števila

(1.2, 2.2112,…)

JavaFX Script ne dopušča seštevanja String-ov z operatorjem +, lahko pa doseţemo

enako na način, kot ga prikazuje izvorna koda 3.


def imeOsebe = "Iztok";

var priimekOsebe = "Hafner";

var imePriimek: String = "Ime in priimek: {imeOsebe} {priimekOsebe}";

Izvorna koda 3: Seštevanje String-ov

3.4.2 Deklaracija in klic funkcije

Funkcije so specifični bloki programske kode, ki izvedejo določeno operacijo.

Organiziranje blokov kode v funkcije je običajno, saj se s tem izognemo ponavljanju enake

programske kode in omogočimo laţji nadzor ter morebitno popravljanje. Deklaracija

funkcije v JavaFX Script je razvidna spodaj (izvorna koda 4). [22]

vrsta_dostopanja function ime_funkcije(argumenti:

podatkovni_tip_argumenta) : podatkovni_tip {

// telo funkcije, ki lahko vrednosti tudi vrača

}

Izvorna koda 4: Deklaracija funkcije v JavaFX Script

V primeru, da funkcija vrača določeno vrednost, lahko funkciji priredimo podatkovni

tip, katerega vrača (ni nujno) in v telesu funkcije dodamo stavek return in ob njega

napišemo vrednost, katero naj vrne. Primer funkcije prikazuje izvorna koda 5. [22]

function sestej(stevilo1 : Integer, stevilo2 : Integer) : Integer {

return stevilo1 + stevilo2;

}

Izvorna koda 5: Preprosta funkcija v JavaFX Script

Ta funkcija prejme dva argumenta, in sicer dve celi števili. Ti števili sešteje in vrne kot

rezultat funkcije. Primer klica take funkcije prikazuje izvorna koda 6.

println("Sestevek 2 + 3 = {sestej(2,3)}");

Izvorna koda 6: Klic funkcije v JavaFX Script

Prikazana funkcija izpiše naslednje »Sestevek 2 + 3 = 5«.

3.4.3 Polja oz. zaporedja

V JavaFX prav tako lahko uporabljamo tudi polja, katera naredimo in kličemo zelo

podobno kot v Javi, in sicer na način, kot ga prikazuje izvorna koda 7.


var fibonacci = [1, 1, 2, 3, 5, 8];

fibonacci[5]; // vrednost fibonacci[5] = 8

Izvorna koda 7: Kreiranje in naslavljanje polja

Kot je razvidno iz primera, ki ga prikazuje izvorna koda 7, je tudi tukaj prvi element

polja na poziciji 0 in zadnji na n-1. V polja lahko prav tako dodajamo, brišemo,

zamenjujemo, obračamo elemente, in sicer z uporabo besed insert, into, before,

after, reverse, delete in from, kot je prikazano v naslednjih primerih (izvorna

koda 8). [23]

insert 8 into fibonacci; // doda 8 na zadnje mesto v polju

// [1, 1, 2, 3, 5, 8]

insert 100 before fibonacci[5]; // doda 100 pred 6 člen polja (8)

// [1, 1, 2, 3, 5, 100, 8]

insert 10 after fibonacci[1]; // doda 10 za 2 členom polja (1)

// [1, 1, 10, 2, 3, 5, 100, 8]

delete 10 from fibonacci; // izbriše število 10 iz polja

// [1, 1, 2, 3, 5, 100, 8]

delete fibonacci[5]; // izbriše vrednost na 6 mestu v polju (100)

// [1, 1, 2, 3, 5, 8]

reverse fibonacci; // vrne obrnjeno polje

// [8, 5, 3, 2, 1, 1]

Izvorna koda 8: Delo s poljem v JavaFX Script

Lahko pa polja med seboj tudi primerjamo, vendar je pri tem pomembno poudariti, da

je polje enako samo, če ima enako število elementov, ki so enaki in na enakih mestih. Vsak

zamenjan ali drugačen element pomeni, da polje ni enako. [23]

3.4.4 Operatorji

Operatorji, ki jih po večini uporablja JavaFX, so popolnoma enaki tistim, ki jih

uporablja Java, in so predstavljeni v nadaljevanju.

Prireditveni operatorji

Dodelitveni operator je obvezen v vsakem programskem jeziku. V JavaFX Script ga

enako kot v Javi predstavlja operator enačaj (=), kateri priredi vrednost, ki je na desni

strani enačaja, spremenljivki, ki je na levi strani enačaja. Primer prireditve vrednosti

spremenljivki je prikazan v primeru izvorne kode 9. [24]


def imeOsebe = "Iztok";

var priimekOsebe = "Hafner";

var imePriimek: String = "{imeOsebe} {priimekOsebe}";

Izvorna koda 9: Dodelitveni operator – prireditev vrednosti spremenljivki

V prikazanem primeru (izvorna koda 9) hrani spremenljivka imePriimek vrednost

»Iztok Hafner«, ki je podatkovnega tipa String.

Aritmetični operatorji

Tabela 2 prikazuje aritmetične operatorje, ki jih najdemo v JavaFX Script.

Tabela 2: Aritmetični operatorji [24]

Opis Operator

Operator seštevanja +

Operator odštevanja -

Operator mnoţenja *

Operator deljenja /

Operator ostanka pri

deljenju mod

Operator ostanka pri deljenju deli en delitelj z drugim in kot rezultat vrne ostanek pri

deljenju. Ta operator poznamo tudi iz Jave, kjer ga označujemo kot odstotek (%).

Unarni operatorji

Unarni operatorji so operatorji, ki potrebujejo samo en operand in ne dva, kot jih

potrebuje večina drugih operatorjev. V tabeli 3 so predstavljeni unarni operatorji v JavaFX

Script in primeri uporabe le-teh. [24]


Tabela 3: Unarni operatorji [24]

Unarni operator Opis Primer uporabe

- Negira vrednost spremenljivke st = -st;

++ Inkrement (poveča vrednost

spremenljivke za 1) st++;

-- Dekrement (zmanjša vrednost

spremenljivke za 1 st--;

not Logični komplement (invertira

vrednost Boolean) not isMobile;

Logični komplement stori enako, kot operator "-", vendar nad spremenljivko tipa

Boolean in ne nad spremenljivko tipa Integer ali Number. [24]

Primerjalni operatorji

Primerjalni operatorji so enaki tistim v Javi in nekaterih drugih programskih jezikih in

jih prikazuje tabela 4.

Tabela 4: Primerjalni operatorji [23]

Vrsta primerjalnega

operatorja JavaFX

Je enako ==

Ni enako !=

Večje kot >

Večje ali enako kot >=

Manjše kot <

Manjše ali enako kot <=

Operator instanceof pregleda, ali je objekt nekega tipa. Z njim se navadno

preverja ali je neki objekt primerek nekega razreda. Primer uporabe prikazuje izvorna koda

10.


if (mojAvto instanceof Avto)

println("Moj avto je Avto!");

else

println("Moj avto ni Avto!");

Izvorna koda 10: Primer uporabe operatorja instanceof

Pogojni operatorji

Pogojni operatorji se razlikujejo od tistih v Javi in so prikazani v tabeli 5, kjer so

prikazani operatorji, ki so enakovredni v Javi.

Tabela 5: Pogojni operatorji v Javi in JavaFX [24]

Vrsta pogojnega

operatorja JavaFX Java

in and &&

ali or ||

negacija not !

3.4.5 Izrazi

JavaFX Script je tako imenovani izrazni jezik, kar pomeni, da je vse, vključno z

zankami in pogoji, neke vrste izraz. Izrazi se imenujejo tisti deli programske kode, ki se

preslikajo v določeno končno vrednost. Nekateri izrazi, kot je na primer zanka while, so

tipa Void, kar pomeni, da ne vračajo nobene vrednosti, ampak samo opravijo določeno

operacijo. [25]

Izraz if

Izraz if omogoča nadzorovanje poteka programa s pomočjo vejitev, katere

zagotavljajo, da se izvedejo samo določeni bloki kode, če je neki pogoj izpolnjen ali ne. Ta

koncept je dobro poznan tako iz Jave kakor tudi iz drugih programskih jezikov, saj je eden

najosnovnejših konceptov programskih jezikov. Sintakso izraza if prikazuje izvorna koda

11. [25]


if (pogoj) {

// če je pogoj izpolnjen, se izvede ta blok

}

else if (pogoj2) {

// če prejšnji pogoj ni izpolnjen in je izpolnjen pogoj2, se

// izvede ta blok

}

else {

// drugače (če ni izpolnjen ne prvi in ne drugi pogoj) pa se

// izvede programska koda v tem bloku

}

Izvorna koda 11: Način zapisa izraza if

Pomembno tukaj je, da se zavedamo, da se ob enem prehodu stavka if lahko izvede

samo eden izmed definiranih blokov. Kot pa je razvidno iz primera zgoraj (izvorna koda

11), je sintaksa popolnoma enaka tisti v Javi in nekaterih drugih programskih jezikih.

Izraz for

Zanka for omogoča, da se postopoma premikamo po nekem polju oz. zaporedju in je

tako vezan na polja oz. zaporedja. Sintaksa je predstavljena z izvorno kodo 12.

for (clen_zaporedja in celotno_zaporedje) {

// se izvede koda za vsak clen zaporedja

}

Izvorna koda 12: Način zapisa for zanke

Sintaksa samega osnovnega stavka for se glede na Javo razlikuje, vendar je tudi ţe

poznana, saj je enaka, kot ob delanju z objekti v nekaterih drugih programskih jezikih.

Razloţena je ob primeru izvorne kode 13. [23]

var stevila = [1, 2, 3, 4, 5];

for (stevilo in stevila) {

println(stevilo);

}

Izvorna koda 13: Primer for zanke v JavaFX Script

Imamo definirano zaporedje, ki vključuje cela števila od 1 do 5. Z zanko for se

pomikamo od začetka tega zaporedja proti koncu in vsako trenutno število v obdelavi

izpišemo. Torej bi izpis po koncu izvajanja te zanke bil naslednji.


1

2

3

4

5

V primeru, da bi pred samo for zanko dodali še stavek »reverse stevila;«, ki

smo ga ţe predstavili, bi to zaporedje obrnili in bi bil izpis po koncu izvajanja zanke v

izvorni kodi 13 obrnjen od 5 proti 1.

Izraz while

Naslednja izmed zank je while zanka, katera se z razliko od for zanke (katera se

izvaja nad zaporedji) izvaja tako dolgo, dokler pogoj ni več izpolnjen. Sintaksa je ţe

poznana iz Jave in drugih programskih jezikov in jo prikazuje izvorna koda 14. [25]

while (pogoj) {

// se izvede blok kode znotraj zavitih oklepajev

}

Izvorna koda 14: Način zapisa while zanke

Dokler je pogoj izpolnjen, se izvaja blok znotraj zavitih oklepajev. V trenutku, ko pa

pogoj ni več izpolnjen, se izvajanje zanke preneha. Pomembno tukaj je, da imamo znotraj

zanke neko zastavico, ki v primeru, ko se zanka ponovi zadostno število krat (oz. se pogoj

izpolni), pogoj nastavi tako, da ni več izpolnjen, zanka se prekine in aplikacija se normalno

izvaja naprej. V primeru, da zanka nima takega izhoda, dobimo napako pri izvajanju

aplikacije. Primer pravilno zastavljene zanke je prikazan v izvorni kodi 15. [25]

var st = 0; // vrednost spremenljivke st je 0

while (st < 5) { // while se izvaja, dokler je vrednost st < 5

println(st); // izpišemo vrednost spremenljivke st

st++; // povečamo vrednost spremenljivke st

}

Izvorna koda 15: Primer while zanke v JavaFX Script

V prikazanem primeru (izvorna koda 15) se zanka tako ponovi 5-krat in izpiše števila

od 0 do 4.

Bločni izrazi

Bločni izraz je sestavljen iz več deklaracij spremenljivk ali drugih izrazov. Primer

bločnega izraza v JavaFX prikazuje izvorna koda 16. [25]


var fibonacci = [1, 1, 2, 3, 5];

var vsotaFibonacci = {

var vsota = 0;

for (clen in fibonacci) { vsota += clen };

vsota;

}

Izvorna koda 16: Primer bločnega izraza v JavaFX Script

V našem primeru, ki ga prikazuje izvorna koda 16, je v spremenljivki fibonacci

shranjenih pet števil. Spremenljivka vsotaFibonacci vsebuje shranjeno vsoto

zaporedja fibonacci. V primeru, da bi dodali še eno stevilo v zaporedje fibonacci

bi se avtomatično spremenila tudi spremenljivka vsotaFibonacci, ki bi vsebovala

novo vsoto, vključno z novim dodanim številom.

Izrazi obsega

Izrazi obsega so način deklaracije oz. uporabe zaporedij. Kako se zaporedja

deklarirajo, smo ţe opisali, tukaj pa bomo prikazali, kako se nad zaporedji uporabljajo

izrazi obsega. Izvorna koda 17 prikazuje deklaracijo spremenljivke z uporabo izraza

obsega in brez njega. [25]

var stevila = [1, 2, 3, 4, 5]; // klasicne deklaracije spremenljivke

// zaporedja

// stevil

var stevila = [1..5]; // deklaracija s pomocjo izraza obsega

Izvorna koda 17: Deklaracija spremenljivke z uporabo izraza obsega

Naslednja primera (izvorna koda 18) prikazujeta, kako je z izrazi obsega mogoče laţje

deklarirati, spremeniti in tudi izločiti določene člene zaporedja.

var lihaStevila = [1..10 step 2]; // lihaStevila = [1, 3, 5, 7, 9];

var obratno = [5..1 step -1]; // obratno = [5, 4, 3, 2, 1];

Izvorna koda 18: Deklariranje, spreminjanje in izločanje členov z uporabo izraza obsega

Kot je v primeru zgoraj (izvorna koda 18) razvidno, smo uporabili rezervirano besedo

step, katera pove, koliko naj bo velik korak v zaporedju. [25]


Izraza break in continue

Izraza break in continue sta znana ţe iz drugih programskih jezikov (tudi Jave). V

JavaFX Script imata popolnoma enako vlogo kot v drugih programskih jezikih in se ju

uporablja v zankah. [25]

break - se uporablja, kadar ţelimo predčasno prekiniti izvajanje zanke (ob

izpolnitvi določenih pogojev, kar se večinoma preverja z if stavkom).

continue - uporabimo, kadar ţelimo sproţiti naslednji cikel zanke (v tem

primeru se programska koda, zapisana pod stavkom continue, ne izvede oz. se

preskoči) [25]

Izrazi try, catch in finally

Izrazi try, catch in finally so ţe dobro poznan koncept iz Jave. Gre za lovljenje

izjem Exception (napak), ki so se morebiti zgodile med izvajanjem aplikacije. Če pri

programiranju ne uporabljamo teh izrazov, se v primeru napake izvajanje programa lahko

prekine, kar pomeni, da smo morebiti izgubili določene podatke. Izjem, ki se lahko proţijo,

je veliko in segajo od izjeme pri povezavi s podatkovno bazo (SQLException) do

izjeme, ki se proţi ob pomanjkanju spomina (OutOfMemoryException). Uporaba je

preprosta in je prikazana spodaj (izvorna koda 19). [23]

try {

// blok, ki se naj poskusi izvesti.

}

catch (e: Exception) { // poskušamo poloviti izjemo tipa Exception.

// blok, ki se izvede v primeru, da je prišlo do izjeme.

}

finally {

// blok, ki se izvede v vsakem primeru, ne glede na to, ali je

// prišlo do izjeme ali ne.

}

Izvorna koda 19: Uporaba izraza try-catch-finally

3.4.6 Deklaracija in ustvarjanje primerka razreda

Sama deklaracija razreda se v JavaFX Script izvede na podoben način kot deklaracija v

Javi, in sicer na način, kot je prikazan spodaj. Kot je razvidno, je tudi tukaj pomembna

prisotnost določila class, ki pove, da smo naredili razred. Deklaracija razreda naj poteka

po naslednjem vzorcu (izvorna koda 20). Izvorna koda 21 pa prikazuje primer deklaracije

razreda. [26]


vrsta_dostopanja class ime_razreda {

var ime_atributa: podatkovni_tip;

function ime_funkcije(): podatkovni_tip;

...

}

Izvorna koda 20: Deklaracije razreda v JavaFX Script

Primer deklaracije razreda:

public class Oseba {

var imeOsebe: String;

function izpisiOsebo(): Void {

println(imeOsebe);

}

}

Izvorna koda 21: Primer deklaracije razreda v JavaFX Script

Tako smo deklarirali en razred, ki je sicer zelo preprost. Imenuje se Oseba, ima en

atribut, ki je tipa String, in eno metodo, ki ne vrača nič, saj samo izpisuje (Void).

Podobno kot v Javi je tudi tukaj priporočljivo, da se ime razreda začne z veliko črko, ime

spremenljivk in funkcij pa z malo (to ni zahtevano, saj nas prevajalnik spusti, četudi se

tega ne drţimo). Primerek razreda z deklarativno sintakso naredimo zelo preprosto, in sicer

kot prikazuje izvorna koda 22. Ta prikazuje tudi to, kako kličemo funkcijo ustvarjenega

razreda.

def oseba = Oseba {

imeOsebe: "Iztok Hafner";

}

oseba.izpisiOsebo(); // izpis -> "Iztok Hafner"

Izvorna koda 22: Kreiranje primerka razreda in klic razredne funkcije

Potem ko smo naredili še primerek razreda, kličemo tudi metodo, katera v tem primeru

izpiše ime osebe, torej »Iztok Hafner«. Razredi lahko tudi dedujejo in se gnezdijo, ne

morejo pa implementirati vmesnikov (interface), saj le-teh JavaFX Script ne pozna.

3.4.7 Vezanje podatkov in proţilci

Vezanje podatkov

Koncept vezanja podatkov oz. data binding je ena izmed najpomembnejših lastnosti

JavaFX Script skriptnega jezika. S pomočjo vezanja neposredno in takoj poveţemo

vrednosti dveh spremenljivk, kar vpliva na takojšnjo reakcijo funkcionalnosti aplikacije ali


uporabniškega vmesnika. Za vezanje podatkov se uporablja beseda bind in se uporablja,

kot prikazuje izvorna koda 23. [27]

var barvaOzadja: Color = Color.RED;

Scene {

fill: bind barvaOzadja

}

Izvorna koda 23: Postopek vezanja podatkov (data binding)

S tem smo povezali vrednost spremenljivke barvaOzadja z dejansko barvo ozadja

okna. Nato lahko v funkciji, ki se proţi ob kliku, preprosto zapišemo barvaOzadja =

Color.BLUE in vrednost se neposredno prenese v razred Scene, kjer nastavi novo

barvo ozadja. Ta postopek in funkcijo onMouseClicked predstavlja izvorna koda 24.

onMouseClicked: function( e: MouseEvent ):Void {

barvaOzadja = Color.BLUE;

}

Izvorna koda 24: Spreminjanje vrednosti vezane spremenljivke s funkcijo

onMouseClicked

Koncept vezanja lahko uporabimo nad spremenljivkami, funkcijami, objekti in tudi

zaporedji. Primer funkcije, katero lahko veţemo, prikazuje izvorna koda 25. [27]

bound function narediTocko(xPos : Number, yPos : Number) : Tocka {

Tocka { // funkcija kreira objekt tipa Tocka, kateremu kot tocke

x: xPos // nastavi vrednosti, ki jih je funkcija sprejela kot

y: yPos // argumente

}

}

class Tocka { // deklaracija razreda Tocka, ki vsebuje dve spremenljivki

var x : Number; // koordinate so tipa Number

var y : Number;

}

var mojX = 3.0; // naše spremenljivke (koordinate tocke)

var mojY = 3.0;

def tocka = bind narediTocko(mojX, mojY); // tukaj se opazi, da je tocka

// deklarirana z def, kar pomeni, da ji ne moremo neposredno spreminjati

// vrednosti. Lahko pa ji spremenimo vrednost z uporabo vezanja podatkov

println(tocka.x); // izpis -> 3.0

mojX = 10.0;

println(tocka.x); // izpis -> 10.0

Izvorna koda 25: Primer funkcije, katero lahko veţemo (določilo bound) [27]


Primer vezanja podatkov v objektih prikazuje izvorna koda 26.

class Oseba { // imamo en razred Oseba z enim atributom

var imeOsebe: String;

}

// deklariramo spremenljivko ime in ji določimo vrednost

var ime = "Iztok Hafner";

def mojaOseba = Oseba {

imeOsebe: bind ime // vežemo spremenljivke ime z razredom

}

// izpis -> Ime osebe: Iztok Hafner

println("Ime osebe: {mojaOseba.imeOsebe}");

ime = "Hafner Iztok";

// izpis -> Ime osebe: Hafner Iztok

println("Ime osebe: {mojaOseba.imeOsebe}");

Izvorna koda 26: Primer vezanja podatkov v objektih

Zamenjaj prožilci

»Zamenjaj proţilci« so deli programske kode, ki se »prilepijo« na spremenljivko in se

proţijo vedno, ko se spremeni vrednost spremenljivke. Primer takega proţilca prikazuje

izvorna koda 27. [27]

var lastnik = "Iztok Hafner" on replace staroIme {

println("Star lastnik: {staroIme}");

println("Nov lastnik: {lastnik}");

}

Izvorna koda 27: Primer uporabe »zamenjaj« proţilca [27]

Vedno, ko bi ţeleli spremeniti vrednost te spremenljivke, bi se izpisalo ime starega

lastnika in nato tudi ime novega lastnika.

3.5 JavaFX API

JavaFX API omogoča tudi razvijalcem razvoj grafičnih uporabniških vmesnikov, ki

delujejo in imajo enako podobo tako na računalnikih kot tudi na mobilnih napravah. V ta

namen sta pripravljena dva profila. Prvi se imenuje common in vsebuje nabor razredov,

katere podpirajo tako mobilne naprave kot tudi osebni računalniki. Drugi pa se imenuje

desktop, ki vsebuje tudi dodaten nabor razredov in knjiţnic, ki lahko izkoristijo boljšo

procesorsko moč in grafične sposobnosti osebnega računalnika in tako izboljšajo vizualno

izkušnjo. V ta namen bomo v nadaljevanju navedli tudi, katere knjiţnice spadajo v kateri

profil. [28]


JavaFX 1.2 API knjiţnice so organizirane v naslednje pakete [28]:

javafx.animation

javafx.animation.transition

javafx.async

javafx.data

javafx.data.feed

javafx.data.feed.atom

javafx.data.feed.rss

javafx.data.pull

javafx.data.xml

javafx.date

javafx.ext.swing

javafx.fxd

javafx.geometry

javafx.io

javafx.io.http

javafx.lang

javafx.reflect

javafx.scene

javafx.scene.chart

javafx.scene.chart.data

javafx.scene.chart.part

javafx.scene.control

javafx.scene.effect

javafx.scene.effect.light

javafx.scene.image

javafx.scene.input

javafx.scene.layout

javafx.scene.media

javafx.scene.paint

javafx.scene.shape

javafx.scene.text

javafx.scene.transform

javafx.stage

javafx.util

javafx.animation

Ta paket vsebuje razrede, ki so povezani s časovnimi animacijami grafičnih vozlišč v

aplikaciji. Najpomembnejši razred v tem paketu je razred Timeline, ki nam skupaj z

razredom KeyFrame omogoča kreiranje lastnih animacij. Razred Interpolator lahko

uporabimo, ko ţelimo animaciji dodati specifično nelinearno animirano gibanje (EASEIN,

EASEOUT, EASEBOTH,…). Vsi razredi v tem paketu spadajo v profil common in jih tako

lahko popolnoma izkoristimo tudi za razvoj aplikacij, ki tečejo na mobilnih napravah. [28]

Profil: common


javafx.animation.transition

Paket vsebuje razrede, s katerimi lahko animiramo grafična prehajanja določenih stanj

objektov. Tako vsebuje ţe vnaprej pripravljene animirane prehode, kot so

RotateTransition, TranslateTransition, ScaleTransition in podobne.

Vsebuje tudi visoko nivojske konstrukte za komponiranje efektov več animacij

(SequentialTransition za zaporedno izvajanje animacij in

ParallelTransition za vzporedno izvajanje animacij). [28]

Profil: common

javafx.async

Paket podaja moţnost zaganjanja aplikacij s pomočjo niti in asinhronih operacij, kar pa

različica 1.2 še ne podpira popolnoma. Prav tako podaja moţnost sledenja izvajanja

aplikacije. [28]

Profil: common

javafx.data.feed.atom

Paket vsebuje razrede, ki so potrebni za prebiranje in razčlenjevanje Atom

dokumentov. [28]

Profil: common

javafx.data.feed.rss

Ta paket vsebuje vse razrede, ki so potrebni za prebiranje in razčlenjevanje RSS

dokumentov. [28]

Profil: common


javafx.ext.swing

Paket vsebuje razrede za gradnjo uporabniškega vmesnika. Ta paket v JavaFX prinaša

dobro poznane Swing komponente, ki pa kljub značilnemu deklariranju v deklarativni

sintaksi in predpono »Swing« nosijo enake lastnosti kot njihovi predstavniki v Javi. Primer

komponent predstavljajo razredi SwingButton, SwingCheckBox, SwingComboBox

in podobni. [28]

Profil: Razred SwingUtils ima profil common, ostali pa profil desktop.

javafx.fxd

Paket ponuja funkcionalnosti za nalaganje JavaFX vsebinske datoteke (formata FXD

in FXZ), katere zgradimo s pomočjo JavaFX Production Suite. Te vsebinske datoteke

vsebujejo tekstovne opise (ti tekstovni opisi so enaki deklarativnemu jeziku JavaFX Script

in jih tako lahko tudi ročno prenesemo v aplikacijo), ki predstavljajo grafično podobo

JavaFX aplikacije. Ti opisi se tako naloţijo v aplikacijo med izvajanjem. [28]

Profil: common

javafx.geometry

Zagotavlja skupino razredov za definicije in izvajanje operacij nad objekti, ki so

povezani z vektorsko 2D geometrijo. [28]

Profil: common

javafx.io

Zagotavlja razrede, ki so povezani z vhodno-izhodnimi podatkovnimi tokovi. Vsebuje

razreda Storage in Resource, katera lahko uporabimo za lokalno shranjevanje

podatkov, katere aplikacija potrebuje. [28]

Profil: common


javafx.io.http

Paket vsebuje razrede, s katerimi lahko pošiljamo in prejemamo zahteve protokola

HTTP. Najpomembnejši razred v tem paketu je najverjetneje razred HttpRequest, s

pomočjo katerega HTTP zahteve pošiljamo ali prejemamo v obliki podatkovnega toka.

[28]

Profil: common

javafx.lang

Ta paket zagotavlja osnovne razrede za izvajanje JavaFX Script jezika. Nekateri izmed

razredov v tem paketu se naloţijo samodejno, saj so osnova za zaganjanje JavaFX

aplikacij. [28]

Profil: common

javafx.reflect

Ta paket zagotavlja reflektiven dostop do JavaFX podatkovnih tipov in vrednosti.

Definira Java API in se ga lahko uporabi tako pri Java kot JavaFX aplikacijah. [28]

Profil: desktop

javafx.scene

Zagotavlja osnovne razrede za razvoj grafičnega uporabniškega vmesnika JavaFX

aplikacij. Tako vsebuje razred Scene, ki upodablja glavno delovno območje aplikacije (v

Swing ga nadomešča JPanel). Prav tako vsebuje razred Node (vozlišče), ki predstavlja

element oz. vozlišče na delovnem območju aplikacije. Ta vozlišča so prikazana na

območju aplikacije, katero je zapisano kot drevesna struktura, kjer ima vsaka enota enega

ali nič staršev. Vsako vozlišče je lahko list ali veja, v katerem primeru ima lahko še

podvozlišča oz. liste. [28]

Profil: common


javafx.scene.chart

Paket prinaša razrede za grafično upodobitev različnih vrst grafov v JavaFX aplikaciji.

Upodobimo lahko različne vrste grafov, katere predstavljajo razredi BubbleChart,

LineChart, PieChart in podobni. [28]

Profil: common

javafx.scene.control

Paket vsebuje razrede za grafično upodobitev komponent, podobnih tistim v paketu

javafx.ext.swing. Tako na primer vsebuje razrede Button, CheckBox,

RadioButton in podobne. Cilj teh je, da na maksimalno moţen način delujejo skladno

na vseh platformah. [28]

Profil: common

javafx.scene.effect

Vsebuje razrede za dodajanje raznih dodatnih efektov vozliščem. Ti v primeru, da jih

dodamo Node razredom, le-tem dodajo različne efekte in tako izboljšajo grafično izkušnjo

uporabnikom. Primer takega efekta predstavlja razred Reflection, ki doda vozlišču

odsev z lastnostmi, ki jih definiramo, ko nastavimo atributom tega razreda določene

vrednosti. Ker gre za grafično zahtevnejše predstavitve objektov, je te moţno uporabiti

zaenkrat samo pri namiznih in spletnih aplikacijah. [28]

Profil: desktop

javafx.scene.image

Dodaja razrede, ki omogočajo nalaganje in prikazovanje slik v naših aplikacijah. Tukaj

sta pomembna razreda Image, ki hrani pot do same slike, in razred ImageView, ki

shrani sliko v obliki vozlišča in ga tako lahko dodamo ostalim vozliščem. [28]

Profil: common


javafx.scene.input

Vsebuje razrede, s katerimi lahko upravljamo dogodke, ki se proţijo s tipkovnico ali

miško. Primer predstavlja razred MouseEvent, ki se proţi ob določenem dogodku, ki ga

proţi miška. Tak dogodek je lahko onMouseClicked, onMouseEntered,

onMouseExited, onMousePressed, onMouseReleased in podobni. [28]

Profil: common

javafx.scene.layout

Paket vsebuje razrede, s katerimi nadziramo razporeditev vozlišč po sami sceni okna.

Primere razporeditev predstavljajo razredi TileLayout, HBox, VBox in podobni. [28]

Profil: common

javafx.scene.media

Ta paket prinaša razrede s pomočjo katerih lahko v naše JavaFX aplikacije integriramo

avdio in video vsebine. Razredi v tem paketu imajo podobno vlogo, kot tisti v paketu

javafx.scene.image. Za video najpogosteje potrebujemo razred Media,

MediaPlayer in MediaView, za avdio pa razred Track. [28]

Profil: common

javafx.scene.paint

Ta paket vsebuje razrede za nadzor barv in barvnih gradientov, ki jih lahko uporabimo

v naši aplikaciji. Pomembni razredi so Color, RadialGradient in

LinearGradient. [28]

Profil: common


javafx.scene.shape

Vsebuje razrede za definiranje in izvajanje operacij nad objekti, ki temeljijo na 2D

geometriji. Paket tako vsebuje nekatere osnovne oblike objektov, kot sta Rectangle in

Circle, ter nekatere kompleksnejše oblike, kot so Polygon, Polyline, Arc in

podobni. [28]

Profil: Razreda ShapeIntersect in ShapeSubtract imata profil desktop, ostali

pa profil common.

javafx.scene.text

Skupina razredov za prikazovanje in oblikovanje besedila v naši aplikaciji. Tako

vsebuje razred Text, ki prikaţe besedilo, in razred Font, kateremu ob nastavitvi

atributov preprosto oblikujemo pisavo besedila, zapisanega v razredu Text. [28]

Profil: common

javafx.scene.transform

Vsebuje skupino priročnih razredov za izvajanje rotacij, skaliranje, striţenje in

prevajanje spreminjanja objektov. Za izvajanja tega skrbijo razredi Rotate, Scale,

Shear, Translate in nekateri drugi. [28]

Profil: common

javafx.stage

Vsebuje razrede za visokonivojske vsebnike za JavaFX Script. Enkapsulira JavaFX

grafično okolico za metaforo Stage – Scene. Razred Stage tako predstavlja osnovno

okno aplikacije, Scene pa njegovo aktivno površino. [28]

Profil: Razred AppletStageExtension ima profil desktop, ostali pa common.

cfd


javafx.util

To je še osnovni paket in vsebuje nekatere razrede za izvajanje preprostih numeričnih

operacij (razred Math), razrede za izvajanje operacij nad zaporedji (razred Sequences)

in tudi razrede za delo s property-ji, ki shranjujejo pare ime/vrednost (razred

Properties) ter nekatere ostale. [28]

Profil: Razreda FXEvaluator in StringLocalizer imata profil desktop, ostali pa

common.

3.6 Razvoj JavaFX GUI

3.6.1 Osnovno oblikovanje GUI

Zaradi boljšega razumevanja osnovne oblike deklarativne sintakse, ki jo uvaja JavaFX

za razvoj grafičnega uporabniškega vmesnika, bomo predstavili njeno obliko, gledano

glede na dobro poznan Swing.

Spodaj izvorna koda 28 prikazuje primer programske kode, ki predstavlja preprosto

okno namizne aplikacije, zgrajeno s pomočjo tehnologije Swing.

public class MainJFrame {

public static void main(String []args) {

JFrame okno = new JFrame("Primer okna: Swing vs. JavaFX");

okno.setSize(300, 300);

okno.setResizable(false);

JPanel panel = new JPanel();

panel.setBackground(Color.BLUE);

okno.getRootPane().setContentPane(panel);

okno.setVisible(true);

}

}

Izvorna koda 28: Primer preprostega okna s Swing

Kot je značilno za Swing, najprej naredimo instanco razreda JFrame, ki predstavlja

samo okno. Kot atribut pri ustvarjanju instance razreda JFrame je lahko podan tudi

naslov okna, kar smo naredili tudi mi. Popolnoma enak učinek bi dosegli, če bi klicali

metodo setTitle razreda JFrame in kot argument podali novo ime okna, ki pa mora

biti seveda podatkovnega tipa String (v zgornjem primeru bi tako klicali torej

okno.setTitle(»Primer okna: Swing«);). Nato oknu nastavimo velikost


(okno.setSize(300, 300); ) ter atribut, da velikosti okna ne bo mogoče

spreminjati (okno.setResizable(false);). Nato ustvarimo instanco razreda

JPanel, katera deluje kot neke vrste delovna površina našega okna (tukaj dodajamo

grafične komponente in tako oblikujemo grafični vmesnik Swing aplikacije). Tej površini

nato spremenimo barvo ozadja, v našem primeru na modro, ter okno nato prikaţemo.

Sedaj pa bomo v izvorni kodi 29 prikazali, kako popolnoma ustvarimo okno s pomočjo

deklarativne sintakse JavaFX Script programskega jezika.

Stage {

title : "Primer okna: Swing vs. JavaFX"

width: 300, height: 300

resizable: false

scene: Scene {

fill: Color.BLUE

}

}

Izvorna koda 29: Primer preprostega okna z deklarativno sintakso JavaFX Script

Najprej naredimo instanco razreda Stage (ta v tem primeru prevzema vlogo razreda

JFrame). Nato nastavimo vrednosti spremenljivk title (Swing

JFrame.setTitle();), width, height (Swing JFrame.setSize();) in

resizable (Swing JFrame.setResizable();), ki nastavijo lastnosti okna.

Zatem spremenljivki scene priredimo instanco razreda Scene, ki pa tukaj prevzame

vlogo razreda JPanel pri Swingu. Spremenljivki fill nato priredimo vrednost

Color.BLUE, kar ozadje pobarva z ţeleno barvo (Swing

JPanel.setBacground();).

Slika 3.2 prikazuje okno, ki je oblikovano popolnoma enako v obeh zgoraj

predstavljenih primerih.


Slika 3.2: Primer okna v Swing in JavaFX Script.

3.6.2 Naprednejše oblikovanje GUI z JavaFX

Za naprednejše in bogatejše oblikovanje okna v JavaFX lahko razrede iz paketov, ki

spadajo pod javafx.scene poljubno gnezdimo in tako dobimo grafično bogatejšo

aplikacijo. Tako lahko na primer atributu fill v razredu Scene dodamo gradient s

prehajanjem med dvema ali več barvami z uporabo razreda RadialGradient, ki je v

paketu javafx.scene.paint na naslednji način, ki ga prikazuje izvorna koda 30.

scene: Scene {

fill: RadialGradient {

centerX: 0.3

centerY: 0.3

radius: 1

stops: [

Stop {

color : Color.LIGHTBLUE

offset: 0.0

},

Stop {

color : Color.BLUE

offset: 1.0

},

]

}

}

Izvorna koda 30: Uporaba razreda RadialGradient za naprednejšo uporabo barv


S tem ko smo dodali ta razred, smo dobili okno, kot ga predstavlja slika 3.3. Kot je

razvidno iz te slike, smo ţe takoj dobili grafično bogatejše okno, za katerega bi potrebovali

veliko več truda ob razvijanju uporabniškega vmesnika s tehnologijo Swing.

Slika 3.3: Primer ozadja JavaFX okna z uporabo razreda RadialGradient

Razredu Scene lahko prav tako dodajamo različne ostale osnovne in naprednejše

oblike (Circle, Rectangle, Ellipse, Polygon, Polyline, Arc, Image, Line),

in sicer kot polje teh vozlišč pod atribut content. Za prikaz teh na oknu lahko uporabimo

tudi različne razporeditve (layout), in sicer JavaFX API 1.2 pozna VBox, HBox,

TileLayout, Flow, Stack in nekatere ostale razporeditve. Najpogosteje uporabljene

razporeditve so prikazane na sliki 3.4.


Slika 3.4: a) VBox, b) HBox in c) TileLayout razporeditev

Razne osnovne oblike lahko med drugim dodajamo tudi v skupine (razred Group), s

pomočjo katerih lahko nato hkrati nadziramo in spreminjamo vrednosti določenih atributov

vseh oblik, ki so v skupini. Primer celotne izvorne kode, ki vključuje uporabo nekaterih

izmed teh razredov in zgrajeno okno (slika 3.5) predstavlja izvorna koda 31.

Stage {

title : "Primer okna: JavaFX"


resizable: false

scene: Scene {


centerX: 0.3

centerY: 0.3

radius: 1

stops: [

Stop {


offset: 0.0

},

Stop {

color : Color.BLUE

offset: 1.0

},

]

}

content: [

Group {

translateX: 150

translateY: 150

content: [

Rectangle {

x: -70, y: -45

arcWidth: 15, arcHeight: 15



centerX: 0.5

centerY: 0.5

radius: 1

stops: [


Stop {


offset: 0.0

},

Stop {

color : Color.DARKBLUE

offset: 1.0

},

]

}

stroke: Color.DARKBLUE

}

Circle {

radius: 40


centerX: 0.3

centerY: 0.3

radius: 1

stops: [

Stop {

color : Color.DARKBLUE

offset: 0.0

},

Stop {

color : Color.BLUE

offset: 1.0

},

]

}

stroke: Color.RED

}

]

}

]

}

}

Izvorna koda 31: Primer uporabe razreda Group


Slika 3.5: Primer naprednejše uporabe UI gradnikov JavaFX

Pri tem primeru je dobro razvidno, da se gradniki GUI na okno nameščajo v slojih in

tako je na najniţjem sloju gradnik, ki smo ga dodali prvega (kvadrat), in na najvišjem

gradnik, ki smo ga dodali kot drugega oz. zadnjega (krog). V skupino Group smo dodali

kvadrat in krog, katerima, kot je razvidno iz izvorne kode 31 in slike 3.5, se je prištela k

lokalni lokaciji gradnika še lokacija, definirana pod atributoma translateX in

translateY. Opisan primer zgoraj nam ponuja še eno priloţnost, in sicer, da prikaţemo

še definicijo in klic funkcije, katere rezultat bomo priredili atributu, ki predstavlja grafični

element. Kot je mogoče opaziti z ogledom izvorne kode 31, smo trikrat kreirali instanco

razreda RadialGradient za napolnitev barve ozadja. Ker smo le-tega morali ustvariti

trikrat, smo napisali veliko več programske kode, kot bi sicer, kar je privedlo do večje

nerazločnosti. To se da preprosto rešiti seveda s funkcijami. Napisali bomo torej funkcijo,

ki kot argumente sprejme nekatere vrednosti razreda RadialGradient. Nato kreira

instanco tega razreda, napolni atribute z vrednostmi, podanimi kot argument funkcije, in

vrne ta objekt kot rezultat. Opisano funkcijo prikazuje izvorna koda 32.


function rGrad(cX: Number, cY: Number, rad: Integer, cStop1: Color,

cStop2: Color) : RadialGradient {

return RadialGradient {

centerX: cX

centerY: cY

radius: rad

stops: [

Stop {

color : cStop1

offset: 0.0

},

Stop {

color : cStop2

offset: 1.0

},

]

}

}

Izvorna koda 32: Primer uporabe funkcije, ki vrača instanco grafične komponente

Ko imamo sedaj funkcijo napisano, lahko nadomestimo vrednosti atributov fill s

klicem funkcije, tako kot prikazuje izvorna koda 33.

Stage {



resizable: false

scene: Scene {

fill: rGrad(0.3, 0.3, 1, Color.LIGHTBLUE, Color.BLUE)

content: [

Group {

translateX: 150

translateY: 150

content: [

Rectangle {

x: -70, y: -45



fill:rGrad(0.5, 0.5, 1, Color.LIGHTBLUE,Color.DARKBLUE)


}

Circle {

radius: 40

fill:rGrad(0.3, 0.3, 1, Color.DARKBLUE, Color.BLUE)

stroke: Color.RED

}

]

}

]

}

}

Izvorna koda 33: Primer klica funkcije, ki vrača instanco grafične komponente


3.6.3 Uporaba vezanja podatkov in upravljavcev dogodkov z grafičnimi elementi

Vezanje podatkov je zelo močen in tudi praktičen koncept, saj brez njega teţko

naredimo resnično interaktivno in uporabniku prijazno aplikacijo. V naslednjem primeru

bomo aplikaciji, ki smo jo do sedaj nadgrajevali, dodali še upravljavec dogodkov, ki v

primeru, da kliknemo na krog v sredini, proţi dogodek onMousePressed in spremeni

vrednost spremenljivk ozadjeKvadrata in obrobaKroga in tako neposredno vpliva

na odziv GUI. Primer uporabe upravljavca dogodka in vezanja podatkov prikazuje

naslednja izvorna koda 34.

var ozadjeKvadrata = rGrad(0.5, 0.5, 1, Color.LIGHTBLUE, Color.DARKBLUE);

var obrobaKroga = Color.RED;

Stage {



resizable: false

scene: Scene {

fill: rGrad(0.3, 0.3, 1, Color.LIGHTBLUE, Color.BLUE)

content: [

Group {

translateX: 150

translateY: 150

content: [

Rectangle {

x: -70, y: -45



fill: bind ozadjeKvadrata


}

Circle {

radius: 40

fill: rGrad(0.3, 0.3, 1, Color.DARKBLUE, Color.BLUE)

stroke: bind obrobaKroga

onMousePressed: function( e: MouseEvent ):Void {

ozadjeKvadrata = rGrad(0.5, 0.5, 1, Color.DARKBLUE,

Color.LIGHTBLUE);

obrobaKroga = Color.GREEN;

}

onMouseReleased: function( e: MouseEvent ):Void {

ozadjeKvadrata = rGrad(0.5, 0.5, 1,

Color.LIGHTBLUE, Color.DARKBLUE);

obrobaKroga = Color.RED;

}

}

]

}

]

}

}

Izvorna koda 34: Primer uporabe upravljavcev dogodkov in vezanja podatkov nad GUI


Ustvarili smo torej dve spremenljivki (ena je tipa RadialGradient, druga Color),

katerima smo ob deklaraciji priredili neke privzete vrednosti. V razredu Rectangle smo

zamenjali tudi atribut fill s spremenljivko ozadjeKvadrata. V razredu Circle pa

smo atributu stroke vezali spremenljivko obrobaKroga. V primeru, ko kliknemo na

krog, se kliče funkcija onMousePressed, katera spremeni vrednosti spremenljivk

ozadjeKvadrata in obrobaKroga in tako spremeni barve. Tukaj je pomembno

opaziti, da smo pri nastavljanju vrednosti spremenljivke atributu razreda dodali ključno

besedo bind, ki veţe vrednost spremenljivke atributu in vedno, ko se spremeni vrednost

spremenljivke, se nova vrednost te prenese atributu in tako neposredno vpliva na objekt. V

primeru, da ne bi vezali vrednosti z besedo bind, bi se prenesla vrednost spremenljivke

samo pri zagonu aplikacije in tako nadaljnje spreminjanje vrednosti spremenljivke na same

atribute razreda ne bi imelo neposrednega vpliva. Ko miškin gumb spustimo, se proţi

dogodek onMouseReleased in tako spremenljivkama ozadjeKvadrata in

obrobaKroga spet nastavimo privzete vrednosti.

3.6.4 Animiranje grafičnih objektov

JavaFX vsebuje tudi knjiţnice, s katerimi lahko animiramo objekte. Razredi za

animiranje objektov se nahajajo v paketu javafx.animation. Ta paket vsebuje tudi

razred Timeline, s pomočjo katerega lahko definiramo lastne animacije. Ta deluje kot

zanka in se ponavlja vse od trenutka, ko ga proţimo (funkcija play();), in se ustavi ob

klicanju funkcije stop() oz. ob definiranem koncu animacije. V tem razredu definiramo

ključne točke izvajanja (z ustvarjanjem instanc razredov KeyFrame), kot prikazuje primer

izvorne kode 35 spodaj.

var krogPosX = 0; // začetna lokacija

var krogLevo = -110; // maksimalen premik kroga v levo

var krogDesno = 110; // maksimalen premik kroga v desno

var timeLine = Timeline {

repeatCount: Timeline.INDEFINITE

keyFrames: [

KeyFrame {

time: 0s

canSkip: false

values: [ krogPosX => krogLevo]

}

KeyFrame {

time: 2s

canSkip: false

values: [ krogPosX => krogDesno tween Interpolator.EASEIN]

}


KeyFrame {

time: 4s

canSkip: false

values: [ krogPosX => krogLevo tween Interpolator.EASEIN]

}

]

}

timeLine.play();

Izvorna koda 35: Ustvarjanje lastne animacije objekta z uporabo razreda Timeline

V primeru smo najprej deklarirali spremenljivke, ki vsebujejo lokacije, kamor

premikamo krog. Nato smo ustvarili instanco razreda Timeline. V tem razredu smo nato

atributu repeatCount nastavili vrednost INDEFINITE, kar pomeni, da se animacija

izvaja od samega proţenja do tega, ko jo sami ţelimo ustaviti s klicem funkcije stop().

V atributu keyFrames smo dodali tri ključne točke izvajanja animacije, in sicer prvo, ki

se proţi vsako ničto sekundo (0s) izvajanja animacije. Atribut canSkip pove, če je

moţno animacijo ročno prekiniti. Atribut values hrani podatek, kateri spremenljivki se

postopoma spreminjajo vrednosti. V našem primeru spreminjamo vrednost spremenljivki

krogPosX, ki je vezana na x koordinato kroga. To vrednost postopoma transformiramo,

da dobimo končno vrednost, katera je definirana v spremenljivki krogLevo. Vsako 2s

izvajanja animacije se proţi druga ključna točka (v našem primeru je to, ko je krog skrajno

levo na oknu), ki začne krogu povečevati lokacijo x, da se ta začne pomikati proti desni. Z

besedico tween definiramo, na kakšen način (hitrost) se bo vrednost povečevala oz.

zmanjševala proti predpisani vrednosti. Poznamo več načinov, in sicer:

LINEAR - vrednost se spreminja linearno.

EASEIN - se začne upočasnjevati, ko se pribliţuje končni vrednosti.

EASEOUT - se upočasnjuje, ko se oddaljuje od začetne vrednosti.

EASEBOTH - upočasni, ko se oddaljuje od začetne oz. pribliţuje končni vrednosti.

DISCRETE - ki ustavi objekt, dokler se začetna vrednost ne izenači s končno, šele

takrat spremeni lokacijo objekta, kar je videti, kot da objekt preskakuje, ne pa

potuje.

Lahko pa definiramo tudi svoje načine premikanja objektov s pomočjo lastnih funkcij,

v katerih navadno uporabimo razred Math in trigonometrične funkcije. Tretja ključna

točka izvajanja animacije pa se proţi vsako 4s izvajanja animacije, in sicer takrat, ko je

naš krog skrajno desno na oknu. V tem trenutku se prične krogu zmanjševati lokacija x in


se ta začne pomikati nazaj proti levi. Za pričetek izvajanja animacije kličemo funkcijo

play().

3.7 Nameščanje JavaFX aplikacij v uporabniško okolje

JavaFX aplikacije lahko izvajamo v različnih uporabniških okoljih. Zato je pomembno,

da izpostavimo tudi načine nameščanja aplikacij v različnih okoljih. Kot smo ţe povedali,

se aplikacija, razvita s pomočjo JavaFX, lahko izvaja na različnih napravah. Vse, kar

moramo narediti, je, da preden izvorno kodo prevedemo, izberemo, kje se bo aplikacija

izvajala. Verzija JavaFX 1.2 ponuja naslednje načine izvajanja: [10]

Standard Execution – Predstavlja klasičen način zaganjanja aplikacije kot

samostojno namizno aplikacijo. Izvorno kodo prevede v izvršitveno, ki je

primerna za izvajanje na računalniških sistemih. Vse, kar mora uporabnik nato

storiti, je, da izvršitveno datoteko poţene.

Web Start Execution – Ponuja moţnost poganjanja aplikacije neposredno iz

spletnega brskalnika. Aplikacija se ob zagonu preko spletnega brskalnika

namesti na odjemalčev računalnik, kjer se izvaja izven spletnega brskalnika.

Run in Browser – Ta način zaţene aplikacijo v spletnem brskalniku. To stori

tako, da aplikacijo vstavi v HTML kodo, kot prikazuje izvorna koda 36. V tej

obliki jo spletni brskalnik lahko prepozna in izvaja.

Run in Mobile Emulator – Zaţene aplikacijo v simulatorju mobilne naprave.

Sluţi za testiranje odzivnosti in skladnosti aplikacije na mobilni napravi. Ob

tem prevede izvorno kodo v izvršitveno, tako da jo lahko preprosto prenesemo

na mobilno napravo, kjer jo namestimo in seveda tudi izvajamo. [10]


<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>Ozara - Wellness in mind</title>

</head>

<body bgcolor="Blue">

<div align="center">

<script src="http://dl.javafx.com/1.2/dtfx.js"></script>

<script>

javafx(

{

archive: "ImeAplikacije.jar",

draggable: false,

width: 800,

height: 700,

code: "glavnipaket.Main",

name: "ImeAplikacije"

}

);

</script>

</div>

</body>

</html>

Izvorna koda 36: Vključitev JavaFX aplikacije v HTML


4 PRIMERJAVA TEHNOLOGIJ ZA RAZVOJ BOGATIH

SPLETNIH APLIKACIJ (RIA)

4.1 Kriteriji primerjave

Ker so današnje tehnologije za razvoj bogatih spletnih in namiznih aplikacij po

zmogljivostih zelo podobne, smo se odločili, da jih primerjamo in izpostavimo njihove

ključne podobnosti in zmogljivosti. Odločili smo se za naslednje kriterije, po katerih bomo

primerjali danes najbolj razširjeni tehnologiji za razvoj bogatih spletnih aplikacij Adobe

Flex (Flash Player in AIR izvajalno okolje) in Microsoft Silverlight s tehnologijo JavaFX.

Medplatformna prenosljivost aplikacije.

Hitrost izvajanja.

Zahtevnost učenja za novega razvijalca.

Priljubljenost in razširjenost tehnologij za razvoj RIA

Zaradi čim bolj natančne ocenitve tehnologij bodo vse meritve hitrosti izvajanja

izvedene na prenosnem računalniku z naslednjimi karakteristikami.

Procesor: Intel Core2Duo T7300 2,00 GHz

Glavni spomin: 3,00 GB RAM

Grafična kartica: NVIDIA 8600M GT 1,00 GB Video RAM

Operacijski sistem: Windows Vista Business Edition, 32-bit (Build SP 16001)

4.2 Primerjava JavaFX – Microsoft Silverlight – Adobe Flex

4.2.1 Medplatformna prenosljivost aplikacije

Medplatformna prenosljivost aplikacije je danes zelo pomembna tema, saj si vsi

ţelimo, da bi bile vse aplikacije tako visoko prenosljive kot tudi zdruţljive. Zaradi

stremljenja k temu se je močno prijel standard XML in spletne storitve, saj ponujajo


zdruţljivost podatkov in komunikacije med aplikacijami. To je bil pomemben dejavnik pri

odločitvi, da v primerjavo tehnologij vključimo tudi medplatformno prenosljivost aplikacij.

JavaFX

Tehnologija JavaFX obljublja popolno prenosljivost med osebnimi računalniki,

mobilnimi napravami, spletnimi aplikacijami in tudi med TV sistemi, kot so DVD

predvajalniki, TV Box in podobni.

Naprave in operacijski sistemi, ki trenutno podpirajo virtualni stroj JRE 6 Update 10 ali

višji so naslednje [6]:

Osebni računalnik

o Microsoft Windows XP, Windows Vista

o Mac OS X

o GNU/Linux

o OpenSolaris

Mobilne naprave

o Google Android

o Windows Mobile (vse verzije)

o Blackberry OS

o iPhone OS (vse verzije)

o ostali mobilni OS, kateri podpirajo Java aplikacije

TV naprave so zaenkrat še izključene, obljubljajo pa, da bo mogoče poganjati

JavaFX aplikacije na njih kmalu.

Spisek priča o zelo široki podpori JavaFX aplikacij na zelo široki paleti operacijskih

sistemov in naprav, ker pa se je JavaFX pred kratkim komaj prvič pojavila, pa nedvomno

lahko v bliţnji prihodnosti pričakujemo podporo še veliko novih sistemov.

Microsoft Silverlight

Microsoft se s tehnologijo Silverlight močno trudi postati prevladujoča tehnologija za

razvoj bogatih spletnih aplikacij, kar pa bi bilo nemogoče, če bi podpirali izvajanje

Silverlight aplikacij samo na operacijskem sistemu Windows in spletnem brskalniku

Internet Explorer. Zaradi tega so se pri Microsoftu odločili ponuditi Silverlight vtičnik tudi


za najpogosteje uporabljene spletne brskalnike v Mac OS X in Linux operacijskem

sistemu. Trenutno podprti operacijski sistemi in spletni brskalniki so [11]:

Windows

o Internet Explorer

o Mozilla Firefox

o Google Chrome

o Safari

o SeaMonkey

o Opera

Mac OS X

o Mozilla Firefox

o Safari

o Opera

GNU/Linux

o Mozilla Firefox

o Konqueror

o Opera

Ker pa ţelijo ponuditi doţivetje Silverlight aplikacij tudi na mobilnih napravah, so se

odločili ponuditi tudi vtičnik za mobilne operacijske sisteme, in sicer trenutno za za

Windows Mobile in Symbian OS S60 in S40. [12]

Adobe Flex

Adobe Flex temelji na platformi Adobe Flash, kar pomeni, da je prisoten ţe danes na

večini računalniških sistemov (govori se, da ima Flash okrog 99% prisotnost). Flex lahko

prav tako kot JavaFX izvajamo kot spletno aplikacijo (izvajalno okolje Flash Player) ali

samostojno namizno aplikacijo (izvajalno okolje AIR), vendar je ni mogoče prenašati na

mobilne ali katere druge naprave.

Flex trenutno podpira naslednje operacijske sisteme: [2]

Microsoft Windows 2000, Windows XP, Windows Vista

Mac OS X

GNU/Linux


Aplikacije, razvite s tehnologijo Flex, se trenutno še ne morejo poganjati na mobilnih

napravah, vendar nekatere govorice trdijo, da prihaja Flex Mobile. Te govorice do tega

trenutka še niso uradno potrjene in tako ostaja Flex za enkrat samo na osebnih računalnikih

in v spletnih brskalnikih.

4.2.2 Hitrost izvajanja

Tudi hitrost izvajanja aplikacij je danes zelo pomembna tema, saj vsi ţelijo dostopati

do podatkov v trenutku. Zaradi tega smo se odločili oceniti te tri tehnologije tudi glede na

hitrost izvajanja, in sicer smo hitrost izvajanja ocenjevali na dva načina.

Prvo ocenjevanje hitrosti je na podlagi iskanja vseh praštevil od števila 0 do 1000000.

Kot drugi test pa smo izbrali testiranje s pomočjo tako imenovanega Bubblemark testa, ki

neposredno ocenjuje hitrost izvajanja aplikacije s pomočjo preproste 2D animacije. Test

hitrosti prikazovanja grafične animacije smo izbrali, saj smo mnenja, da je hitrost izvajanja

le-tega danes zelo pomembna pri uporabniški izkušnji.

Iskanje praštevil

Iskanje praštevil je tipičen test, ki prikazuje hitrost izvajanja računskih operacij

programske platforme. Deluje tako, da poišče vsa praštevila (To so števila, ki imajo samo

dva delitelja, in sicer samega sebe in število ena.) od nič do izbranega števila. Ko najde vsa

praštevila na tem intervalu, izpiše število najdenih praštevil in čas, ki ga je za to

potreboval. Iskanje praštevil je lahko zelo zahtevna operacija, saj višje kot je število, za

katerega preverjamo, ali je praštevilo, več moţnih deliteljev je potrebno preveriti.

Tabela 6 prikazuje rezultate, katere smo dobili po izvedbi preizkusa. Meritve smo

ponovili 50-krat in na podlagi vseh meritev izračunali povprečno vrednost ter izločili

najhitrejše in najpočasnejše izvajanje. [29][30]


Tabela 6: Izmerjene hitrosti računanja praštevil na različnih RIA tehnologijah [29][30]

JavaFX Silverlight Flash/Flex

Najniţja in

najvišja hitrost

računanja

0,423 – 0,544 0,410 – 0,522 1,323 – 1,538

Povprečna

vrednosti 0,461 0,431 1,408

Iz tabele 6 je tako razvidno, da sta tehnologiji JavaFX in Silverlight pri računanju

praštevil do števila 1000000 zelo izenačeni, saj je razlika med njima zanemarljiva. Izstopa

pa platforma Flash, saj je ta po opravljenih meritvah dvakrat počasnejša tudi pri svojemu

najhitrejšem računanju praštevil. Ta test jasno prikazuje hitrostne pomanjkljivosti

platforme Flash v primerjavi z alternativama.

Bubblemark

Uporabniki si ţelijo vedno bogatejše uporabniške izkušnje, zato je test Bubblemark

postal ţe skoraj standard za testiranje hitrosti izvajanja RIA aplikacij. Test prikazuje zelene

balončke, ki se naključno premikajo po točno določeni velikosti okna (to je veliko 500 pik

v širino in 300 pik v višino) in trkajo med seboj. Bubblemark test lahko poţenemo z

različnim številom balončkov (tipično 16, 32 in 128 balončkov) in tako vidimo različne

hitrosti izrisovanja grafičnih oblik. Ker pa so velike razlike pri prikazovanju slik in

vektorskih 2D objektov, navadno lahko izbiramo, ali naj aplikacija izrisuje vektorski

objekt ali sliko. Ko test poţenemo, nam ta izpisuje, s koliko sličicami na sekundo (fps –

frames per second) teče animacija. Več sličic na sekundo pomeni hitrejše delovanje in

posledično bolj gladko animacijo. Če animacija teče v vsakem trenutku z več kot 24

sličicami na sekundo, naše oko vidi gladko animacijo. Slika 4.1 prikazuje, kakšno je

izvajanje testa Bubblemark v JavaFX. [13]


Slika 4.1: Bubblemark test v JavaFX

Odločili smo se, da bomo vključili teste obeh načinov izrisovanja balončkov (slikovni

in vektorski način). Test smo poganjali pri prikazovanju 16, 32 in 128 balončkov in ga

pustili teči natanko 60 sekund. Vsako tretjo sekundo smo zabeleţili število sličic na

sekundo, s katero animacija teče. Povzetek dobljenih rezultatov prikazuje tabela 7.

Tabela 7: Povprečen prikaz sličic na sekundo (fps) po izvedbi Bubblemark testa

Št.

bal.

JavaFX

slika

JavaFX

vektor

Silverlight

1.0

Silverlight

2.0

Flash/Flex

slika

Flash/Flex

vektor

AIR/Flex

slika

16 327,25 123,05 93,20 208,95 175,20 121,15 130,35

32 121,85 62,00 85,90 122,25 167,70 69,80 98,60

128 122,55 30,60 24,70 35,30 68,35 17,95 24,30

Povprečen prikaz sličic na sekundo se med različnimi tehnologijami zelo razlikuje, kot

je razvidno iz tabele 7. Pri tem testu se je najbolje izkazala JavaFX, saj je gladkost


animacije zares impresivna. Videti je tudi mogoče, da vse tehnologije nekoliko počasneje

preračunavajo vektorske balončke kot slike, kar je razumljivo zaradi kompleksnih

matematičnih izračunov. Najslabše se je tudi po tem testu izkazala tehnologija Flex, ki je

vektorski prikaz balončkov s teţavo prikazovala s samo 18 sličicami na sekundo. Nekoliko

slabše od pričakovanj se je obneslo AIR izvajalno okolje tehnologije Flex, saj napredka

proti izvajalnemu okolju Flash Player ni bilo zaznati.

4.2.3 Zahtevnost učenja

V tem delu primerjanja tehnologij bomo razvili preprosto aplikacijo v vsaki izmed treh

tehnologij, katere primerjamo. Preprosta aplikacija bo ob kliku na prvi gumb izpisovala

preprosto besedilo, ob kliku na drugi gumb pa spremenila barvo ozadja. Po narejenih vseh

treh primerih aplikacije bomo ocenili dolţino, razumljivost same programske kode in

število vrstic, ki jih nismo napisali sami, pa vendar so potrebne. Več je teh vrstic, slabša je

seveda razumljivost razvite aplikacije. Potrudili se bomo seveda tudi, da bodo aplikacije

čim bolj minimalne in ne bodo vsebovale nepotrebnih programskih stavkov.

JavaFX

Primer JavaFX aplikacije smo razvili v ogrodju NetBeans IDE 6.5.1 z JavaFX 1.2

SDK. Programska koda vsega obsega samo eno datoteko, ki je poimenovana Main.fx.

Celotno izvorno kodo prikazuje izvorna koda 37.

function run() {

var barvaOzadja: Color = Color.LIGHTBLUE;

var besedilo: String[];

Stage {

title: "JavaFXPrimer"

width: 310

height: 340

scene: Scene {

fill: bind barvaOzadja

content: [

Button {

text: "Spremeni ozadje!"

width: 260

strong: true

translateX: 20

translateY: 20

action: function() {

if (barvaOzadja == Color.LIGHTBLUE) {

barvaOzadja = Color.BLUE;

}

else {


barvaOzadja = Color.LIGHTBLUE;

}

}

},

Button {

text: "Pozdravljena JavaFX!"

width: 260

strong: true

translateX: 20

translateY: 50


insert "Uporabnik: Pozdravljena JavaFX!"

into besedilo;

insert "JavaFX: Pozdravljen uporabnik!!"

into besedilo;

}

},

ListView {

translateX: 20

translateY: 80

width: 260

height: 200

items: bind besedilo

}

]

}

}

}

Izvorna koda 37: JavaFX – Primerjava – celotna izvorna koda

Podobo razvite aplikacije prikazuje slika 4.2. Podslika a) prikazuje aplikacijo po

zagonu, podslika b) pa aplikacijo po kliku na oba gumba.

Slika 4.2: Primer aplikacije JavaFX: a) pred klikom in b) po kliku na oba gumba


Microsoft Silverlight

Primer Silverlight aplikacije smo razvili v Visual Studio.NET 2008 in Silverlight 3

SDK. Po kreiranju novega Silvelight projekta je bilo potrebno definirati GUI aplikacije.

Silverlight za zapis komponent GUI uporablja jezik XAML. Komponente, ki sestavljajo

GUI, se nahajajo v datoteki Page.xaml. Vsebino te datoteke predstavlja izvorna koda 38.

<UserControl x:Class="SilverlightPrimer.Page"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

Width="310"

Height="340">

<Grid x:Name="LayoutRoot" Background="LightBlue">

<Canvas x:Name="GlavniCanvas">

<Button x:Name="SpremeniOzadje" Content="Spremeni ozadje!"

Width="260" Height="25" Canvas.Top="20" Canvas.Left="20"

Click="SpremeniOzadjeClick" />

<Button x:Name="PozdravljenSilverlight"

Content="Pozdravljen Silverlight!" Width="260"

Height="25" Canvas.Top="50" Canvas.Left="20"

Click="PozdravljenSilverlightClick" />

<TextBox x:Name="Besedilo" Width="260" Height="200"

Canvas.Top="80" Canvas.Left="20" AcceptsReturn="True" />

</Canvas>

</Grid>

</UserControl>

Izvorna koda 38: Silverlight – Primerjava – definicija GUI komponent

Kot je razvidno, je sintaksa dokaj preprosta in tako ne predstavlja večjih teţav pri

učenju. Lepo so vidne lastnosti komponent in upravljavci dogodkov, izvedenih nad njimi.

Na primer, ob kliku na gumb z imenom SpremeniOzadje se proţi funkcija

SpremeniOzadjeClick, ki se nahaja v delnem razredu za datoteko Page.xaml, in

sicer v delnem razredu Page v datoteki Page.xaml.cs. Da omogočimo pisanje več

vrstic v TextBox, moramo postaviti vrednost spremenljivke AcceptsReturn na

True.

Implementacija funkcionalnosti gumbov se torej nahaja v delnem razredu Page, ki ga

predstavlja izvorna koda 39 spodaj.

namespace SilverlightPrimerr

{

public partial class Page : UserControl

{

private void PozdravljenSilverlightClick(object sender,

RoutedEventArgs arg1) {

Besedilo.Text = Besedilo.Text +

"Uporabnik: Pozdravljen Silverlight!\n";

Besedilo.Text = Besedilo.Text +

"Silverlight: Pozdravljen uporabnik!!\n";


}

private void SpremeniOzadjeClick(object sender,

RoutedEventArgs arg1) {

if (LayoutRoot.Background == "LightBlue") {

LayoutRoot.Background = "Blue";

}

else {

LayoutRoot.Background = "LightBlue";

}

}

public Page()

{

InitializeComponent();

}

}

}

Izvorna koda 39: Silverlight – Primerjava – definicija funkcionalnosti

Ko poţenemo razvito aplikacijo, se nam le-ta odpre v spletnem brskalniku, kot

prikazuje slika 4.3. Podslika a) prikazuje aplikacijo pred klikom na gumbe oz. takoj po

zagonu, podslika b) pa prikazuje stanje aplikacije po kliku na oba gumba.

Slika 4.3: Primer aplikacije Silverlight: a) pred klikom in, b) po kliku na oba gumba


Adobe Flex

Primer Flex aplikacije je bil razvit v okolju Flex Builder 3 in Flex 3 SDK. Flex Builder

3 je razvojno okolje, narejeno za Eclipse IDE. Tudi Adobe Flex podobno kot Microsoft

Silverlight za definiranje komponent GUI uporablja jezik, podoben XML, in sicer MXML.

Samo funkcionalnost aplikacije pa se lahko z razliko od XAML tukaj vključi kar v samo

MXML datoteko, kot prikazuje izvorna koda 40.

<?xml version="1.0" encoding="utf-8"?>

<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml"

layout="absolute"

width="310"

height="340"

title="FlexPrimer"

>

<mx:TextArea id="ozadjeOkna" editable="false" width="310"

height="340" backgroundColor="#028afe"/>

<mx:Script>

<![CDATA[

private function spremeniOzadjeClick() : void {

if (ozadjeOkna.getStyle("backgroundColor") == 0x028afe) {

ozadjeOkna.setStyle("backgroundColor", 0x0237FE);

}

else {

ozadjeOkna.setStyle("backgroundColor", 0x028afe);

}

}

private function pozdravljenFlexClick() : void {

besedilo.text = besedilo.text + "Uporabnik: Pozdravljen

Flex!\n";

besedilo.text = besedilo.text + "Flex: Pozdravljen

uporabnik!!\n";

}

]]>

</mx:Script>

<mx:Button id="spremeniOzadje" label="Spremeni ozadje!" width="260"

x="20" y="20" click="spremeniOzadjeClick()"/>

<mx:Button id="pozdravljenFlex" label="Pozdravljen Flex!" width="260"

x="20" y="50" click="pozdravljenFlexClick()"/>

<mx:TextArea id="besedilo" width="260" height="200" x="20" y="80" />

</mx:WindowedApplication>

Izvorna koda 40: Flex – primerjava – celotna izvorna koda

Tudi pisanje Flex aplikacij je za novega uporabnika preprosto opravilo in kot je

mogoče videti zgoraj (izvorna koda 40), je bilo za našo preprosto aplikacijo potrebno

napisati še najmanj programske kode v primerjavi z ostalima tehnologijama. Razvito

aplikacijo v Flex prikazuje slika 4.4. Kot podsliko a) je mogoče videti aplikacijo pred

klikom gumbov in kot podsliko b) po kliku na oba gumba.


Slika 4.4: Primer aplikacije Flex: a) pred klikom in, b) po kliku na oba gumba

Iz slike 4.4 je mogoče tudi videti, da so nekatere osnovne komponente, kot je gumb

(<mx:Button/>), ţe privzeto prosojne in tako prevzamejo osnovno barvo ozadja aplikacije,

kar brez dodatnega truda doda bogatejšo podobo aplikaciji.

4.2.4 Popularnost in razširjenost tehnologij za razvoj RIA

Razširjenost uporabe tehnologije je eden najpomembnejših podatkov, če ţelimo

razvito aplikacijo dostaviti čim širšemu krogu ljudi. Zaradi tega je pomembno upoštevati

tudi ta kriterij pri splošni oceni primerjanja tehnologij za razvoj RIA. Za ta test bomo

uporabili orodje Google Trends (http://www.google.com/trends). S tem orodjem lahko

preverimo, koliko ljudi preko iskalnika Google išče določene besedne zveze v določenem

obdobju, in nam poda statistiko. Po primerjanju naših treh tehnologij smo dobili rezultate,

ki jih prikazuje slika 4.5. [14]


Slika 4.5: Prikaz priljubljenosti tehnologij za razvoj RIA [14]

Na sliki je vidno, da sta leti 2006 in 2007 bili za Flex zelo dobri, saj je priljubljenost

konstantno naraščala. V drugem četrtletju leta 2008 se je ta rast nekoliko ustavila, kar je

najverjetneje posledica izdaje tehnologije JavaFX in povečanja priljubljenosti tehnologije

Silverlight, ki je bil prvi pravi tekmec Flexu. JavaFX je ob prvi predstavitvi v drugem

četrtletju leta 2007 poţela veliko zanimanja, vendar se je to hitro umirilo, saj je bilo do

prve javne izdaje še dobro leto dni. Takrat je Microsoft tudi izdal alpha in beta različico

svojega aduta Silverlighta. Naslednji vzponi zanimanja za Silverlight pa so izdaje novih

različic in posodobitev te tehnologije.

Pomembnejše mejnike na sliki 4.5 predstavljajo velike tiskane črke, in sicer: [14]

A – 25. 02. 2008 – Adobe je predstavil Flex 3.

B – 07. 05. 2008 – Sun je na konferenci JavaOne predstavil JavaFX aplikacijo

na osebnem računalniku in mobilnem telefonu.

C – 31. 07. 2008 – Sun je izdal predogled tehnologije JavaFX, ki je bila

namenjena razvijalcem, da se spoznajo z novimi koncepti, ki jih vpeljuje, ni pa

še bila namenjena komercialni uporabi.

D – 04. 12. 2008 – Uradna izdaja prve različice JavaFX 1.0.

E – 12. 02. 2009 – Uradna izdaja JavaFX Mobile.

F – 02. 06. 2009 – Sun je izdal različico JavaFX 1.2 in prikazal predogled

JavaFX TV. [14]


Zanimiv je tudi pogled na spisek desetih svetovnih regij, od koder je bilo izvedenih

največ poizvedb, točneje iz katerih svetovnih mest in v katerih jezikih. Spisek prikazuje

slika 4.6. [14]

Slika 4.6: Spisek svetovnih regij, mest in jezikov, v katerih je bilo največ poizvedb [14]

Presenetljivo je, da je bilo največ poizvedb sproţenih v »manj razvitih« drţavah,

Zdruţene Drţave in Japonska pa sta šele na petem oz. šestem mestu. Prva evropska drţava

pa je Romunija, in to šele na sedmem mestu lestvice.

Naslednja slika (slika 4.7) predstavlja število iskanj spletnih strani za prenos izvajalnih

okolij za naše tri tehnologije. [15]

Slika 4.7: Prikaz razširjenosti tehnologij za razvoj RIA [15]

Na tej sliki (slika 4.7) je vidna občutna prednost v razširjenosti platforme Flash, saj

Silverlight pokriva trenutno samo 6%, JavaFX pa zanemarljivo malo trga. [15]


4.3 Odločitveni model in ugotovitve

Odločitveni model

Pripravili smo odločitveni model, ki nam pomaga pri odločanju, katero tehnologijo

izbrati za razvoj RIA aplikacij na podlagi trenutnega stanja. Kriteriji, katere smo v

odločitvenem modelu upoštevali, so naslednji:

Medplatformna prenosljivost aplikacije

Hitrost izvajanja

Zahtevnost učenja za novega uporabnika

Priljubljenost tehnologije

Razširjenost tehnologije

Vse kriterije smo ocenjevali z naslednjimi tremi atributi. Spodaj imajo vsi pripisano

tudi zalogo vrednosti, katera mora biti seveda med 0 in 1, pri čemer je 1 največ in 0

najmanj.

Visoka (1,00)

Srednja (0,66)

Nizka (0,33)

Ta zaloga vrednosti je obratna edino pri kriteriju, ki opredeljuje zahtevnost učenja, saj

je bolje, če je ta zahtevnost čim niţja. Nato smo ocenili kriterijske vrednosti alternativ.

Ocena je bila podana na podlagi rezultatov opravljenih primerjanj in jo prikazuje tabela 8.

Tabela 8: Kriterijske vrednosti primerjanih alternativ za razvoj RIA aplikacij

Alternativa

Kriteriji

Prenosljivost

aplikacije

Hitrost

izvajanja

Zahtevnost

učenja

Priljubljenost

tehnologije

Razširjenost

tehnologije

Silverlight Nizka Visoka Nizka Visoka Srednja

Flex Srednja Nizka Nizka Visoka Visoka

JavaFX Visoka Visoka Nizka Srednja Nizka


Zatem smo izbranim kriterijem seveda morali podati tudi uteţi, ki predstavljajo, koliko

je določen kriterij pomemben pri odločanju, katero izmed tehnologij izbrati. Skupni

seštevek uteţi pa seveda mora biti 1. Tabela 9 prikazuje vrednosti uteţi kriterijev, kot smo

jih določili mi.

Tabela 9: Uteţi kriterijev

Skupaj

Kriteriji

Prenosljivost

aplikacije

Hitrost

izvajanja

Zahtevnost

učenja

Priljubljenost

tehnologije

Razširjenost

tehnologije

1,00 0,30 0,20 0,05 0,15 0,30

Ko smo imeli uteţi določene, smo lahko izračunali skupne koristnosti naših treh

alternativ. To smo opravili tako, da smo kriterijske vrednosti pomnoţili z vrednostjo uteţi

in vse sešteli.

Silverlight = 0,30 * 0,33 + 0,20 * 1,00 + 0,05 * 1,00 + 0,15 * 1,00 + 0,30 * 0,66

Flex = 0,30 * 0,66 + 0,20 * 0,33 + 0,05 * 1,00 + 0,15 * 1,00 + 0,30 * 1,00

JavaFX = 0,30 * 1,00 + 0,20 * 1,00 + 0,05 * 1,00 + 0,15 * 0,66 + 0,30 * 0,33

Dobljene skupne koristnosti naših alternativ prikazuje tabela 10.

Tabela 10: Dobljene skupne koristnosti naših treh alternativ

Alternative Koristnosti

Silverlight 0,697

Flex 0,764

JavaFX 0,748

Na sliki 4.8 je mogoče videti dobljene skupne koristnosti naših treh alternativ v obliki

grafa.


Slika 4.8: Grafična predstavitev dobljenih skupnih koristnosti

Odločitveni model nam je tako podal oceno vseh treh tehnologij na podlagi izbranih

kriterijev. Kot najracionalnejšo nam je ponudil Flex, naslednja je JavaFX, ki ne zaostaja

veliko, in kot zadnjo tehnologijo Silverlight.

Ugotovitve

Rezultati medplatformne prenosljivosti aplikacije kaţejo na očitno prednost

tehnologije JavaFX ţe sedaj, kljub temu da pri Sunu obljubljajo, da »prave stvari« šele

prihajajo. Pri Microsoftu so projekt Silverlight očitno vzeli resno, saj so začeli izdelovati

vtičnike tudi za druge operacijske sisteme in spletne brskalnike, česar navadno od tega

velikana nismo vajeni. Je pa verjetno, kar se tiče trenutne razširjenosti Flex, zaradi

platforme Flash še vedno vodilni, saj se njihovo izvajalno okolje Flash Player danes nahaja

na skoraj vseh računalniških sistemih in ima veliko privrţencev.

Hitro pa vidimo drugačno sliko, ko začnemo preučevati rezultate hitrosti izvajanja.

Tukaj je mogoče videti, da je Flash ţe mogoče nekoliko zastarel in zaradi tega hitrost

računanja operacij pri Flexu ni na ravni tehnologij Silverlight in JavaFX. Podobna slika se

prikaţe tudi pri hitrosti prikazovanja grafičnih elementov, saj se tehnologiji Silverlight in

JavaFX obneseta veliko bolje tudi ob prikazovanju velikega števila vektorskih elementov.


Povemo lahko, da je zahtevnost razvoja aplikacij po preizkusu pri vseh dokaj nizka. V

veliki meri je odvisno od samega razvijalca, koliko je seznanjen z določenimi ogrodji, saj

na primer Silverlight ohranja povezavo z aplikacijami .NET in s tem tudi način razvoja.

Skriptna jezika JavaFX Script in ActionScript sta zelo podobna, razlikuje pa se skriptni

jezik tehnologije Silverlight, ki tudi v tem pogledu ostaja zvest platformi .NET.

Pregled razširjenosti izvajalnih okolij teh treh tehnologij pokaţe, da ima Flash oz. Flex

občutno prednost, saj je izvajalno okolje Flash ţe zelo veliko časa na trgu. Priljubljenost

tehnologij za razvoj RIA pa je trenutno naklonjena Microsoft Silverlightu, vendar niti Flex

in niti JavaFX ne zaostajata veliko.

Odločitveni model, ki smo ga zgradili po izvedenih testiranjih in primerjavah, nam je

pokazal, da so vse tri tehnologije zelo izenačene, kar predstavlja seveda oviro pri izbiri

tehnologije, s katero ţelimo razviti določeno aplikacijo. Trenutno vodstvo izmed treh

ponujenih alternativ ima tehnologija Flex, kar je predvsem posledica trenutne razširjenosti

njenega izvajalnega okolja. Flex ima tako prednost pred ostalima alternativama, kljub

počasnejšemu izvajanju aplikacij. Počasnejše izvajanje bi v prihodnosti lahko za Flex

predstavljalo veliko oviro, saj je pričakovati, da bodo aplikacije vse bolj grafično in

računsko zahtevne. Kot druga izbira je bila izbrana tehnologija JavaFX, katera ima sicer

veliko višjo izvajalno hitrost, vendar predstavlja trenutna razširjenost njenega izvajalnega

okolja velik minus. Kot zadnja pa je bila izbrana tehnologija Silverlight. Največji minus pri

tej tehnologiji je njena trenutna moţnost prenašanja na različne platforme in tudi

razširjenost njenega izvajalnega okolja. Moţnost prenašanja na različne platforme se pri

Silverlightu lahko hitro poveča in tako bodo razlike med temi tremi alternativami še

manjše in tako izbira še teţja.


5 RAZVOJ JAVAFX APLIKACIJE

5.1 Osnovni opis

Aplikacija, katero bomo razvili, bo razvita v skladu z motom JavaFX tehnologije, in

sicer »type once, run everywhere« (napiši enkrat, poganjaj vsepovsod). Tako bo našo

razvito aplikacijo mogoče poganjati na različnih mobilnih napravah, različnih

računalniških sistemih in tudi kot spletno aplikacijo, katere podpira trenutna različica

JavaFX 1.2. Sama aplikacija bo poskušala predstaviti čim več elementov, katere vpeljuje

tehnologija JavaFX (deklarativno sintakso, data-binding, animacije, vizualne efekte in

podobne).

Aplikacija se bo vsebinsko nanašala na projekt razvoja Centra za duševno zdravje v

virtualnem svetu Second Life, katerega je razvila Skupina za razvoj virtualnih svetov s

Fakultete za elektrotehniko računalništvo in informatiko iz Maribora. Tako bo delovala kot

predstavitvena aplikacija virtualnega otoka Ozara- Wellness in mind in bo obenem tudi

omogočala srečevanje članov skupnosti Ozara - Wellness in mind.

5.2 Načrtovanje aplikacije

Aplikacijo bomo razvijali v razvijalnem okolju NetBeans IDE 6.5.1 z JavaFX 1.2

SDK. Za streţnik pa bomo uporabili brezplačen Apache Tomcat 6.0, ki je popolnoma

skladen z izbranim razvijalnim okoljem.

5.2.1 Diagram primerov uporabe

Uporabnik naše aplikacije bo lahko pogledal pisno predstavitev otoka Wellness in

mind, kakor tudi filme in slike virtualnega otoka. Ogledal si bo lahko tudi seznam aktivnih

članov skupnosti Ozara- Wellness in mind in nekaj podrobnosti o njih. Morebitni novi

interesenti se bodo lahko registrirali in tudi klepetali, kar pa bo seveda pogojeno z uspešno

prijavo v sistem. Po uspešni prijavi se bo lahko član pridruţil klepetu, spremenil svoje


uporabniške podatke in tudi odstranil svoj uporabniški račun v primeru, da se odloči

zapustiti skupnost. Vse opisane funkcionalnosti predstavlja diagram primerov uporabe

aplikacije na sliki 5.1.

Slika 5.1: Diagram primerov uporabe za aplikacijo »Ozara - Wellness in mind«

5.2.2 Razredni diagram

Slika 5.2 v nadaljevanju prikazuje razredni diagram naše aplikacije Ozara- Wellness in

mind.


Slika 5.2: Razredni diagram aplikacije »Ozara - Wellness in mind«


Datoteke, katere bo projekt glede na razredni diagram vseboval, so naslednje:

Main.fx – Vsebuje zagonsko funkcijo (funkcijo run()), preverjanje platforme, na

kateri se aplikacija izvaja, ter glavno okno.

Config.fx – Konstante, ki se razlikujejo glede na platformo, na kateri se aplikacija

izvaja.

MyScenes.fx – Glavna scena aplikacije in razdelitev glavnega okna na spremenljivi

del in meni aplikacije.

MyElements.fx – Glavni grafični elementi aplikacije (definirane barve, meni).

MyAnimations.fx – Vse animacije, povezane z aplikacijo (uvodna animacija,

prehodi …).

PredstavitevOzara.fx – Vsebina opisne predstavitve otoka Ozara - Wellness in

mind (Izbira menija 2).

PredstavitevClanov.fx – Predstavitve članov skupnosti in njihove podrobnosti,

registracija novega člana in prijava v klepet (Izbira menija 3).

Uporabniki.fx – Razredi uporabnikov, grafične predstavitve teh razredov ter

funkcije za delo z njimi (brisanje, dodajanje, spreminjanje).

Chat.fx – Prijavno okno v klepet in okno klepeta.

XMLPodatki.fx – Vsebuje funkcije za razčlenjevanje XML datotek, katere hranijo

vse podatke.

Slika.fx – Grafična predstavitev slik v aplikaciji in funkcije, ki jih nadzirajo.

Video.fx – Grafična predstavitev videov v aplikaciji in funkcije, ki jih nadzirajo.

5.2.3 Diagram zaporedja

Naslednja slika (5.3) prikazuje diagram zaporedja registracije novega člana skupnosti.

Pri tem diagramu je mogoče jasno videti način komunikacije s streţnikom in pridobitev ter

posodobitev XML dokumenta.


Slika 5.3: Diagram zaporedja registracije novega člana skupnosti Ozara - Wellness in mind

5.2.4 Shranjevan je podatkov o uporabnikih in zgodovini klepeta

Podatki o uporabnikih in klepetu se ne bodo shranjevali v podatkovni bazi, saj ţelimo

popolno skladnost aplikacije tudi z mobilnimi napravami, ki pa trenutno še niso zmoţne

upravljati s podatkovnimi bazami. Zaradi tega smo se odločili, da bomo vse podatke

shranjevali v datoteki formata XML, za katero bomo pripravili tudi ustrezno XML shemo.

Ta datoteka se bo nahajala na streţniku, od koder bo aplikacija prebirala podatke. Za tak

korak smo se odločil zato, da bodo vsi uporabniki aplikacije imeli na voljo vedno in

povsod podatke, ki bodo ustrezno aţurni.

Koncept XML sheme, ki bo definirala strukturo vozlišč XML dokumenta za

shranjevanje podatkov o uporabnikih prikazuje slika 5.4. Modro označen element na sliki

5.4 je korenski element XML dokumenta.


Slika 5.4: Koncept XML sheme, ki definira strukturo vozlišč XML dokumenta za

shranjevanje podatkov o uporabnikih

Slika 5.5 prikazuje koncept XML sheme, ki definira strukturo vozlišč XML

dokumenta za shranjevanje podatkov o zgodovini klepeta. Tudi na sliki 5.5 je element,

obarvan modro, korenski element XML dokumenta.


shranjevanje podatkov o zgodovini klepeta

Da bi aplikacija lahko normalno delovala, mora streţnik, na katerem se nahajajo

podatki, vsebovati neko skripto, ki sprejme podatke in ustrezno posodobi lokalne XML

datoteke. Seveda je onemogočeno neposredno oddaljeno pisanje v katerokoli datoteko na


streţniku, saj bi to predstavljalo preveliko varnostno groţnjo. Mi smo se odločili, da bomo

v ta namen napisali tudi naslednje Java Servlete:

DodajUporabnika.java – Kot atribute sprejme podatke novega uporabnika in ga

doda na konec v XML datoteko.

UpdateUporabniki.java – Kot atribute sprejme spremenjene podatke obstoječega

uporabnika. V datoteki XML poišče ID uporabnika in podatke ustrezno spremeni

oz. prepiše.

UpdateKlepet.java – Kot atribute sprejme nov vnos klepeta in ga doda na konec v

XML. Preveri tudi, ali je dolţina XML datoteke prevelika (preveč vnosov klepeta),

in ustrezno briše stare zapise klepeta.

Vsi napisani Java Servleti bodo morali po končanem posodabljanju datoteke XML

preveriti skladnost le-te z veljavno XML shemo, ki se prav tako mora nahajati na streţniku.

5.3 Implementacija

5.3.1 Definiranje osnovnih lastnosti in okna aplikacije

Glavna datoteka aplikacije Main.fx vsebuje zagonsko funkcijo run(). V JavaFX ta

funkcija ni obvezna, da prevajalnik lahko zaţene aplikacijo (obvezna je samo instanca

razreda Stage in določen glavni razred), vendar jo bomo vključili zaradi odločitve, da bo

aplikacija skladna tudi z mobilnimi napravami in tako na začetku izvajanja aplikacije lahko

preverimo tip naprave, na kateri se aplikacija trenutno izvaja. To se preveri preprosto na

način, kot ga prikazuje izvorna koda 41.

public def IS_MOBILE = FX.getProperty("javafx.me.profiles") != null;

Izvorna koda 41: Preverjanje tipa naprave, na kateri se izvaja aplikacija

Konstanta IS_MOBILE hrani vrednost true, če se aplikacija izvaja na mobilni

napravi oz. false v primeru, da se le-ta izvaja na računalniku oz. kot spletna aplikacija.

Glavno okno aplikacije predstavlja razred Stage. Tip okna (razred StageStyle)

aplikacije je neokrašen (UNDECORATED), kar pomeni, da je glavno okno brez morebitnega

okvirja, ki ga doda operacijski sistem. Izvorna koda 42 prikazuje zagonsko funkcijo

run() v datoteki Main.fx.


public var stage: Stage;

function run()

{

stage = Stage {

title: Config.naslovAplikacije // naslov aplikacije

width: Config.sirinaOkna // sirina glavnega okna aplikacije

height: Config.visinaOkna // visina glavnega okna aplikacije

resizable: false // velikosti okna ni mogoce spreminjati

opacity: bind MyAnimations.prosojnostOkna // prosojnost okna

style: StageStyle.UNDECORATED // vrsta okna

scene: bind trenutnaScena // scena okna

}

}

Izvorna koda 42: Zagonska funkcija run() v datoteki Main.fx

Iz izvorne kode zgoraj (izvorna koda 42) je razvidno, da smo vse konstante definirali v

datoteki Config.fx. To se vidi v primeru nastavljanja naslova okna (title:

Config.naslovAplikacije). Za tak korak smo se odločili zaradi večjega pregleda

nad konstantami, ki se razlikujejo v primeru, da se aplikacija izvaja na mobilni napravi.

Izsek izvorne kode iz datoteke Config.fx prikazuje izvorna koda 43.

public def isMobile: Boolean = bind Main.IS_MOBILE;

public def naslovAplikacije: String = "Wellness in mind";

public def visinaOkna: Number = bind if (isMobile) 320 else 700;

public def sirinaOkna: Number = bind if (isMobile) 240 else 800;

Izvorna koda 43: Izsek iz datoteke Config.fx

Vrednost konstante lahko preprosto nastavimo z enim if stavkom, ki preveri, če se

aplikacija izvaja na mobilni napravi (izvorna koda 41 prikazuje, kako dobimo in v

spremenljivko shranimo vrednost Boolean, ki pomeni vrsto naprave, na kateri izvajamo

aplikacijo) in ustrezno nastavi vrednosti. NetBeans IDE verzije 6.5.1 z JavaFX 1.2 SDK

ima za operacijski sistemu Windows prirejen emulator izvajanja aplikacije na mobilni

napravi. Tako lahko med razvijanjem preprosto preverjamo tudi, kako se ta obnaša na

mobilni napravi.

Glavna scena aplikacije je sestavljena iz dveh poglavitnih delov, ki sta razvrščena v

VBox razporeditvi. Zgornji del poimenujmo »delavni« del okna, spodnji pa »meni«.

Izvorna koda 44 prikazuje razvito glavno sceno aplikacije.


public var osnovnaScena = Scene { // nasa osnovna scena

content: [

// ***** osnovni kvadrat, ki predstavlja okno

MyElements.osnovniKvadratOkna,

// ***** gradienta zgoraj in spodaj

MyElements.osnovniKvadratZgornji,

MyElements.osnovniKvadratSpodnji,

// ***** dejanska vsebina okna - zgornji "delavni" del aplikacije

Group {

content: bind [

MyElements.trenutniZgornjiGroup,

]

}

MyElements.spodnjiMeni

]

}

Izvorna koda 44: Glavna scena aplikacije »Ozara - Wellness in mind«

5.3.2 Prehodi in animacije

Vsebina delavnega dela okna se spreminja v skladu z uporabnikovo izbiro menija, tako

da se spremenljivki trenutniZgornjiGroup, ki je tipa Group, priredi nova skupina

Group. Za boljšo predstavo prikaţimo postopek na izseku izvorne kode 45, ki je iz

aplikacije. Vzemimo, da se trenutno nahajamo na prvi strani aplikacije

(trenutniZgornjiGroup = prvaStran). Ob kliku na gumb izbire menija

»Predstavitev otoka Ozara - Wellness in mind«, se proţi naslednja (izvorna koda 45)

funkcija.

onMouseReleased: function( e: MouseEvent ):Void { // po kliku na ta gumb

barvaGumba[1] = barvaGumbov;

if (MyAnimations.zacetnaAnimacijaPoteka) {

MyAnimations.seqTranPrvaStran.pause();

}

var prejsnjaSkupina = trenutniZgornjiGroup;

MyAnimations.tranzicijeAdijoZdravo(prejsnjaSkupina,

predstavitevGroup);

}

Izvorna koda 45: Spreminjanje »delavnega« dela aplikacijskega okna

Po kliku se najprej barva gumba nastavi na privzeto. To je potrebno, saj smo zaradi

večje animiranosti aplikacije barvo in velikost gumba spreminjali glede na pozicijo

miškinega kazalca (večja bogatost aplikacije). Nato preverimo, ali se začetna animacija še

vedno predvaja. To je animacija prve strani, ki se izvede enkrat, in sicer takrat, ko

aplikacijo zaţenemo. V primeru, da ta še teče, se naredi premor te animacije, katera se


nadaljuje. če se kasneje uporabnik vrne na prvo stran. Zatem shranimo trenutno prikazano

skupino v novo spremenljivko in poţenemo animacijo, ki trenutno prikazano skupino

skrije in prikaţe novo skupino. Funkcijo, ki animira prehod med skupinami, prikazuje

izvorna koda 46.

public function tranzicijeAdijoZdravo (skupinaAdijo: Group,

skupinaZdravo: Group){ // funkcija animira prehod med stranmi

SequentialTransition {

content: [

FadeTransition { // najprej zatemnimo trenutno stran

node: skupinaAdijo

duration: 1.0s

fromValue: 1.0

toValue: 0.0

},

PauseTransition {// 0.05s premor, da lahko zamenjamo stran

duration: 0.05s


MyElements.trenutniZgornjiGroup = skupinaZdravo;

}

}

FadeTransition { // nato pa novo stran počasi prikažemo

node: skupinaZdravo

duration: 1.0s

fromValue: 0.0

toValue: 1.0

},

]

}.playFromStart();

}

Izvorna koda 46: Animiranje prehoda med dvema skupinama (Group) v aplikaciji

Funkcija, ki animira prehod, sprejme dva argumenta, in sicer stran, katero zapuščamo,

in stran, katero odpiramo. Animacija se izvede v treh korakih s pomočjo razreda

SequentialTransition, ki izvede definirane animacije (te animacije so vgrajene in

se nahajajo v paketu javafx.animation.transition) zaporedoma. V prvem

koraku uporabimo FadeTransition, ki postopno zatemni oz. posvetli vozlišče,

katerega podamo spremenljivki node. Mi torej najprej zatemnimo vozlišče

skupinaAdijo, ki hrani trenutno prikazano stran. Nato animacijo ustavimo za 0,05

sekunde in v tem času priredimo spremenljivki, ki kaţe trenutno stran, novo izbrano. Tukaj

se dejansko izvede menjava strani, vendar je uporabnik ne vidi, saj je ta trenutek stran

zatemnjena. Naj tukaj opomnimo, da se sprememba vrednosti spremenljivke, ki kaţe

trenutno prikazano stran, takoj pozna na grafičnem uporabniškem vmesniku, saj je le-ta

vezana na delovni del okna z uporabo ključne besede bind. V primeru, da temu ne bi bilo

tako, se sprememba vrednosti spremenljivke ne bi poznala. V zadnjem koraku pa se nova


prikazana stran počasi posvetli in tako jo uporabnik lahko vidi. Funkcija

playFromStart() poţene to animacijo. Slika 5.6 pa prikazuje opisano animacijo

prehoda med okni. Animacija poteka, kot kaţejo slikice, od leve zgoraj naprej.

Slika 5.6: Prikaz poteka animacije prehajanja med okni

Tukaj smo prikazali uporabo vgrajenih animacij, katere smo v razviti aplikaciji tudi

uporabili. Te vgrajene animacije pa niso vse, kar JavaFX ponuja. Ponuja namreč tudi

izdelavo popolnoma svojih animacij s pomočjo razreda Timeline. Mi smo v razviti

aplikaciji napisali več svojih animacij, spodaj zapisana (izvorna koda 47) pa animira

prehod med stranmi predstavitve otoka Ozara - Wellness in mind.

var timelineNaprej : Timeline = Timeline {

keyFrames: [

KeyFrame { // v prvem delu se nastavi začetni odmik na trenutnega

time: 0s

values: [ odmik => trenutniOdmik ]


animacijaTece = true; // zastavica, da animacija tece

}

},

KeyFrame { // v drugem delu se odmakne naprej za sirino okna

time: 2s

values: [ odmik => (trenutniOdmik - Config.sirinaOkna) tween

Interpolator.EASEBOTH ]


trenutniOdmik = odmik; // shrani se trenutni odmik

trenutnaStran++; // poveca se stran za 1


animacijaTece = false; // zastavica, da animacija ne tece

}

}

]

}

Izvorna koda 47: Lastna razvita animacija z uporabo razreda Timeline

Razvita animacija traja dve sekundi. Ob proţenju v ničti sekundi izvajanja animacije

priredi spremenljivki odmik vrednost spremenljivke trenutniOdmik, ki beleţi trenutni

odmik oz. pozicijo strani (ta ima ob prvem proţenju vrednost 0). Ob tem nastavi tudi

zastavico, da animacija teče, kar pomaga, da ne bi pomotoma dvakrat zagnali animacije,

kar bi privedlo do napake v prehodu. Ko se čas izvajanja animacije premika od nič sekund

proti dvema sekundama, se ţe izvaja drugi KeyFrame in tako vrednost spremenljivke

odmik počasi pribliţuje vrednosti trenutniOdmik – Config.sirinaOkna. Ko

sta dve sekundi poteka animacije pošli, se nastavi nov trenutni odmik. Zastavica, ki beleţi

trenutno stran, se poveča za ena, in zastavica, ki označuje, da animacija teče, se označi s

false, kar nam pove, da je izvajanje animacije končano. Potek te animacije prikazuje

tudi slika 5.7. Animacija se prične izvajati ob kliku na puščico levo in se izvaja skladno s

sličicami od leve proti desni.

Slika 5.7: Prikaz poteka animacije prehajanja med okni s spreminjanjem koordinat

5.3.3 Definiranje svojih vozlišč in vključevanje medijskih vsebin

JavaFX ponuja nekatera ţe vnaprej pripravljena grafična vozlišča (Rectangle,

Circle …), vendar je priporočljivo, da za kompleksnejši prikaz določenega elementa

ustvarimo svoje vozlišče. Ta koncept smo v naši aplikaciji uporabili za prikaz


uporabnikov, slik in videov. Primer uporabe razreda CustomNode za prikaz registriranih

uporabnikov prikazuje izvorna koda 48.

public class Uporabnik extends CustomNode {

. . .

var mouseLocX = 0.0; // trenutna x in y lokacija miške

var mouseLocY = 0.0;

. . .

public var ime: String on replace {// shrani ime uporabnika v Text

imeUporabnika.content = ime;

}

. . .

override function create() : Node {

cursor = Cursor.HAND; // ob lebdenju je kurzor v obliki roke

var mejniKvadrat = Rectangle { // mejni kvadrat predogleda

. . .

}

groupPodrobnosti = Group { // skupina podrobnosti uporabnika

. . .

}

nastaviLokacijo(); // nastavi lokacijo temu Node-u

Group {

content: [ mejniKvadrat, imeUporabnika, slikaUporabnikaView,

groupPodrobnosti]

}

}

// funkcija se proži ob kliku na ta Node

override var onMouseClicked = function(e : MouseEvent) {

mouseLocX = e.x;// v spremenljivki mouseLocX in Y shranimo

mouseLocY = e.y;// trenutno lokacijo kurzorja

MyAnimations.prikazPodrobnostiUporabnika(this.groupPodrobnosti);

}

// funkcija se proži, ko kurzor zapusti ta Node

override var onMouseExited = function(e : MouseEvent) {

if (podrobnostiPrikazane) { // če so podrobnosti prikazane

MyAnimations.izbrisPodrobnostiUporabnika(this.groupPodrobnosti);

. . .

}

}

// funkcija nastavi lokacijo trenutnemu Node-u

function nastaviLokacijo() {

. . .

}

}

Izvorna koda 48: Primer uporabe lastnega vozlišča, izpeljanega iz razreda CustomNode

Osnutek našega posebnega vozlišča prikazuje zgornja izvorna koda 48. Naredili smo

svoj razred, ga imenovali Uporabnik, ki je izpeljan iz razreda CustomNode. Potem ko

dedujemo od tega razreda (extends), moramo prepisati konstruktor vozlišča, funkcijo


create(). Ta funkcija mora vračati katerikoli razred, izpeljan iz razreda Node (GUI

vozlišča). V našem primeru vrne razred Group, ki vsebuje obrobe, imena uporabnika,

slike uporabnika ter podrobnosti, ki pa so trenutno še nevidne. Prav tako smo prepisali

funkcijo onMouseClicked, ki se proţi ob miškinem kliku na to vozlišče. Torej, ob

miškinem kliku se dobi trenutna lokacija miškinega kazalca in se ta vrednost prišteje

poziciji skupine za prikaz podrobnosti. Nato se ta animirano prikaţe. V primeru, da pa

zapustimo to vozlišče (onMouseExited), pa se preveri, če so podrobnosti prikazane, in

če so, se kliče funkcija, ki animira izbris skupine podrobnosti. Slika 5.8 prikazuje celotni (z

izpisanimi tudi podrobnostmi) CustomNode, ki smo ga tukaj opisali.

Slika 5.8: Izdelan razred Uporabnik, izpeljan iz razreda CustomNode

Tudi medijske vsebine (slike, videi) smo vključili v predstavitvi otoka Ozara -

Wellness in mind. Tako slike kot tudi videe smo definirali kot svoja vozlišča

CustomNode in jim tako dali obrobe oz. dodatne grafične učinke. Naslednji izsek izvorne

kode 49 prikazuje definicijo svojega vozlišča z vključeno medijsko vsebino slika.

public class VzorcnaSlika extends CustomNode {

. . .

public var imageView = ImageView {

x: 2

y: 2


fitWidth: bind (sirina - 4)

fitHeight: bind (visina - 4)

preserveRatio: true

};

. . .

public var slikaUrl : String on replace {

if(slikaUrl != null) {

imageView.image = Image {

url: slikaUrl

backgroundLoading: true

}

visible = false;

}

}

. . .

override function create() : Node {

var mejniKvadrat = Rectangle { . . . }

return Group {

content: [ mejniKvadrat, imageView ]

}

}

}

Izvorna koda 49: Primer uporabe lastnega vozlišča za prikaz slike

Razred VzorcnaSlika predstavlja sliko, katera ima grafično tanek bel okvir. Sliko

v JavaFX Script predstavlja razred Image, katerega moramo dodati atributu image,

razreda ImageView. Razred ImageView predstavlja vozlišče, katerega lahko dodamo v

vsebino razreda Scene in ga tako prikaţemo. Atribut razreda VzorcnaSlika

slikaUrl predstavlja String poti do slike, ki je lahko na spletu ali pa lokalno.

Podobne razrede uporabljamo tudi za uvaţanje videov, kot prikazuje izsek izvorne kode 50

spodaj.

public var video: Media;

var mPlayer = MediaPlayer { // naš medijski predvajalnik

media: bind video

}

MediaView { // prikaz medija

preserveRatio: true

mediaPlayer: bind mPlayer // naš medijski predvajalnik za ta Node

cursor: bind miska // oblika kurzorja ob lebdenju nad videom

fitHeight: Config.visinaVidea

fitWidth: Config.sirinaVidea

},

Izvorna koda 50: Razredi, potrebni za prikaz video vsebine v aplikaciji

Razred Media vsebuje atribut source, ki hrani pot do videa kot String. Ta pot je

podobno kot pri razredu Image lahko spletni naslov ali pa lokalni. Razred

MediaPlayer predstavlja medijski predvajalnik videa in vsebuje funkcije, kot so


play(), pause() in stop(), katere nadzirajo predvajanje videa. Te funkcije lahko

proţimo preprosto, na primer ob kliku na MediaView (mPlayer.play()). Podobno

vlogo, kot jo ima razred ImageView za prikazovanje slik, ima razred MediaView za

prikazovanje videov.

5.3.4 Delo s podatki in povezovanje s streţnikom

Vse podatke o uporabnikih, kakor tudi zgodovino klepeta, hranimo v obliki XML za

katero smo seveda napisali tudi ustrezno XML shemo, ki definira elemente XML

dokumenta. Shemo za XML s podatki o uporabnikih prikazuje izvorna koda 51.

<?xml version="1.0" encoding="UTF-8"?>

<xs:schema xmlns:xs="http://www.w3.org/2001/XMLSchema"

xmlns="http://www.wellnessinmind.org/"

targetNamespace="http://www.wellnessinmind.org/"

elementFormDefault="qualified" attributeFormDefault="unqualified">

<xs:element name="wellness_in_mind">

<xs:complexType>

<xs:sequence>

<xs:element name="uporabniki" maxOccurs="1">

<xs:complexType>

<xs:sequence>

<xs:element name="uporabnik" maxOccurs="unbounded">

<xs:complexType>

<xs:sequence>

<xs:element name="ime" type="xs:string"/>

<xs:element name="priimek" type="xs:string"/>

<xs:element name="geslo" type="xs:string"/>

<xs:element name="email" type="xs:string"/>

<xs:element name="spol" type="xs:string"/>

<xs:element name="clanOd" type="xs:string"/>

<xs:element name="skupina" type="xs:string"/>

<xs:element name="slika" type="xs:string"/>

</xs:sequence>

<xs:attribute name="id" type="xs:int"

use="required"/>

</xs:complexType>

</xs:element>

</xs:sequence>

</xs:complexType>

</xs:element>

</xs:sequence>

</xs:complexType>

</xs:element>

</xs:schema>

Izvorna koda 51: XML shema, ki definira elemente XML dokumenta z uporabniki

Korenski element se imenuje wellness_in_mind, ki pa vsebuje element

uporabniki. V tem elementu se lahko večkrat pojavi element uporabnik, ki vsebuje

atribut id in elemente ime, priimek, geslo, spol, clanOd, skupina in slika.


Gesla seveda zaradi varnosti ne smemo hraniti zapisanega nešifriranega, ampak je bolje, če

hranimo njegovo sekljano vrednost. To lahko dobimo s klicem funkcije hashCode(), ki

je ţe vgrajena v JavaFX Script in vrne sekljano vrednost spremenljivke, nad katero smo

funkcijo klicali.

Ob branju podatkov iz streţnika to datoteko XML najprej dobimo preko podatkovnega

toka s pomočjo razreda HttpRequest, kateri se nahaja v paketu java.io.http. S

pomočjo tega razreda lahko preprosto prebiramo podatke s streţnika (seveda, če imamo

dovoljenje za dostop do streţnika), kot prikazuje izsek izvorne kode 52.

var requestUpError = false;

HttpRequest {

location: Config.lokacijaUporabnik

method: HttpRequest.GET

onStarted: function () {

println("Zacel http GET");

}

onDoneConnect: function () {

println("Uspesno dostopil do lokacije");

}

onException: function (exception: Exception) {

println( "Prislo je do napake pri povezavi!! Preverite povezavo"

"in poskusite znova!!\nNapaka: {exception.getMessage()}");

requestUpError = true;

}

onInput: function (input: java.io.InputStream) {

try {

var uporabnikParser = XMLPodatki.UporabnikParser{};

vsiUporabniki = uporabnikParser.parseUporabnik(input);

}

finally {

input.close();

}

}

onDone: function () {

if (not requestUpError) {

lokacijeXIzpisImeUporabnik = poljeXClani(vsiUporabniki);

updateUporabnike();

println("Uspesno nalozil uporabnike!!");

}

}

}.start();

Izvorna koda 52: Povezava s streţnikom, kjer se nahajajo podatki

Razredu HttpRequest nastavimo lokacijo, na katero se naj poveţe (v našem

primeru imamo lokacijo definirano v datoteki Config.fx), in metodo povezave. Metoda

povezave je lahko GET (dobimo podatke) ali POST (pošljemo podatke). V tem primeru

seveda ţelimo prebrati podatke o obstoječih uporabnikih in zato seveda izberemo metodo


HttpRequest.GET. Naslednji dogodki se proţijo, ko zahteva preide v določeno stanje,

in sicer:

onStarted – zahteva se prične izvajati

onDoneConnect – povezava je uspešno vzpostavljena

onException – med izvajanjem zahteve pride do izjeme

onInput – ob pridobljenem vhodnem toku

onDone – izvajanje zahteve je zaključeno

Pri vsakem izmed dogodkov v našem primeru izpišemo na konzolo trenutno stanje

zahteve. Pomemben dogodek pri prebiranju podatkov je seveda onInput. Tukaj

preberemo vhodni tok, ki ga je potrebno na koncu obvezno tudi zapreti. Funkcija

start(), ki jo kličemo na koncu, poţene HTTP zahtevo. Spremeljivka

requestUpError hrani vrednost Boolean, ki nam pove, ali je pri izvajanju HTTP

zahteve prišlo do izjeme.

Zgoraj smo predstavili, kako s pomočjo HTTP zahteve dobimo podatke iz streţnika za

našo aplikacijo. Prebrani podatki so v našem primeru v obliki XML in, da bi jih lahko

uspešno uporabili, jih lahko razčlenimo z uporabo razreda PullParser, ki je v paketu

java.data.pull. Kako smo ta razred uporabili v naši aplikaciji, prikazuje izvorna

koda 53 spodaj.

public function parseUporabnik(input: InputStream) :

Uporabniki.UporabnikWIM[] {

var uporabniki: Uporabniki.UporabnikWIM[];

var upo: Uporabniki.UporabnikWIM;

PullParser {

documentType: PullParser.XML;

input: input

onEvent: function (e: Event) { // dogodek ob prebranem elementu

if (e.type == PullParser.START_ELEMENT) {

if (e.qname.name == "uporabnik" and e.level == 2) {

upo = Uporabniki.UporabnikWIM { };

upo.id = Integer.parseInt(e.getAttributeValue("id"));

}

}

else {

if (e.type == PullParser.END_ELEMENT) {

if(e.qname.name == "uporabnik" and e.level == 2) {

insert upo into uporabniki;

} else

if (e.qname.name == "ime" and e.level == 3) {

upo.ime = e.text;

} else

if (e.qname.name == "priimek" and e.level == 3) {


upo.priimek = e.text;

} else . . .

}

}.parse(); // sprožimo razčlenjevanje datoteke

return uporabniki; // funkcija vrne polje prebranih uporabnikov

}

Izvorna koda 53: Razčlenjevanje datoteke XML z uporabo razreda PullParser

Razredu PullParser je najprej potrebno nastaviti tip dokumenta, ki ga bo

razčlenjeval (ta lahko trenutno razčlenjuje datoteke formata XML ali JSON ). To je v

našem primeru seveda XML, ki ga dobimo na vhodnem toku input. Ob vsakem

prebranem elementu se proţi funkcija onEvent, v kateri preverjamo, kateri XML element

je bil prebran. Če je bil prebran začetni element <uporabnik>, potem ustvarimo novo

instanco razreda UporabnikWIM ter ji v nadaljevanju nastavljamo vrednosti elementov,

ki so zatem prebrani. Če pa je bil prebran končni element </uporabnik>, pomeni, da

smo prebrali vse elemente tega uporabnika in uporabnik shranimo v polje objektov

uporabniki. Ta postopek se nato ponavlja, dokler PullParser ne prebere in vstavi

vseh uporabnikov.

Dodajanje novega uporabnika v datoteko XML je zaradi tega, ker se ta nahaja na

streţniku, malenkost teţja naloga. Seveda je onemogočeno neposredno pisanje v datoteko s

pomočjo razreda HttpRequest in metode HttpRequest.POST, saj bi omogočeno

tako pisanje predstavljalo velik varnostni problem. Za rešitev tega smo na streţnik

namestili preprost Java Servlet, ki sprejme podatke novega uporabnika in le-tega nato doda

v datoteko. Programska koda Servleta je prikazana in opisana kot izvorna koda 54.

public class DodajUporabnika extends HttpServlet {

protected void processRequest(HttpServletRequest request,

HttpServletResponse response) throws ServletException, IOException

{

response.setContentType("text/html;charset=UTF-8");

PrintWriter out = response.getWriter();

try {

String vsebinaXMLUporabniki = "";

BufferedReader br = null;

String potXML="D:\\Diploma\\Aplikacija\\apache-tomcat-6.0.20"

+ "\\webapps\\ROOT\\podatki\\";

File xmlUporabniki = new File(potXML + "uporabniki.xml");

try {

String koncniTag ="</uporabniki>\n</wellness_in_mind>\n";

br = new BufferedReader(new FileReader(xmlUporabniki));

while (br.ready()) {


vsebinaXMLUporabniki += br.readLine() + "\n";

}

vsebinaXMLUporabniki = vsebinaXMLUporabniki.substring(0,

vsebinaXMLUporabniki.length() - koncniTag.length());

String id = "";

String ime = "";

String priimek = "";

String geslo = "";

String email = "";

String spol = "";

String clanOd = "";

String skupina = "";

String slika = "";

int i = request.getParameterMap().size();

if (i != 0) {

Enumeration paramNames = request.getParameterNames();

while (paramNames.hasMoreElements()) {

String param = (String)paramNames.nextElement();

if (param.equals("id")) {

id = request.getParameter(param);

}

else if (param.equals("ime")) {

ime = request.getParameter(param);

}

else if (param.equals("priimek")) {

priimek=request.getParameter(param).replaceAll("%20","");

}

else if (param.equals("geslo")) {

geslo=request.getParameter(param).replaceAll("%20", "");

}

else if (param.equals("email")) {

email=request.getParameter(param).replaceAll("%20", "");

}

else if (param.equals("spol")) {

spol=request.getParameter(param).replaceAll("%20", "");

}

else if (param.equals("clanOd")) {

clanOd=request.getParameter(param).replaceAll("%20", "");

}

else if (param.equals("skupina")) {

skupina=request.getParameter(param).replaceAll("%20","");

}

else if (param.equals("slika")) {

slika=request.getParameter(param).replaceAll("%20", "");

}

}

}

String novUporabnikXML = "<uporabnik id='" + id + "'>\n" +

"<ime>" + ime + "</ime>\n" +

"<priimek>" + priimek + "</priimek>\n" +

"<geslo>" + geslo + "</geslo>\n" +

"<email>" + email + "</email>\n" +

"<spol>" + spol + "</spol>\n" +

"<clanOd>" + clanOd + "</clanOd>\n" +

"<skupina>" + skupina + "</skupina>\n" +

"<slika>" + slika + "</slika>\n" +

"</uporabnik>\n";

vsebinaXMLUporabniki += novUporabnikXML + koncniTag;


out.print(vsebinaXMLUporabniki);

}

catch (IOException ioe) {

out.write("OPOZORILO!\n\n");

out.write("Prislo je do nepricakovane napake, prosim" +

"poskusite kasneje.\n\n");

out.write("Napaka:\n");

out.write(ioe.getMessage());

}

finally {

br.close();

}

BufferedWriter bw = null;

try {

bw = new BufferedWriter(new FileWriter(xmlUporabniki));

bw.write(vsebinaXMLUporabniki);

}

catch (IOException ioe) {

out.write("OPOZORILO!\n\n");

out.write("Prislo je do nepricakovane napake, prosim" +

"poskusite kasneje.\n\n");

out.write("Napaka:\n");

out.write(ioe.getMessage());

}

finally {

bw.close();

}

} finally {

out.close();

}

}

Izvorna koda 54: Java Servlet, ki doda novega uporabnika v XML datoteki

Servlet zgoraj (izvorna koda 54) ob proţenju najprej prebere datoteko (ta se v tem

primeru nahaja na streţniku, kjer se nahaja tudi Servlet), ki vsebuje podatke registriranih

uporabnikov in vsebino shrani v spremenljivko vsebinaXMLUporabniki (ta je

podatkovnega tipa String). Nato prebere vse parametre, ki so bili podani ob proţenju

Servleta, ter jih shrani v ustrezne spremenljivke. Kako se podajajo parametri preko URL

naslova, definira seveda W3C konzorcij. Vse parametre, podane ob klicu Servleta, dobimo

s klicem funkcije request.getParameterNames(). Vrednosti teh parametrov pa s

klicem funkcije request.getParameter(ime_parametra). Argument

ime_parametra pri tem predstavlja ime parametra, katerega vrednost ţelimo dobiti. Ob

tem še s funkcijo replaceAll() zamenjamo vse znake '%20', saj pred pošiljanjem

zahteve vse presledke spremenimo v '%20' zaradi skladnosti URL naslova z W3C

standardom. Ko dobimo vse potrebne parametre, shranimo le-te v obliko zapisa XML

(spremenljivka novUporabnikXML) in to pripišemo spremenljivki


vsebinaXMLUporabniki, ki hrani trenutno vsebino datoteke XML. Po končanem

dodajanju je potrebno, da novega uporabnika dejansko zapišemo v datoteko, kar pa storimo

s pomočjo razreda BufferedWriter in funkcije write(). Na enak način zapišemo

tudi Servlet za posodabljanje podatkov uporabnika, vendar samo z razliko, da uporabnika

ne dodamo na konec datoteke, ampak najprej poiščemo uporabnika z določenim ID-jem in

mu nato prepišemo podatke. Ko je dodajanje novega ali posodabljanje določenega

uporabnika končano, je pomemben tudi naslednji korak, in sicer potrjevanje skladnosti

XML dokumenta z napisano XML shemo. Izvorna koda 55 prikazuje, kako to storimo mi.

String lokacijaFactory = "http://www.w3.org/2001/XMLSchema";

SchemaFactory factory = SchemaFactory.newInstance(lokacijaFactory);

File lokacijaXSD = new File(potXML + "XMLSchemaPodatki.xsd");

try {

Schema schema = factory.newSchema(lokacijaXSD);

Validator valid = schema.newValidator();

Source vir = new StreamSource(potXML + "uporabniki.xml");

valid.validate(vir);

}

catch (SAXException ex) {

out.write("Napaka v potrjevanju XML dokumenta!! ... " +

ex.getMessage());

}

Izvorna koda 55: Potrjevanje skladnosti XML dokumenta z ustrezno XML shemo

Izvorna koda 55, zapisana zgoraj, najprej našo shemo, ki jo definiramo v datoteki

lokacijaXML, prevede, kar pa lahko seveda privede do izjeme SAXException v

primeru, če naša shema ni skladna s standardom, ki definira obliko XML sheme. Zatem

ustvarimo nov potrjevalnik ustreznosti z XML shemo, ki je v našem primeru poimenovan

valid. Nato razčlenimo dokument, ki ga ţelimo preveriti (Source). Zatem samo še

preverimo skladnost našega XML dokumenta z napisano XML shemo (funkcija

valid.validate(vir)).

Servlet za dodajanje novega uporabnika proţimo prav tako s pomočjo razreda

HttpRequest, vendar v tem primeru uporabimo metodo POST, kot prikazuje spodnji

izsek izvorne kode 56.

location: bind "{Config.lokacijaServletDodajU}"

"{shraniUporabnik(vsiUporabniki)}"

method: HttpRequest.POST

Izvorna koda 56: Pošiljanje HttpRequest zahteve Java Servletu na streţniku


Servlet se nahaja na lokaciji, ki je zapisana v spremenljivki

lokacijaServletDodajU. K samemu URL naslovu ob klicu Servleta pa mi dodamo

še parametre in njihove vrednosti novega uporabnika, katere nam vrne naslednja funkcija,

vidna kot izvorna koda 57.

public function shraniUporabnik(uporabniki: Uporabniki.UporabnikWIM[]) :

String

{

var upor: Uporabniki.UporabnikWIM = uporabniki[uporabniki.size() - 1];

return zamenjajVse("?id={upor.id}&ime={upor.ime}&priimek={upor.priimek}"

"&geslo={upor.geslo}&email={upor.email}&spol={upor.spol}"

"&clanOd={upor.clanOd}&skupina={upor.skupina}"

"&slika={upor.slikaUp}", " ", "%20");

}

Izvorna koda 57: Funkcija, ki vrača parametre za pošiljanje le-teh preko URL naslova

Funkcija, katero prikazuje izvorna koda 57, kot argument sprejme vse registrirane

uporabnike in zato najprej izloči zadnjega registriranega, ki se nahaja na zadnjem mestu v

polju. Nato vrne kot String zapisano zaporedje parametrov, katere lahko nato pošljemo

Servletu na streţniku. Funkcija zamenjajVse() naredi popolnoma enako kot funkcija

replaceAll(), in smo jo v naši aplikaciji morali napisati sami, saj API profil common

ne vsebuje funkcije replaceAll() in tako aplikacije ne bi mogli zaganjati tudi na

mobilnih napravah.

5.4 Predstavitev aplikacije

Aplikacijo, ki smo jo razvili, smo poimenovali »Ozara - Wellness in mind«. Namen

aplikacije je predstavitev otoka, ki ga je v virtualnem svetu Second Life vzpostavila

Skupina za razvoj virtualnih svetov s Fakultete za elektrotehniko, računalništvo in

informatiko, katere koordinator je bil Iztok Hafner pod vodstvom dr. Matjaţa B. Juriča.

Aplikacija pa poleg same predstavitve virtualnega otoka omogoča pregled registriranih

članov skupnosti Ozara - Wellness in mind, registracijo novih članov ter moţnost klepeta

obstoječih.

Ko se aplikacija zaţene, se uporabniku prikaţe glavno okno aplikacije, kot prikazuje

slika 5.9. Na podsliki a) na sliki 5.9 je predstavljena aplikacija, katera je zagnana na

osebnem računalniku, pod podsliko b) pa popolnoma enaka aplikacija, zagnana s pomočjo

emulatorja mobilne naprave.


Slika 5.9: Osnovno okno aplikacije na: a) osebnem računalniku, b) mobilni napravi

Osnovno okno ob zagonu animirano postopno prikaţe vsebino. Uporabnik ima nato v

spodnjem delu na voljo šest izbir menija. Ob premikanju miške čez te gumbe se trenutno

označen gumb poveča in spremeni barvo. Pod gumbi se izpiše tudi naslov strani, na katero

nas preusmeri ob kliku nanj. Skladno s trenutnim gumbom se za malenkost povečajo tudi

sosednji gumbi, kar pripomore k občutku, da je meni »ţiv«. Slika 5.10 prikazuje obliko

gumba ob premikanju čez njega.

Slika 5.10: Animirani meni aplikacije na: a) osebnem računalniku, b) mobilni napravi


Prvi gumb v vrsti nam odpre prvo stran, ki se prikaţe tudi ob zagonu aplikacije. Ob

kliku na drugi gumb odpremo stran z opisno predstavitvijo otoka in njegovih razvijalcev.

Izbira menija tri odpre stran z registriranimi člani skupnosti. Tam se ob kliku na člana

odprejo podrobnosti o njem, kot so: v katero podskupino je včlanjen, kako dolgo je ţe član,

njegov e-poštni naslov in podobne. Na tej strani se lahko registrirajo tudi novi člani in

obstoječi člani prijavijo v klepet. Ob prijavi člana v klepet se mu ponudi tudi moţnost

prekinitve članstva v skupnosti, spremembe uporabniških podatkov in odjave iz klepeta,

kar prikazuje slika 5.11.

Slika 5.11: Klepet na: a) osebnem računalniku, b) mobilni napravi

Ob kliku na četrti gumb menija se nam odpre stran s slikami iz virtualnega otoka Ozara

- Wellness in mind. Slike se ob nalaganju strani naključno razvrstijo in zavrtijo po oknu in

tako dajejo vtis »razmetanosti«. V primeru, da miškin kazalec pomaknemo na eno izmed

slik, se ta zavrti nazaj, tako da je pravilno obrnjena. Na sliko lahko kliknemo in sliko

poljubno vlečemo po oknu. Če jo povlečemo proti sredini okna, se ta poveča. Če sliko nato

pustimo, se pomanjša in ponovno naključno pomakne nekam na oknu. Opisano stran

prikazuje slika 5.12.


Slika 5.12: Slike virtualnega otoka na: a) osebnem računalniku, b) mobilni napravi

Izbira menija pet nam odpre stran z video posnetki, ki so nastali na virtualnem otoku

Ozara - Wellness in mind. Vsi videi, ki jih vsebuje ta stran, so formata FXM/VP6, ki je

uradni medplatformni format tehnologije JavaFX. Slika 5.13 prikazuje opisano stran z

videi. Če si ţelimo ogledati naslednji video, ga preprosto povlečemo in »pripelje« se nam

naslednji oz. prejšnji video, kar je odvisno od tega, v katero smer smo trenutni video

povlekli. Predvajanje videa lahko nadziramo s pomočjo gumbov pod videom.


Slika 5.13: Predvajanje videa na: a) osebnem računalniku, b) mobilni napravi

Ob kliku na zadnji gumb (skrajno desno) se proţi animacija zapiranja okna in izvajanje

aplikacije se zaključi.

5.5 Povzetek

Razvita aplikacija sluţi kot predstavitvena aplikacija virtualnega otoka Ozara -

Wellness in mind. Predstavitveni del aplikacije ponuja pisni opis virtualnega otoka, prav

tako pa tudi video in slikovne predstavitve. Ob tem pa ponuja članom skupnosti Ozara -

Wellness in mind moţnost srečevanja ter izmenjevanja mnenj preko preprostega klepeta.

Aplikacija skozi razne animirane prehode in multimedijske vsebine poskuša podati

uporabniku bogatejšo izkušnjo.

Skušali smo tudi prikazati uporabo najpomembnejših novih konceptov, ki jih vpeljuje

JavaFX. K tem spadajo deklarativna sintaksa, vezanje podatkov, uporaba vgrajenih

animacij, kreiranje lastnih animacij (animirali smo tako vektorske elemente kakor tudi

slikovne elemente) in grafičnih vozlišč ter vključitev multimedijskih vsebin (slike in

videe).


6 SKLEP

JavaFX predstavlja po eni strani novo smernico razvoja grafičnega uporabniškega

vmesnika platforme Java in hkrati tudi nekaj popolnoma novega. Razvijalci, ki so do sedaj

uporabljali platformo Java za razvijanje svojih informacijskih rešitev, bodo verjetno hitro

začeli uporabljati tehnologijo JavaFX za razvoj GUI aplikacij, saj bodo ob tem lahko

obdrţali vse knjiţnice, ki so jih do tega trenutka razvili.

V diplomskem delu smo posebej podrobno predstavili tehnologijo JavaFX in vse njene

na novo vpeljane koncepte. Najverjetneje najpomembnejša novost je moţnost vezanja

podatkov, ki pa doda ob deklarativni sintaksi, katero ta tehnologija vpeljuje, popolnoma

nove moţnosti razvoja aplikacij. Prav tako zelo močna lastnost te tehnologije je

povezljivost z Java aplikacijami in seveda moţnost izvajanja enake aplikacije na različnih

napravah brez dodatnih sprememb aplikacijske kode.

Opravili smo tudi celovito analizo trenutnega stanja tehnologij za razvoj RIA aplikacij,

saj smo jih ne le opisali, ampak tudi na različne načine testirali, da bi dobili čim bolj

natančno prikazano trenutno stanje. Testi so vključevali zmogljivostne in tudi popolnoma

praktične teste. Pomembna raziskava pa je vključevala preučitev trenutne razširjenosti

različnih tehnologij, kar je danes verjetno eden najpomembnejših kriterijev pri odločanju,

katero tehnologijo izbrati za razvoj aplikacije.

Razvili pa smo tudi aplikacijo, ki skozi praktični primer prikazuje predstavljene

koncepte JavaFX in jih povezuje v celoto. Aplikacija je bila napisana skladno z motom

JavaFX tehnologije in se lahko izvaja tako kot spletna, namizna ali pa tudi mobilna

aplikacija.

Tehnologija JavaFX je bila predstavljena šele pred kratkim in zaradi tega smo mnenja,

da še ni pokazala vseh svojih adutov. Kljub temu smo navdušeni nad do sedaj

predstavljenim in z optimizmom pričakujemo nadaljevanje. Kot smo v diplomskem delu

predstavili, ima JavaFX na področju RIA precej hudo konkurenco, kar pa ni nujno slabo,

saj verjetno to ţene k napredku tako podjetje Sun kakor tudi konkurenčno podjetje Adobe


in tudi Microsoft. Vse to priča o tem, da nas definitivno čaka razburljiva prihodnost

razvoja tehnologij za razvoj bogatih spletnih aplikacij.


7 VIRI, LITERATURA

[1] Adobe – Flex 3: FAQ, http://www.adobe.com/products/flex/faq/, (zadnjič

obiskano 25. 5. 2009).

[2] Adobe – Adobe AIR: FAQ, http://www.adobe.com/products/air/faq/, (zadnjič

obiskano 11. 6. 2009).

[3] S. Webster T. Yard S. McSharry, Foundation ActionScript 3.0 with Flash CS3

and Flex, Friends of ED, 2008.

[4] Microsoft Silverlight FAQ,

http://www.microsoft.com/silverlight/overview/faq.aspx,

(zadnjič obiskano 26. 5. 2009).

[5] Silverlight Overview, http://silverlight.net/GetStarted/overview.aspx, (zadnjič

obiskano 25. 5. 2009).

[6] JavaFX FAQs: How to and General Questions About JavaFX,

http://www.javafx.com/faq/, (zadnjič obiskano 25 .6 .2009).

[7] On2's JavaFX Support, http://support.on2.com/javafx/, (zadnjič obiskano 28. 5.

2009).

[8] JavaFX Platform Components, http://javafx.com/about/overview/, (zadnjič

obiskano 16. 6. 2009).

[9] J. L. Weaver, JavaFX Script, Dynamic Java Scripting for Rich Internet/Client-

Side Applications, firstPress, 2007.

[10] Configuring the Application for Execution and Deployment,

http://javafx.com/docs/tutorials/deployment/configure-for-deploy.jsp, (zadnjič

obiskano 20. 6. 2009).

[11] Microsoft Silverlight, http://en.wikipedia.org/wiki/Microsoft_Silverlight, (zadnjič

obiskano 17. 6. 2009).


[12] Nokia to enable Silverlight, http://blog.anta.net/2008/03/04/nokia-to-enable-

silverlight/, (zadnjič obiskano 2. 7. 2009).

[13] Balls animation test, http://bubblemark.com/, (zadnjič obiskano 10. 7. 2009).

[14] Google Trends,

http://www.google.com/trends?q=javafx%2C+adobe+flex%2C+microsoft+silver

light, (zadnjič obiskano 9. 7. 2009).

[15] Google Trends,

http://www.google.com/trends?q=javafx+download%2C+adobe+flash+downloa

d%2C+silverlight+download&ctab=0&geo=all&date=all&sort=0,

(zadnjič obiskano 9. 7. 2009)-

[16] D. Moore R. Budd E. Benson, Rich Internet Applications, AJAX and Beyond,

Wiley Publishing Inc., 2007.

[17] Rich Internet Applications,

http://en.wikipedia.org/wiki/Rich_Internet_Appliactions, (zadnjič obiskano 15. 5.

2009).

[18] JavaFX ob bok Silverlightu, Flexu in Ajaxu - SiOL.net,

http://www.siol.net/tehnologija/racunalnistvo/2008/12/javafx_ob_bok_silverlightu

_flexu_in_ajaxu.aspx, (zadnjič obiskano 23. 5. 2009).

[19] JavaFX A RIA Solutions To Revigorate Your Desktop,

http://www.xenonsoft.com/resources/docs/BOF%2039%20JavaFX%20A%20RIA

%20Solutions%20To%20Revigorate%20Your%20Desktop.pdf, (zadnjič obiskano

26. 5. 2009).

[20] Java Web Start, http://en.wikipedia.org/wiki/Web_Start, (zadnjič obiskano 26. 5.

2009).

[21] JavaFX Tutorial – Learn About Data Types in JavaFX Language,

http://java.sun.com/javafx/1/tutorials/core/dataTypes/, (zadnjič obiskano 5. 6.

2009).


[22] Introduction to JavaFX Script – O'Reilly Media,

http://www.onjava.com/pub/a/onjava/2007/07/27/introduction-to-javafx-

script.html, (zadnjič obiskano 7. 6. 2009).

[23] JavaFX Tutorial – Learn About Sequences in JavaFX Language,

http://java.sun.com/javafx/1/tutorials/core/sequences/, (zadnjič obiskano 10. 6.

2009).

[24] JavaFX Tutorial – Learn About Operators in JavaFX Language,

http://java.sun.com/javafx/1/tutorials/core/operators/, (zadnjič obiskano 12. 6.

2009).

[25] JavaFX Tutorial – Learn About Expressions in JavaFX Language,

http://java.sun.com/javafx/1/tutorials/core/expressions/, (zadnjič obiskano 13. 6.

2009).

[26] JavaFX Tutorial – Learn About Classes in JavaFX Language,

http://java.sun.com/javafx/1/tutorials/core/classes/, (zadnjič obiskano 17. 6.

2009).

[27] JavaFX Tutorial – Learn About Data Binding And Triggers in JavaFX Language,

http://java.sun.com/javafx/1/tutorials/core/dataBinding/, (zadnjič obiskano 19. 6.

2009).

[28] JavaFX 1.2 API, http://java.sun.com/javafx/1.2/docs/api/, (zadnjič obiskano 10. 7.

2009).

[29] Counting primes in Flash and Silverlight,

http://www.itwriting.com/primetest/index.html, (zadnjič obiskano 20. 6. 2009).

[30] JavaFX Example Code | PrimeFactors | JavaFX Demo,

http://www.javafx.com/samples/PrimeFactors/index.html, (zadnjič obiskano 20. 6.

2009).

[31] Adobe Flash, http://en.wikipedia.org/wiki/Adobe_Flash, (zadnjič obiskano 15. 6.

2009).


8 PRILOGE

8.1 Seznam slik

Slika 3.1: Arhitektura JavaFX platforme [8] ......................................................................... 9

Slika 3.2: Primer okna v Swing in JavaFX Script. .............................................................. 34

Slika 3.3: Primer ozadja JavaFX okna z uporabo razreda RadialGradient ................ 35

Slika 3.4: a) VBox, b) HBox in c) TileLayout razporeditev ......................................... 36

Slika 3.5: Primer naprednejše uporabe UI gradnikov JavaFX ............................................ 38

Slika 4.1: Bubblemark test v JavaFX .................................................................................. 50

Slika 4.2: Primer aplikacije JavaFX: a) pred klikom in b) po kliku na oba gumba ............ 52

Slika 4.3: Primer aplikacije Silverlight: a) pred klikom in, b) po kliku na oba gumba ....... 54

Slika 4.4: Primer aplikacije Flex: a) pred klikom in, b) po kliku na oba gumba ................. 56

Slika 4.5: Prikaz priljubljenosti tehnologij za razvoj RIA [14] ........................................... 57

Slika 4.6: Spisek svetovnih regij, mest in jezikov, v katerih je bilo največ poizvedb [14] . 58

Slika 4.7: Prikaz razširjenosti tehnologij za razvoj RIA [15] .............................................. 58

Slika 4.8: Grafična predstavitev dobljenih skupnih koristnosti ........................................... 61

Slika 5.1: Diagram primerov uporabe za aplikacijo »Ozara - Wellness in mind« .............. 64

Slika 5.2: Razredni diagram aplikacije »Ozara - Wellness in mind« .................................. 65

Slika 5.3: Diagram zaporedja registracije novega člana skupnosti Ozara - Wellness in mind

..................................................................................................................................... 67


shranjevanje podatkov o uporabnikih .......................................................................... 68



shranjevanje podatkov o zgodovini klepeta ................................................................ 68

Slika 5.6: Prikaz poteka animacije prehajanja med okni .................................................... 73

Slika 5.7: Prikaz poteka animacije prehajanja med okni s spreminjanjem koordinat ......... 74

Slika 5.8: Izdelan razred Uporabnik, izpeljan iz razreda CustomNode ..................... 76

Slika 5.9: Osnovno okno aplikacije na: a) osebnem računalniku, b) mobilni napravi ........ 86

Slika 5.10: Animirani meni aplikacije na: a) osebnem računalniku, b) mobilni napravi .... 86

Slika 5.11: Klepet na: a) osebnem računalniku, b) mobilni napravi ................................... 87

Slika 5.12: Slike virtualnega otoka na: a) osebnem računalniku, b) mobilni napravi ......... 88

Slika 5.13: Predvajanje videa na: a) osebnem računalniku, b) mobilni napravi ................. 89


8.2 Seznam tabel

Tabela 1: Osnovni podatkovni tipi [21] ............................................................................... 12

Tabela 2: Aritmetični operatorji [24]................................................................................... 15

Tabela 3: Unarni operatorji [24] .......................................................................................... 16

Tabela 4: Primerjalni operatorji [23] ................................................................................... 16

Tabela 5: Pogojni operatorji v Javi in JavaFX [24] ............................................................. 17

Tabela 6: Izmerjene hitrosti računanja praštevil na različnih RIA tehnologijah [29][30] ... 49

Tabela 7: Povprečen prikaz sličic na sekundo (fps) po izvedbi Bubblemark testa ............. 50

Tabela 8: Kriterijske vrednosti primerjanih alternativ za razvoj RIA aplikacij .................. 59

Tabela 9: Uteţi kriterijev ..................................................................................................... 60

Tabela 10: Dobljene skupne koristnosti naših treh alternativ.............................................. 60


8.3 Seznam izvorne kode

Izvorna koda 1: Deklaracija spremenljivk v JavaFX Script ................................................ 11

Izvorna koda 2: Primer inicializacije spremenljivk v JavaFX Script .................................. 12

Izvorna koda 3: Seštevanje String-ov ............................................................................. 13

Izvorna koda 4: Deklaracija funkcije v JavaFX Script ....................................................... 13

Izvorna koda 5: Preprosta funkcija v JavaFX Script ........................................................... 13

Izvorna koda 6: Klic funkcije v JavaFX Script ................................................................... 13

Izvorna koda 7: Kreiranje in naslavljanje polja .................................................................. 14

Izvorna koda 8: Delo s poljem v JavaFX Script .................................................................. 14

Izvorna koda 9: Dodelitveni operator – prireditev vrednosti spremenljivki ....................... 15

Izvorna koda 10: Primer uporabe operatorja instanceof .............................................. 17

Izvorna koda 11: Način zapisa izraza if ............................................................................ 18

Izvorna koda 12: Način zapisa for zanke .......................................................................... 18

Izvorna koda 13: Primer for zanke v JavaFX Script ......................................................... 18

Izvorna koda 14: Način zapisa while zanke ..................................................................... 19

Izvorna koda 15: Primer while zanke v JavaFX Script .................................................... 19

Izvorna koda 16: Primer bločnega izraza v JavaFX Script ................................................. 20

Izvorna koda 17: Deklaracija spremenljivke z uporabo izraza obsega ............................... 20

Izvorna koda 18: Deklariranje, spreminjanje in izločanje členov z uporabo izraza obsega 20

Izvorna koda 19: Uporaba izraza try-catch-finally ............................................... 21

Izvorna koda 20: Deklaracije razreda v JavaFX Script ....................................................... 22

Izvorna koda 21: Primer deklaracije razreda v JavaFX Script ............................................ 22

Izvorna koda 22: Kreiranje primerka razreda in klic razredne funkcije ............................. 22

Izvorna koda 23: Postopek vezanja podatkov (data binding) ............................................. 23


Izvorna koda 24: Spreminjanje vrednosti vezane spremenljivke s funkcijo

onMouseClicked .................................................................................................... 23

Izvorna koda 25: Primer funkcije, katero lahko veţemo (določilo bound) [27] ............... 23

Izvorna koda 26: Primer vezanja podatkov v objektih ........................................................ 24

Izvorna koda 27: Primer uporabe »zamenjaj« proţilca [27] ............................................... 24

Izvorna koda 28: Primer preprostega okna s Swing ............................................................ 32

Izvorna koda 29: Primer preprostega okna z deklarativno sintakso JavaFX Script ............ 33

Izvorna koda 30: Uporaba razreda RadialGradient za naprednejšo uporabo barv ..... 34

Izvorna koda 31: Primer uporabe razreda Group............................................................... 37

Izvorna koda 32: Primer uporabe funkcije, ki vrača instanco grafične komponente .......... 39

Izvorna koda 33: Primer klica funkcije, ki vrača instanco grafične komponente ............... 39

Izvorna koda 34: Primer uporabe upravljavcev dogodkov in vezanja podatkov nad GUI.. 40

Izvorna koda 35: Ustvarjanje lastne animacije objekta z uporabo razreda Timeline ..... 42

Izvorna koda 36: Vključitev JavaFX aplikacije v HTML ................................................... 44

Izvorna koda 37: JavaFX – Primerjava – celotna izvorna koda .......................................... 52

Izvorna koda 38: Silverlight – Primerjava – definicija GUI komponent ............................ 53

Izvorna koda 39: Silverlight – Primerjava – definicija funkcionalnosti .............................. 54

Izvorna koda 40: Flex – primerjava – celotna izvorna koda ............................................... 55

Izvorna koda 41: Preverjanje tipa naprave, na kateri se izvaja aplikacija ........................... 69

Izvorna koda 42: Zagonska funkcija run() v datoteki Main.fx ........................................ 70

Izvorna koda 43: Izsek iz datoteke Config.fx ...................................................................... 70

Izvorna koda 44: Glavna scena aplikacije »Ozara - Wellness in mind« ............................. 71

Izvorna koda 45: Spreminjanje »delavnega« dela aplikacijskega okna .............................. 71

Izvorna koda 46: Animiranje prehoda med dvema skupinama (Group) v aplikaciji ......... 72

Izvorna koda 47: Lastna razvita animacija z uporabo razreda Timeline ........................ 74


Izvorna koda 48: Primer uporabe lastnega vozlišča, izpeljanega iz razreda CustomNode

..................................................................................................................................... 75

Izvorna koda 49: Primer uporabe lastnega vozlišča za prikaz slike .................................... 77

Izvorna koda 50: Razredi, potrebni za prikaz video vsebine v aplikaciji ........................... 77

Izvorna koda 51: XML shema, ki definira elemente XML dokumenta z uporabniki ......... 78

Izvorna koda 52: Povezava s streţnikom, kjer se nahajajo podatki .................................... 79

Izvorna koda 53: Razčlenjevanje datoteke XML z uporabo razreda PullParser ......... 81

Izvorna koda 54: Java Servlet, ki doda novega uporabnika v XML datoteki ..................... 83

Izvorna koda 55: Potrjevanje skladnosti XML dokumenta z ustrezno XML shemo .......... 84

Izvorna koda 56: Pošiljanje HttpRequest zahteve Java Servletu na streţniku ............. 84

Izvorna koda 57: Funkcija, ki vrača parametre za pošiljanje le-teh preko URL naslova.... 85


8.4 Naslov študenta

Iztok Hafner

Podgrad 24

9250 Gornja Radgona

tel.: 041 597 762

e-mail: [email protected]

8.5 Kratek življenjepis

Rojen: 04. 09. 1985 v Murski Soboti.

Šolanje:

Osnovna šola Preţihovega Voranca Gornja Radgona.

Srednja lesarska šola Maribor.

Fakulteta za elektrotehniko, računalništvo in informatiko v Mariboru – smer

Informatika.

8.6 Zgoščenka

Diplomskemu delu je priloţena zgoščenka z diplomskim delom v elektronski obliki in

izvorno kodo razvite aplikacije. Dodane so prav tako aplikacije, ki so bile razvite za namen

primerjave tehnologij RIA.


8.7 Izjava o istovetnosti diplomskega dela

UNIVERZA V MARIBORU

FAKULTETA ZA ELEKTROTEHNIKO, RAČUNALNIŠTVO IN INFORMATIKO

IZJAVA O ISTOVETNOSTI TISKANE IN ELEKTRONSKE VERZIJE

ZAKLJUČNEGA DELA IN OBJAVI OSEBNIH PODATKOV AVTORJA

Ime in priimek avtorja: Iztok Hafner

Vpisna številka: 93573666

Študijski program: Računalništvo in informatika – Informatika

Naslov zaključnega dela: RAZVOJ SPLETNIH APLIKACIJ Z UPORABO JAVAFX

Mentor: izr. prof. dr. Branko Matjaž Jurič, univ. dipl. inž. rač. in inf.

Somentor: doc. dr. Boštjan Brumen, univ. dipl. inž. rač. in inf.

Podpisani Iztok Hafner izjavljam, da sem za potrebe arhiviranja oddal elektronsko verzijo

zaključnega dela v Digitalno knjiţnico Univerze v Mariboru. Zaključno delo sem izdelal

sam ob pomoči mentorja. V skladu s 1. odstavkom 21. člena Zakona o avtorskih in

sorodnih pravicah (Ur. l. RS, št. 16/2007) dovoljujem, da se zgoraj navedeno zaključno

delo objavi na portalu Digitalne knjiţnice Univerze v Mariboru.

Tiskana verzija zaključnega dela je istovetna elektronski verziji, ki sem jo oddal za objavo

v Digitalno knjiţnico Univerze v Mariboru. Podpisani izjavljam, da dovoljujem objavo

osebnih podatkov, vezanih na zaključek študija (ime, priimek, leto in kraj rojstva, datum

zagovora, naslov zaključnega dela) na spletnih straneh in v publikacijah UM.

Kraj in datum: Podpis avtorja:

Maribor, 15.8.2009 ____________________

razvoj spletnih aplikacij z uporabo javafx · future javafx application will also be able to run on...

Documents