RAZVOJ UPORABNIŠKIH VMESNIKOV SPLETNIH APLIKACIJ S … · IV Web application development using Java PrimeFaces Key words: Java, graphic user interface, web application, PrimeFaces,

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


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.


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.


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.


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.


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


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.


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


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.


@ViewScoped

Zrno obstaja tako dolgo, dokler traja interakcija uporabnika z istim JSF pogledom v brskalnikovem oknu/zavihku. Ustvari se z zahtevo



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.


@ApplicationScoped

Zrno obstaja tako dolgo, kot spletna aplikacija. Ta se ustvari na prvo zahtevo HTTP in se uniči, ko se spletna aplikacija izklopi.


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


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


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.


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.


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,


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


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


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.


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]


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


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


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.


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.


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


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


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


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


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,

http://repository.primeface.org/org/primefaces/themes/


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,

http://jqueryui.com/themeroller/


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


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]


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


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


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.


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

https://maven.apache.org/index.html

http://www.mastertheboss.com/jboss-web/richfaces/primefaces-vs-richfaces-vs-icefaces?showall=&start=1

http://www.mastertheboss.com/jboss-web/richfaces/primefaces-vs-richfaces-vs-icefaces?showall=&start=1

http://showcase.omnifaces.org/

http://blog.primefaces.org/

http://www.primefaces.org/showcase-ext/views/home.jsf

http://www.primefaces.org/showcase-ext/views/home.jsf

http://primefaces.org/

http://www.tutorialspoint.com/jpa/

http://www.vogella.com/tutorials/Logging/article.html

https://en.wikipedia.org/wiki/ICEfaces

https://en.wikipedia.org/wiki/RichFaces

Documents

RAZVOJ UPORABNIŠKIH VMESNIKOV SPLETNIH APLIKACIJ S … · IV Web application development using Java PrimeFaces Key words: Java, graphic user interface, web application, PrimeFaces,