January 21, 1985 SOUNDTRACK VENTURES LAUNCHED ' i CHILDS NAMED QWEST PRESIDENT | Lsolo acts finding chart success John Fogert
Smetanova ulica 17
2000 Maribor, Slovenija
Leon Stanko
RAZVOJ UPORABNIŠKIH VMESNIKOV SPLETNIH APLIKACIJ S POMOČJO JAVA
PRIMEFACES
Diplomsko delo
Maribor, avgust 2015
RAZVOJ UPORABNIŠKIH VMESNIKOV SPLETNIH
APLIKACIJ S POMOČJO JAVA PRIMEFACES
Diplomsko delo
Študent: Leon Stanko
Študijski program: Univerzitetni študijski program prve stopnje,
Računalništvo in informacijske tehnologije
Mentor: doc. dr. Milan Ojsteršek
I
II
ZAHVALA
Rad bi se zahvalil mentorju doc. dr.
Milanu Ojsteršku za strokovno pomoč in
svetovanje pri izdelavi diplomskega dela.
Posebej bi se zahvalil svoji družini, za vso
podporo in dodatno motivacijo skozi
celoten študij.
Zahvaljujem se tudi Mitji Turnšku in Urošu
Aristovniku za svetovanje pri izdelavi
praktičnega dela.
III
Razvoj uporabniških vmesnikov spletnih aplikacij s pomočjo Java PrimeFaces
Ključne besede: Java, grafični uporabniški vmesnik, spletna aplikacija, PrimeFaces, JSF,
Maven, GlassFish, JPA
UDK: 004.777(043.2)
Povzetek
Če želi biti podjetje, ki izdeluje spletne aplikacije konkurenčno, je nujno, da za
implementacijo grafičnega uporabniškega vmesnika (GUI) porabi čim manj časa. Tako se
lahko njegovi razvijalci bolj posvetijo implementaciji, testiranju poslovne logike in
podatkovnemu sloju svojih aplikacij. Eden izmed načinov, kako čim hitreje razviti grafični
uporabniški vmesnik, je, da uporabimo knjižnico Java PrimeFaces, ki omogoča gradnjo
uporabniško bogatih in interaktivnih spletnih strani. V delu smo prikazali uporabo različnih
komponent knjižnice, ki smo jih podkrepili s praktičnim primerom. Hkrati smo prikazali
namestitev, konfiguracijo in razlago vse potrebne programske opreme za uspešno
delovanje spletne aplikacije, ki uporablja knjižnico Java PrimeFaces. Naredili smo tudi
primerjavo s sorodnimi knjižnicami za boljše razumevanje prednosti in slabosti
uporabljene knjižnice.
IV
Web application development using Java PrimeFaces
Key words: Java, graphic user interface, web application, PrimeFaces, JSF, Maven,
GlassFish, JPA
UDK: 004.777(043.2)
Abstract
If the company that creates web applications wants to be competitive it is necessary to
use as little time as possible for the implementation of the graphical user interface (GUI).
Therefore its developers can focus more time to the implementation, to business logic
testing and to data layer of their applications. One of the examples how to develop
graphical user interface as fast as possible is to use Java PrimeFaces library, that enables
building of user-rich and interactive web pages. In the diploma thesis we presented the
use of various library components, which we backed up with practical example.
Meanwhile we also took you through installation, configuration and explanation of all the
necessary equipment for successful working of the website application that uses Java
PrimeFaces. For better understanding of pros and cons for the used application we also
made a comparasion with related libraries at the end.
V
KAZALO VSEBINE
1 UVOD ........................................................................................................................................ 1
2 JAVASERVER FACES ............................................................................................................. 3
2.1 Arhitektura MVC ............................................................................................................................ 5
2.2 Upravljavska zrna ........................................................................................................................... 7
2.2.1 JSF doseg .......................................................................................................................................... 8
2.3 Primer aplikacije Hello world ......................................................................................................... 9
2.4 Komponentne knjižnice ................................................................................................................ 12
3 JAVA PRIMEFACES ............................................................................................................ 13
3.1 PrimeFaces Mobile ....................................................................................................................... 16
3.2 PrimeFaces Extensions ................................................................................................................. 17
3.3 PrimeUI ........................................................................................................................................ 17
4 PRAKTIČNO DELO ............................................................................................................. 18
4.1 Vključitev in uporaba knjižnice ..................................................................................................... 19
4.2 JavaPersistanceAPI ....................................................................................................................... 25
4.3 Uporaba PrimeFaces Tem ............................................................................................................. 26
4.4 Čiščenje napak (ang. debug) ......................................................................................................... 28
5 PRIMERJAVA KNJIŽNIC ................................................................................................... 29
6 SKLEP .................................................................................................................................... 32
7 VIRI ........................................................................................................................................ 33
VI
KAZALO SLIK
SLIKA 1: PRIKAZ ENOSTAVNE UPORABE VALIDACIJE S POMOČJO TEHNOLOGIJE JSF ............................................................... 4
SLIKA 2: UPORABA TEHNOLOGIJE AJAX V APLIKACIJI JSF ................................................................................................ 5
SLIKA 3: ARHITEKTURA MVC .................................................................................................................................... 5
SLIKA 4: PRIKAZ IMENIŠKE STRUKTURE ARHITEKTURE MVC ............................................................................................. 6
SLIKA 5: UPORABA @MANAGEDBEAN-A NAD JAVA RAZREDOM ...................................................................................... 7
SLIKA 6: KLIC UPRAVLJAVSKEGA ZRNA V APLIKACIJI JSF ................................................................................................... 7
SLIKA 7: KREIRANJE NOVEGA MAVEN PROJEKTA ......................................................................................................... 10
SLIKA 8: ZGLED IMENIŠKE STRUKTURE MAVEN PROJEKTA .............................................................................................. 11
SLIKA 9: VKLJUČITEV OGRODJA JSF .......................................................................................................................... 12
SLIKA 10: PRIMER APLIKACIJE HELLO WORLD ............................................................................................................. 12
SLIKA 11: LOGOTIP PF [11] ................................................................................................................................... 13
SLIKA 12: KOMPONENTE KNJIŽNICE PRIMEUI [11] ..................................................................................................... 17
SLIKA 13: APLIKACIJA, NAREJENA V SKLOPU DIPLOMSKEGA DELA .................................................................................... 18
SLIKA 14: PRIKAZ ENE IZMED TABEL ZA PREGLED REVIZIJSKE SLEDI SKRBNIŠKEGA MODULA ................................................... 19
SLIKA 15: VKLJUČITEV KNJIŽNICE PF V MAVEN PROJEKT ............................................................................................... 20
SLIKA 16: VKLJUČITEV IMENSKEGA PROSTORA S PRIMEROM UPORABLJENE KOMPONENTE PF............................................... 20
SLIKA 17: UPORABNIK.JAVA ................................................................................................................................... 21
SLIKA 18: UPORABNIKCONTROLLER.JAVA ................................................................................................................. 21
SLIKA 19: INPUT.XHTML ........................................................................................................................................ 22
SLIKA 20: PRIKAZ APLIKACIJE ZA VNOS OBRAZCA ......................................................................................................... 22
SLIKA 21: PRIMER VALIDACIJE ................................................................................................................................. 23
SLIKA 22: PRIKAZ LINIJSKEGA GRAFIKONA .................................................................................................................. 23
SLIKA 23: IMPLEMENTACIJA PF TABELE ..................................................................................................................... 24
SLIKA 24: PRIKAZ TABELE S KNJIŽNICO PF .................................................................................................................. 25
SLIKA 25: PRIKAZ ORODJA JPA [13] ........................................................................................................................ 26
SLIKA 26: VKLJUČITEV POLJUBNE TEME V MAVEN PROJEKT Z UPORABO KNJIŽNICE PF ......................................................... 27
SLIKA 27: KONFIGURACIJA POLJUBNE TEME PF KNJIŽNICE ............................................................................................. 27
SLIKA 28: PRIMERJAVA POVPRAŠEVANJA PO TREH VODILNIH KNJIŽNIC ZA UPORABO VIZUALNIH KOMPONENT [11] ................... 29
VII
KAZALO TABEL
TABELA 1: VRSTE JSF DOSEGOV ................................................................................................................................ 8
TABELA 2: PODPORA KNJIŽNICE PF .......................................................................................................................... 14
TABELA 3: PRIMERJAVA VODILNIH KNJIŽNIC ZA RAZVOJ JSF SPLETNIH APLIKACIJ Z UPORABO UPORABNIŠKIH BOGATIH KOMPONENT
................................................................................................................................................................ 30
VIII
UPORABLJENE KRATICE
Kratica Pomen
AJAX Asynchronous JavaScript And XML
CSS Cascading Style Sheets
GUI Grafični uporabniški vmesnik
HTML HyperText Markup Language
HTTP Hypertext Transfer Protocol
JDBC Java database connectivity technology
JS JavaScript
JSF JavaServer Faces
JSP JavaServer Pages
MVC Model-view-controller
PF PrimeFaces
REST Representational State Transfer
WML Wireless Markup Language
XUL XML User Interface Language
XHTML Extensible HyperText Markup Language
Razvoj uporabniških vmesnikov spletnih aplikacij s pomočjo Java PrimeFaces
1
1 UVOD
Živimo v svetu, ki si ga je nemogoče predstavljati brez interneta. Vsak izmed nas se z njim
vsakodnevno srečuje, čeprav se včasih tega sploh ne zaveda. S samim internetom pa so
tesno povezane spletne aplikacije, katerih število se neprestano povečuje. Dandanes
imajo že vsako podjetje, trgovine, države in še bi lahko naštevali svojo spletno stran. Vse
več je tudi individualnih spletnih strani, ki so ustvarjene s pomočjo mladih razvijalcev.
Povpraševanje po spletnih straneh je torej zelo veliko. Zato se vsako leto pojavljajo nove
spletne strani, ki želijo biti vedno bolj konkurenčne na trgu. Zelo je pomembno, da so te
strani uporabniku prijazne (ang. user friendly) in vsebujejo bogat videz, ki temelji na
odzivnem spletnem oblikovanju (ang. responsive web design), s čimer je aplikacija
ustrezno prikazana na vseh modernih platformah. Odzivna uporabniška izkušnja postaja
standard vseh modernih spletnih aplikacij. Eden izmed načinov, kako ustvariti bogate,
dinamične in interaktivne spletne strani, je uporaba knjižnice Java PrimeFaces (kratica
PF), ki jo obravnavamo v diplomskem delu.
Glavna lastnost te knjižnice je, da se lahko razvijalec osredotoči predvsem na izdelavo
aplikacijskega in podatkovnega sloja spletne aplikacije (ang. back end), saj ima s
predstavitveno plastjo (ang. front end) zelo malo dela, za kar poskrbi knjižnica sama.
Knjižnica hkrati podpira uporabniško odzivno izkušnjo, kar omogoča uporabniku ustrezen
ogled spletne aplikacije na vseh napravah, pa naj gre za telefone, tablice ali računalnike.
PF je knjižnica, ki se je začela razvijati leta 2008, svoj vzpon pa dosega v zadnjih petih
letih. Danes velja za eno izmed najbolj uporabljenih knjižnic za izdelovanje spletnih
aplikacij. V diplomskem delu vas želimo seznaniti z omenjeno knjižnico, vam pokazati
kako z njo začeti graditi spletno aplikacijo in vas seznaniti z njenimi prednostmi in
slabostmi.
V diplomskem delu smo predstavili vsa potrebna programska orodja za uspešen zagon
aplikacije, ki upošteva koncepte odzivnega spletnega oblikovanja. Predstavili smo tudi
namestitev in opis potrebnih orodij, kot je jezik JSF. Predvsem pa smo se posvetili
knjižnici PF, kjer smo teorijo podkrepili s praktičnem primerom. Na koncu smo naredili
primerjavo različnih sorodnih knjižnic.
Razvoj uporabniških vmesnikov spletnih aplikacij s pomočjo Java PrimeFaces
2
V drugem poglavju smo opisali vsa potrebna orodja za delovanje spletne aplikacije,
predstavili jezik JSF, za katerega smo naredili primer aplikacije in omenili možne vključitve
raznih knjižnic.
V naslednjem poglavju smo se podrobneje seznanili s knjižnico PF, kjer smo omenili vse
njene bistvene lastnosti.
V četrtem poglavju smo na praktičnem primeru prikazali uporabo knjižnice PF, ki smo jo
opisali v prejšnjem poglavju. Hkrati smo prikazali uporabo različnih tem, povezavo s
podatkovno bazo in kako najlažje slediti napakam.
V petem poglavju smo omenili sorodne knjižnice knjižnici PF in jih med sabo primerjali.
V zadnjem poglavju smo nakazali težave in opažanja med delom, podali zaključne misli in
napotke za nadaljnje delo.
Razvoj uporabniških vmesnikov spletnih aplikacij s pomočjo Java PrimeFaces
3
2 JAVASERVER FACES
Java PrimeFaces (kratica PF) je vodilna komponentna knjižnica grafičnega uporabniškega
vmesnika za JavaServer Faces (kratica JSF) spletne aplikacije. Vendar preden preidemo
na samo knjižnico, zapišimo nekaj o sami tehnologiji JSF.
Dandanes lahko izbiramo med mnogimi ogrodji (ang. frameworks) za razvoj GUI-ja
spletnih aplikacij. Eden izmed njih je JSF, ki se uporablja za razvoj uporabniško odzivnih
kompozitnih komponent. Primer kompozitne komponente je gradnik za tabelo, ki zna sam
generirati kodo HTML za tabelo programsko določenih dimenzij. Z uporabo komponent
lahko o svojem GUI-ju razmišljamo na precej višjem nivoju, kot pa če bi morali sami pisati
kodo HTML. Hkrati imamo možnost uporabe vizualnega razvojnega okolja, kjer lahko z
uporabo povleci-spusti (ang. drag and drop) komponente vstavimo v obrazec.
JSF sestoji iz naslednjih delov:
iz niza komponent GUI,
dogodkovnega programskega modela in
komponentnega modela, ki omogoča razvijalcem tretjih oseb dobavo dodatnih
komponent.
Ker JSF vsebuje vso potrebno kodo za lovljenje dogodkov in organizacijo komponent, se
lahko programerji precej bolj posvetijo razvoju poslovne logike in podatkovnega modela.
Omenimo še nekaj specifičnih podatkov o tehnologiji JSF. Trenutna verzija je JSF 2.2 in je
precej izboljšana ter dodelana od verzij 1.x. JSF 2.2 uporablja Facelets kot svojo privzeto
predlogo sistema. V verziji 1.x je bila ta predloga JSP, ki je povzročala precej neprijetnih
tehničnih problemov. JSF spletna stran je podobna spletni strani HTML z nekaj razlikami:
Stran mora biti pravilno oblikovana (XHTML). Za razliko od brskalnika, izvajanje
JSF ne dopušča slovničnih napak.
Uporabljamo značke h:head, h:body in h:form namesto značk HTML head, body,
form.
Poleg značk HTML se uporabljajo še značke Core, Facelets, Composite, JSTL
Core in JSTL Functions.
Razvoj uporabniških vmesnikov spletnih aplikacij s pomočjo Java PrimeFaces
4
Pretvorba podatkov
Ker uporabniki vpisujejo podatke na spletnih obrazcih kot tekst, poslovni objekt pa želi
podatke kot števila (ang. numbers), datume (ang. dates) ali druge podatkovne tipe, je te
podatke potrebno pretvoriti. Strah je odveč, saj JSF omogoča enostavno prilagajanje
pravil pretvorbe. Primer je pretvorba vnesenega števila v pravilen podatkovni tip. JSF
omogoča pretvorbo v vse podatkovne tipe, kar pa ne velja za objekte. Za pravilno
pretvorbo v poljuben objekt je potrebno vključiti knjižnico, ki to omogoča (npr. OmniFaces
[7] ), ali pretvorbo ročno implementirati.
Validacija in lovljenje napak
JSF omogoča preprosto uporabo validacije za posamezno polje. Če želimo danemu polju
predpisati, da je vnos podatka obvezen, to naredimo, tako kot prikazuje Slika 1. Hkrati
lahko za vsako polje določimo tudi tip podatka (npr. v polje se vpisujejo samo števila). V
tem primeru moramo poskrbeti za pravilen izpis sporočila o napaki v primeru napačnega
vnosa. Knjižnica PF deluje podobno z manjšimi izboljšavami, kar bomo v nadaljevanju tudi
prikazali.
Slika 1: Prikaz enostavne uporabe validacije s pomočjo tehnologije JSF
Komponente po meri
Razvijalci komponent lahko izdelajo komponente, ki jih oblikovalci strani enostavno
vključijo. Npr. razvijalec komponent proizvede komponento koledarja z vsemi
funkcionalnostmi, vendar k temu doda še nekaj svojega, pa naj bo to oblika ali dodatna
funkcionalnost. To komponento lahko nato enostavno vključimo v našo stran. Na enak
način se razvija knjižnica PF, ki se z vedno novejšimi verzijami dograjuje in izboljšuje.
Podpora AJAX-u
JSF zagotavlja standarden AJAX komunikacijski kanal, s pomočjo katerega naše spletne
strani uporabljajo asinhrono ali sinhrono komunikacijo s strežnikom, kar omogoča, da nam
jih ni potrebno vedno znova osveževati. Primer vključitve AJAX-a prikazuje Slika 2. JSF, ki
poleg AJAX-a omogoča tudi uporabo storitev REST.
Razvoj uporabniških vmesnikov spletnih aplikacij s pomočjo Java PrimeFaces
5
Slika 2: Uporaba tehnologije AJAX v aplikaciji JSF
Alternativno upodabljanje (ang. Alternative renders)
Privzeto JSF generira strani HTML. Vendar lahko ogrodje razširimo tudi na druge
označevalne jezike, kot sta WML in XUL. Ob razvoju tehnologije JSF se je zdela ta
fleksibilnost zelo zanimiva, kar se je sčasoma spremenilo, saj se ni na trgu pojavila
nobena prepričljiva uporaba te splošnosti.
2.1 Arhitektura MVC
JSF temelji na arhitekturi MVC (Slika 3), ki našo spletno aplikacijo razdeli na tri sloje, to
so:
model (ang. model), podatki, podatkovni model,
pogled (ang. view) vizualna predstavitev podatkov in
krmilnik (ang. controler) vmesnik za komunikacijo med modelom in pogledom.
Slika 3: Arhitektura MVC
Razvoj uporabniških vmesnikov spletnih aplikacij s pomočjo Java PrimeFaces
6
Glavna ideja arhitekture je ločiti komponente tako, da so popolnoma neodvisne druga od
druge. Na ta način lahko spremenimo videz aplikacije, tako da spreminjamo pogled,
vendar to ne bo vplivalo na ostala dva sloja, saj so vse komponente v različnih slojih med
seboj neodvisne. Zgradbo in relacije med komponentami prikazuje Slika 3. Na Slika 4 je
prikazana imeniška struktura projekta, ki ga razvijamo po konceptu MVC. Pogled se
nahaja v imeniku Web Pages, kjer so strani definirane s končnicami .xhtml. Model in
krmilnik se nahajata v imeniku Source Packages, kjer je napisana logika aplikacije. Tu
lahko najdemo tri večje pakete, ki so controller, entity in view. Vsi paketi so sestavljeni iz
Java razredov. Entity predstavlja sliko objektov iz podatkovne baze, torej sliko
posameznih tabel. Controller skrbi za pravilno sklicevanje na tabele in izvajanje poslovne
logike. Tu se nahajajo metode, kjer se kličejo SQL poizvedbe. Ostane nam view, ki
predstavlja direktno povezavo na uporabniški vmesnik. Tu se uporabljajo t. i. upravljavska
zrna (ang. managed bean).
Slika 4: Prikaz imeniške strukture arhitekture MVC
Tehnologijo MVC prav tako uporabljajo razvojna ogrodja, kot so PHP, Laravel, Unity,
Asp.net, Joomla, Apache, MySql, Bootstrap, PostgreSQL, jQuery.
Razvoj uporabniških vmesnikov spletnih aplikacij s pomočjo Java PrimeFaces
7
2.2 Upravljavska zrna
Pri spletnih aplikacijah je pomembno ločiti predstavitev od poslovne logike. JSF za
uspešno ločitev uporablja javanska zrna (ang. Java beans). Zrno je javanski razred, ki
izpostavi lastnosti objekta in dogodke ogrodju z uporabo konvencij za poimenovanje in
metod za nastavljanje ter vračanje vrednosti. Javanska zrna so torej komponente
programske opreme za večkratno uporabo. Z njimi nimamo večjega dela, saj za njihovo
ustvarjanje in manipulacijo skrbi implementacija JSF, ki naredi naslednje:
jih ustvarja ali zavrže po potrebi,
bere njihove lastnosti ob prikazu spletne strani in
določa njihove lastnosti ob izvršitvi obrazca.
Kako vse skupaj deluje? Slika 5 prikazuje uporabo upravljavskih zrn (anotacija
@ManageBean) in njihovo vključitev v Java razred. Za pravilno delovanje je potrebno
vključiti paket (ang. package) javax.faces.bean. Če v naš razred vključimo samo
upravljavsko zrno, se lahko nanj sklicujemo kar po imenu razreda s predpostavko, da se
razred začne z malo začetnico (Slika 6). Če želimo posamezno zrno poimenovati
drugače, to storimo tako, da zraven dopišemo še (name=''ime''). Zrna so sestavljena iz
treh delov, imena, tipa in metod set ter get. JSF zna glede na zahtevo sam pravilno
uporabiti metodi set ali get. Npr. za značko <h:inputText> uporabi metodo set, pri znački
<h:outputText> pa uporabi metodo get. Opazimo lahko tudi vključitev anotacije
@ViewScoped, ki poskrbi, da se stanje javanskega objekta hrani, dokler se uporabnik
nahaja na isti strani.
Slika 5: Uporaba @ManagedBean-a nad Java razredom
Slika 6: Klic upravljavskega zrna v aplikaciji JSF
Razvoj uporabniških vmesnikov spletnih aplikacij s pomočjo Java PrimeFaces
8
Zrna CDI
Ker se izkaže, da so upravljavska zrna zelo omejena, lahko namesto njih uporabimo zrna
CDI (ang. Context Dependecy Injection). Ta definirajo bolj fleksibilen model aplikacijskega
strežnika. Vezana so na kontekst, kot so trenutna zahteva, seja brskalnika in uporabniško
določen življenjski cikel konteksta. CDI določa mehanizem za injektivna (ang. injecting)
zrna, prestrezanje klicev metod in sprožitve opazovanj dogodka. Ker gre za mnogo
močnejši mehanizem kot JSF @ManageBean, je smiselno uporabiti CDI zrna za razvoj
spletne aplikacije v Java EE aplikacijskem strežniku. Java EE 7 deluje na aplikacijskem
strežniku GlassFish, ki že vsebuje in podpira zrna CDI. Uporaba je zelo enostavna,
namesto označbe anotacije @ManagedBean uporabimo @Named. Če pa želimo razred
samostojno poimenovati, pa uporabimo @Named(''ime''). Zrna CDI in upravljavska zrna
se bodo v prihodnosti najverjetneje poenotila ter združila.
2.2.1 JSF doseg
Življenjska doba zrn je različna. Njihovo trajanje je odvisno od njihovega dosega (ang.
Scope). JSF pozna različne dosege, ki se uporabljajo za različne namene prikazovanja
podatkov. Npr. ob prijavi si želimo zapolniti uporabnika, dokler bo le-ta uporabljal spletno
aplikacijo. Zato je potrebno uporabiti ustrezen doseg. Vrste dosegov in njihov opis si lahko
preberete v Tabela 1.
Tabela 1: Vrste JSF dosegov
Doseg Opis Podprto
@RequestScoped Zrno obstaja tako dolgo, kot zahteva HTTP na odgovor. Ustvarjeno je z zahtevo HTTP in uničeno, ko se konča odziv na zahtevo HTTP.
upravljavska zrna, zrna CDI
@NoneScoped
Zrno obstaja tako dolgo kot eno EL (Expression Language) vrednotenje. Ustvari se na podlagi EL vrednotenja in se uniči takoj po EL vrednotenju.
upravljavska zrna, zrna CDI
@ViewScoped
Zrno obstaja tako dolgo, dokler traja interakcija uporabnika z istim JSF pogledom v brskalnikovem oknu/zavihku. Ustvari se z zahtevo
upravljavska zrna, zrna CDI
Razvoj uporabniških vmesnikov spletnih aplikacij s pomočjo Java PrimeFaces
9
HTTP in se uniči, ko uporabnik zahteva odprtje drugega okna/zavihka (uporabnik uporabi postback na drug pogled).
@SessionScoped
Zrno obstaja vzporedno s sejo. Ustvari se na prvo zahtevo HTTP in se uniči, ko se seja HTTP razveljavi.
upravljavska zrna, zrna CDI
@ApplicationScoped
Zrno obstaja tako dolgo, kot spletna aplikacija. Ta se ustvari na prvo zahtevo HTTP in se uniči, ko se spletna aplikacija izklopi.
upravljavska zrna, zrna CDI
@CustomScoped
Zrno obstaja tako dolgo kot vstop zrna v »poseben« imenik, ki je ustvarjen za ta doseg.
zrna CDI
Če želite o tehnologiji JSF izvedeti še več, si lahko to preberete v knjigi Core JavaServer
Faces [3] ali na spletu [14] .
2.3 Primer aplikacije Hello world
Do sedaj smo omenili vse bistvene značilnosti tehnologije JSF. Zato je čas, da vse skupaj
prikažemo še na praktičnem primeru v aplikaciji Hello world. Preden pa se lotimo same
izdelave aplikacije, omenimo vso potrebno programsko opremo, ki je potrebna za
uspešno delovanje. V ustvarjeno aplikacijo smo kasneje vključili knjižnico PF, kjer smo
prikazali njeno uporabo. Omenimo še, da je vsa omenjena programska oprema prosto
dostopna.
Primeri, prikazani v diplomskem delu, delujejo ob naslednji programski opremi:
Java JDK 1.7+
(http://www.oracle.com/technetwork/java/javase/downloads/index.html),
PrimeFaces 5.2 (http://www.primefaces.org/downloads),
MySQL ali katerakoli druga podatkovna baza z gonilnikom JDBC
(https://netbeans.org/kb/docs/javaee/javaee-gettingstarted-pf-screencast.html),
Netbeans 8.0.2 ali katerokoli drugo javansko okolje
(https://netbeans.org/kb/docs/javaee/javaee-gettingstarted-pf-screencast.html),
Apache Maven build tool (https://maven.apache.org/download.cgi),
aplikacijski strežnik GlassFish 4.0+ (uporabimo lahko tudi Tomacat 6+), omenjana
strežnika podpirata Javo EE 7 Web.
Razvoj uporabniških vmesnikov spletnih aplikacij s pomočjo Java PrimeFaces
10
Uporabili smo razvojno programsko okolje Netbeans, ki omogoča obsežno podporo za
razvoj aplikacij JSF, z uporabo aplikacijskega strežnika GlassFish. Programska oprema
deluje na operacijskih sistemih Linux, Mac OS X in Windows. Za začetek ustvarimo nov
Maven projekt.
Maven
Apache Maven je programsko orodje za boljše razumevanje in vodenje projektov. Temelji
na konceptu projektnega objektnega modela (ang. Project Object Model), ki lahko poroča,
upravlja z izdelavo projekta in dokumentira osrednji del informacij. Ker je z njim postopek
izdelave preprost ter zagotavlja enoten sistem gradnje s potrebnimi informacijami o
kakovosti projekta, ga je dobro uporabiti kot osnovo, nad katero smo zgradili naše
primere. Omenimo še, da se ob uporabi Maven projekta vse odvisnosti (.jar knjižnice)
avtomatsko naložijo ob odprtju projekta na drugem sistemu oz. računalniku (z vso
potrebno programsko opremo), kar je velika prednost Maven-a [1] .
Izberemo torej Maven projekt, kjer nato izberemo opcijo Web application (Slika 7).
Poimenujemo in nastavimo lokacijo projekta ter aplikacijski strežnik GlassFish. Po
uspešnem kreiranju projekta lahko nadaljujemo z ustvarjanjem naše prve aplikacije.
Slika 7: Kreiranje novega Maven projekta
Razvoj uporabniških vmesnikov spletnih aplikacij s pomočjo Java PrimeFaces
11
Pred nadaljevanjem opišimo zgradbo projekta. Maven projekt vsebuje pet osnovnih
imenikov (Web Pages, Source Packages, Dependencies, Java Depenencies, Project
Files). Vsak od teh služi svojemu namenu. V imeniku Web Pages so definirani vsi
elementi kako naj spletna aplikacija zgleda, kot so .css, .xhtml, .js datoteke. Logika
aplikacije je zapisana v imeniku Source Packages, kjer se nahajajo logični paketi. Vse
potrebne knjižnice se nahajajo v imeniku Dependencies in Java Dependencies.
Informacije in konfiguracije projekta pa se nahajajo v imeniku Project Files. Vse skupaj
prikazuje Slika 8.
Slika 8: Zgled imeniške strukture Maven projekta
Kot lahko opazimo, naš projekt že vsebuje Hello world stran, ki se nahaja v index.html.
Vendar vsebovana aplikacije še ne vsebuje tehnologije JSF. Zato moramo to dodati v naš
projekt. To storimo z desnim klikom na projekt, kjer pod lastnostmi izberemo Frameworks
-> Add -> JavaServerFaces (Slika 9). Ustvari se nam index.xhtml (Slika 10), ki vsebuje
našo prvo aplikacijo JSF. Opazimo lahko, da so značke poimenovane po standardu JSF.
Omenimo še, da lahko v našo aplikacijo poljubno vstavljamo značke html, vendar je to
precej nezaželeno zaradi kasnejših neprijetnih napak. V dokument lahko sedaj dodajamo
JSF značke, kot npr. <h:inputText />, in nato vse skupaj zaženemo. Ob zagonu se nam
hkrati zažene strežnik GlassFish (če le-ta še ne deluje), s pomočjo katerega pridemo do
naše prve aplikacije JSF.
Razvoj uporabniških vmesnikov spletnih aplikacij s pomočjo Java PrimeFaces
12
Slika 9: Vključitev ogrodja JSF
Slika 10: Primer aplikacije Hello world
2.4 Komponentne knjižnice
S tehnologijo JSF lahko izdelujemo dinamične spletne aplikacije, saj omogoča preprosto
izgradnjo strani z avtomatizacijo pogostih opravil, kot so preselitve vhodnih podatkov v
javanska zrna z razčlenjevanjem vhodnih podatkov. Ampak še vedno se pojavlja problem
pri gradnji uporabniško bogatih spletnih strani. Problem predstavljajo razvijalci, saj niso
vedno sposobni ustvariti prijazne (ang. fancy) uporabniške komponente. Dobra novica je,
da obstajajo zato različne odprtokodne knjižnice, ki zagotavljajo večkratno uporabo
komponent za vse aplikacije JSF, ena izmed teh je tudi PF. Te knjižnice dodajo bogato
uporabo komponent jeziku JSF, kot tudi dodatne funkcionalnosti npr. pretvornike (ang.
converters). Knjižnice skupaj tvorijo kup CSS, JS in JQuery kode, ki nam omogoča rabo
različnih komponent . Ostale knjižnice so še RichFaces, ICEFaces, OpenFaces,
OmniFaces, Apache MyFaces, ADF Faces in Pretty Faces. Ker je omenjenih knjižnic vse
prej kot malo, smo v poglavju 5 naredili krajšo primerjavo omenjenih knjižnic s knjižnico
PF.
Razvoj uporabniških vmesnikov spletnih aplikacij s pomočjo Java PrimeFaces
13
3 JAVA PRIMEFACES
Do sedaj smo obravnavali samo JSF in programsko opremo, ki jo potrebujemo za
knjižnico PF. Sedaj pa preidimo na samo knjižnico. PF je vodilna odprtokodna knjižnica
uporabniških komponent za razvoj JSF spletnih aplikacij. PF zagotavlja uporabo več kot
stotih JSF uporabniških komponent ter podporo različnim temam. Knjižnica je ustvarila
skupina PrimeTek in je stara približno 7 let. V zadnjih letih velja za najbolj popularno,
najbolje ocenjeno komponentno knjižnico za razvoj aplikacij JSF [12] . Seznam vseh
uporabniških komponent si lahko pogledate na njihovi spletni strani [11] . Logotip knjižnice
prikazuje Slika 11.
Slika 11: Logotip PF [11]
Lastnosti knjižnice:
bogat nabor komponent (urejevalnik HTML, dialog, tabele, grafi itd.),
vgrajena AJAX podpora, ki temelji na standardu JSF 2.0 in AJAX APIs,
samo en jar, nič konfiguracij in brez dodatnih odvisnosti,
podpora Native AJAX Push/Comet,
komplet Mobile UI za ustvarjanje mobilnih spletnih strani (IPhone, Palm, Android,
Blackberry, Windows Mobile itd.),
podpora 30+ vgrajenim temam, vizualno orodje za oblikovanje tem,
obsežen priročnik s 450+ strani (najdemo ga na njihovi spletni strani [11] ),
velika, aktivna in živahna skupnost uporabnikov (za pomoč pri reševanju napak in
uporabo različnih uporabniških komponent),
razvita s pomočjo razvijalcev z namenom ustvariti lepše, bogatejše spletne strani
in
uporaba knjižnice z značko <p:… />.
Knjižnica PF vsebuje štiri različne možnosti podpore. Razlikujejo se predvsem po uporabi
verzije knjižnice (npr. skupnost lahko uporablja samo določene verzije knjižnice PF,
Razvoj uporabniških vmesnikov spletnih aplikacij s pomočjo Java PrimeFaces
14
medtem ko ima razvijalec z elite podporo možnost uporabe vseh), odzivnosti na napake in
pomoči pri implementaciji. Njihov opis prikazuje Tabela 2.
Tabela 2: Podpora knjižnice PF
Podpora Pristojbina Opis
Skupnost (ang. Community)
brezplačno Podpora je prostovoljna s strani skupnosti PF, kjer ni nobenega jamstva za pridobitev odziva.
Elite 224,03 € na razvijalca PF Elite je letna naročnina, ki znaša 224,03 € na posameznega razvijalca in ne zagotavlja podpore s strani PrimeTek-a. Omogoča nam uporabo vmesnih verzij knjižnice.
Case Cena je odvisna od uporabniške zahteve in števila razvijalcev.
Če potrebujete novo funkcionalnost ali izboljšavo ali popravilo določene funkcionalnosti brez podpore PRO, je to prava izbira. Ceno se določi glede na potreben trud in čas za dosego rešitve, ki temelji na zapletenosti zahteve.
Pro Cena je odvisna od uporabniške zahteve in števila razvijalcev.
PF PRO je paket s polno podporo, ki vključuje napredne podporne storitve.
Ker se knjižnica še vedno razvija, s čimer pridobiva nove funkcionalnosti in komponente je
za te novosti dobro vedeti. Novostim lahko sledimo na spletni strani [8] . V zadnjem času
so te posodobitve namenjene večinoma odzivnemu spletnem oblikovanju, razvijata pa se
tudi temi Rio in Modena (več o PF temah bomo povedali v podpoglavju 4.3). Kot vemo,
nobeno razvojno orodje ni brez hroščev (ang. bug free), zato vsebuje knjižnica skupnostni
forum, kjer se lahko zastavijo vprašanja o morebitnih hroščih knjižnice. Hkrati pa nam nudi
pomoč strokovnjakov pri delu s komponentami knjižnice [9] .
Odzivno spletno oblikovanje (ang. Responsive Web Design)
S tem načinom oblikovanja spletnih strani skušamo izdelati prilagodljive spletne aplikacije,
ki delujejo na tisočih različnih zaslonih in napravah. Namen je torej prilagodljivost spletne
aplikacije glede na zaslon, na katerem je prikazana. Knjižnica PF omogoča uporabo
odzivnega spletnega oblikovanja na skoraj vseh svojih komponentah. Gre za zelo
pomemben dejavnik, saj spletne strani delujejo na vseh platformah (npr. iOS, Android,
Windows, Blackberry), kar pomeni, da imamo ogromno različnih dimenzij zaslonov. Zaradi
boljšega razumevanja odzivnega spletnega oblikovanja omenimo razliko med spletno
mobilno aplikacijo in mobilno aplikacijo. Če torej želimo narediti aplikacijo, ki bo delovala
Razvoj uporabniških vmesnikov spletnih aplikacij s pomočjo Java PrimeFaces
15
na vseh mobilnih napravah, jo je potrebno razviti posebej za vsako platformo (Android,
iOS, Windows). V primeru spletne mobilne aplikacije pa moramo razviti samo eno spletno
aplikacijo, ki je oblikovana po konceptu odzivnega spletnega oblikovanja, kar nam
prikrajša veliko dela in časa.
Knjižnica PF pa poleg po svojih uporabniških komponentah slovi tudi po prosto dostopni
dokumentaciji (najdemo jo na spletni strani [11] ), ki je zelo dobro napisana, hkrati pa si
lahko uporabo komponent ogledamo tudi v živo. V njej so razložene uporabniške
komponente knjižnice in njihova uporaba. Če pa želimo o sami knjižnici izvedeti še več, si
lahko to preberemo v dodatnih, plačljivih knjigah, kot so PrimeFaces Cookbook Second
Edition [2] , PrimeFaces Starter [4] , PrimeFaces Beginner's Guide [12] , Learning
PrimeFaces Extensions Development [5] itd. Nekatere izmed njih vsebujejo tudi video za
lažje in hitrejše učenje ter razumevanje.
Omenili smo, da je PF vodilna odprtokodna knjižnica za grajenje spletnih aplikacij, pa si
poglejmo nekaj podjetij, ki jo uporabljajo:
BMW,
UniCredit,
Volvo,
SIEMENS,
NVIDIA,
HP,
DELL,
Ebay.
Knjižnica omogoča uporabo različnih funkcionalnosti. V nadaljevanju omenjamo tri najbolj
izstopajoče.
Podpora lastnosti povleci-spusti
PF knjižnica zagotavlja lastnost povleci-spusti (ang. drag-and-drop) z uporabo različnih
možnosti, kot so:
horizontalno vlečenje,
vertikalno vlečenje,
kloniranje,
povrnitev elementa in
Razvoj uporabniških vmesnikov spletnih aplikacij s pomočjo Java PrimeFaces
16
vlečenje znotraj vsebnika (ang. container).
To lastnost lahko uporabimo za gradnjo uporabniško bogatih in interaktivnih spletnih
strani.
Delo z GoogleMaps ob uporabi komponente GMap
Ena izmed prednosti knjižnice je tudi uporaba GMap komponente, ki nam omogoča delo z
Googlovimi zemljevidi. Uporabimo lahko zumiranje, cestni pogled, informacijsko okno, itd.,
kar je zelo uporabno pri razvoju aplikacij, ki temeljijo na geolokacijskih storitvah.
Multimedijske komponente
Knjižnica PF omogoča uporabo multimedijskih komponent za delo s slikami in video
posnetki, kot so ImageCropper za obrezovanje slik, ImageCompare za primerjavo dveh
slik, PhotoCam za pridobitev slike s spletne ali mobilne kamere, Galleria za prikaz galerije
slik s poljubnimi učinki itd.
Ker je knjižnica zelo priljubljena, ni čudno, da se z njo razvijajo tudi sorodne knjižnice. Te
so:
PrimeFaces Mobile,
PrimeFaces Extensions in
PrimeUI.
3.1 PrimeFaces Mobile
PrimeFaces Mobile (kratica PFM) je knjižnica za ustvarjanje JSF aplikacij, optimiziranih za
mobilne naprave. PFM zagotavlja podporo za različne mobilne platforme, saj je zgrajen na
podlagi knjižnice jQuery Mobile ter na dotik optimiziranem jeziku HTML 5.
PFM omogoča:
RenderKit za poljubne PF komponente,
izvajanje AJAX klicev na mobilnih napravah,
integriran navigacijski model,
nalaganje v ozadju (ang. lazy loading),
uporabo pripomočkov za odzivno spletno oblikovanje.
Razvoj uporabniških vmesnikov spletnih aplikacij s pomočjo Java PrimeFaces
17
3.2 PrimeFaces Extensions
PrimeFaces Extensions je odprtokodna knjižnica za JSF, ki je zgrajena kot razširitev
knjižnice PF. Sestavljena je iz razširjenih komponent, ki so pogrešljive v JSF, ali z
izboljšanimi komponentami, ki že obstajajo nekje, vendar tam ne delujejo učinkovito.
Knjižnica nudi uporabne pretvornike, ClientBehaviors, TagHandlers itd. Primere uporabe
si lahko pogledate na spletni strani PF Extensions [10] . Komponente so testirane z JSF
implementacijo Mojarra in MyFaces.
3.3 PrimeUI
PrimeUI je zbirka bogatih JavaScript gradnikov (ang. widget), ki temelji na jQuery-jevi
knjižnici (Slika 12). Sestavljena je iz priljubljenih PF komponent. Ker je knjižnica PF
namenjena samo JSF spletnim aplikacijam in z njo ne moremo graditi HTML ali php
spletnih strani, imamo tukaj knjižnico PrimeUI, ki je namenjena ravno temu. Trenutno
vsebuje samo tretjino komponent PF, vendar se to število z vsako novo verzijo povečuje.
Trenutna verzija je PrimeUI 2.0. S tem lahko razvijalci svoje uporabniško bogate spletne
aplikacije razvijajo tudi z ostalimi orodji za razvoj spletnih aplikacij.
Slika 12: Komponente knjižnice PrimeUI [11]
Razvoj uporabniških vmesnikov spletnih aplikacij s pomočjo Java PrimeFaces
18
4 PRAKTIČNO DELO
V tem poglavju smo opisali aplikacijo, ki smo jo naredili v sklopu diplomskega dela, hkrati
pa smo si pogledali uporabo nekaterih komponent knjižice PF.
Kot praktični del diplomske naloge smo ustvarili uporabniško bogato spletno aplikacijo, ki
deluje na konceptu odzivnega spletnega oblikovanja, na kateri smo prikazali uporabo
različnih komponent. Slika 13 prikazuje eno izmed možnih pogledov aplikacije. V delu
smo uporabili razne zanimive komponente, kot so:
DataTable,
Accordion,
ScrollPanel,
TabView,
Animated Charts,
Galleria,
TagCloud.
Slika 13: Aplikacija, narejena v sklopu diplomskega dela
Razvoj uporabniških vmesnikov spletnih aplikacij s pomočjo Java PrimeFaces
19
Uporabo nekaterih komponent smo v nadaljevanju tudi opisali. Poleg omenjene aplikacije
smo hkrati naredili tudi aplikacijo za pregled revizijske sledi, do katere lahko dostopa
skrbnik spletne strani. Tu smo se srečali z več kot 100.000 podatki, ki smo jih zajemali iz
podatkovne baze. Zaradi velike količine podatkov, smo njihov prikaz implementirali z
uporabo nalaganja v ozadju (ang. lazy loading). S tem smo občutno pohitrili nalaganje
poljubnih podatkov ob zahtevi uporabnika. Podatkovni tabeli (ang. DataTable) smo dodali
še urejanje, filtriranje ter iskanje po datumih (Slika 14).
Slika 14: Prikaz ene izmed tabel za pregled revizijske sledi skrbniškega modula
4.1 Vključitev in uporaba knjižnice
Vključitev knjižnice PF v naš projekt je precej enostavna, saj za vključitev potrebujemo
samo eno .jar datoteko, ki si jo lahko prenesemo s strani PF [11] . V poglavju 2.3 smo
opisali, kako je sestavljen Maven projekt za razvoj JSF spletnih aplikacij. V ustvarjeni
projekt smo vključili knjižnico PF, tako da smo dopolnili datoteko pom.xml. Dodamo novo
odvisnost (ang. dependency) za knjižnico PF. Ob pravilni vključitvi odvisnosti nam Maven
projekt samodejno poskrbi za vse potrebne vključitve datotek (v našem primeru ene).
Slika 15 prikazuje vključitev knjižnice, kjer lahko opazimo, da se poleg knjižnice dopiše
tudi verzija le-te (v našem primeru 5.2).
Razvoj uporabniških vmesnikov spletnih aplikacij s pomočjo Java PrimeFaces
20
Slika 15: Vključitev knjižnice PF v Maven projekt
Ob uspešni vključitvi knjižnice, moramo za pravilno delovanje naše spletne aplikacije
dodati še imenski prostor datoteke, kar je razvidno s Slika 16. Po opravljenem postopku
lahko začnemo uporabljati komponente knjižnice (npr. <p:spinner />).
Slika 16: Vključitev imenskega prostora s primerom uporabljene komponente PF
Pa si poglejmo nekaj primerov vključitve raznih komponent v naš projekt.
Input
Začeli bomo z uporabo PF input komponente, s katero bomo ustvarili enostaven obrazec.
V obrazec bo možno vnesti tri različne tipe podatkov. Ti so uporabniško ime, geslo in
datum rojstva. Pričnemo z gradnjo dveh Javanskih razredov, Uporabnik.Java in
UporabnikController.Java, slednji bo predstavljal naše zrno CDI, preko katerega bomo
kasneje dostopali do naših spremenljivk v gradnji uporabniškega vmesnika. Slika 17 in
Slika 18 prikazujeta glavni odsek implementacije teh dveh razredov.
Razvoj uporabniških vmesnikov spletnih aplikacij s pomočjo Java PrimeFaces
21
Slika 17: Uporabnik.Java
Slika 18: UporabnikController.Java
Ko smo ustvarili oba razreda, moramo zgraditi samo še uporabniški vmesnik, ki ga
prikazuje Slika 19. Pomembna je vključitev značke <h:form>, saj nam omogoča metodo
post-back za uspešno shranjevanje podatkov. Slika 20 prikazuje rezultat, ki ga vidimo ob
zagonu ustvarjene aplikacije. Kot lahko opazimo, smo se v večini ukvarjali samo z logiko
aplikacije, izgled pa se je generiral samodejno ob vključitvi potrebnih značk. Prikaz
aplikacije že vsebuje vključitev teme PF.
Razvoj uporabniških vmesnikov spletnih aplikacij s pomočjo Java PrimeFaces
22
Slika 19: Input.xhtml
Slika 20: Prikaz aplikacije za vnos obrazca
Preverjanje pravilnosti vnosa podatkov
Sedaj želimo vnosnim poljem dodati preverjanje pravilnosti vnosa podatkov. Knjižnica PF
poskrbi za enostavno uporabo te funkcionalnosti. Najbolje, da si vse skupaj pogledamo na
primeru (Slika 21). Omenimo, da se za uporabo validacije uporabljajo značke z začetnico
<f: … >. V danem primeru smo uporabili validacijo za določanje dolžine vnosa, kjer smo
nastavili minimalno število črk, potrebnih za uspešno shranjevanje. Z dodano značko
<p:message> omogočimo izpis opozorila/napake, ki se lahko pojavi, če vnos ne izpolnjuje
dane zahteve, ki je v našem primeru minimalno število vnosnih črk. Hkrati smo uporabili
AJAX osveževanje, ki je implementirano z značko <p:ajax>.
Razvoj uporabniških vmesnikov spletnih aplikacij s pomočjo Java PrimeFaces
23
Slika 21: Primer validacije
Charts
Knjižnica poleg mnogih komponent omogoča tudi izris grafikonov. Med najbolj
uporabljenimi so trakasti, linijski in tortni grafikon. Z novejšimi verzijami knjižnice se
izboljšuje njihova prilagodljivost na odzivno spletno oblikovanje, ki že zdaj deluje precej
dobro. Za uporabo grafikona (npr. linijskega) uporabimo ustrezno komponento <p:chart
type=''line'' model=''Managed bean ali CDI bean'' responsive=''true''>. Z atributom type
določimo vrsto grafikona, prikazani podatki se berejo iz atributa model, ki ima v zrnu
definirane podatke za izris grafikona. Odzivnost določimo z atributom responsive, ki nato
sam poskrbi za pravilen prikaz grafikona na spletni aplikaciji (Slika 22).
Slika 22: Prikaz linijskega grafikona
DataTable
Večina spletnih aplikacij za shranjevanje podatkov uporablja podatkovno bazo. Ti podatki
se uporabniku prikazujejo na vrsto različnih načinov, v osnovi pa jih prikažemo kot tabelo.
PF uporablja za tabelarični prikaz podatkov značko <p:dataTable>. V naslednjem primeru
Razvoj uporabniških vmesnikov spletnih aplikacij s pomočjo Java PrimeFaces
24
smo prikazali uporabo te značke, pri kateri smo podatke za prikaz pridobili iz Java
podatkovne baze. Komunikacijo med podatkovno bazo in aplikacijo lahko dosežemo na
mnogo različnih načinov, v naši aplikaciji smo za komunikacijo uporabili tehnologijo JPA,
ki smo jo podrobneje opisali v nadaljevanju. Značka dataTable je ena izmed možnosti
nabora PF značk za prikaz podatkov iz poljubne podatkovne baze. V zrnu moramo
uporabiti poljuben Java kolektor, ki ga napolnimo z baznimi podatki. Za različne prikaze se
uporabljajo različni kolektorji. Najbolj osnoven je List<Objekt>. Ko imamo pripravljene
podatke, lahko te vstavimo v naš uporabniški vmesnik, kar prikazuje Slika 23. Vidimo
lahko veliko uporabljenih atributov, ki nam podrobneje izrišejo izgled tabele. Za delovanje
so obvezni atributi value, ki nam določa kolektor, v katerem se nahajajo podatki za prikaz,
in var, ki nam določa spremenljivko, po kateri kasneje določamo stolpce, kateri se naj
izrišejo. Če želimo, da je naša tabela odzivna, uporabimo atribut reflow, za izbor poljubne
vrstice pa uporabimo selection. Stolpce v tabeli lahko poljubno sortiramo, filtriramo in
urejamo, s čimer nimamo dosti dela, saj so funkcionalnosti že implementirane v knjižnici
PF. Vse, kar moramo storiti, je določitev želene funkcionalnosti za posamezen stolpec,
kar lahko razberemo s Slika 23. Rezultat prikazuje Slika 24.
Slika 23: Implementacija PF tabele
Razvoj uporabniških vmesnikov spletnih aplikacij s pomočjo Java PrimeFaces
25
Slika 24: Prikaz tabele s knjižnico PF
Nalaganje v ozadju (ang. lazy loading)
Kot vemo, terja zahteva na podatkovno bazo svoj čas. V praksi se velikokrat zgodi, da
tabela, na katero se sklicujemo vsebuje, več 100.000 podatkov (lahko tudi več milijonov
podatkov). Zahteve na takšno tabelo so časovno zelo potratne, zato se jim je dobro
izogniti. To časovno zahtevnost lahko na učinkovit način občutno skrajšamo z
implementacijo nalaganja v ozadju nad našo tabelo. Zadeva deluje tako, da iz baze
vzamemo samo trenutne podatke, ki bodo vidni uporabniku. Na tak način se izognemo
ponavljajočemu se pridobivanju vseh podatkov, kar nam viša časovno zahtevnost.
Nalaganje v ozadju vključimo z uporabo atributa lazy, ki ga nastavimo na true. Slabost, ki
se tu pojavi, je, da moramo ob uporabi nalaganja v ozadju poizvedbe na podatkovno bazo
spisati sami, kar velja tudi za filtriranje, urejanje itd. Implementacija se lahko zelo zavleče,
vendar se ob veliki količini podatkov zelo obrestuje.
4.2 JavaPersistanceAPI
Ker danes skoraj vsaka spletna aplikacija izvaja shranjevanje in pridobivanje podatkov iz
podatkovnih baz, je dobro vedeti, kako priti do potrebnih podatkov na najbolj eleganten in
enostaven način. Razvijalci v Javi na splošno porabijo veliko vrstic kode za dostop do
podatkovnih baz. Da bi se temu izognili, lahko uporabimo tehnologijo JPA, ki tvori most
med objektnim modelom (Java) in relacijskim modelom (podatkovna baza). JPA je
okrajšava za Java Persistance API (Application programming interface) in je zbirka
razredov in metod za shranjevanje velike količine podatkov. Da bi torej poenostavili
dostop do podatkovne baze, programer samo sledi ogrodju JPA, ki omogoča preprosto
interakcijo s primerkom iz podatkovne baze (Slika 25).
Razvoj uporabniških vmesnikov spletnih aplikacij s pomočjo Java PrimeFaces
26
Slika 25: Prikaz orodja JPA [13]
Ker je JPA odprtokodni paket za razvoj programske opreme, so nekatera podjetja, kot so
Oracle, Redhat, Eclipse, začela dodajati svoje funkcionalnosti, kot so Hibernate,
Eclipselink, Toplink, Spring Data JPA. S tem želijo zagotoviti nove izdelke in hkrati
povečali funkcionalnost orodja. JPA je zgrajen iz več enot:
Entity Manager Factory (skrbi za pretok podatkov),
Entity Transaction (vodenje SQL poizvedb – insert, update, delete),
Entity Manager (predstavlja povezavo do podatkovne baze),
Entity (razredi, ki predstavljajo sliko baznih podatkov),
Query (spraševanje in iskanje po podatkih) in
Persistance (definira povezavo do podatkovne baze).
Vsaka izmed naštetih enot omogoča razne funkcionalnosti za upravljanje in dostop do
podatkovne baze. Podrobnejši opis tehnologije in primer njene uporabe najdemo na [13] .
4.3 Uporaba PrimeFaces Tem
Knjižnica PF poleg bogatega nabora komponent hkrati podpira tudi vrsto različnih tem.
Trenutno je na voljo 38 različnih tem, ki jih lahko brezplačno vključimo v našo spletno
aplikacijo. Privzeto knjižnica uporablja temo aristo, ki ne potrebuje nobene dodatne
konfiguracije. Za uporabo drugih tem je potrebno v aplikacijo vključiti odvisnost teme, ki jo
želimo vključiti in jo konfigurirati. Različne teme so shranjene kot .jar datoteke in jih lahko
najdemo na http://repository.primeface.org/org/primefaces/themes/. Nekatere izmed teh
tem so afterdark, black-tie, cruze, cupertino, delta, dot-luv, eggplant, home, mint-choc,
Razvoj uporabniških vmesnikov spletnih aplikacij s pomočjo Java PrimeFaces
27
rocket, start, sunny, vader in south-street. Zadnja je bila uporabljena v našem praktičnem
primeru in si jo lahko pogledate v zgornjih primerih uporabe komponent (Slika 20 in Slika
24).
Če želimo v naš projekt vključiti novo temo (v Maven projekt), to storimo tako, da dodamo
knjižnico teme v našo odvisnost (pom.xml), kar prikazuje Slika 26. Pod <artifactId>
navedemo ime teme, ki jo želimo vključiti. Možno je vključiti tudi vse teme. To storimo
tako, da namesto poljubne teme v <artifactId> napišemo besedo all-themes.
Slika 26: Vključitev poljubne teme v Maven projekt z uporabo knjižnice PF
Sedaj smo uspešno vključili poljubno temo v naš projekt. Temo moramo še konfigurirati
tako, da pravilno nastavimo primefaces.Theme parameter v datoteki web.xml. Slika 27
prikazuje uporabo teme south-street v naši spletni aplikaciji.
Slika 27: Konfiguracija poljubne teme PF knjižnice
Poleg že ustvarjenih tem, ki jih zagotavlja knjižnica PF, lahko hkrati ustvarimo tudi svojo
lastno temo. To storimo tako, da uporabimo orodje ThemeRoller. Gre za spletno orodje,
dostopno na http://jqueryui.com/themeroller/. S pomočjo orodja priredimo ustvarjene
datoteke CSS za PF teme po svoji želji. Na koncu svojo ustvarjeno temo shranimo kot .jar
datoteko. Postopek vključitve in ustvarjene teme je enak kot za prej omenjene teme.
PF vsebuje tudi licenčne teme za napredne razvijalce, ki so dostopne na njihovi spletni
strani. Teme so dodatno urejene in v popolnosti podpirajo odzivno spletno oblikovanje.
Trenutno so popularne naslednje licenčne teme:
MODENA,
Razvoj uporabniških vmesnikov spletnih aplikacij s pomočjo Java PrimeFaces
28
RIO,
SENTINEL,
SPARK in
RONIN.
4.4 Čiščenje napak (ang. debug)
Ker se v vsaki aplikaciji pojavljajo različne vrste napak, je dobro, da jih čim hitreje
ugotovimo in »polovimo«. Pri razvoju spletnih aplikacij je iskanje teh napak še toliko težje,
saj so razhroščevalniki (ang. debugger) precej slabši kot pri namiznih aplikacijah. V
pomoč so nam lahko razna orodja za brskalnike, kot sta FireBug za brskalnik Firefox ali
Crome Developer Tool za brskalnik Crome. Napake pa lahko iščemo tudi v svojem
programskem razvojnem okolju z vključitvijo raznih paketov v naš projekt. Eden izmed teh
je paket Java Logging API, ki omogoča konfiguracijo raznih sporočil, ki se naj izpišejo ob
določenem dogodku. Java Logging API vsebuje uporabo sedmih različnih sporočil
(warning, info, config, fine, finer, finest in sever), s katerimi opredelimo stopnjo (resnost)
problema [15] .
Razvoj uporabniških vmesnikov spletnih aplikacij s pomočjo Java PrimeFaces
29
5 PRIMERJAVA KNJIŽNIC
Kot smo že omenili v poglavju 2.4, lahko v JSF vključimo razne knjižnice. Da bi naredili
manjšo primerjavo prej omenjenih knjižnic, moramo vedeti, da se v zadnjem času za
razvoj uporabniško bogatih spletnih strani uporabljajo predvsem naslednje tri knjižnice:
PrimeFaces (AJAX ogrodje z JSF komponentami [11] ),
RichFaces (odprtokodna komponenta knjižnica z AJAX podporo za JSF [17] ) in
IceFaces (odprtokodno JSF razširitveno ogrodje z bogatimi komponentami in
AJAX podporo, brez JS-ja [16] ).
Namen teh knjižnic je torej predvsem omogočiti lažjo izdelavo spletnega uporabniškega
vmesnika. Postavi se nam vprašanje, katero izmed njih izbrati za razvoj spletnih aplikacij
oz. katera je boljša od ostalih dveh. Pa si najprej poglejmo trend povpraševanja teh
knjižnic s Slika 28, kjer je jasno razvidno, kdo v zadnjem času prevladuje. Povpraševanje
knjižnice PF se kljub manjšim padcem neprestano povečuje, kar pa ne moremo trditi za
ostali knjižnici. Da bomo bolje razumeli, zakaj je temu tako, si poglejmo podrobnejšo
primerjavo teh treh knjižnic v Tabela 3 [6] .
Slika 28: Primerjava povpraševanja po treh vodilnih knjižnic za uporabo vizualnih komponent [11]
Razvoj uporabniških vmesnikov spletnih aplikacij s pomočjo Java PrimeFaces
30
Tabela 3: Primerjava vodilnih knjižnic za razvoj JSF spletnih aplikacij z uporabo uporabniških
bogatih komponent
Kriterij 1 Komponente na voljo Ocena
PrimeFaces Trenutno 117 komponent z možnostjo uporabe
knjižnice PF Extensions. Možna vključitev različnih
tem z opcijo ustvarjanja svoje lastne teme.
5
RichFaces 39 komponent z možnostjo ustvarjanja svojih z
orodjem CDK (Component Development Kit).
Malo konkretnih primerov uporabe.
3
IceFaces Okoli 70 komponent z možnostjo vključitve ACE
komponent (IceFaces Advanced Components), ki
temeljijo na gradnji bogatih spletnih aplikacij z 40+
komponentami.
4
Kriterij 2 Začetek uporabe Ocena
PrimeFaces Knjižnica vsebuje začetno stran. Vse, kar moramo
narediti, je prenesti .jar datoteko v naš projekt ter ji
pravilno določiti imenski prostor. Preprosteje ne
gre.
5
RichFaces RichFaces dokumentacije ne vsebuje opisa
namestitve. Potrebno je namestiti nekaj knjižnic in
odvisnosti. Za dodatne funkcionalnosti je znova
potrebno prenesti ustrezne knjižnice za pravilno
delovanje.
3
IceFaces Za pomoč uporabimo vodič, kako knjižnico vključiti
v projekt. Potrebno je nastaviti nekaj knjižnic in
odvisnosti.
4
Kriterij 3 Dokumentacija Ocena
PrimeFaces Uporaba obsežne spletne dokumentacije z
obstoječimi primeri uporabe. Zelo dobro delovanje
forumov o njeni uporabi in rešitvah o napakah.
5
RichFaces Uporaba spletne dokumentacije, ki se z vsako
novo verzijo posodobi. Pomanjkanje vadnic
uporabe knjižnice.
4
IceFaces Zelo obsežna dokumentacija v zadnjem času
podprta hkrati z video posnetki. Potrebna
4
Razvoj uporabniških vmesnikov spletnih aplikacij s pomočjo Java PrimeFaces
31
registracija za ogled.
Kriterij 4 Značilnosti Ocena
PrimeFaces Glavna prednost knjižnice je velika količina
različnih komponent, ki imajo AJAX podporo.
Vsebuje AJAX Push (PrimePush).
4
RichFaces Glavna značilnost je uporaba AJAX Push-a
(RichFaces Push). Omogoča zelo dobro uporabo
spraševanja (ang. query)
5
IceFaces Glavna prednost knjižnice je samodejna uporaba
AJAX posodobitve. Vgrajen AJAX Push (IcePush).
5
Kriterij 5 Slabosti Ocena
PrimeFaces Je najmlajša knjižnica, možnost pojavitve
nekaterih napak. Manj JSF izboljšav kot ostali dve.
5
RichFaces Na voljo je malo število komponent.
Dokumentacija bi bila lahko razširjena.
4
IceFaces Vsebuje veliko hroščev. Z vidika podatkovnih tabel
je veliko manj zmogljiva.
3
Kot je razvidno iz zgornje tabele, ima knjižnica PF svetlo prihodnost. Poleg omenjenih
knjižnic obstajajo še druge knjižnice za jezik JSF, ki pa imajo predvsem drugačen namen
uporabe, zato jih ne bomo posebej obravnavali. Omenimo pa še knjižnico OmniFaces, ki
je bila ustvarjena na podlagi težav jezika JSF. Obstoječa predstavitev knjižnice temelji na
PF in vsebuje veliko različnih funkcionalnosti, kot npr. poudarjanje polj, ki niso prestala
validacije, vključitev konstantnih vrednosti v EL doseg (ang. Scope), avtomatski pretvornik
med objekti, validacija večjih polj hkrati, AJAX podpora za obravnavo izjem itd. Knjižnica
ne vsebuje vizualnih komponent za gradnjo spletnih strani (kot npr. PrimeFaces,
RichFaces in IceFaces). Namesto tega pa nam omogoča lažje delo z obstoječimi
komponentami z uporabo raznih funkcionalnosti [7] .
Razvoj uporabniških vmesnikov spletnih aplikacij s pomočjo Java PrimeFaces
32
6 SKLEP
V diplomskem delu smo predstavili razvoj spletnih aplikacij s pomočjo knjižnice PF, ki nam
ponuja bogato uporabo najrazličnejših komponent za hitrejšo gradnjo predstavitvenega
sloja naše spletne aplikacije. Postaja svetovno znana in se še vedno neprestano razvija.
Kot vsaka knjižnica programske opreme tudi ta vsebuje hrošče, katerih število se z vsako
novo verzijo manjša. Komponente knjižnice temeljijo na upoštevanju možnosti odzivnega
spletnega oblikovanja, kar je v današnjem času zelo pomembno, saj lahko večino opravil
danes opravimo že kar prek mobilnega telefona ali tablice. Hkrati ponuja odličen izgled, ki
ga lahko poljubno spreminjamo. Odzivno spletno oblikovanje našo spletno stran poenoti
za vse različne platforme, kar je bistvena prednost razvoja spletnih aplikacij, ki je prej
potekal ločeno (za razvoj mobilnih in namiznih spletnih strani). Odzivno spletno
oblikovanje nadomesti uporabo knjižnice PFM, kjer se nam ni potrebno več ukvarjati z
dimenzijami zaslona. V delu smo vas hkrati popeljali skozi vso začetno namestitev in
konfiguracijo, kjer smo nato s primeri prikazali uporabo in delovanje tehnologije JSF s
knjižnico PF. Zaradi velikega zanimanja za knjižnico se je ta v zadnjem času začela
razvijati tudi za ostale razvojne jezike spletnih aplikacij, kar je dobro, saj s tem nismo
vezani na določen jezik. Ker knjižnica vsebuje zelo dobro dokumentacijo s primeri, je
učenje precej poenostavljeno.
Če torej želimo ustvarjati moderne spletne aplikacije z uporabniško bogatim in
interaktivnim videzom je mogoče knjižnica PF ravno tisto, kar lahko uporabimo za razvoj
spletnih aplikacij z Javanskimi tehnologijami.
Razvoj uporabniških vmesnikov spletnih aplikacij s pomočjo Java PrimeFaces
33
7 VIRI
[1] Apache Maven Poject, 2015. Dostopno na: https://maven.apache.org/index.html [3.8.2015].
[2] Çalışkan, M., Varaksin, O. PrimeFaces Cookbook Second Edition. Birmingham: Packt Publishing, 2015.
[3] Geary, D., Horstmann, C. Core JavaServer Faces: third edition. Boston: Pearson Education (US), 2010.
[4] Hlavats, I. PrimeFaces Starter. Birmingham: Packt Publishing, 2013.
[5] Jonna, S. Learning PrimeFaces Extensions Development. Birmingham: Packt Publishing, 2014.
[6] Mastertheboss.com. Dostopno na: http://www.mastertheboss.com/jboss-web/richfaces/primefaces-vs-richfaces-vs-icefaces?showall=&start=1 [3.8.2015].
[7] OmniFaces Showcase. Dostopno na: http://showcase.omnifaces.org [3.8.2015].
[8] PrimeFaces, 2015. Dostopno na: http://blog.primefaces.org [3.8.2015].
[9] PrimeFaces Community Forum. Dostopno na: http://forum.primefaces.org [20.8.2015].
[10] PrimeFaces Extensions, 2014. Dostopno na: http://www.primefaces.org/showcase-ext/views/home.jsf [3.8.2015].
[11] PrimeTek. PrimeFaces Ultimate JSF Framework, 2014. Dostopno na: http://primefaces.org [3.8.2015].
[12] Siva Prased Reddy, K. PrimeFaces Beginner's Guide. Birmingham: Packt Publishing, 2013.
[13] Tutorialspoint – Simply Easy Learning : JPA, 2015. Dostopno na: http://www.tutorialspoint.com/jpa/ [3.8.2015].
[14] Tutorialspoint – Simply Easy Learning: JSF, 2014. Dostopno na: http://www.tutorialspoint.com/jsf/ [3.8.2015].
[15] Vogella. Dostopno na: http://www.vogella.com/tutorials/Logging/article.html [3.8.2015].
[16] Wikipedia, IceFaces. Dostopno na: https://en.wikipedia.org/wiki/ICEfaces [3.8.2015].
[17] Wikipedia, RichFaces. Dostopno na: https://en.wikipedia.org/wiki/RichFaces [3.8.2015].