CS230

You might also like

Download as pdf or txt
Download as pdf or txt
You are on page 1of 158

CS230 - DISTRIBUIRANI SISTEMI

Java Server Pages - napredni


koncepti
Lekcija 04
CS230 - DISTRIBUIRANI SISTEMI
Lekcija 04

JAVA SERVER PAGES - NAPREDNI KONCEPTI

Java Server Pages - napredni koncepti


Poglavlje 1: Primena JSP filtera
Poglavlje 2: Upravljanje kolačićima u JSP stranicama
Poglavlje 3: Otpremanje datoteka u JSP
Poglavlje 4: Rukovanje datumom u JSP stranicama
Poglavlje 5: Preusmeravanje JSP stranica
Poglavlje 6: JSTL - JavaServer Pages Standard Tag Library
Poglavlje 7: JSP - Rad sa bazama podataka
Poglavlje 8: JSP - JavaBean
Poglavlje 9: JSP - jezik izraza
Poglavlje 10: JSP - internacionalizacija
Poglavlje 11: Vežba 4 - JSP - napredni koncepti
Poglavlje 12: Domaći zadatak 4
Zaključak

Copyright © 2017 – UNIVERZITET METROPOLITAN, Beograd. Sva prava zadržana. Bez prethodne pismene dozvole
od strane Univerziteta METROPOLITAN zabranjena je reprodukcija, transfer, distribucija ili memorisanje nekog
dela ili čitavih sadržaja ovog dokumenta., kopiranjem, snimanjem, elektronskim putem, skeniranjem ili na bilo
koji drugi način.

Copyright © 2017 BELGRADE METROPOLITAN UNIVERSITY. All rights reserved. No part of this publication may
be reproduced, stored in a retrieval system or transmitted in any form or by any means, electronic, mechanical,
photocopying, recording, scanning or otherwise, without the prior written permission of Belgrade Metropolitan
University.

www.metropolitan.ac.rs
Uvod

UVOD
Ovovom lekcijom se obrađuje primena naprednijih koncepata u
kreiranju JSP stranica.

Ovom lekcijom biće obrađeni napredni JSP koncepti kao nastavak na izlaganje iz prethodne
lekcije koje je postavilo temelje za korišćenje JSP stranica u Java veb aplikacijama.

Posebno, lekcija će se baviti sledećim temama:

• Demonstracija korišćenja filtera u JSP stranicama;


• Detaljna analiza i demonstracija upravljanja kolačićima u JSP stranicama;
• Savladavanje upload - ovanja datoteka iz JSP stranica;
• Rad sa vremenom i datumom u JSP stranicama;
• Preusmeravanje sa jedna na drugu JSP stranicu;
• Detaljan uvid u JSTL (JavaServer Pages Standard Tag Library) biblioteku;
• Rad sa bazama podataka iz JSP stranica;
• Upoznavanje i rad sa JavaBean objektima;
• Savladavanje elemenata JSP EL jezika izraza;
• Internacionalizacija u JSP stranicama.

Savladavanjem ove lekcije student u potpunosti će ovladati konceptima i principima primene


JSP stranica u Java veb aplikacijama.

3
Poglavlje 1

Primena JSP filtera

JSP FILTERI
Postoje različiti tipovi JSP filtera.

Servlet i JSP filter su JAVA klase koje se koriste u veb i JSP programiranju na brojne načine i u
različite svrhe:

• Presretanje zahteva klijenata pre nego što pristupe resursima servera;


• Manipulisanje odgovorima servera pre nego što se proslede klijentu;

Postoje različiti tipovi JSP filtera:

• filteri autentifikacije;
• filteri kompresovanja podataka;
• filteri enkripcije;
• filteri okidači za pristupanje događajima;
• filteri konverzije slike;
• filteri logovanja i provere;
• filteri lanca MIME-TYPE;
• filteri tokenizacije;
• XSL/T filteri za transformisanje XML sadržaja.

Filteri su angažovani u web.xml datoteci, koja je poznata kao deskriptor veb razvoja, i nakon
toga se povezuje sa servletom ili JSP stranicom ili URL šablonom u deskriptoru.

Kada JSP kontejner pokrene kreiranu veb aplikaciju, kreira se instanca za svaki filter koji je
deklarisan u veb deskriptoru razvoja. Filteri se izvršavaju po redosledu kojim su deklarisanim
u web.xml datoteci.

Važno je još napomenuti da je filter Java klasa koja implementira interfejs javax.servlet.Filter
od kojeg dobija sledeće metode:

• public void doFilter (ServletRequest, ServletResponse, FilterChain) - metoda se poziva od


strane JSP kontejnera svaki put kada se par zahtev / odgovor prosledi kroz lanac filtera;
• public void init(FilterConfig filterConfig) - metodu poziva veb kontejner da ukaže na filter
koji će biti aktiviran;
• public void destroy() - metodu poziva veb kontejner da ukaže na filter koji će biti
isključen.

Ova lekcija sadrži video materijal. Ukoliko želite da pogledate ovaj video morate da
otvorite LAMS lekciju.

4
Poglavlje 1 Primena JSP filtera

JSP FILTERI - PRIMER


Uvodi se jedan primer primene filtera u veb apliakcijama.

@WebFilter je anotacija kojom se smanjuje značajno količina podešavanja u web.xml


datoteci. Anotacija ne može da funckioniše bez deskriptora budući da njom nije moguće
definisati redosled filtera.

@WebFilter može da uzme u razmatranje neke od sledećih vrednosti:

• asyncSupported - podržava asinhrone operacije u filteru;


• dispatcherTypes - pridružuje dispečera filteru;
• filterName - definiše naziv filtera;
• initParams - inicira parametre filteru;
• servletNames: definiše servlet na kojeg se filter primenjuje;
• urlPatterns - definiše URL šablon.

U primeru će biti kreirana dva filtera i servlet. Redosled filtera će biti definisan u datoteci
web.xml. Sledi kod datoteke veb deskriptora.

<?xml version="1.0" encoding="ISO-8859-1" ?>


<web-app xmlns="http://java.sun.com/xml/ns/j2ee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee http://java.sun.com/xml/ns/
j2ee/web-app_2_4.xsd"
version="3.0">
<display-name>Filter Demo</display-name>
<filter-mapping>
<filter-name>filterJedan</filter-name>
<url-pattern>/msg/*</url-pattern>
</filter-mapping>
<filter-mapping>
<filter-name>filterDva</filter-name>
<url-pattern>/msg/*</url-pattern>
</filter-mapping>
</web-app>

Kreira se klasa koja ukazuje na prvi filter. Klasa se naziva FilterJedan.java.

package com.filter;

/**
*
* @author Vladimir Milicevic
*/
import java.io.IOException;
import javax.servlet.Filter;
import javax.servlet.FilterChain;
import javax.servlet.FilterConfig;

5
Poglavlje 1 Primena JSP filtera

import javax.servlet.ServletException;
import javax.servlet.ServletRequest;
import javax.servlet.ServletResponse;
import javax.servlet.annotation.WebFilter;
@WebFilter(filterName="filterjedan")
public class FilterJedan implements Filter {
@Override
public void init(FilterConfig filterConfig) throws ServletException {
}
@Override
public void doFilter(ServletRequest request, ServletResponse response,
FilterChain chain) throws IOException, ServletException {
System.out.println("Unutar filtera broj 1.");
chain.doFilter(request, response);
}
@Override
public void destroy() {
}
}

JSP FILTERI - NASTAVAK PRIMERA


Nastavlja se kreiranje druge klase filtera i servleta.

U nastavku se kreira druga klasa filtera deklarisanog o veb deskriptoru web.xml. Klasa se
naziva FilterDva.java.

package com.filter;

/**
*
* @author Vladimir Milicevic
*/
import java.io.IOException;
import javax.servlet.Filter;
import javax.servlet.FilterChain;
import javax.servlet.FilterConfig;
import javax.servlet.ServletException;
import javax.servlet.ServletRequest;
import javax.servlet.ServletResponse;
import javax.servlet.annotation.WebFilter;
@WebFilter(filterName="filterDva")
public class FilterDva implements Filter {
@Override
public void init(FilterConfig filterConfig) throws ServletException {
}
@Override
public void doFilter(ServletRequest request, ServletResponse response,
FilterChain chain) throws IOException, ServletException {
System.out.println("Unutar filtera broj dva.");

6
Poglavlje 1 Primena JSP filtera

chain.doFilter(request, response);
}
@Override
public void destroy() {
}
}

Na kraju se kreira servlet klasa PozdravServlet.java.

package com.filter;
import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
@WebServlet(urlPatterns = "/msg/PozdravServlet", loadOnStartup = 1)
public class PozdravServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws IOException{
doGet(request,response);
}
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws IOException{
response.setContentType("text/html");
System.out.println("Unutar servleta.");
PrintWriter out = response.getWriter();
out.println("Veliki pozdrav!");
}
}

Slika 1.1 Redosled filtriranja

7
Poglavlje 2

Upravljanje kolačićima u JSP


stranicama

KOLAČIĆI (COOKIES)
JSP jasno podržava HTTP kolačiće primenom servlet tehnologije.

Kolačići (Cookies) predstavljaju tekstualne datoteke koje su snimljene na klijent računaru i


čuvaju različite informacije značajne za praćenje. JSP jasno podržava HTTP kolačiće primenom
servlet tehnologije.

Tri koraka su od posebnog značaja kada se koriste kolačići za identifikovanje korisnika:

• Server skript šalje skup kolačića ka veb pregledaču. Na primer: ime, godine, identifikator
i tako dalje;
• Veb pregledač snima kolačiće na lokalnom računaru za buduću upotrebu;
• Sledeći put kada pregledač pošalje bilo kakav zahtev ka veb serveru, on šalje i podatke
kolačića serveru. Server može da iskoristi ove podatke za identifikovanje korisnika ili u
neku drugu svrhu.

U narednom izlaganju je cilj da se pokaže kako se kolačići postavljaju i restartuju, kako im se


pristupa i kako mogu da se obrišu u JSP programu.

Kolačići se obično postavljaju u HTTP zaglavlju. JSP stranica koja postavlja kolačić može da
pošalje, na primer informaciju koja je sledećeg oblika:

HTTP/1.1 200 OK
Date: Fri, 23 Dec 2016 21:03:38 GMT
Server: Oracle GlassFish Server 4.1.1
Set-Cookie: name=xyz;
expires=Friday, 30-Dec-16 22:03:38 GMT;
path=/; domain=tutorialspoint.com
Connection: close Content-Type: text/html

Kao što je moguće primetiti zaglavlje Set-Cookie sadrži par name / value, vreme, putanju i
domen. Nazivi vrednost će biti URL kodirani. Takođe, poljem expires kolačić je podešen da
bude zaboravljen nakon isteka deklarisanog vremena. Ukoliko korisnik uputi veb pregledač na
bilo koju stranicu koja se tiče putanje i domena kolačića, kolačić se upućuje nazad ka serveru.
Zaglavlje pregledača može da ima sledeći oblik:

GET / HTTP/1.0
Connection: Keep-Alive
User-Agent: Mozilla/50.1.0

8
Poglavlje 2 Upravljanje kolačićima u JSP stranicama

Host: neki.host.co.rs:1126
Accept: image/gif, */*
Accept-Encoding: gzip
Accept-Language: en
Accept-Charset: iso-8859-1,*,utf-8
Cookie: name=xyz

Sada će JSP skript imati pristup kolačićima preko metode zahteva request.getCookies() koja
vraća niz Cookie objekata.

LISTA COOKIE METODA


Sledi lista metoda koje su korisne u radu sa kolačićima.

U narednom izlaganju će biti priložena lista korisnih metoda koje se koriste sa objektima
kolačića i mogu biti upotrebljene u JSP stranicama za manipulisanje kolačićima:

• public void setDomain(String pattern) - Podešava domen na koji se kolačić primenjuje;


• public String getDomain() - Vraća domen na koji je kolačić primenjen;
• public void setMaxAge(int expiry) - Podešava vreme u sekundama pre do isteka kolačića.
Ako se ne podesi, kolačić traje do isteka sesije;
• public int getMaxAge() - Vraća najveće vreme u sekundama do isteka kolačića. Vrednost
-1 znači da će kolačić postojati do gašenja veb pregledača;
• public String getName() - Vraća naziv kolačića;
• public void setValue(String newValue) - Podešava vrednost pridruženu kolačiću;
• public String getValue() - Vraća vrednost pridruženu kolačiću;
• public void setPath(String uri) - Podešava putanju na kojoj se kolačić primenjuje. Ukoliko
se putanja ne specificira, kolačić se vraća za sve URL - e iz istog direktorijuma kao tekuća
stranica, računajući i poddirektorijume;

• public String getPath() - Vraća putanju na kojoj se kolačić primenjuje;


• public void setSecure(boolean flag) - Podešava logičku vrednost koja ukazuje da li bi
kolačić trebalo da bude poslat isključivo preko kodiranih konekcija (na primer SSL);
• public void setComment(String purpose) - Podešava komentar koji govori o svrsi kolačića;
• public String getComment() - Vraća komentar koji govori o svrsi kolačića;

U daljem izlaganju će biti demonstrirana manipulacija kolačićima u programima koji koriste


JSP stranice.

UPOTREBA JSP ZA PODEŠAVANJE KOLAČIĆA


U nastavku se poklazuje kako se postavljaju kolačići primenom JSP.

Pre nego što se ilustruje primena kolačića na konkretnom primeru, neophodno je, u ovom
delu lekcije, pozabaviti se sa procesom podešavanja kolačića.

Podešavanje kolačića je jednostavan proces i neophodno je da ispoštuje sledeća tri koraka:

9
Poglavlje 2 Upravljanje kolačićima u JSP stranicama

• Kreiranje Cookie objekta - Poziva se konstruktor sa nazivom i vrednošću kolačića. Oba


argumenta su tipa String. Navedeno je moguće realizovati na sledeći način:

Cookie cookie = new Cookie("ključ","vrednost");

Trebalo bi imati na umu da ni ključ ni vrednost ne mogu da sadrže znake priložene


sledećom listom: [ ] ( ) = , " / ? @ : ;

• Podešavanje maksimalnog vremena validnosti kolačića - U ovom koraku se podešava


vrednost u sekundama koja ukazuje na maksimalni period validnosti kolačića. Na primer,
na sledeći način se podešava da kolačić bude validan 24 sata:

cookie.setMaxAge(60*60*24);

• Slanje kolačića u zaglavlje HTTP odgovora - Kolačić se šalje u zaglavlje HTTP odgovora na
način priložen sledećom instrukcijom:

response.addCookie(cookie);

Konačno, u nastavku lekcije moguće je uvesti odovarajući primer koji ilustruje primenu
kolačića u veb aplikacijama koje koriste JSP stranice.

PODEŠAVANJE KOLAČIĆA U JSP - PRIMER


Sledećim primerom je demonstrirano podešavanje kolačića u JSP
stranicama.

Sledećim primerom je demonstrirano podešavanje kolačića u JSP stranicama. Moguće je


podesiti dve JSP stranice. Stranicom index.jsp data je forma u okviru koje se unose ime i
prezime koje će dobiti vlastite kolačiće. Sledećim listingom je priložena navedena datoteka:

<%--
Document : index
Created on : 27.12.2016., 14.06.08
Author : Vladimir Milicevic
--%>

<%@page contentType="text/html" pageEncoding="UTF-8"%>


<!DOCTYPE html>
<html>
<body>
<%--
<form action="forma.jsp" method="POST">
--%>
<form action="forma.jsp" method="GET">
Ime: <input type="text" name="ime">
<br/>

10
Poglavlje 2 Upravljanje kolačićima u JSP stranicama

Preime: <input type="text" name="prezime" />


<br/>
<input type="submit" value="POSALJI" />
</form>
</body>
</html>

Forma sadrži dva tekst polja i dugme "POSALJI". Nakon klika na dugme vrši se kreiranje
kolačića koji će čuvati ime i prezime.

Nakon kreiranja objekata vrši se njihovo dodavanje u response objekat. Kreiranje kolačića
i njihovo dodavanje u zaglavlje odgovora realizovano je JSP stranicom forma.jsp čiji listing
sledi:

<%--
Document : forma
Created on : 27.12.2016., 13.26.59
Author : Vladimir Milicevic
--%>

<%@page contentType="text/html" pageEncoding="UTF-8"%>


<% // Kreira kolacice za ime i prezime.
Cookie ime = new Cookie("ime", request.getParameter("ime"));
Cookie prezime = new Cookie("prezime", request.getParameter("prezime"));

// Podesava se isticanje kolacica za 24 sata.


ime.setMaxAge(60*60*24);
prezime.setMaxAge(60*60*24);

// Dodavanje oba kolacica u zaglavlje odgovora.


response.addCookie( ime );
response.addCookie( prezime ); %>

<html>
<head>
<title>Podesavanje kolacica</title>
</head>
<body> <center> <h1>Podesavanje kolacica</h1> </center>
<ul>
<li><p><b>Ime:</b>
<%= request.getParameter("ime")%>
</p></li>
<li><p><b>Prezime:</b>
<%= request.getParameter("prezime")%>
</p></li>
</ul>
</body>
</html>

11
Poglavlje 2 Upravljanje kolačićima u JSP stranicama

ČITANJE KOLAČIĆA U JSP - PRIMER


Pokazuje se kako se dobijaju podaci o sačuvanim kolačićima u JSP
stranicama.

U prethodnom izlaganju je pokazano kako se postavljaju i čuvaju Cookie objekti.


Izvršavanjem prethodnog primera prvo se javlja sledeća forma:

Slika 2.1 Forma za unos vrednosti za kolačiće

Klikom na "POSALJI" prosleđuju se vrednosti o objekte kolačića, koji će čuvati ove vrednosti.
Sačuvani podaci mogu se videti na sledećoj slici:

Slika 2.2 Sačuvane vrednosti za kolačiće

U nastavku je neophodno pokazati kako je moguće dobiti podatke o sačuvanim kolačićima u


JSP stranicama na malo drugačiji način.

U istom projektu moguće je kreirati novu datoteku, čiji je naziv citajKolacic.jsp, koja će
pročitati kolačiće i prikazati odgovarajući izveštaj o rezultatima ovog procesiranja. Sledećim
listingom je priložen kod ove JSP datoteke:

<%--
Document : citajKolacic
Created on : 27.12.2016., 14.08.10
Author : Vladimir Milicevic
--%>

<%@page contentType="text/html" pageEncoding="UTF-8"%>


<!DOCTYPE html>
<html>
<head>
<title>Citanje kolacica</title>
</head>
<body>
<center><h1>Citanje kolacica</h1></center>
<%
Cookie cookie = null;

12
Poglavlje 2 Upravljanje kolačićima u JSP stranicama

Cookie[] cookies = null;


// Vraca niz kolacica pridruzenih domenu
cookies = request.getCookies();
if( cookies != null ){
out.println("<h2> Pronadjeni nazivi i vrednosti kolacica</h2>");
for (int i = 0; i < cookies.length; i++){
cookie = cookies[i]; out.print("Naziv : " + cookie.getName( ) + ", ");
out.print("Vrednost: " + cookie.getValue( )+" <br/>"); } }
else{
out.println("<h2>Nisu pronadjeni kolacici!!!</h2>"); } %>
</body>
</html>

Rezultati, dostupni na linku http://localhost:8080/ObradaImena/citajKolacic.jsp, prikazani su


sledećom slikom:

Slika 2.3 Podaci o pročitanim kolačićima

BRISANJE KOLAČIĆA U JSP - PRIMER


Sledeći vid manipulacije kolačićima je brisanje.

Brisanje kolačića u JSP - u je veoma jednostavno. Za realizovanje ovog procesa, neophodno je


ispoštovati sledeća tri koraka:

• Čitanje postojećeg kolačića i njegovo čuvanje u Cookie objektu;


• Podešavanje "starosti" kolačića na nulu pozivom metode setMaxAge();
• Vraćanje konkretnog kolačića u zaglavlje odgovora.

Da bi navedeno bilo realizovano, moguće je kreirati novu JSP stranicu brisiKolacice.jsp kojom
će biti realizovano navedeno.

Pokretanjem ove stranice, dostupne na linku http://localhost:8080/ObradaImena/


brisiKolacic.jsp, moguće je videti sledeći izveštaj:

Slika 2.4 Prikaz obrisanog kolačića

Sledi listing datoteke brisiKolacice.jsp koja je obezbedila navedenu funkcionalnost:

13
Poglavlje 2 Upravljanje kolačićima u JSP stranicama

<%--
Document : brisiKolacic
Created on : 27.12.2016., 14.25.54
Author : Vladimir Milicevic
--%>

<%@page contentType="text/html" pageEncoding="UTF-8"%>


<!DOCTYPE html>
<html>
<head>
<title>Citanje i brisanje kolacica</title>
</head> <body> <center>
<h1>Citanje i brisanje kolacica</h1> </center>
<% Cookie cookie = null;
Cookie[] cookies = null;
// Vracanje niza kolacica vezanih za domen
cookies = request.getCookies();
if( cookies != null ){
out.println("<h2> Pronadjeni nazivi i vrednosti kolacica</h2>");
for (int i = 0; i < cookies.length; i++){
cookie = cookies[i];
if((cookie.getName( )).compareTo("ime") == 0 ){
cookie.setMaxAge(0); response.addCookie(cookie);
out.print("Obrisan kolacic: " + cookie.getName( ) + "<br/>");
}
out.print("Naziv : " + cookie.getName( ) + ", ");
out.print("Vrednost : " + cookie.getValue( )+" <br/>");
}
}
else{ out.println( "<h2>Nisu pronadjeni kolacici!!!</h2>");
} %>
</body>
</html>

14
Poglavlje 3

Otpremanje datoteka u JSP

SLANJE DATOTEKA NA SERVER - UVOD I FORMA


IZBORA DATOTEKE
U JSP stranicama je moguće realizovati otpremanje datoteka ka
serveru.

Ubacivanjem Java koda u standardni HTML kod, moguće je postići brojne zadatke. Jedan od
njih može da bude slanje datoteka ka serveru. Datoteke mogu biti tekstualne, binarne, slike
ili bilo koje druge.

Ovu problematiku je najlakše i najefikasnije obraditi na primeru pa će ovo izlaganje i teći


u tom pravcu. Za početak će biti kreirana forma čiji je zadatak da omogući korisniku izbor
datoteke i njeno slanje na server. Sledeće teze su veoma važne za realizovanje JSP datoteke
kojom će navedena forma biti kreirana i prikazana:

• Atribut metode forme mora biti podešen na POST, metoda GET ne može da bude
upotrebljena;
• Atribut forme enctype trebalo bi da bude podešen na multipart/form-data;
• Atribut forme action bi trebalo da ukazuje na servlet ili JSP stranicu, u ovom konkretnom
slučaju, koja će rukovati slanjem datoteke na server.

Forma će biti realizovana kreiranjem JSP datoteke index.jsp, a rukovanje slanjem datoteke ka
serveru biće povereno JSP stranici sa nazivom upload.jsp.

Sledi listing i slika koja reprezentuje ovu formu, respektivno.

<%--
Document : index
Created on : 28.12.2016., 11.30.21
Author : Vladimir Milicevic
--%>

<html>
<head>
<title>Otpremanje datoteka</title>
</head>
<body> <h3>Otpremanje datoteka:</h3> Izaberite datoteku: <br/>
<form action="upload.jsp" method="post" enctype="multipart/form-data">
<input type="file" name="file" size="50" /> <br/>
<input type="submit" value="Otpremi" />
</form>

15
Poglavlje 3 Otpremanje datoteka u JSP

</body>
</html>

Pozivom linka http://localhost:8080/JSPOtpremanjeDatoteka/index.jsp, otvara se sledeća JSP


stanica sa odgovarajućom formom:

Slika 3.1 Forma za izbor datoteke

JSP DATOTEKA ZA UPRAVLJANJE OTPREMANJEM


DATOTEKA
Posebna pažnja je na konstrukciji JSP datoteke kojom se rukuje slanjem
datoteka ka serveru.

U nastavku je moguće kreirati JSP datoteku, neka joj je naziv upload.jsp koja u jednom
trenutku može da pošalje više datoteka ka serveru. Pre isticanja koda ove datoteke,
odgovarajućim listingom, trebalo bi imati na umu nekoliko detalja:

• Biće korišćeno nekoliko klasa koje nisu direktno dostupne, otuda ih je neophodno dodati
odgovarajućim bibliotekama u okviru foldera Libraries kreiranog veb projekta. Ove
datoteke su prikazane sledećom slikom:

Slika 3.2 Apache commons biblioteke dodate u projekat

• Trebalo bi preuzeti najnovije verzije ovih biblioteka;


• Moguće je definisati lokacije gde će datoteke biti otpremljene, kao i ograničenje u veličini
fajla koji može biti otpremljen;

16
Poglavlje 3 Otpremanje datoteka u JSP

• Ako se otpremanje vrši na lokalnom računaru, kreirati unapred foldere u koje će server
proslediti otpremljene datoteke.

Sledi listing JSP stranice upload.jsp koja ima funkcionalnosti kreirane na osnovu prethodnih
instrukcija. Instrukcije import omogućene su uvozom navedenih biblioteka.

<%--
Document : Upload
Created on : 28.12.2016., 10.08.47
Author : Vladimir Milicevic
--%>

<%@page contentType="text/html" pageEncoding="UTF-8"%>


<!DOCTYPE html>
<%@ page import="java.io.*,java.util.*, javax.servlet.*" %>
<%@ page import="javax.servlet.http.*" %>
<%@ page import="org.apache.commons.fileupload.*" %>
<%@ page import="org.apache.commons.fileupload.disk.*" %>
<%@ page import="org.apache.commons.fileupload.servlet.*" %>
<%@ page import="org.apache.commons.io.output.*" %>

<%
File file ;

int maxFileSize = 5000 * 1024;


int maxMemSize = 5000 * 1024;
// context = pageContext.getServletContext();
String filePath = "c:\\priv\\";
//String filePath = context.getInitParameter("file-upload");

// Proverava tip sadrzaja


String contentType = request.getContentType();

if ((contentType.indexOf("multipart/form-data") >= 0)) {

DiskFileItemFactory factory = new DiskFileItemFactory();


// Maksimalna velicina koja moze biti acuvana u memoriji
factory.setSizeThreshold(maxMemSize);
// Lokacija na kojoj se cuvaju podaci veci od maksimalno dozvoljene velicine
factory.setRepository(new File("c:\\temp"));
// Kreiranje novog rukovaoca za otpremanje datoteka
ServletFileUpload upload = new ServletFileUpload(factory);
// maksimalna velicina za otpremanje.
upload.setSizeMax( maxFileSize );
try{

// Prosledjuje zahtev za uzimanje stavki datoteke


List fileItems = upload.parseRequest(request);
// Proces otpremanja
Iterator i = fileItems.iterator();
out.println("<html>");

17
Poglavlje 3 Otpremanje datoteka u JSP

out.println("<head>");
out.println("<title>JSP otpremanje datoteka</title>");
out.println("</head>");
out.println("<body>");
while ( i.hasNext () ) {
FileItem fi = (FileItem)i.next();

if ( !fi.isFormField () ) {

// Preuzimanje parametara otpremljene datoteke


String fieldName = fi.getFieldName();
String fileName = fi.getName();
boolean isInMemory = fi.isInMemory();
long sizeInBytes = fi.getSize();

// Pisanje datoteke

if ( fileName.lastIndexOf("\\") >= 0 ){
file = new File( filePath + fileName.substring(
fileName.lastIndexOf("\\"))) ;
}
else{ file = new File( filePath +
fileName.substring(fileName.lastIndexOf("\\")+1))
;
}
fi.write( file ) ;
out.println("Otpremljena datoteka: " + filePath + fileName +
"<br>");

out.println("</body>");
out.println("</html>");
}
catch(Exception ex)
{ System.out.println(ex); }
} else{
out.println("<html>");
out.println("<head>");
out.println("<title>Servlet upload</title>");
out.println("</head>");
out.println("<body>");
out.println("<p>Datoteka nije otpremljena</p>");
out.println("</body>");
out.println("</html>");
}
%>

18
Poglavlje 3 Otpremanje datoteka u JSP

UPOTREBA DESKRIPTORA VEB ANGAŽOVANJA


Moguće je definisati lokaciju za čuvanje datoteka i na alternativni
način.

U primeru je navedena lokacija gde će biti smeštena datoteka koja je otpremljena direktnim
navođenjem putanje do foldera na C disku (videti kod datoteke upload.jsp). Međutim, ako se
bolje pogleda kod navedene datoteke moguće je primetiti jednu instrukciju koja je obeležena
kao Java komentar i koja će u slučaju prevođenja veb aplikacije biti ignorisana. Ta instrukcija
je data sledećom linijom koda:

....
context = pageContext.getServletContext();
String filePath = context.getInitParameter("file-upload");
......

U ovom slučaju je neophodno definisati lokaciju na kojoj će prosleđene datoteke biti sačuvane
primenom datoteke web.xml. Na ovaj način kreiramo backend JSP skript koji će uzeti
parametar file-upload i na osnovu njega u XML elementu <param-value> označiti lokaciju
za čuvanje datoteka kojima se manipuliše. Sledi listing datoteke web.xml.

<web-app>

<context-param>
<description>Lokacija otpremljene datoteke</description>
<param-name>file-upload</param-name>
<param-value> c:\priv\ </param-value>
</context-param>

</web-app>

Svaki aplikativni server ima svoje specifičnosti. Datoteka web.xml je opšta konfiguraciona
datoteka za veb aplikacije. Budući da se koristi Glassfish server, dominantno u primerima
ovih materijala, neke specifične primene ovog servera na veb aplikacije moguće je
realizovati datotekom glassfish-web.xml. Specifični tagovi i hijerarhija ovog
konfiguracionog fajla dostupna je na linku https://docs.oracle.com/cd/E18930_01/html/
821-2417/beaql.html.

OTPREMANJE DATOTEKA - DEMONSTRACIJA


U narednom izlaganju je neophodno pokazati kako funkcioniše kreirana
veb aplikacija.

19
Poglavlje 3 Otpremanje datoteka u JSP

U narednom izlaganju je neophodno pokazati kako funkcioniše kreirana veb aplikacija. Na


formi sa slike broj 1, bira se datoteka, ili više njih, koja će biti poslata ka serveru. Navedeno
je pokazano sledećom slikom.

Slika 3.3 Izbor datoteke za otpremanje

Moguće je primetiti da je angažovan Windows Explorer, klikom na dugme "Pregled", koji


omogućava izbor datoteke. Zatim, vrši se izbor željene datoteke i proces se, nakon izbora,
završava klikom na dugme "Otvori". Sada je kontrola vraćena na formu i klikom na dugme
"Otpremi" datoteka se šalje ka serveru i skladišti na naznačenoj lokaciji.

Klikom na poslednje dugme realizuje se URL string http://localhost:8080/


JSPOtpremanjeDatoteka/upload.jsp i stranica upload.jsp je prikazana u veb pregledaču
(sledeća slika).

Slika 3.4 JSP stanica za rukovanje otpremanjem

20
Poglavlje 3 Otpremanje datoteka u JSP

Slika 3.5 Datoteka je otpremljena na pravu lokaciju

21
Poglavlje 4

Rukovanje datumom u JSP


stranicama

KLASA DATE U JSP STRANICAMA


Klasu Date je moguće koristiti na brojne načine u JSP stranicama.

Jedna od najznačajnijih prednosti primene JSP stranica jeste mogućnost potpunog korišćenja
metoda iz Java jezgra. Na taj način je dostupna i Java klasa Date čija će široka primena u veb
aplikacijama, a u okviru kreiranih JSP stranica, biti analizirana i demonstrirana u ovom delu
lekcije.

Klasa Date se nalazi u paketu java.util i enkapsulira tekući datum i vreme.

Važno je napomenuti da klasa Date poseduje dva konstruktora. Prvi konstruktor je tzv.
podrazumevani konstruktor i priložen je sledećom linijom koda:

Date( )

Drugi konstruktor uzima jedan argument koji odgovara broju milisekundi koje su protekle
od ponoći 1. januara 1970. Upravo ovako računar računa tekuće vreme. Ovaj konstruktor je
priložen sledećom linijom:

Date(long millisec)

Kreiranjem objekta klase Date, korisniku se stavlja na raspolaganje veliki broj korisnih klasa
kojima ovaj objekat može da manipuliše. U sledećem izlaganju će biti navedene i opisane
najznačajnije od njih:

• boolean after(Date date) - Vraća vrednost true ukoliko je objekat Date koji poziva
metodu "mlađi" od objekta argumenta metode. U suprotnom vraća false;
• boolean before(Date date) - Vraća vrednost true ukoliko je objekat Date koji poziva
metodu "stariji" od objekta argumenta metode. U suprotnom vraća false;
• Object clone( ) - Duplira objekat Date koji ga poziva;
• int compareTo(Date date) - Poredi da li su objekti dva datuma jednaka. Vraća 0 ako su
jednaki, broj veći od nule ako je objekat pozivač metode "stariji" od objekta argumenta
metode i, na kraju, broj manji od nule ako je objekat pozivač metode "mlađi", u smislu
vrednosti datuma, od objekta argumenta metode
• boolean equals(Object date) - Poredi da li su objekti dva datuma jednaka. Vraća true ako
su jednaki, a u suprotnom vraća false;

22
Poglavlje 4 Rukovanje datumom u JSP stranicama

• long getTime( ) - Vraća broj milisekundi koje su protekle od ponoći 1. januara 1970 do
trenutka poziva metode;
• int hashCode( ) - Vraća hash code objekta pozivača;
• void setTime(long time) - Podešava broj milisekundi koje su protekle od ponoći 1. januara
1970 do trenutka poziva metode;
• String toString( ) - Konvertuje objekat datuma u String i vraća rezultat.

PRIHVATANJE TEKUĆEG DATUMA I VREMENA


Cilj da se uradi detaljna analiza i demonstracija problematike
korišćenja tekućeg vremena.

U jednom od polaznih primera je pokazano kako se tekući datum može koristiti u veb
aplikacijama. Sada je cilj da se uradi detaljna analiza i demonstracija ove problematike. Za
ovu svrhu će biti kreirana konkretna veb aplikacija kao primer korišćenja objekata i metoda
java klase Date u JSP stranicama.

Moguće je koristiti veoma jednostavan primer. U JSP stranici se kreira Date objekat koji će
pozvati metodu toString(), nakon čega će JSP stranica u veb pregledaču pokazati rešenje, kao
na sledećoj slici:

Slika 4.1 Rezultat izvršavanja kreirane JSP stranice

Prikazana JSP stranica je realizovana sledećim JSP kodom:

<%--
Document : index
Created on : 28.12.2016., 19.50.13
Author : Vladimir Milicevic
--%>

<%@ page import="java.io.*,java.util.*, javax.servlet.*" %>


<html>
<head>
<title>Prikaz trenutnog datuma i vremena</title>
</head>
<body>
<center> <h1>Prikaz trenutnog datuma i vremena</h1> </center>
<% Date date = new Date();
out.print( "<h2 align=\"center\">" +date.toString()+"</h2>"); %>
</body>
</html>

Slika 1 je rezultat izvršavanja sledećeg URL Stringa u veb pregledaču:

23
Poglavlje 4 Rukovanje datumom u JSP stranicama

http://localhost:8080/JSPDatumDemo/

FORMATIRANJE DATUMA U JSP STRANICAMA


U veb aplikacijama je često potrbno prikazati datum i vreme u
konkretnom formatu.

U nastavku izlaganja će biti govora o načinu formatiranja datuma i vremena u nekom


konkretnom formatu. SimpleDateFormatje klasa za formatiranje i prosleđivanje datuma u
zavisnosti od standarda regiona u kojem će softver biti primenjivan. Postoje brojni šabloni za
prikazivanje datuma i vremena i ova klasa ih sve podržava.

Na primer, u prethodnoj JSP datoteci moguće je uvesti izvesne modifikacije pomoću kojih će
datum koji se prikazuje biti prikazan u nekom od formata koji je karakterističan za region u
kojem živimo i radimo.

Modifikacije bi trebalo uraditi na takav način da se kao rezultat izvršavanja JSP stranice pojavi
sledeći izlaz u veb pregledaču:

Slika 4.2 Formatiran datum i vreme

Modifikacije su priložene sledećim listingom:

<%--
Document : index
Created on : 28.12.2016., 19.50.13
Author : Vladimir Milicevic
--%>

<%@page import="java.text.SimpleDateFormat"%>
<%@ page import="java.io.*,java.util.*, javax.servlet.*" %>
<html>
<head>
<title>Prikaz trenutnog datuma i vremena</title>
</head>
<body>
<center> <h1>Prikaz trenutnog datuma i vremena</h1> </center>
<% /*Date date = new Date();
out.print( "<h2 align=\"center\">" +date.toString() +"</h2>"); */
Date dNow = new Date( );
SimpleDateFormat ft = new SimpleDateFormat ("E dd.MM.yyyy 'u' HH:mm:ss zzz");
out.print( "<h2 align=\"center\">" + ft.format(dNow) + "</h2>");%>

24
Poglavlje 4 Rukovanje datumom u JSP stranicama

</body>
</html>

Iz listinga je moguće primetiti da se priloženim šablonom formatiranja prikazuje naziv dana u


nedelji, datum po lokalnom formatu, 24 h format vremena i vremenska zona.

KODOVI KLASE SIMPLEDATEFORMAT


Određeni karakteri imaju posebno značenje u šablonima formatiranja
datuma i vremena.

Kao što je moguće primetiti u prethodnom primeru se javljaju neki specijalni karakteri koji
imaju posebno značenje u šablonima formatiranja datuma i vremena. U ovom delu lekcije je
od velikog značaja njihovo navođenje i objašnjenje. U String šablonima datuma i vremena
javljaju se sledeći specijalni karakteri:

• G - označava eru (n. e ili p. n. e - nova era ili pre nove ere; engleski standard je AD ili BC);
• y - označava godinu (može biti u dvocifrenom ili četvorocifrenom formatu);
• M - mesec u godini;
• d - dan u mesecu;
• h - sat u formatu 12h;
• H - sat u formatu 24h;
• m - minuti u satu;
• s - sekunde u minutu;
• S - milisekunde;
• E - dan u nedelji;
• F - dan u nedelji u mesecu (na primer 2 (druga nedelja u julu));
• w - nedelja u godini;
• W - nedelja u mesecu;
• a - AM / PM marker;
• k - sat u danu (12h format - ceo broj npr. 2 označava drugi sat u danu);
• K - sat u danu (24h format);
• z - vremenska zona;
• ' ' - prostor za malo teksta - jednostruki navodnik;

Za kompletnu listu ovi specijalnih karaktera, moguće je konsultovati Java dokumentaciju.

25
Poglavlje 5

Preusmeravanje JSP stranica

PREUSMERAVANJE STRANICA
Preusmeravanje se koristi da bi klijent bio upućen na novu lokaciju.

Preusmeravanje stranica (redirect) je veoma važna funkcionalnost u veb aplikacijama koja


se koristi kada se izvesni dokument premešta na novu stranicu. Preusmeravanje se koristi
da bi klijent bio upućen na novu lokaciju, kada je neophodno izvršiti balansiranje učitavanja
podataka ili neko drugo prilagođavanje veb aplikacije.

Preusmeravanje zahteva na novu stranicu može veoma jednostavno da bude obavljeno


pozivom metode sendRedirect() objektom odgovora. Sledećim kodom je priložen potpis ove
metode:

public void response.sendRedirect(String location)


throws IOException

Ova metoda šalje nazad odgovor veb pregledaču, zajedno sa statusnim kodom i lokacijom
nove stranice, na koju se vrši preusmeravanje. Takođe je moguće koristiti metode setStatus()
i setHeader(), u kombinaciji sa objektom odgovora, za postizanje identičnih rezultata
preusmeravanja. Navedeno je, u opštem obliku, priloženo sledećim linijama koda:

....
String site = "http://www.novastranica.com" ;
response.setStatus(response.SC_MOVED_TEMPORARILY);
response.setHeader("Location", site);
....

U narednom izlaganju je neophodno kroz primer pokazati kako se u JSP stranicama primenjuje
preusmeravanje-

PREUSMERAVANJE STRANICA - DEMONSTRACIJA


Kreiranje primera za demonstraciju preusmeravanja.

Sada je moguće prikazati na konkretnom primeru kako se u JSP stranicama implementira


funkcionalnost preusmeravanja. Neka je kreirana JSP stranica sa sledećim kodom:

<%@page import="java.text.SimpleDateFormat"%>
<%@ page import="java.io.*,java.util.*, javax.servlet.*" %>
<html>

26
Poglavlje 5 Preusmeravanje JSP stranica

<head>
<title>Prikaz trenutnog datuma i vremena</title>
</head>
<body>
<center> <h1>Prikaz trenutnog datuma i vremena</h1> </center>
<% /*Date date = new Date();
out.print( "<h2 align=\"center\">" +date.toString() +"</h2>"); */
Date dNow = new Date( );
SimpleDateFormat ft = new SimpleDateFormat ("G E dd.MM.yyyy 'u' HH:mm:ss zzz");
out.print( "<h2 align=\"center\">" + ft.format(dNow) + "</h2>");
%>

<center> <h1>Cekamo na preusmeravanje na novu stranicu


<% for (int i=0; i<5; i++)
out.print('.');
%>
</h1> </center>
<% // Nova lokacija za preusmeravanje
String site = new String("http://www.metropolitan.ac.rs");

response.setStatus(response.SC_MOVED_TEMPORARILY);
response.setHeader("Refresh", "5; URL=" + site);
%>
</body>
</html>

Izvršavanjem navedene stranice, u veb pregledaču se dobija sledeći izlaz:

Slika 5.1 JSP stranica koja čeka na preusmeravanje

Ako se obrati pažnja na instrukciju:response.setHeader("Refresh", "5; URL="+site) , može se


uočiti da se njenim izvršavanjem omogućava čekanje od 5 sekundi pre nego što se izvrši
preusmeravanje na URL koji joj je predat String objektom site. Konstantom
SC_MOVED_TEMPORARILY preusmeravanje će biti privremeno (može biti i permanentno za
SC_MOVED_PERMANENTLY, videti link https://tomcat.apache.org/tomcat-5.5-doc/
servletapi/javax/servlet/http/HttpServletResponse.html).

27
Poglavlje 5 Preusmeravanje JSP stranica

Slika 5.2 Stranica na koju je kreirana JSP preusmerena

28
Poglavlje 6

JSTL - JavaServer Pages Standard


Tag Library

JAVASERVER PAGES STANDARD TAG LIBRARY


JSTL nudi brojne JSP tagove koji su od velike koristi u radu sa JSP
stranicama.

JavaServer Pages Standard Tag Library je kolekcija korisnih JSPtagova koji obuhvataju
osnovne funkcionalnosti brojnih JSP stranica. JSTL daje podršku za opšte i strukturirane
zadatke poput iteracija i uslova, za manipulisanje XML dokumentima, za internacionalizaciju,
za podršku realizovanju SQL upita i tako dalje.

JSTL tagovi mogu biti klasifikovani po nameni u odgovarajuće grupe JSTL tagova koje se mogu
koristiti prilikom kreiranja JSP stranica. Postoje sledeće grupe JSTL tagova:

• Osnovni tagovi;
• Tagovi za formatiranje;
• SQL tagovi;
• XML tagovi;
• JSTL funkcije.

Ukoliko razvojno okruženje, u kojem se razvija veb aplikacija, ne poseduje podršku za JSTL,
neophodno je preuzeti odgovarajuće biblioteke i uključiti ih u projekat. Preuzimanje je moguće
obaviti pozivom linka: https://jstl.java.net/download.html.

Kada u razvojnom okruženju, kao što je na primer NetBeans IDE, postoji podrška za JSTL
tagove, veoma je jednostavno omogućiti njihovu primenu u projektu koji se kreira. Desnim
klikom na folder Libraries, u hijerarhiji projekta, bira se opcija Add Library koja je prikazana
prozorom sa sledeće slike. Klikom na Add Library dugme, sve je spremno za dalji rad.

29
Poglavlje 6 JSTL - JavaServer Pages Standard Tag Library

Slika 6.1 Dodavanje JSTL biblioteke u projekat

JSTL OSNOVNI TAGOVI


Sledi pregled osnovnih JSTL tagova.

U sledećem izlaganju će biti akcenat na pisanju i primeni osnovnih JSTL tagova. Ovi tagovi su
u najfrekventnijoj primeni i zahtevaju uključivanje Core JSTL biblioteke da bi mogli da budu
korišćeni. Navedena biblioteka se uključuje na sledeći način:

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

Sledi lista osnovnih JSTL tagova zajedno sa odgovarajućim objašnjenjima:

• <c:out > - Koristi se kao <%= ... >, ali za izraze;


• <c:set > - Postavlja rezultat provere izraza u određeni kontekst;
• <c:remove > - Briše konkretnu varijablu iz konteksta;
• <c:catch> - Hvata bilo koji Throwable objekat i po potrebi ga prikazuje;
• <c:if> - Jednostavan uslov koji proverava vlastito telo ukoliko je uslov tačan;
• <c:choose> - Jednostavni uslov koji obezbeđuje kontekst za primenu međusobno
isključivih operacija <when> i <otherwise>;
• <c:when> - Podtag taga <choose>, ekvivalentan uslovu if;
• <c:otherwise > - Podtag taga <choose>, ekvivalentan uslovu else;
• <c:import> - Vraća apsolutni ili relativni URL i dostavlja njegov sadržaj stranici, Stringu
u 'var' ili Reader - u u 'varReader';

• <c:forEach > - Osnovni tag iteracije koji prihvata različite kolekcije tipova;
• <c:forTokens> - Iterira kroz tokene;
• <c:param> - Dodaje parametar u URL taga import;

30
Poglavlje 6 JSTL - JavaServer Pages Standard Tag Library

• <c:redirect > - Vrši preusmeravanje na novi URL;


• <c:url> - Kreira URL sa opcionim parametrima upita.

Ova lekcija sadrži video materijal. Ukoliko želite da pogledate ovaj video morate da
otvorite LAMS lekciju.

JSTL TAGOVI FORMATIRANJA


Sledi prikaz JSTL elemenata sintakse kojima se obavljaju formatiranja u
JSP stranicama.

JSTL tagovi za formatiranje se koriste za formatiranje i prikazivanje teksta, vremena, datuma


i brojeva za internacionalizovane veb sajtove. Sledeća sintaksa uključuje biblioteku za
formatiranje u JSP stranicu:

<%@ taglib prefix="fmt"


uri="http://java.sun.com/jsp/jstl/fmt" %>

Kao i u prethodnom slučaju, biće data detaljna lista tagova formatiranja koja uključuje i
odgovarajuće opise:

• <fmt:formatNumber> - Kreira numeričku vrednost sa određenom specifikacijom i


preciznošću;
• <fmt:parseNumber> - Parsira String reprezentaciju broja, valute ili procenta;
• <fmt:formatDate> - Formatira datum i može da koristi dostupne stilove i šablone;
• <fmt:parseDate> - Parsira String reprezentaciju datuma;
• <fmt:bundle> - Učitava paket resursa koji će biti korišćen u okviru svog tela;
• <fmt:setLocale> - Podešava lokalizaciju u lokalnoj konfiguracionoj varijabli;
• <fmt:setBundle> - Učitava paket resursa i čuva ga u odgovarajućoj varijabli;
• <fmt:timeZone> - Specificira vremensku zonu;
• <fmt:setTimeZone> - Podešava vremensku zovu za konfiguracionu varijablu vremenske
zone;
• <fmt:message> - Prikazuje internacionalizovanu poruku;
• <fmt:requestEncoding> - Podešava zahtevano kodiranje karaktera.

JSTL SQL I XML TAGOVI


Predstoje još neki korisni JSTL tagovi u narednom izlaganju.

JSTL SQL tagovima je omogućeno interagovanje sa relacionim bazama podataka u JSP


stranicama. Sledeća sintaksa uključuje JSTL SQL biblioteku u JSP stranicu:

<%@ taglib prefix="sql"


uri="http://java.sun.com/jsp/jstl/sql" %>

Sledi lista JSTL SQL tagova zajedno sa odgovarajućim objašnjenjima:

31
Poglavlje 6 JSTL - JavaServer Pages Standard Tag Library

• <sql:setDataSource> - Kreira jednostavan izvor podataka primenjiv samo za kreiranje


prototipova;
• <sql:query> - Izvršava SQL upit definisan u telu elementa ili kroz sql atribut;
• <sql:update> - Izvršava SQL ažuriranje u telu elementa ili kroz sql atribut;
• <sql:param> - Podešava parametar u SQL iskazu za specificiranu vrednost;
• <sql:dateParam> - Podešava parametar u SQL iskazu za specificiranu vrednost
java.util.Date;
• <sql:transaction > - Podešava izvršavanje svih SQL iskaza kao jednu transakciju.

JSTL XML tagovima je omogućeno kreiranje i manipulisanje XML dokumentima iz JSP stranica.
Sledeća sintaksa uključuje JSTL XML biblioteku u JSP stranicu:

<%@ taglib prefix="x"


uri="http://java.sun.com/jsp/jstl/xml" %>

Sledi lista JSTL XML tagova zajedno sa odgovarajućim objašnjenjima:

• <x:out> - Kao i <%= ... >, ali za XPath izraze;


• <x:parse> - Parsira XML podatke specificirane preko atributa ili u telu elementa;
• <x:set > - Podešava varijablu na vrednost XPath izraza;
• <x:if > - Proverava vrednost XPath izraza. Ako je tačan izvršava se telo if bloka, u
suprotnom se ignoriše;
• <x:forEach> - Petlja nad čvorovima XML dokumenta;
• <x:choose> - Još jedno jednostavno granjanje;
• <x:when > - Podelement za <x:choose> koji je ekvivalentan if uslovu;
• <x:otherwise > - Podelement za <x:choose> koji je ekvivalentan else delu grananja;
• <x:transform > - Primenjuje XSL transformaciju na XML dokument;
• <x:param > - Koristi se zajedno sa prethodnim tagom za podešavanje parametara u XSLT
stilovima.

JSTL FUNKCIJE
Sledi pregled korisnih JSTL funkcija koje je moguće koristiti u JSP
stranicama.

JSTL uključuje brojne korisne funkcije od kojih je većina zadužena za manipulisanje sa


stringovima. Sledeća sintaksa uključuje biblioteku za JSTL funkcije u JSP stranicu:

<%@ taglib prefix="fn"


uri="http://java.sun.com/jsp/jstl/functions" %>

Sledi lista JSTL funkcija zajedno sa odgovarajućim objašnjenjima:

• fn:contains() - Proverava da li string sadrži zadati podstring;


• fn:containsIgnoreCase() - Proverava da li string sadrži zadati podstring ignorišući velika i
mala slova;
• fn:endsWith() - Testira da li se ting završava određenim sufiksom;
• fn:escapeXml() - Znaci za izlaz se mogu tumačiti kao XM oznake;

32
Poglavlje 6 JSTL - JavaServer Pages Standard Tag Library

• fn:indexOf() - Vraća indeks prvog pojavljivanja zadatog podstringa;


• fn:join() - Spaja sve elemente niza u String objekat;
• fn:length() - Vraća dužinu stringa;
• fn:replace() - Vraća string koji je nastao zamenom svih pojavljivanja nekog njegovog
podstringa zadatim stringom;
• fn:split() - Deli string u niz podstringova;
• fn:startsWith() - Proverava da li string počinje odgovarajućim prefiksom;
• fn:substring() - Vraća podskup stringa;
• fn:substringAfter() - Vraća podskup stringa koji sledi nakon nekog drugog podstringa;
• fn:substringBefore() - Vraća podskup stringa koji prethodi nekom drugom podstringu;
• fn:toLowerCase() - Konvertuje sve karaktere stringa u mala slova;
• fn:toUpperCase() - Konvertuje sve karaktere stringa u velika slova;
• fn:trim() - Eliminiše praznine iz stringa.

Mnogo jednostavnih JSTL primera je moguće pronaći na linku: https://www.tutorialspoint.com/


jsp/jsp_standard_tag_library.htm.

33
Poglavlje 7

JSP - Rad sa bazama podataka

KREIRANJE BAZE PODATAKA I TABELA


Demonstracija kreiranja tabele baze podataka iz JSP stranice.

Budući da će u posebnoj lekciji akcenat biti na pristupima i manipulaciji podacima, ova


lekcija će imati jednostavan i kratak zadataka zadatak koji se odnosi na primenu i izvršavanje
osnovnih CRUD operacija u JSP stranicama.

Za početak je neophodno kreirati jednu jednostavnu bazu podataka koja će poslužiti kao
osnova za izvođenje primera i demonstraciju problematike korišćenja SQL upita u JSP
stranicama. Baza će biti kreirana koristeći i upravljanja primenom MySQL servera.

Za prvih nekoliko upita, kreiranje baze podataka, kreiranje i popunjavanje tabele koja će biti
korišćena u primeru, upotrebljen je MySQL Workbench (sledeća slila):

Slika 7.1 Kreiranje baze podataka

Nakon toka neophodno je pokrenuti kreiranu bazu podataka i u njoj kreirati tabelu koja će biti
osnov za testiranje izvršavanja SQL upita u JSP stranicama. U polju za upite, alata MySQL
Workbench, unosi se i pokreće sledeći SQL upit:

create table zaposleni ( id int not null,


starost int not null,
ime varchar (255),
prezime varchar (255) );

Nakon toga je neophodno izvršiti popunjavanje kreirane tabele konkretnim unosima.


Izvršavanjem sledećih SQL instrukcija, kreirana tabela zaposleni, baze podataka DBZaposleni,
dobiće željeni sadržaj:

34
Poglavlje 7 JSP - Rad sa bazama podataka

INSERT INTO zaposleni VALUES (100, 42, 'Vladimir', 'Milicevic')


INSERT INTO zaposleni VALUES (101, 22, 'Petar', 'Petrovic')
INSERT INTO zaposleni VALUES (102, 22, 'Milos', 'Savic')
INSERT INTO zaposleni VALUES (103, 32, 'Marija', 'Markovic')

Slika 7.2 Testirane unosa u MySQL Workbench

IZVRŠAVANJE OPERACIJE SELECT U JSP


STRANICAMA
Operacija SELECT je najčešće korišćenja u SQL upitima.

Prethodnom slikom je pokazano kako se koristi opšti SQL select upit za proveru korektnosti
unosa vrsta u kreiranoj bazi podataka. U nastavku, koristeći JSP stranice sa JSTL tagovima,
objašnjenim u prethodnom objektu učenja, biće demonstrirana implementacija naredbe
select za prikazivanje vrednosti konkretnih kolona, iz konkretnih tabela baze podataka.

Očekivani izlaz, vidljiv korisniku u veb pregledaču, prikazan je sledećom slikom:

Slika 7.3 Izvršavanje instrukcije SELECT u JSP stranici

Da bi program mogao da koristi MySQL bazu podataka, neophodno je bilo u folder


Libraries, projekta JSPDBDemo, uključiti JDBC drajver za MySQL, koji se naziva (naziv
uključuje njegovu najnoviju verziju): mysql-connector-java-5.1.40-bin.jar.

U narednom izlaganju je neophodno pokazati programski kod kojim je realizovana


funkcionalnost prikazana prethodnom slikom. Sledi listing:

<%@ page import="java.io.*,java.util.*,java.sql.*"%>


<%@ page import="javax.servlet.http.*,javax.servlet.*" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/sql" prefix="sql"%>
<html>
<head>

35
Poglavlje 7 JSP - Rad sa bazama podataka

<title>SELECT Operacija</title>
</head>
<body> <sql:setDataSource var="snapshot"
driver="com.mysql.jdbc.Driver"
url="jdbc:mysql://localhost/DBZaposleni"
user="root" password="vlada"/>
<sql:query dataSource="${snapshot}" var="result"> SELECT * from zaposleni;
</sql:query> <table border="1" width="100%">
<tr> <th>ID</th>
<th>Ime</th>
<th>Prezime</th>
<th>Starost</th> </tr>
<c:forEach var="row" items="${result.rows}">
<tr> <td><c:out value="${row.id}"/></td>
<td> <c:out value="${row.ime}"/></td>
<td> <c:out value="${row.prezime}"/></td>
<td><c:out value="${row.starost}"/></td> </tr>
</c:forEach>
</table>
</body>
</html>

IZVRŠAVANJE OPERACIJE INSTERT U JSP


STRANICAMA
Neophodno je pokazati kako se u JSP strancicam mogu dodavati novi
zapisi u tabele baze podataka.

U prethodnom izlaganju je pokazano kako se iz JSP stranica može izvršiti prikazivanje željenog
sadržaja baze podataka implementacijom SQL instrukcije SELECT. Sada je cilj da se pokaže
funkcionalnost kojom je omogućeno dodavanje novih zapisa u bazu podataka,
implementacijom SQL naredbe INSERT, ukoliko za tim postoji potreba. Za demonstraciju ove
funkcionalnosti biće kreirana JSP stranica insert.jsp koja je realizovana kodom priloženim u
sledećem listingu:

<%--
Document : insert
Created on : 31.12.2016., 08.44.27
Author : Vladimir Milicevic
--%>

<%@page contentType="text/html" pageEncoding="UTF-8"%>


<!DOCTYPE html>
<%@ page import="java.io.*,java.util.*,java.sql.*"%>
<%@ page import="javax.servlet.http.*,javax.servlet.*" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/sql" prefix="sql"%>
<html>
<head>

36
Poglavlje 7 JSP - Rad sa bazama podataka

<title>INSERT Operacija</title>
</head>
<body>
<sql:setDataSource var="snapshot"
driver="com.mysql.jdbc.Driver"
url="jdbc:mysql://localhost/DBZaposleni"
user="root" password="vlada"/>
<sql:update dataSource="${snapshot}" var="result">
INSERT INTO zaposleni VALUES (104, 33, 'Jovana', 'Jovic');
</sql:update>
<% response.sendRedirect("index.jsp"); %>

</body>
</html>

Nakon što je obavljeno umetanje novog reda u bazu podataka, pomoću SQL upita insert
i izvršavanjem ažuriranja tabele elementom <sql:update>, vrši se preusmeravanje na JSP
stranicu index.jsp koja će prikazati rezultate nastale dodavanjem novog sloga u tabelu baze
podataka.

Navedeno je pokazano sledećom slikom.

Slika 7.4 Dodavanje novog reda u tabelu baze podataka

IZVRŠAVANJE OPERACIJE DELETE U JSP


STRANICAMA
Neophodno je pokazati kako se u JSP strancicam mogu izbrisati zapisi
iz tabele baze podataka.

Prethodno je pokazano kako je u JSP stranicama moguće dodavanje novih zapisa u tabelama
beze podataka. Ovde će se ići obrnutom logikom. Implementacijom SQL instrukcije DELETE
cilj je omogućavanje brisanja nekog konkretnog reda iz navedene tabele baze podataka.
Od posebnog značaja je dalja demonstracija i usavršavanje primene JTSL instrukcija u JSP
programiranju.

Za potrebe demonstracije biće kreirana nova JSP stranica, pod nazivom delete.jsp. Njen
zadatak će biti brisanje konkretnog reda iz tabele zaposleni, na primer reda određenog sa id
= 102. Nakon brisanja i ažuriranja, vrši se preusmeravanje na početnu JSP stranicu index.jsp,
koja bi trebalo da korisniku prikaže sledeće rezultate:

37
Poglavlje 7 JSP - Rad sa bazama podataka

Slika 7.5 Brisanje reda iz tabele baze podataka

Kreirana JSP stranica delete.jsp realizovana je programskim kodom koji je priložen listingom
koji sledi u narednom izlaganju:

<%--
Document : delete
Created on : 31.12.2016., 09.20.46
Author : Vladimir Milicevic
--%>

<%@page contentType="text/html" pageEncoding="UTF-8"%>


<!DOCTYPE html>
<%@ page import="java.io.*,java.util.*,java.sql.*"%>
<%@ page import="javax.servlet.http.*,javax.servlet.*" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/sql" prefix="sql"%>
<html>
<head>
<title>DELETE Operacija</title>
</head>
<body>
<sql:setDataSource var="snapshot"
driver="com.mysql.jdbc.Driver"
url="jdbc:mysql://localhost/DBZaposleni"
user="root" password="vlada"/>
<sql:update dataSource="${snapshot}" var="result">
DELETE FROM zaposleni WHERE Id = 102
</sql:update>
<% response.sendRedirect("index.jsp"); %>

</body>
</html>

IZVRŠAVANJE OPERACIJE UPDATE U JSP


STRANICAMA
Neophodno je pokazati kako se vrši ažurirranje postojećih podataka u
tabeli baze podataka.

Promena podataka u tabeli baze podataka, u JSP stranicama, vrši se implementacijom SQL
naredbe UPDATE u okviru elementa <sql:update>, baš kao što je bio slučaj i sa prethodnim
SQL klauzulama.

38
Poglavlje 7 JSP - Rad sa bazama podataka

U konkretnom slučaju, biće formirana nova JSP datoteka, update.jsp, čiji je zadatak da
promeni broj godina za zaposlenog čiji je id = 103. Neka je navedeno realizovano sledećom
SQL instrukcijom:

UPDATE zaposleni SET starost = 40


WHERE id = 103

Izvršavanjem ove datoteke i ažuriranjem tabele zaposleni, menjaju se konkretne vrednosti u


tabeli, a zatim se vrši preusmeravanje na stranicu index.jsp koja bi trebalo da prikaže sledeći
izlaz, dostupan korisniku putem veb pregledača:

Slika 7.6 Ažuriranje podataka vrste baze podataka u JSP stranici

Posebno će u listingu JSP koda stranice update.jsp biti pokazano kako se ovaj upit povezuje sa
konkretnim identifikatorom. Sledi listing koda kojim je realizovano navedeno:

<%--
Document : update
Created on : 31.12.2016., 09.34.47
Author : Vladimir Milicevic
--%>

<%@ page import="java.io.*,java.util.*,java.sql.*"%>


<%@ page import="javax.servlet.http.*,javax.servlet.*" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/sql" prefix="sql"%>
<html>
<head>
<title>DELETE Operacija</title>
</head>
<body>
<sql:setDataSource var="snapshot"
driver="com.mysql.jdbc.Driver"
url="jdbc:mysql://localhost/DBZaposleni"
user="root" password="vlada"/>

<sql:update dataSource="${snapshot}" var="result">


UPDATE zaposleni SET starost = 40
WHERE id = 103
</sql:update>
<% response.sendRedirect("index.jsp"); %>

</body>
</html>

39
Poglavlje 8

JSP - JavaBean

KLASA JAVABEAN
JavaBeans klase su specifične i postoji nekoliko osobina po kojima se
razlikuju od ostalih Java klasa

JavaBean je specijalno konstruisana Java klasa kreirana u skladu sa JavaBeans API


specifikacijama. JavaBeans klase su specifične i postoji nekolikoosobina po kojima se razlikuju
od ostalih Java klasa. Sledi lista tih osobina:

• Obezbeđuju podrazumevane argumente bez konstruktora;


• Trebalo bi da implementiraju Serializable interfejs;
• Sadrže brojne osobine koje je moguće učitavati i upisivati;
• Za osobine sadrže brojne setter i getter metode.

U narednom izlaganju je neophodno priložiti listu metoda kojima se manipuliše JavaBean


objektima, odnosno njihovim osobinama:

• getPropertyName - preuzima vrednost osobine na osnovu njenog naziva. Ako se, na


primer, osobina naziva "Ime" odgovarajuća metoda za preuzimanje vrednosti ove
osobine će nositi naziv getIme();
• setPropretyName - menja vrednost osobine na osnovu njenog naziva. Ako se, na primer,
osobina naziva "Ime" odgovarajuća metoda za preuzimanje vrednosti ove osobine će
nositi naziv setIme();

Ova lekcija sadrži video materijal. Ukoliko želite da pogledate ovaj video morate da
otvorite LAMS lekciju.

KONSTRUISANJE JAVABEAN KLASE I PRISTUP


ZRNIMA
U narednom izlaganju je neophodno pokazati kako se kreira klasa iz
koje se izvode Java zrna.

U narednom izlaganju je neophodno pokazati kako se kreira klasa iz koje se izvode Java zrna.
Klasa će da obrađuje studente i njihove osobine, a kao što je napomenuto u prethodnom
izlaganju, implementiraće interfejs Serializable.

40
Poglavlje 8 JSP - JavaBean

package com.metropolitan.primer;

/**
*
* @author Vladimir Milicevic
*/
public class StudentiBean implements java.io.Serializable{
private String ime = null;
private String prezime = null;
private int starost = 0;

public StudentiBean() { }

public String getIme(){


return ime;
}

public String getPrezime(){


return prezime;

} public int getStarost(){


return starost;
}

public void setIme(String ime){


this.ime = ime;
}

public void setPrezime(String prezime){


this.prezime = prezime;
}

public void setStarost(int starost){


this.starost = starost;
}
}

U nastavku je potrebno kreirati JSP stanicu kojom je moguće pristupati kreiranom zrnu. Akcija
useBean omogućava primenu zrna u JSP stranici. Kada je jednom zrno deklarisano, ono
postaje skripting promenljiva kojoj je moguće pristupati odgovarajućim elementima u JSP
stranici. Navedeno je moguće prikazati sledećim opštim kodom:

<jsp:useBean id="id" class="bean's class" scope="bean's scope">


<jsp:setProperty name="bean's id" property="property name" value="value"/>
<jsp:getProperty name="bean's id" property="property name"/> ...........
</jsp:useBean>

U narednom izlaganju će upravo biti akcenat na kreiranju JSP datoteke koja će sadržati
elemente za manipulisanje osobinama kreiranog Java zrna.

41
Poglavlje 8 JSP - JavaBean

JSP DATOTEKA ZA PRISTUP JAVA ZRNU


Sledećom datotekom se implementiraju set i get metode za osobine
zrna.

U prethodnom izlaganju je kreirana klasa zrna iz koje bi trebalo da se kreiraju konkretne


instance ove klase koje će odgovarati pojedinačnim studentima. Takođe je pokazano i koji
akciju bi trebalo da implementira JSP datoteka ako želi da pristupa i manipuliše osobinama
kreiranih Java zrna.

Sledećim listingom može biti definisana JSP stranica sa traženim funkcionalnostima:

<html>
<head>
<title>Primer primene get i set metoda</title>
</head>
<body>
<jsp:useBean id="student" class="com.metropolitan.primer.StudentiBean">
<jsp:setProperty name="student" property="ime" value="Petar"/>
<jsp:setProperty name="student" property="prezime" value="Petrovic"/>
<jsp:setProperty name="student" property="starost" value="22"/>

</jsp:useBean>

<p>Ime studenta: <jsp:getProperty name="student" property="ime"/> </p>


<p>Prezime studenta: <jsp:getProperty name="student" property="prezime"/>
</p>
<p>Starost: <jsp:getProperty name="student" property="starost" /> </p>

</body>
</html>

Ako se testira kreirana JSP datoteka dobija se izlaz kojeg korisnik može da uoči u veb
pregledaču u sledećem obliku:

Slika 8.1 Manipulisanje Java zrnom iz JSP

U JSP stranici, koja je zadržala naziv index.jsp, prvo je kreiran objekat klase StudentiBean pod
nazivom student. Zatim su u JSP stranici angažovane setter metode klase da bi kreirano zrno
dobilo osobine sa konkretnim vrednostima.

42
Poglavlje 8 JSP - JavaBean

Na kraju je u JSP stranci izvršeno angažovanje getter metoda klase StudentiBean da bi


informacije o objektu konkretnog studenta bile prikazane kao rezultat u veb pregledaču.

43
Poglavlje 9

JSP - jezik izraza

EL - EXPRESSION LANGUAGE (JEZIK IZRAZA)


Prikaz elemenata jezika za manipulisanje podacima iz Java zrna u JSP
stranicama.

EL - Expression Language (jezik izraza) omogućava jednostavan pristup aplikativnim


podacima koji se čuvaju u komponentama koje odgovaraju Java zrnima. EL dozvoljava
kreiranje izraza koji mogu biti aritmetički i logički. U okviru JSP EL izraza moguće je koristiti
podatke različitih tipova: numeričke (celobrojne i realne), stringove, ugrađene konstante,
logičke konstante, null vrednosti i tako dalje.

JSP EL ima beoma jednostavnu sintaksu. Opšti oblik izraza glasi:

${izraz}

Ovakav izraz može da se ugradi i testira na pogodnom mestu u JSP stranici, ili što je
ovde od posebnog značaja, u string koji odgovara atributu values u okviru elementa
<jsp:setProperty>, na primer na sledeći opšti način:

<jsp:setProperty name="nazivZrna" property="nazivOsobine" value="${izraz}"/>

Na primer, prethodni slučaj može biti modifikovan i podešavanje osobine za starost studenta
može biti obavljeno na sledeći način:

<jsp:setProperty name="student" property="starost"


value="${student.getStarost()+22}"/>

Rezultati izvršavanja modifikovanog primera u potpunosti su identični prethodnom slučaju


prikazanom slikom1 u prethodnom objektu učenja.

Ova lekcija sadrži video materijal. Ukoliko želite da pogledate ovaj video morate da
otvorite LAMS lekciju.

JSP EL - ELEMENTI SINTAKSE


U ovom delu lekcije cilje je kratak pregled elemenata sintakse JSP EL
jezika.

44
Poglavlje 9 JSP - jezik izraza

JSP EL podržava većinu aritmetički i logičkih Java operatora. Sledi lista najčešće korišćenih
operatora u JSP stranicama primenom EL jezika.

Slika 9.1 Operatori u EL

Takođe u JSP EL jeziku je moguće pozivanje i funkcija na sledeći opšti način:

${ns:func(param1, param2, ...)}

Primer poziva funkcije može biti sledeći:

${fn:length("Vrati duzinu stringa")}

Za korišćenje funkcije iz neke biblioteke tagova, neophodno je prvo instalirati tu biblioteku


na serveru ili je uključiti u JSP stranicu <taglib> elementom.

JSP EL jezik podržava i izvesne implicitne objekte koji su priloženi i objašnjeni sledećom
tabelom.

45
Poglavlje 9 JSP - jezik izraza

Slika 9.2 JSP EL implicitni objekti

JSP EL - ELEMENTI SINTAKSE - NASTAVAK


Neophodno je dati još neka razmatranja u vezi sa JSP EL.

Na jednostavnom primeru, neophodno je, za kraj, pokazati još jednom kako je moguće
elemente JST EL jezika uključiti i koristiti u JSP stranicama. Na primer, biće iskorišćen header
implicitni objekat koji je priložen i opisan u prethodnoj tabeli. Neka je to urađeno na način
priložen sledećim JSP listingom:

<%@ page import="java.io.*,java.util.*" %>


<% String title = "Korisnicki agent primer"; %>
<html>
<head>
<title><% out.print(title); %></title>
</head> <body>
<center> <h1><% out.print(title); %></h1> </center>
<div align="center"> <p>${header["user-agent"]}</p> </div>
</body>
</html>

JSP stranica pristupa parametrima zaglavlja koja su označena kao user-agent i u veb
pregledaču daje sledeći izlaz.

Slika 9.3 Korišćenje implicitnog objekta "header"

46
Poglavlje 10

JSP - internacionalizacija

DETEKCIJA LOKALIZACIJE
JSP često koristi klasu Locale i njena polja i metode.

JSP često koristi klasu Locale i njena polja i metode za obezbeđivanje upotrebe odgovarajućeg
jezika i lokalnih podešavanja. Objekat ove klase moguće je dobiti sledećim pozivom:

java.util.Locale request.getLocale()

Postoje brojne značajne metode ove klase koje mogu biti upotrebljene za detekciju lokacije
klijenta koji je uputio zahtev, jezika i brojnih lokalnih podešavanja i standarda. Sledi lista
najčešće korišćenih metoda:

• String getCountry() - vraća kod zemlje / regiona u ISO 3166 - 2 formatu;


• String getDisplayCountry() - vraća naziv zemlje;
• String getLanguage() - vraća kod jezika u ISO 639 formatu;
• String getDisplayLanguage() - vraća naziv jezika;
• String getISO3Country() - vraća skraćenicu za odgovarajuću zemlju (tri slova);
• String getISO3Language() - vraća skraćenicu za odgovarajući jezik (tri slova).

U nastavku je neophodno pokazati kako je moguće prikazati lokalne podatke u JSP


stranicama. Neka je kreirana, u tu svrhu, JSP stranica sa sledećim kodom:

<%@ page import="java.io.*,java.util.Locale" %>


<%@ page import="javax.servlet.*,javax.servlet.http.* "%>
<% //Get the client's Locale
Locale locale = request.getLocale();
String language = locale.getLanguage();
String country = locale.getCountry(); %>
<html>
<head>
<title>Detekcija lokalizacije</title>
</head> <body>
<center> <h1>Detekcija lokalizacije</h1> </center>
<p align="center">
<% out.println("Jezik : " + language + "<br/>");
out.println("Drzava : " + country + "<br/>"); %> </p>
</body>
</html>

47
Poglavlje 10 JSP - internacionalizacija

Pokretanjem ove JSP stranice kreira se lokalni objekat koji obezbeđuje informacije o jeziku i
zemlji, koje se prikazuju korisniku u JSP stranici na pregledaču, kao što je prikazano sledećom
slikom.

Slika 10.1 Lokalne vrednosti za jezik i zemlju

Više o podešavanju jezika, datuma, valuta i procenata na linku


https://www.tutorialspoint.com/jsp/jsp_internationalization.htm.

48
Poglavlje 11

Vežba 4 - JSP - napredni koncepti

ZADATAK 1
Kreiranje veb aplikacije sa naprednim JSP konceptima.

1. Otvoriti razvojno okruženje NetBeans i kreirati nov projekat pod nazivom Vezba4 za
simuliranje trgovine akcijama;
2. U početnoj HTML stranici, index.html, kreirati formu na kojoj se u tekstualnom polju
unosi šifra akcije i klikom na dugme računa vrednost akcije;
3. Kreirati StockQuote.jsp stranicu na kojoj će biti prikazana cena tražene akcije. U
slučaju da nije uneta prava šifra akcije, dati odgovarajuće obaveštenje;
4. Za Java klase projekta kreirati paket com.vezba4;
5. U klasi StockPriceGenerator.java omogućiti slučajno generisanje cena akcija;
6. Kreirati JavaBean klasu Stock.java koja sadrži privatno polje simbol i javni interfejs za
čitanje i definisanje vrednosti osobina klase. Klasa implementira Serializable interfejs;
7. Koristite sve neophodne JSP tagove obrađene u teorijskom delu lekcije.

Za početak priložen je kod početne HTML stranice index.html sa implementiranom formom za


unos šifre akcije.

<html>
<head>
<title>Vezba broj 4</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div>Vezba broj 4 - Kvote akcija</div>
<form action="http://localhost:8080/Vezba4/StockQuote.jsp" method="GET">
<input type="text" name="simbol" placeholder="Unesite simbol za akciju">
<input type="submit" value="Preuzmite cenu akcije">
</form>
</body>
</html>

Zatim, prilaže se kod JSP datoteke StockQuote.jsp.

<%@page import="com.vezba4.StockPriceGenerator"%>
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>

49
Poglavlje 11 Vežba 4 - JSP - napredni koncepti

<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">


<title>Stock Quote</title>
</head>
<body>
<jsp:useBean id="stock" class="com.vezba4.Stock" />
<jsp:setProperty property="*" name="stock" />
<%!StockPriceGenerator stockServer = new StockPriceGenerator();%>

Simbol: <%=stock.getSimbol()%>
Cena: <%=stockServer.getCena(stock.getSimbol())%>
</body>
</html>

ZADATAK 1 - NASTAVAK
Definišu se dve Java klase.

Sledi kod klase StockPriceGenerator.java koja obrađuje listu dozvoljenih simbola akcija i
generiše slučajnu vrednost akcije.

package com.vezba4;

/**
*
* @author Vladimir Milicevic
*/
import java.util.ArrayList;
import java.util.List;

public class StockPriceGenerator {

private List<String> podrzaniSimboli = new ArrayList<>();

public StockPriceGenerator() {
podrzaniSimboli.add("AAPL");
podrzaniSimboli.add("MSFT");
podrzaniSimboli.add("YHOO");
podrzaniSimboli.add("AMZN");
podrzaniSimboli.add("IBM");
}

public String getCena(String simbol) {


String cena = "";

// Check if the symbol is valid


if (podrzaniSimboli.indexOf(simbol.toUpperCase()) != -1) {
// Generate a random price for valid symbols
cena = (new Double(Math.random() * 100)).toString();
} else {
cena = "Simbol nije korektan. Koristite neke od ovih: " +

50
Poglavlje 11 Vežba 4 - JSP - napredni koncepti

getPodrzaniSimboli();
}

return cena;
}

private String getPodrzaniSimboli() {


StringBuilder simboli = new StringBuilder();
for (String symbolName : podrzaniSimboli) {
simboli.append(symbolName);
simboli.append(" ");
}
return simboli.toString();
}
}

Na kraju, prilaže se JavaBean klasa Stock.java.

package com.vezba4;

/**
*
* @author Vladimir Milicevic
*/
import java.io.Serializable;

public class Stock implements Serializable {

private String simbol;

public String getSimbol() {


return simbol;
}

public void setSimbol(String simbol) {


this.simbol = simbol;
}
}

Kompletno urađen i testiran zadatak je priložen kao dodatni materijal uz vežbe.

ZADATAK ZA SAMOSTALNI RAD


Kreirajte JSP stranice koje će izvršavati CRUD operacije nad kreiranom
bazom

1. Kreirajte novu veb aplikaciju;


2. Kreirajte jednostavnu bazu podataka (sa jednom tabelom);
3. Kreirajte JSP stranice koje će izvršavati CRUD operacije nad kreiranom bazom.
4. Angažujte aplikaciju na serveru i proverite korektnost vašeg rada.

51
Poglavlje 12

Domaći zadatak 4

ZADATAK 1
Kreiranje veb aplikacije sa naprednim JSP konceptima.

U zadatku urađenom na vežbama uraditi sledeće modifikacije:

1. U početnoj formi dodati tekst polje za unos količine akcija;


2. Kao rešenje vratiti vrednost pojedinačne akcije i tražene količine akcija;
3. Ukoliko nije unet korektan simbol za akciju, posle određenog vremena izvršiti
automatsko preusmeravanje na početnu stranicu;
4. Kreirati stranicu dobrodošlice (ona će u ovom slučaju nositi naziv index.html) koja će
naglasiti da se radi o "Domaćem zadatku broj 4" i nakon klika na odgovarajući link
izvršiti preusmeravanje na stranicu sa formom;

52
Poglavlje 13

Zaključak

ZAKLJUČAK
Lekcija je obrađivala napredne JSP elemente.

Ovom lekcijom su obrađeni napredni JSP koncepti i kao takva ona predstavlja nastavak
izlaganja iz Lekcije 3. Posebno, lekcija se bavila sledećim temama:

• Demonstracija korišćenja filtera u JSP stranicama;


• Detaljna analiza i demonstracija upravljanja kolačićima u JSP stranicama;
• Savladavanje upload - ovanja datoteka iz JSP stranica;
• Rad sa vremenom i datumom u JSP stranicama;
• Preusmeravanje sa jedna na drugu JSP stranicu;
• Detaljan uvid u JSTL (JavaServer Pages Standard Tag Library) biblioteku;
• Rad sa bazama podataka iz JSP stranica;
• Upoznavanje i rad sa JavaBean objektima;
• Savladavanje elemenata JSP EL jezika izraza;
• Internacionalizacija u JSP stranicama.

Savladavanjem ove lekcije, kao i prethodne lekcije, student u potpunosti ovladao konceptima
i principima primene JSP stranica u Java veb aplikacijama i sposoban je da kreira veliki broj
veb aplikacija koristeći HTML, JSP, Servlet i JavaBean tehnologije.

LITERATURA
U pripremanju lekcije korišćena je najnovija pisana i elektronska
literatura.

1. http://www.concretepage.com/java-ee/jsp-servlet/how-to-use-filter-in-servlet-3-with-
webfilter-annotation
2. http://www.tutorialspoint.com/jsp/
3. Eric Jendrock, Ricardo Cervera-Navarro, Ian Evans, Kim Haase, William Markito. 2014.
Java Platform, Enterprise Edition The Java EE Tutorial, Release 7, ORACLE
4. David R. HeffelFinger. 2015. Java EE7 Develpomnet With NetBeans 8, PACK Publishing
5. Yakov Fain. 2015. Java 8 programiranje, Kombib (Wiley)
6. Josh JUneau. 2015. Java EE7 Recipes, Apress

53
CS230 - DISTRIBUIRANI SISTEMI

JavaServer Faces
Lekcija 05
CS230 - DISTRIBUIRANI SISTEMI
Lekcija 05

JAVASERVER FACES

JavaServer Faces
Poglavlje 1: Uvod u JSF
Poglavlje 2: Forme u JSF stranicama
Poglavlje 3: Kreiranje CDI zrna
Poglavlje 4: JSF stranica za potvrđivanje
Poglavlje 5: JSF Validacija
Poglavlje 6: Facelet šabloni
Poglavlje 7: Biblioteka ugovora resursa
Poglavlje 8: JSF - vežbe
Poglavlje 9: Domaći zadatak 5
Zaključak

Copyright © 2017 – UNIVERZITET METROPOLITAN, Beograd. Sva prava zadržana. Bez prethodne pismene dozvole
od strane Univerziteta METROPOLITAN zabranjena je reprodukcija, transfer, distribucija ili memorisanje nekog
dela ili čitavih sadržaja ovog dokumenta., kopiranjem, snimanjem, elektronskim putem, skeniranjem ili na bilo
koji drugi način.

Copyright © 2017 BELGRADE METROPOLITAN UNIVERSITY. All rights reserved. No part of this publication may
be reproduced, stored in a retrieval system or transmitted in any form or by any means, electronic, mechanical,
photocopying, recording, scanning or otherwise, without the prior written permission of Belgrade Metropolitan
University.

www.metropolitan.ac.rs
Uvod

UVOD
Cilj lekcije je analiza i demonstracija specifičnog Java okvira za razvoj
veb aplikacija.

JavaServer Faces (JSF) predstavlja specifičan Java okvir ( framework ) namenjen za razvoj
veb aplikacija. Upravo, u ovoj lekciji će biti cilj pokazivanje načina na koji primena JSF
pojednostavljuje razvoj veb aplikacija. U tu svrhu će biti obrađene značajne teme za analizu i
demonstraciju ovog specifičnog Java okvira za razvoj veb aplikacija:

• Kreiranje JSF projekta primenom izabranog razvojnog okruženja;


• Postavljanje JSF tagova za korišćenje prednosti koju obezbeđuje primena taga JSF
<h:panelGrid>;
• Korišćenje statičke i dinamičke navigacije za definisanje navigacije između stranica;
• Razvoj CDI (Contexts and Dependency Injection for the Java EE Platform) zrna za
enkapsulaciju podataka i programske logike;
• Implementacija JSF validatora;
• Kreiranje JSF šablona;
• Rad sa JSF temama.

Posebno će lekcija insistirati na analizi i demonstraciji primenom odabranih primera koji će


na najbolji način istaći i pokazati prednosti primene JSF stranica u Java veb aplikacijama. Od
posebnog značaja će biti fokusiranost primera na rad sa šablonima stranica i temama za
pokazivanje veoma jednostavnog načina kreiranja JSF stranica sa predefinisanim atraktivnim
izgledom. Konkretan primer će pokazati kako jedna šablon JSF datoteka na veoma
jednostavan način upravlja nizom JSF datoteka klijenata šablona.

Savladavanjem ove lekcije studenti će biti osposobljeni da koriste JSF tehnologiju za razvoj
Java veb aplikacija.

3
Poglavlje 1

Uvod u JSF

UVODNA RAZMATRANJA
JSF je standardna komponenta Java EE platforme.

Pre pojave JSF okvira, većina Java veb aplikacija je razvijana primenom nestandardnih
razvojnih okvira za veb aplikacije (koji ne predstavljaju integralno deo Java EE platforme)
kao što su: Apache Struts, Tapestry i Spring Web MVC, kao i mnogi drugi. Navedeni okviri su
izgrađeni na servlet i JSP standardima i automatizuju brojne funkcionalnosti koje bi morale,
inače, ručno da se kodiraju kada bi se navedeni API - ji direktno koristili.

Uvođenje JSF u Java EE specifikaciju dalo je za rezultat standardan, veoma moćan aplikativni
razvojni okvir dostupan u bilo kojem Java EE aplikativnom serveru. Sa standarizovanjem JSF
kao integracionog dela Java EE platforme, brojni programeri Java Enterprise aplikacija upravo
koriste JSF za kreiranje korisničkog interfejsa u aplikaciji.

Kao što je postavljeno kao praksa, u ovim materijalima će svako izlaganje biti praćeno
odgovarajućim primerom. Tako će i u ovom slučaju, uvodna razmatranja biti podržana
razvojem jednostavne JSF aplikacije.

Ova lekcija sadrži video materijal. Ukoliko želite da pogledate ovaj video morate da
otvorite LAMS lekciju.

RAZVOJ JEDNOSTAVNE JSF APLIKACIJE - KREIRANJE


JSF PROJEKTA
Tekuća razmatranja će biti podržana razvojem jednostavne JSF
aplikacije.

Iz ugla aplikativnog programera JSF aplikacija se sastoji iz jedne ili više XHTML stranica koje
sadrže JSF tagove, jedan ili više CDI zrna i opciono konfiguracione datoteke pod nazivom
faces-config.xml.

Starije verzije JSF su insistirale na primeni konfiguracija (JSF upravljanim zrnima) za


implementaciju funkcionalnosti serverske strane. Zbog kompatibilnosti unazad, primena JSF
konfiguracija je i dalje podržana ali je kao dobra praksa, i olakšanje, dodata podrška za
anotacije (CDI zrna) koje se dominantno koriste u razvoju savremenih JSF veb aplikacija.

Za demonstraciju rada sa JSF projektima biće kreiran konkretan. U razvojnom okruženju (neka
to bude NetBeans IDE) u meniju File i izborom opcije New Project, otvoriće se prozor u kome
će biti izabrano da se razvija Java veb aplikacija (sledeća slika).

4
Poglavlje 1 Uvod u JSF

Slika 1.1 Započinjanje JSF projekta

Klikom na dugme Next otvara se nov prozor u kojem će biti određen naziv projekta, na primer
JSFAplikacijaDemo.

Slika 1.2 Definisane naziva projekta

Klikom na Next, otvoriće se prozor gde se bira verzija Jave EE i tip aplikacionog servera.
Klikom na Next se otvara poslednji prozor u kojem se bira JSF framework za razvoj kreiranog
veb projekta.

Slika 1.3 Izbor JSF razvojnog okvira

STRUKTURA JSF PROJEKTA


Klikon na Finish, nakon izbora JSF okvira, vrši se kreiranje projekta.

Prethodne aktivnosti se završavaju klikom na dugme Finish prozora u okviru kojeg je izabran
JSF okvir za korišćenje u tekućem primeru. Nakon toga razvojno okruženje je generisalo
projekat sa strukturom koja je prikazana na sledećoj slici.

5
Poglavlje 1 Uvod u JSF

Slika 1.4 Struktura JSF projekta

U pokazanoj strukturi je moguće uočiti datoteku web.xml koja predstavlja standardni, opcioni
konfiguracioni fajl kojeg koriste Java veb aplikacije. Fajl je postao opcionalan od verzije Servlet
API 3.0 koji je uveden Java EE 6 platformom.U većini slučajeva, u savremenim Java veb
aplikacijama, ovaj fajl više nije potreban budući da se podešavanja obavljaju putem anotacija.
Međutim, za JSF aplikacije je dobra ideja da se kreira ova datoteka budući da se u okviru nje
mogu specificirati faze razvoja aplikacije. Kreiranjem projekta, automatski je generisan
sledeći kod za web.xml.

<?xml version="1.0" encoding="UTF-8"?>


<web-app version="3.1" xmlns="http://xmlns.jcp.org/xml/ns/javaee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/
javaee/web-app_3_1.xsd">
<context-param>
<param-name>javax.faces.PROJECT_STAGE</param-name>
<param-value>Development</param-value>
</context-param>
<servlet>
<servlet-name>Faces Servlet</servlet-name>
<servlet-class>javax.faces.webapp.FacesServlet</servlet-class>
<load-on-startup>1</load-on-startup>
</servlet>
<servlet-mapping>
<servlet-name>Faces Servlet</servlet-name>
<url-pattern>/faces/*</url-pattern>
</servlet-mapping>
<session-config>
<session-timeout>

6
Poglavlje 1 Uvod u JSF

30
</session-timeout>
</session-config>
<welcome-file-list>
<welcome-file>faces/index.xhtml</welcome-file>
</welcome-file-list>
</web-app>

FAZE JSF PROJEKTA


Razvojno okruženje je automatski podesilo JSF fazu projekta na
Development.

Kao što je moguće primetiti u prethodno priloženom kodu za deskriptor veb razvoja web.xml,
razvojno okruženje je automatski podesilo JSF fazu projekta na vrednost Development. Na
ovaj način razvojno okruženje je omogućilo primenu dopunskih alata za pomoć debagovanju
koji nisu dostupni u ostalim fazama JSF projekta. Na primer, standardni problem kod razvoja
JSF stranice može biti da, tokom razvoja stranice, provera jednog ili više polja na stranici
"pada" iz razloga što programer nije dodao neki od elemenata <h:message> ili
<h:messages> u stranicu. Kada se ovo desi i odgovarajuća forma je potvrđena (submit)
moguće je uočiti da se ništa ne dešava ili se navigacija između stranica ne obavlja na
odgovarajući način. Podešavanjem JSF faze projekta na vrednost Development, odgovarajuće
greške validacije biće automatski dodate u stranicu, bez potrebe da ih programer eksplicitno
dodaje u kod odgovarajućim tagovima. Pre konačnog objavljivanja koda moguće je dodati
odgovarajuće tagove u stranicu budući da korisnik, u suprotnom, neće biti u stanju da vidi
automatski generisane informacije o greškama validacije.

U narednom izlaganju je neophodno navesti i obrazložiti dozvoljene vrednosti za


javax.faces.PROJECT_STAGE:

• Development
• Production
• SystemTest
• UnitTest.

Kao što je već napomenuto u fazi Development se dodaju dopunske informacije koje pomažu
prilikom debagovanja. Faza Production se bavi performansama. Ostale dve faze omogućavaju
da se kroz testiranje uposli odgovarajuće ponašanje.

Klasa javax.faces.application.Application poseduje metodu getProjectStage() kojom je


moguće dobiti informaciju o trenutnoj fazi JSF projekta. Navedeno je moguće ilustrovati
sledećim kodom:

public void NekaMetoda() {


FacesContext facesContext = FacesContext.getCurrentInstance();
Application application = facesContext.getApplication();
ProjectStage projectStage = application.getProjectStage();
if (projectStage.equals(ProjectStage.Development)) {

7
Poglavlje 1 Uvod u JSF

//faza razvoja
} else if (projectStage.equals(ProjectStage.Production)) {
//faza produkcije
} else if (projectStage.equals(ProjectStage.SystemTest)) {
// faza sistemskog testiranja
} else if (projectStage.equals(ProjectStage.UnitTest)) {
//faza jediničnog destiranja
}
}

Kao što je ilustrovano u prethodnom listingu, moguće je implementirati kod koji će se izvršiti
u bilo kojoj od faza JSF projekta u zavisnosti od povratne vrednosti metode getProjectStage()
klase Application.

FACELET
Facelet nije ništa drugo do XHTML datoteka sa specifičnim JSF
tagovima.

Sa kreiranjem projekta facelet je automatski generisan. Facelet nije ništa drugo do XHTML
datoteka sa specifičnim JSF prostorom naziva ( namespace). Automatski generisan facelet
ima sledeći oblik:

<?xml version='1.0' encoding='UTF-8' ?>


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/
TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://xmlns.jcp.org/jsf/html">
<h:head>
<title>Facelet Title</title>
</h:head>
<h:body>
Hello from Facelets
</h:body>
</html>

U ovom automatski generisanom kodu definicija prostora naziva koristi oznaku"h" (za HTML)
JSF biblioteke komponenata. To je prikazano sledećim izolovanim kodom:

xmlns:h="http://xmlns.jcp.org/jsf/html"

Takođe, moguće je primetiti da su korišćeni i specijalni JSF tagovi <h:head>i <h:body> koji
predstavljaju zamenu za standardne HTML/XHTML <head> i <body> tagove respektivno.

Još jedan prostor naziva koji se često koristi u JSF stranicama određen je prefiksom "f". Ovom
oznakom su određeni JSF tagovi koji se ne ugrađuju direktno u JSF stranice već specificiraju
elemente drop - down listi, instance, bind akcije i tako dalje. Primer definisanja ovog prostora
naziva je priložen sledećim izolovanim kodom:

8
Poglavlje 1 Uvod u JSF

xmlns:f= "http://xmlns.jcp.org/jsf/core"

Sada je moguće pokrenuti ovu najjednostavniju JSF veb aplikaciju. U razvojnom okruženju
NetBeans IDE je dovoljno kliknuti na opciju Run Project (ili F6), aplikacioni server se pokreće i
aplikacija se angažuje. U veb pregledaču je moguće pogledati rezultate izvršavanja kreirane
aplikacije. To je prikazano sledećom slikom.

Slika 1.5 Prva JSF aplikacija

9
Poglavlje 2

Forme u JSF stranicama

MODIFIKOVANJE AUTOMATSKI GENERISANE JSF


STRANICE
Cilje je konkretizovanje zadataka koje bi JSF stranica trebalo da obavi.

Kada se kreira JSF projekat dobija se veoma prosta aplikacija koja u veb pregledaču prikazuje
jedan string: "Hello from Facelets" i pored toga ne radi ništa konkretno. Za dobijanje više
informacija o načinima funkcionisanja i elementima JSF stranica, moguće je izvršiti određene
modifikacije na stranici index.xhtml. Na primer, na ovoj stranici je moguće kreirati formu koja
može da pokupi izvesne korisničke podatke.

Svaka JSF form se realizuje tagom <h:form> koji je ekvivalentan tagu <form> standardne
HTML stranice. Kucanjem prvih nekoliko karaktera u kodu stranice za <h:form> razvojno
okruženje, konkretno NetBeans, započeće davanje sugestija o upotrebi mogućih tagova.
Navedeno je pokazano sledećom slikom:

Slika 2.1 Početak kreiranja JSF forme

Odmah po obeležavanju odgovarajućeg JSF taga razvojno okruženje prikazuje njegovu


dokumentaciju (kao na slici). Sledećim kodom je moguče realizovati konkretnu formu u okviru
JSF stranice:

<?xml version='1.0' encoding='UTF-8' ?>


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/
TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://xmlns.jcp.org/jsf/html"
xmlns:f="http://xmlns.jcp.org/jsf/core">

10
Poglavlje 2 Forme u JSF stranicama

<h:head>

<title>Registracija</title>
<h:outputStylesheet name="styles.css"/>
</h:head>
<h:body>
<h3>Stranica za registraciju</h3>
<h:form>
<h:panelGrid columns="3"
columnClasses="rightalign,leftalign,leftali
gn">
<h:outputLabel value="Titula: " for="titula"/>
<h:selectOneMenu id="titula" label="Titula"
value="#{registrationBean.
titula}" >
<f:selectItem itemLabel="" itemValue=""/>
<f:selectItem itemLabel="St." itemValue="ST"/>
<f:selectItem itemLabel="Ma." itemValue="MA"/>
<f:selectItem itemLabel="MSci" itemValue="MSCI"/>
<f:selectItem itemLabel="Dr" itemValue="DR"/>
</h:selectOneMenu>
<h:message for="titula"/>
<h:outputLabel value="Ime:" for="ime"/>
<h:inputText id="ime" label="Ime"
required="true"
value="#{registrationBean.ime}" />
<h:message for="ime" />
<h:outputLabel value="Prezime:" for="prezime"/>
<h:inputText id="prezime" label="Prezime"
required="true"
value="#{registrationBean.prezime}" />
<h:message for="prezime" />
<h:outputLabel for="starost" value="Starost:"/>
<h:inputText id="starost" label="Starost" size="2"
value="#{registrationBean.starost}"/>
<h:message for="starost"/>
<h:outputLabel value="Email adresa:" for="email"/>
<h:inputText id="email" label="Email adresa"
required="true"
value="#{registrationBean.email}">
</h:inputText>
<h:message for="email" />
<h:panelGroup/>
<h:commandButton id="registracija" value="Registracija"
action="potvrda" />
</h:panelGrid>
</h:form>
</h:body>
</html>

11
Poglavlje 2 Forme u JSF stranicama

MENADŽER RASPOREDA I CSS


Nophodno je u narednom izlaganju objasniti priloženi JSF kod.

JSF kod, koji je priložen u prethodnoj sekciji, tokom vremena izvršavanja će generisati sledeću
stranicu.

Slika 2.2 Kreirana JSF forma

Sva polja za unos podataka morala su da dudu definisana u okviru JSF taga <h:form>. Takođe,
stranica je veoma jednostavno uređena primenom menadžera rasporeda <h:panelGrid> o
formi matrice (rešetke) koja je izdeljena na ćelije. Budući da se radi o dobro poznatom
menadžeru rasporeda, o njemu ovde neće biti detaljno govora. Dovoljno je napomenuti da se
svaka JSF komponenta pakuje u posebnu ćeliju, a da je atributom columns, taga
<h:panelGrid>, određeno koliko će kolona matrica imati - u konkretnom slučaju 3. Kada broj
komponenata u vrsti matrice dostigne broj definisanih kolona, nova vrsta za pakovanje novih
elemenata automatski se kreira. Svaki red u matrici, koja uređuje redosled komponenata na
kreiranoj JSF stranici, sastoji se od: <h:outputLabel> taga, polja za unos i <h:message> taga.

Atribut columnClasses, taga <h:panelGrid>, omogućava primenu CSS stilova na svaku kolonu
iz matrice određene navedenim menadžerom rasporeda.
Vrednosti ovog atributa su razdvojene zarezima i definisane su u datoteci styles.css koja je u
JSF stranicu uključena elementom <h:outputStylesheet name="styles.css"/>.

Pošto matrica ima tri kolone (pogledati kod) prvi stil se primenjuje na prvu, drugi na drugu, a
treći na treću kolonu. Za slučaj postojanja četvrte kolone na nju bi bio primenjen prvi, na petu
drugi stil i tako dalje. Stilove je moguće primeniti i na vrste, ali bi u tom slučaju bio angažovan
atribut rowClasses.

12
Poglavlje 2 Forme u JSF stranicama

CSS DOPUNSKA RAZMATRANJA


Tag za uključivanje CSS datoteke u JSF stranicu je dostupan od JSF
verzije JSF 2.0.

Obavezan položaj CSS datoteke, u Web Pages folderu projekte, prikazan je sledećom slikom.

Slika 2.3 CSS datoteka u JSF projektu

Tag za uključivanje CSS datoteke u JSF stranicu je dostupan od JSF verzije JSF 2.0. Resursi, kao
što su CSS, JavaScript datoteke i slike, mogu biti čuvani u top - level direktorijumu pod
nazivom resources. Ovim resursima JSF tagovi mogu automatski da pristupaju. Da bi
kreirana JSF stranica mogla da pristupa datoteci styles.css, kreiran je prvo pomenuti folder
resources, a onda u okviru njega odgovarajući podfolder CSS. Datoteka sa stilovima je
smeštena u folder CSS.

Tag <h:outputStylesheet> može da sadrži i atribut library čija vrednost mora da se podudara
sa lokacijom na kojoj se CSS fajl čuva. Vrednost atributa name mora da odgovara nazivu CSS
datoteke.

Po analogiji, ukoliko bi u projektu bile korišćene JavaScript datoteke i slike, datoteke bi bile
čuvane u podfolderima foldera resources, javascript i images, respektivno.

13
Poglavlje 2 Forme u JSF stranicama

JSF ELEMENTI
U narednom izlaganju će biti opisani JSF elementi koji su korišćeni u
primeru.

Kada se pogleda priloženi kod moguće je uočiti brojne JSF elemente kojima je realizovana
forma, odnosno odgovarajući korisnički interfejs koji je dostavljen korisniku učitavanjem
kreirane JSF stranice u veb pregledač.

Tagom <h:outputLabel> su određene labele koje označavaju polja za unos teksta koja postoje
na formi stranice. Vrednost za atribut for ovog taga, odgovara vrednosti id odgovarajućeg
polja za unos teksta.

<h:outputLabel value="Titula: " for="titula"/>

Tagom <h:message> je generisana greška unosa za tekst polje. Vrednost za atribut for ovog
taga, odgovara vrednosti id odgovarajućeg polja za unos teksta.

<h:message for="titula"/>

Na formi je moguće uočiti i jednu kontrolu koja je u brojnoj literaturi i implementacijama


poznata kao padajuća lista (padajući meni) ili ComboBox. Ovom kontrolom se bira "titula"
osobe čiji se podaci unose u formu. Kontrola je realizovana JSF tagom <h:selectOneMenu>
koji je ekvivalentan standardnom HTML tagu <select>.

Dakle. moguće je primetiti da brojni JSF tagovi sadrže atribut id. Ovaj atribut je predstavljen
stringom koji jednoznačno označava tag pomoću identifikatora. Ukoliko programer nije
specificirao vrednost za atribut id, ona će automatski biti generisana.

Prilikom korišćenja taga <h:label> za definisanje polja za unos teksta ili taga <h:message>
za definisanje greške validacije, neophodno je eksplicitno definisati id atribut polja za unos
koji mora da se podudara sa atributima for navedenih tagova.

Svaki JSF tag za unos sadrži atribut label. Ovaj atribut se koristi za generisanje greške
provere na kreiranoj stranici. Ukoliko ovaj atribut nije specificiran za polje, ono će automatski
biti prepoznato, u poruci greške. na osnovu njegovog id atributa.

Takođe, Svaki JSF tag za unos sadrži atribut value. U slučaju taga <h:selectOneMenu> ovaj
atribut ukazuje na to koja će vrednost iz generisanog HTML taga <select> biti izabrana.
Vrednost ovog atributa mora da se podudara sa vrednošću itemValue atributa nekog od
ugnježdenih <f:selectItem> tagova, unutra taga <h:selectOneMenu>.

Vrednost itemLabel atributa taga <f:selectItem> predstavlja vrednost koju će korisnik moći
da vidi u listi (meniju) iz koje vrši izbor. Kada korisnik izabere tu vrednost, vrednost određena
atributom itemValue se šalje na server kada se forma popuni i potvrdi.

14
Poglavlje 2 Forme u JSF stranicama

JSF ELEMENTI - NASTAVAK


Neki od inputText tagova zahtevaju vrednost.

Neki od <h:inputText> tagova zahtevaju vrednost. Ovi tagovi poseduju atribute required
postavljene na vrednost true. To znači da je obaveza korisnika da unese vrednost u polje
koje odgovara ovom JSF elementu. Ovaj atribut je opcionalan i ukoliko nije obavezan unos u
polje on može da se izostavi ili da bude podešen na false (ovo je i podrazumevana vrednost
atributa). Navedeno je pokazano sledećim izolovanim listingom:

<h:inputText id="email" label="Email adresa"


required="true"
value="#{registrationBean.email}">
</h:inputText>

Ako se dalje pogleda priloženi kod moguće je primetiti da je tag <h:panelGroup/> dodat u
poslednji red matrice koja određuje raspored GUI elemenata. Svhra navedenog je dodavanje
više JSF tagova u jednu ćeliju <h:panelGrid> rasporeda. U konkretnom slučaju na ovaj
način je omogućeno preskakanje jedne ćelije (dodavanjem prazne ćelije), dodavanje kontrole
<h:commandButton> i njeno poravnanje sa poljima za unos teksta na kreiranoj formi.
Zadatak dugmeta je da potvrdi popunjenu formu i omogući slanje podataka na server. Atribut
dugmeta value ima zadatak da pokaže korisniku tekst na kreiranom dugmetu, a atribut
action je zadužen za određivanje stranice koja će biti prikazana nakon klika na dugme.

U konkretnom slučaju, radi se o statičkoj navigaciji. Klikom na dugme "Registracija" ka


datoteci pod nazivom potvrda.xhtml.

<h:commandButton id="registracija" value="Registracija"


action="potvrda" />

<h:commandButton id="registracija" value="Registracija"


action="potvrda" />

Alternativno, moguće je koristiti dinamičku navigaciju. U tom slučaju, vrednost atributa


action, dugmeta za potvrdu forme, odgovara vrednosti izraza koji odgovara metodi i
povratnom stringu CDI zrna. To znači da povratna vrednost navedene i izvršene metode mora
da odgovara nazivu stranice ka kojoj se vrši navigacija.

15
Poglavlje 3

Kreiranje CDI zrna

DODAVANJE KLASE ZRNA U JSF APLIKACIJU


CDI zrna prihvataju korisničke podatke.

CDI (Context and Dependency Injection) zrna su klasična Java zrna čiji je zadatak prihvatanje
podataka koje je korisnik uneo u JSF aplikaciji. Budući da se radi Java klasi, njeno kreiranje se
odvija po istom scenariju kao i za ostale Java klase.

U razvojnom okruženju, desnim klikom na Source Package aktuelnog projekta, se bira opcija
New i nakon toga se bira opcija Java Class. Otvara se prozor u kojem se unosi naziv
klase i paketa: RegistrationBaan i com.metropolitan, respektivno. Generisana je prazna klasa
priložena sledećim listingom:

package com.metropolitan;

/**
*
* @author Vladimir Milicevic
*/
public class RegistrationBean {

Da bi kreirana Java klasa postala šablon za CDI (obeleženo, imenovano) zrno neophodno
je izvršiti obeležavanje klase anotacijom @Named. Po osnovnim podešavanjima naziv CDI
zrna u potpunosti odgovara nazivu klase sa razlikom što počinje mail slovom. Dakle, ovoj
klasi odgovara CDI zrno registrationBean kojeg je moguće uočiti u priloženom kodu datoteke
index.xhtml. Podrazumevano ime može biti i redefinisano kada se u anotaciji @Named
podesi atribut value na željenu vrednost.

CDI zrna mogu pokrivati različite oblasti (sledeća tabela):

16
Poglavlje 3 Kreiranje CDI zrna

Slika 3.1 Oblasti CDI zrna

Sledi objašnjenje za pomenute oblasti i odgovarajuće anotacije:

• Request - znači da je zrno dostupno isključivo u jednom HTTP zahtevu;


• Session - zrno dostupno isključivo u jednoj korisničkoj HTTP sesiji;
• Conversation - zrno dostupno preko više HTTP zahteva;
• Application - zrno je dostupno svim korisnicima aplikacije preko njihovih sesija;
• Dependent - zrno može imati zavisan pseudo - kod, a to podrazumeva umetanje nove
instance svaki puta kada se zahteva;
• FLow - zrno je dostupno kroz specifične JSF tokove.

KODIRANJE KLASE CDI ZRNA


Na osnovu prethodnih izlaganja neophodno je konkretizovati definiciju
kreirane klase.

Ako se vrati fokus na prethodno izložene anotacije trebalo bi napomenuti i da su sve


anotacije, izuzev @FlowScoped, definisane u okviru paketa javax.enterprise.context.
Anotacija @FlowScoped je definisana unutar paketa pod nazivom javax.faces.flow. Dakle,
neophodno je kreiranu klasu obeležiti odgovarajućim anotacijama i obezbediti odgovarajuće
import instrukcije za podršku. Kada se dodaju anotacije, trebalo bi imati na umu da klasa
implementira CDI zrno (@Named) i da osluškuje zahtev korisnika koji popunjava formu
(@RequestScope).

Privremeni oblik klase RegistrationBean priložen je sledećim listingom:

package com.metropolitan
;
import javax.enterprise.context.RequestScoped;
import javax.inject.Named;

@Named
@RequestScoped
public class RegistrationBean {
}

17
Poglavlje 3 Kreiranje CDI zrna

Ukoliko razvojno okruženje ne može da pronađe anotaciju @RequestScope, neophodno je,


desnim klikom na Libraries, izborom opcije Add JAR /Folder, izabrati cdi-api.jar iz foldera
modules GlassFish instalacije.

Konačno, moguće je konkretizovati i finiširati definiciju posmatrane klase dodavanjem


osobina koje će čuvati vrednosti koje je korisnik uneo.

Sledećim listingom je priložen konačan kod klase koja odgovara CDI zrnu:

package com.metropolitan;

/**
*
* @author Vladimir Milicevic
*/
import javax.enterprise.context.RequestScoped;
import javax.inject.Named;

@Named
@RequestScoped
public class RegistrationBean {
private String titula;
private String ime;
private String prezime;
private Integer staros;
private String email;
//geteri i seteri su izostavljeni zbog preglednosti
//bice prilozeni u materijalima za vezbe
}

Moguće je primetiti da nazivi osobina zrna u potpunosti odgovaraju nazivima korišćenim u JSF
stranici index.xhtml za podatke koje unosti korisnik. Ovi nazivi moraju da se podudaraju da bi
JSF stranica znala koje vrednosti može da mapira.

18
Poglavlje 4

JSF stranica za potvrđivanje

KREIRANJE STRANICE ZA POTVRĐIVANJE


Kreiranje stranice za prikaz unetih korisničkih podataka.

Kada korisnik unese sve potrebne podatke na početnoj stranici i potvrdi unos na formi
stranice, neophodno je na odgovarajućoj stranici za potvrđivanje prikazati podatke koje je
korisnik uneo. Vrednosti koje odgovaraju atributima values svakog polja za unos teksta
forme, biće pridruženi odgovarajućim osobinama kreiranog CDI zrna. U nastavku, zadatak je
jednostavan. Stranica za potvrđivanje će biti generisana kao serija <h:outputText> JSF tagova
koji prikazuju vrednosti koje kreirano CDI zrno čuva.

U razvojnom okruženju, u konkretnom slučaju NetBeans, klikom na File, a zatim izborom


opcije New File, pa kategorije JavaServer Faces i tipom datoteke JSF Page, otvara se prozor za
kreiranje nove JSF stranice kojoj će biti dodeljen naziv potvrda.xhtml (sledeća slika).

Slika 4.1 Nova JSF stranica

Još jednom je neophodno proveriti da li dodeljeni naziv ovoj datoteci odgovara vrednosti
atributa action dugmeta forme koja se nalazi na stranici index.xhtml. U nastavku, automatski
generisana stranica je modifikovana u skladu sa istaknutim zahtevima u prethodnom
izlaganju. Nakon modifikacije stranicu sačinjava kod koji je priložen sledećim listingom:

<?xml version='1.0' encoding='UTF-8' ?>


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/
TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://xmlns.jcp.org/jsf/html">
<h:head>
<title>Stranica za potvrdu</title>
<h:outputStylesheet name="styles.css"/>

19
Poglavlje 4 JSF stranica za potvrđivanje

</h:head>
<h:body>
<h2>Stranica za potvrdu</h2>
<h:panelGrid columns="2"
columnClasses="rightalign-bold,leftalign">
<h:outputText value="Titula:"/>
${registrationBean.titula}
<h:outputText value="Ime:"/>
${registrationBean.ime}
<h:outputText value="Prezime:"/>
${registrationBean.prezime}
<h:outputText value="Starost:"/>
${registrationBean.starost}
<h:outputText value="Email adresa:"/>
${registrationBean.email}
</h:panelGrid>
</h:body>
</html>

IZVRŠAVANJE APLIKACIJE I PRIKAZIVANJE UNETIH


PODATAKA
Na kraju je neophodno proveriti funckionalnost kreirane JSF aplikacije.

Sa stranicom za potvrđivanje unetih podataka zaokružena je konstrukcija kreirane veb


aplikacije. Najlakši način da se aplikacija testira je klik na Run opciju u razvojnom okruženju.
Aplikacija se pokreće, učitava se stranica index.xhtml sa odgovarajućom formom koju je
neophodno popuniti kao na sledećoj slici.

20
Poglavlje 4 JSF stranica za potvrđivanje

Slika 4.2 Popunjena forma sa početne stranice

Klikom na dugme pod nazivom "Registracija", svi uneti podaci se poveravaju na čuvanje CDI
zrnu čija klasa predstavlja sastavni deo aplikacije. Zrno se ponaša kao posrednik između dve
stranice, za registraciju i potvrđivanje. Stranica za potvrđivanje, određena je vrednošću
action, dugmeta "Registracija" dobija od zrna odgovarajuće podatke i prikazuje ih na ekranu
na način prikazan sledećom slikom.

Slika 4.3 Prikazivanje podataka na stranici za potvrđivanje

Ukoliko se u veb pregledaču pojave podaci na način prikazan prethodnom slikom, posao je
uspešno obavljen i može se preći na izučavanje naprednijih JSF tema.

KLASA VALIDATOR
Klasa validator mora da implementira interfejs
javax.faces.validator.Validator.

Da bi forma pokupila podatke koji su pravilno formatirani i odgovarajućeg tipa, neophodno


je u projekat dodati validator klasu. Ova klasa mora da implementira interfejs
javax.faces.validator.Validator. Navedeni interfejs sadrži jednu metodu validate() koja
preuzima sledeća tri parametra, instance klasa: javax.faces.context.FacesContext,
javax.faces.component.UIComponent (sadrži JSF komponentu koja se proverava) i
java.lang.Object (sadrži vrednost koju je korisnik uneo za komponentu), respektivno.

Sledećim listingom je moguće ilustrovati email validator:

package com.metropolitan;

/**
*
* @author Vladimir Milicevic
*/
import java.util.regex.Matcher;
import java.util.regex.Pattern;
import javax.faces.application.FacesMessage;
import javax.faces.component.UIComponent;
import javax.faces.component.html.HtmlInputText;
import javax.faces.context.FacesContext;
import javax.faces.validator.FacesValidator;

21
Poglavlje 4 JSF stranica za potvrđivanje

import javax.faces.validator.Validator;
import javax.faces.validator.ValidatorException;

@FacesValidator(value = "emailValidator")
public class EmailValidator implements Validator {

@Override
public void validate(FacesContext facesContext,
UIComponent uiComponent, Object value) throws
ValidatorException {
Pattern pattern = Pattern.compile("\\w+@\\w+\\.\\w+");
Matcher matcher = pattern.matcher(
(CharSequence) value);
HtmlInputText htmlInputText
= (HtmlInputText) uiComponent;
String label;
if (htmlInputText.getLabel() == null
|| htmlInputText.getLabel().trim().equals("")) {
label = htmlInputText.getId();
} else {
label = htmlInputText.getLabel();
}
if (!matcher.matches()) {
FacesMessage facesMessage
= new FacesMessage(label
+ ": email adresa nije ispravna");
throw new ValidatorException(facesMessage);
}
}
}

U ovom primeru metoda validate() vrši upoređivanje regularnog izraza sa vrednošću JSF
komponente koja se proverava. Ako je prisutno poklapanje, validacija je uspešna. U
suprotnom, biće izbačena instanca izuzetka javax.faces.validator.ValidatorException.

Takođe, važno je napomenuti da klasa validator mora da bude obeležena anotacijom


@FacesValidator. Vrednost anotacije predstavlja id koji će biti upotrebljen da referencira na
validator - a u JSF stranici.

Da bi ova klasa obavila svoju ulogu, neophodno je vratiti se u datoteku index.xhtml, i za polje
za unos teksta email, obaviti modifikaciju koja je priložena sledećim listingom. Ukoliko email
adresa nije korektno uneta, JSF stranica će reagovati kao na slici broj 4.

<h:inputText id="email" label="Email Address"


required="true" value="#{registrationBean.email}">
<f:validator validatorId="emailValidator"/>
</h:inputText>

22
Poglavlje 4 JSF stranica za potvrđivanje

Slika 4.4 Angažovanje email validatora

23
Poglavlje 5

JSF Validacija

VALIDACIJA U JSF STRANICAMA


Greške validacije, za obavezna polja unosa, automatski se generišu.

U prethodnim izlaganjima je bilo govora o jednom posebnom atributu pod nazivom required.
Ovaj atribut je od posebnog značaja kada su u pitanju polja za unos teksta kreiranih formi
neke JSF stranice. Atribut označava polja koja su obavezna za unosi i ukoliko neko od njih nije
popunjeno javiće se greška kao na sledećoj slici.

Slika 5.1 Obavezno polje nije popuneno

Za generisanje poruke sa informacijom o grešci zadužen je JSF tag <h:message>


odgovarajućeg polja koje je obavezno, a nije popunjeno prilikom potvrđivanja forme.

Dalje, ako se fokusiramo na polje forme, zaduženo za unos podatka kojim je predstavljena
starost korisnima, i u njega unesemo podatak koji nije tipa Integer, javiće se sledeća greška
validacije koja je, takođe, automatski generisana.

Slika 5.2 Unos podatka neodgovarajućeg tipa podataka

24
Poglavlje 5 JSF Validacija

Ovde je moguće uočiti jedan nedostatak kreirane aplikacije. Ako se za godine unese
negativan broj, to će za aplikaciju biti u redu, jer se uklapa u predviđeni tip podataka, ali u
realnim okolnostima to nema nikakvog smisla.

Takođe, kao vrednost za email adresu će proći bilo koji String objekat bez ikakve provere da
li je on korektno unet. Ne postoji ugrađen mehanizam validacije za proveru korektnosti unosa
email adrese.

Upravo u nastavku, neophodno je pokazati mehanizme i načine koji obezbeđuju da forma


pokupi pravilno unete i formatirane podatke i kao takve da ih nakon potvrđivanja pošalje na
server.

25
Poglavlje 6

Facelet šabloni

MEHANIZAM ŠABLONA
Prednost Facelet - u odnosu na JSP ogleda se u primeni mehanizma
šablona.

Prednost Facelet - u odnosu na JSP ogleda se u primeni mehanizma šablona. Šabloni


dozvoljavaju da se izgled i raspored JSF stranice specificira na jednom mestu. Takođe,
primenom šablona postiže se veći stepen održivosti kreirane veb aplikacije budući da se
sve izmene u rasporedu komponenata stranice dešavaju na jednom mestu. Ukoliko se u
jednoj tački stranice traži sprovođenje neke izmene, kao što je na primer dodavanje futera
ili pomeranje kolone sa leve na desnu stranu stranice, neophodno je izvršiti samo izmenu u
šablonu koja će se reflektovati na sve klijente šablona.

Ova lekcija sadrži video materijal. Ukoliko želite da pogledate ovaj video morate da
otvorite LAMS lekciju.

Neophodno je, u nastavku, demonstrirati kako se dodaje facelet šablon u JSF projekat. Klikom
na opciju File, u razvojnom okruženju NetBeans, otvara se meni u okviru kojeg se bira opcija
New File. Otvara se novi prozor pod nazivom New File gde se bira kategorija JavaServer Faces
i konačno, u istom prozoru bira se za tip datoteke Facelets Templates. Navedeni prozor i izbor
iz njega je prikazan slikom broj 1. Dalje, klikom na Next otvara se prozor u okviru kojeg se
definiše naziv šablona i bira neki od predefinisanih šablona (Slika 2)

Slika 6.1 Dodavanje Facelet šablona u projekat

26
Poglavlje 6 Facelet šabloni

Slika 6.2 Prozor New Facelets Template

DATOTEKA ŠABLONA
Kreiranu datoteku šablona je nophodno konkretizovati odgovarajućim
modifikacijama koda.

Na prethodno priloženoj slici moguće je bilo primetiti da razvojno okruženje NetBeans IDE
nudi mogućnost izbora između HTML tabela i CSS - a za određivanje rasporeda. Većina
savremenih veb aplikacija podrazumeva CSS kao prirodan izbor. Neka je, u ovom slučaju,
izbor pao na raspored koji uključuje polje zaglavlja (header), kolonu na levoj strani i glavno
polje (izbor je prikazan Slikom 2). Konačno, u prozoru New Facelets Template, klikom na Finish
se automatski generiše kod šablona koji je priložen sledećim listingom:

<?xml version='1.0' encoding='UTF-8' ?>


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/
TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
xmlns:h="http://xmlns.jcp.org/jsf/html">

<h:head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<h:outputStylesheet name="./css/default.css"/>
<h:outputStylesheet name="./css/cssLayout.css"/>
<title>Facelets Template</title>
</h:head>

<h:body>

<div id="top" class="top">


<ui:insert name="top">Top</ui:insert>
</div>
<div>
<div id="left">
<ui:insert name="left">Left</ui:insert>

27
Poglavlje 6 Facelet šabloni

</div>
<div id="content" class="left_content">
<ui:insert name="content">Content</ui:insert>
</div>
</div>
</h:body>

</html>

Na prvi pogled je moguće primetiti da se šablon ne razlikuje mnogo od standardne JSF


stranice. Takođe, moguće je primetiti da koristi prostor naziva xmlns:ui=http://xmlns.jcp.org/
jsf/facelets koji omogućava primenu JSF taga <ui:insert>. Sadržaj ovog taga biće zamenjen
sadržajima odgovarajućih <ui:define> tagova klijenata šablona.

UPOTREBA ŠABLONA
Za upotrebu šablona neophodna je implementacija klijenata šablona.

Da bi kreirani šablon mogao da bude upotrebljen neophodno je kreirati odgovarajući Facelets


template client. Postupak je veoma sličan pretohodnom. Klikom na opciju File, u razvojnom
okruženju NetBeans, otvara se meni u okviru kojeg se bira opcija New File. Otvara se novi
prozor pod nazivom New File gde se bira kategorija JavaServer Faces i konačno, u istom
prozoru bira se za tip datoteke Facelets Template Clients. Klikom na Next otvara se prozor
u okviru kojeg se definiše naziv datoteke klijenta šablona, a takođe se vrši dodeljivanje
kreiranog šablona ovoj datoteci (sledeća slika).

Slika 6.3 Dodela kreiranog šablona klijentu šablona

U nastavku je neophodno završiti definiciju ove datoteke. Poslednji koraci su zadavanje


njenog naziva, na promer page1, i klik na dugme Finish. Navedeni elementi su obeleženi na
sledećoj slici, zajedno sa učitanim šablonom.

28
Poglavlje 6 Facelet šabloni

Slika 6.4 Završetak definicije klijenta šablona.

Kao posledica ovih akcija javlja se sledeći automatski generisan kod:

<?xml version='1.0' encoding='UTF-8' ?>


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/
TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://xmlns.jcp.org/jsf/facelets">

<body>

<ui:composition template="./template.xhtml">

<ui:define name="content">
content
</ui:define>

</ui:composition>

</body>
</html>

UPOTREBA ŠABLONA - DODATNA RAZMATRANJA


Aplikacija se testira i uočava se ugrađeni šablon rasporeda stranice.

Kao što je moguće primetiti iz prethodno priloženog koda, kreirana datoteka klijenta šablona
takođe uključuje prostor naziva xmlns:ui="http://xmlns.jcp.org/jsf/facelets". Dalje, neophodno
je napomenuti da u ovoj datoteci tag <ui:composition> mora da bude roditeljski tag za bilo
koji drugi tag koji pripada ovom prostoru naziva. Sve što se nalazi izvan ovog taga neće
biti postavljeno u stranicu i umesto toga će se pojaviti odgovarajući sadržaj šablona. Tagom
<ui:define>, klijenta šablona, se umeće sadržaj koji odgovara sadržaju taga <ui:insert>
šablona. Vrednost atributa name u tagu <ui:define> mora da se podudara sa
odgovarajućom vrednošću u <ui:insert> tagu šablona.

29
Poglavlje 6 Facelet šabloni

Sada je moguće testirati kreirane datoteke projekta. Nakon prevođenja, primenom razvojnog
okruženja, u veb pregledaču, u polju za unos, poziva se sledeći link http://localhost:8080/
JSFSabloniDemo/faces/page1.xhtml i rezultat poziva je priložen sledećom slikom.

Slika 6.5 Primena šablona

Sada je moguće uneti izmene u klijent šablona i posmatrati kako će se ponašati kreirana
stranica page1. Između tagova <ui:define name = "content"> i </ui:define> ubačen je deo
teksta jedne pesme i rezultat se vidi na sledećoj slici i u kodu koji sledi iza slike.

Slika 6.6 Zamena vrednosti content konkretnim sadržajem

<?xml version='1.0' encoding='UTF-8' ?>


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/
TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://xmlns.jcp.org/jsf/facelets">

<body>

<ui:composition template="./template.xhtml">

<ui:define name="content">
<br>Ain't no love in the heart of the city,</br>
<br>Ain't no love in the heart of town.</br>
<br>Ain't no love, sure 'nuff is a pity,</br>
<br>Ain't no love 'cause you ain't around.</br>
<p>Baby, since you been around.</p>

30
Poglavlje 6 Facelet šabloni

</ui:define>

</ui:composition>

</body>
</html>

KOREKCIJE U DATOTECI ŠABLONA


Svaka korekcija u šablonu reflektovaće se na klijente šablona.

U prethodnoj aktivnosti izvršeno je korigovanje datoteke page.xhtml na način da ona


prikazuje određeni tekst. Sada je moguće uraditi i određene korekcije na samom šablonu
template.xhtml i posmatrati kako će se to reflektovati na klijent šablona. Budući da klijent
šablona ne poseduje elemente koje odgovaraju top i left sekcijama šablona, njihovo
redefinisanje je neophodno izvršiti u samom šablonu.

Top sekcija može biti redefinisana na sledeći način:

<div id="top" class="top">


<ui:insert name="top">
<h2>Malo RnR lirike</h2>
</ui:insert>
</div>

Left sekcija može biti redefinisana na malo složeniji način:

<div id="left">
<ui:insert name="left"><h3>Links</h3>
<ul>
<li>
<h:outputLink value="http://www.whitesnake.com/">
<h:outputText value="Whitesnake Official Web Site"/>
</h:outputLink>
</li>
<li>
<h:outputLink value="http://www.azlyrics.com/w/
whitesnake.html">
<h:outputText value="Whitesnake Lyrics"/>
</h:outputLink>
</li>
<li>
<h:outputLink value="https://www.youtube.com/
watch?v=MA3DNlBMNL0">
<h:outputText value="Jedna lepa pesma"/>
</h:outputLink>
</li>

31
Poglavlje 6 Facelet šabloni

</ul></ui:insert>
</div>

Budući da klijent šablone ne redefiniše sekcije top i left, naslediće ih direktno od šablona.
Nakon navedenih korekcija u šablonu i ponovnog prevođenja kreirane veb aplikacije, pozivom
linka stranice page1.xhtml: http://localhost:8080/JSFSabloniDemo/faces/page1.xhtml,
moguće je primetiti sasvim nov sadržaj stranice page1.xhtml. Navedeno je ilustrovano
sledećom slikom.

Slika 6.7 Klijent šablona nakon korekcija šablona

32
Poglavlje 7

Biblioteka ugovora resursa

JSF 2.2 - NOVITET


Biblioteka ugovora resursa je Java EE novitet.

Biblioteka ugovora resursa (Resource library contracts) predstavlja potpuno nov JSF 2.2 alat.
Osmišljena je kao podrška za kreiranje Facelet šablona za kreiranje "tematskih" veb aplikacija.
Na primer, moguće je da postoji aplikacija koja servisira više potrošača ili je moguće kreirati
korisnički interfejs tako da svaki korisnik vidi logo svoje kompanije posle logovanja na sistem.
Kao alternativa, moguće je izabrati korisnika iz predefinisanog skupa tema, a to je upravo
zadatak kojim će se baviti ovaj deo lekcije.

Za početak, biće kreirana biblioteka resursa, u aktuelnom projektu, izborom opcije File, a
zatim New File, otvara se prozor pod nazivom New File. U ovom prozoru, bira se kategorija
JavaServer Faces i tip datoteke JSF Resource Library Contracts (pogledati sledeću sliku).

Slika 7.1 Kreiranje datoteke JSF Resource Library Contracts

Klikom na dugme Next, otvara se prozor u kojem se kreira inicijalni šablon teme zadaje naziv
datoteke.

33
Poglavlje 7 Biblioteka ugovora resursa

Slika 7.2 Izbor šablona i naziva JSF Resource Library Contracts fajla

Ideja je da razvojno okruženje generiše inicijalni šablon koji će kasnije biti modifikovan na
način da će rezultujuća stranica imati tamnu pozadinu sa svetlim slovima. Upravo će to
predstavljati tamnu temu.

Na isti način je moguće kreirati temu koja alternativno biti korišćena u odnosu na temu dark,
neka se ova tema naziva nomal.

U narednom izlaganju biće više reči o radu sa kreiranim temama i novoj hijerarhiji aktuelnog
projekta koji ilustruje tekuću problematiku.

KORIŠĆENJE UGOVORA
Razvojno okruženje je kreiralo dva fajla u zajedničkom folderu
contracts.

Nakon kreiranja pomenutih datoteka tema, razvojno okruženje je kreiralo dva fajla u
zajedničkom folderu contracts i odgovarajućim podfolderima (sledeća slika).

34
Poglavlje 7 Biblioteka ugovora resursa

Slika 7.3 Nova hijerarhija projekta

Sada je neophodno prikazati kako je moguće primeniti temu na kreiranu datoteku


page1.xhtml. Za početak je u okviru taga <html> neophodno dodati sledeće:
xmlns:f="http://xmlns.jcp.org/jsf/core". Zatim, u okviru bloka <body> vrše se korekcije
priložene sledećim kodom:

<body>
<!--
<ui:composition template="./template.xhtml">
-->
<f:view contracts="normal">
<ui:composition template="/template.xhtml">
<ui:define name="content">

ovde ide sadržaj za prikazivanje

</ui:define>

</ui:composition>

</f:view>

</body>

Za korišćenje ugovora, umesto prethodno kreiranih Facelet šablona, neophodno je


enkapuslirati<ui:composition> u <f:view> tag.

Atribut contract taga <f:view> poseduje vrednost koja se podudara sa nazivom biblioteke
ugovora resursa koji će biti upotrebljen u stranici.

35
Poglavlje 7 Biblioteka ugovora resursa

Prevođenjem aplikacije i aktiviranjem linka http://localhost:8080/JSFSabloniDemo/faces/


page1.xhtml, u veb pregledaču se pojavljuje sledeća stranica.

Slika 7.4 Korišćenje "normal" teme

Slika 7.5 Korišćenje "dark" teme

UPRAVLJANJE TEMAMA
Cilje je kreiranje stranice na kojoj je moguće izabrati željenu temu za
prikazivanje sadržaja.

Da bi dark tema, sa prethodne slike, bila prikazana, napravljen su sledeće korekcije u


izvornom cssLayout.css fajlu iz foldera dark.

#top {
position: relative;
background-color: #036fab;
color: white;
padding: 5px;
margin: 0px 0px 10px 0px;
}

#bottom {
position: relative;
background-color: #c2dfef;
padding: 5px;
margin: 10px 0px 0px 0px;
}

#left {
float: left;
background-color: #ece3a5;
padding: 5px;

36
Poglavlje 7 Biblioteka ugovora resursa

width: 150px;
}

#right {
float: right;
background-color: #ece3a5;
padding: 5px;
width: 150px;
}

.center_content {
position: relative;
background-color: black;
color: white;
padding: 5px;
}

.left_content {
background-color: black;
padding: 5px;
margin-left: 170px;
}

.right_content {
background-color: black;
padding: 5px;
margin: 0px 170px 0px 170px;
}

#top a:link, #top a:visited {


color: white;
font-weight : bold;
text-decoration: none;
}

#top a:link:hover, #top a:visited:hover {


color: black;
font-weight : bold;
text-decoration : underline;
}

Sada je cilj da se kreira, za aktuelnu aplikaciju, CDI zrno koje će omogućiti dinamičko biranje
teme na JSF stranici koja je zadužena za prikazivanje konkretnog sadržaja. Neka se ova klasa
naziva SelektorTema.java i priložena je sledećim listingom.

package com.metropolitan.teme;

import javax.enterprise.context.RequestScoped;
import javax.inject.Named;

/**
*

37
Poglavlje 7 Biblioteka ugovora resursa

* @author Vladimir Milicevic


*/
@Named
@RequestScoped
public class SelektorTema {
private String themeName = "normal";
public String getThemeName() {
return themeName;
}
public void setThemeName(String themeName) {
this.themeName = themeName;
}
}

UPRAVLJANJE TEMAMA - NASTAVAK


Neophodne su modifikacije klijenta šablona za korišćenje selektora
tema.

Da bi bilo moguće korišćenje selektora tema, u JSF stranici page1.xhtml, neophodno je u kodu
ove stranice ukazati na kreirano CDI zrno, te izvršiti odgovarajuće korekcije. Navedeno je
priloženo sledećim listingom.

<?xml version='1.0' encoding='UTF-8' ?>


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/
TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
xmlns:f="http://xmlns.jcp.org/jsf/core"
xmlns:h="http://xmlns.jcp.org/jsf/html">

<body>
<!--
<ui:composition template="./template.xhtml">
-->
<!--
<f:view contracts="dark">
-->
<f:view contracts="#{selektorTema.themeName}">
<ui:composition template="/template.xhtml">
<ui:define name="top">
<h:form>
<h:outputLabel for="themeSelector"
value="Izaberite temu"/>
<h:selectOneMenu id="selektorTema"
value="#{selektorTema.themeName}">
<f:selectItem itemLabel="normal"
itemValue="normal"/>
<f:selectItem itemLabel="dark"
itemValue="dark"/>

38
Poglavlje 7 Biblioteka ugovora resursa

</h:selectOneMenu>
<h:commandButton value="Potvrdi"
action="page1"/>
</h:form>
</ui:define>
<ui:define name="content">

Ovde ide sadržaj za prikazivanje

</ui:define>

</ui:composition>

</f:view>

</body>
</html>

U priloženom kodu je moguće primetiti da je prvo uključena podrška za JSF <h:***> tagove
instrukcijom xmlns:h="http://xmlns.jcp.org/jsf/html" taga <html>. Dalje je u top sekciju
uključeno: labela sa informacijom za izbor teme, tag <h:selectOneMenu> za listu opcija koje
odgovaraju temama i dugme za potvrdu izbora teme.

Kada je prethodna procedura kreiranja koda za upravljanje temama opisana, neophodno je


izvršiti i demonstriranje funkcionisanja izmenjene stranicepage1.xhtml. Prvo je neophodno
izvršiti ponovno kompajliranje kreirane veb aplikacije. Nakon toga, aktivira se link
http://localhost:8080/JSFSabloniDemo/faces/page1.xhtml u veb pregledaču. Sledećim
slikama je prikazan početni izgled stranice sa vršenjem izbora i izgled stranice nakon što je
tema promenjena u dark.

Slika 7.6 Početni izgled i izbor

39
Poglavlje 7 Biblioteka ugovora resursa

Slika 7.7 Promenjena tema

40
Poglavlje 8

JSF - vežbe

ZADATAK 1
Kreira se veb apliakcija koja koristi JSF stranice i šablone.

1. Otvoriti razvojno okruženje i kreirati novi Java veb projekat


2. Kreirati veb aplikaciju koja koristi izabrani layout šablon (CSS) ili temu;
3. Kreirati klijent šablon stranicu za prikazivanje sadržaja raspoređenog na osnovu
izabranog rasporeda;

Sledećim listingom je priložena datoteka kojom je definisan šablon:

<?xml version='1.0' encoding='UTF-8' ?>


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/
TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
xmlns:f="http://xmlns.jcp.org/jsf/core"
xmlns:h="http://xmlns.jcp.org/jsf/html">

<body>
<!--
<ui:composition template="./template.xhtml">
-->
<!--
<f:view contracts="dark">
-->
<f:view contracts="#{selektorTema.themeName}">
<ui:composition template="/template.xhtml">
<ui:define name="top">
<h:form>
<h:outputLabel for="themeSelector"
value="Izaberite temu"/>
<h:selectOneMenu id="selektorTema"
value="#{selektorTema.themeName}">
<f:selectItem itemLabel="normal"
itemValue="normal"/>
<f:selectItem itemLabel="dark"
itemValue="dark"/>
</h:selectOneMenu>
<h:commandButton value="Potvrdi"
action="page1"/>
</h:form>

41
Poglavlje 8 JSF - vežbe

</ui:define>
<ui:define name="content">
<br>Ain't no love in the heart of the city,</br>
<br>Ain't no love in the heart of town.</br>
<br>Ain't no love, sure 'nuff is a pity,</br>
<br>Ain't no love 'cause you ain't around.</br>
<p>Baby, since you been around.</p>

</ui:define>

</ui:composition>

</f:view>

</body>
</html>

Upravljanje temama je u domenu CDI zrna i u narednom izlaganju se prilaže njegov kod:

package com.metropolitan.teme;

import javax.enterprise.context.RequestScoped;
import javax.inject.Named;

/**
*
* @author Vladimir Milicevic
*/
@Named
@RequestScoped
public class SelektorTema {
private String themeName = "normal";
public String getThemeName() {
return themeName;
}
public void setThemeName(String themeName) {
this.themeName = themeName;
}
}

U nastavku je neophodno priložiti kod stranice koja će prikazivati sadržaj. Stranica po potrebi
može da koristi i šablone i teme, a to je priloženo sledećim kodom.

<?xml version='1.0' encoding='UTF-8' ?>


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/
TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
xmlns:f="http://xmlns.jcp.org/jsf/core"
xmlns:h="http://xmlns.jcp.org/jsf/html">

42
Poglavlje 8 JSF - vežbe

<body>
<!--
<ui:composition template="./template.xhtml">
-->
<!--
<f:view contracts="dark">
-->
<f:view contracts="#{selektorTema.themeName}">
<ui:composition template="/template.xhtml">
<ui:define name="top">
<h:form>
<h:outputLabel for="themeSelector"
value="Izaberite temu"/>
<h:selectOneMenu id="selektorTema"
value="#{selektorTema.themeName}">
<f:selectItem itemLabel="normal"
itemValue="normal"/>
<f:selectItem itemLabel="dark"
itemValue="dark"/>
</h:selectOneMenu>
<h:commandButton value="Potvrdi"
action="page1"/>
</h:form>
</ui:define>
<ui:define name="content">
<br>Ain't no love in the heart of the city,</br>
<br>Ain't no love in the heart of town.</br>
<br>Ain't no love, sure 'nuff is a pity,</br>
<br>Ain't no love 'cause you ain't around.</br>
<p>Baby, since you been around.</p>

</ui:define>

</ui:composition>

</f:view>

</body>
</html>

Za rad sa temama koriste se opisane biblioteke resursa. Neophodno je modifikovati


odgovarajuće cssLayout.css fajlove u zavisnosti od toga kako želite da vam tema izgleda
(pogledati u predavanjima).

Urađen i testiran zadatak je priložen u dodatnim aktivnostima materijala.

ZADATAK 2
Vežbanje korišćenja formi na JSF stranicama

43
Poglavlje 8 JSF - vežbe

1. Otvoriti razvojno okruženje i kreirati nov Java veb projekat;


2. Kreirati JSF stranicu na kojoj se nalazi forma za unos korisničkih podataka;
3. Kreirati JSF stranicu na kojoj će biti prikazani uneti podaci;
4. Kreirati CDI klasu zrna za obezbeđivanje setter i getter metoda za upravljanje
podacima sa forme;
5. Kreirati jednu validator klasu za proveru proizvoljnog polja sa forme.

Forma je realizovana sledećim programskim kodom početne stranice:

<?xml version='1.0' encoding='UTF-8' ?>


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/
TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://xmlns.jcp.org/jsf/html"
xmlns:f="http://xmlns.jcp.org/jsf/core">

<h:head>

<title>Registracija</title>
<h:outputStylesheet name="styles.css"/>
</h:head>
<h:body>
<h3>Stranica za registraciju</h3>
<h:form>
<h:panelGrid columns="3"
columnClasses="rightalign,leftalign,leftali
gn">
<h:outputLabel value="Titula: " for="titula"/>
<h:selectOneMenu id="titula" label="Titula"
value="#{registrationBean.
titula}" >
<f:selectItem itemLabel="" itemValue=""/>
<f:selectItem itemLabel="St." itemValue="ST"/>
<f:selectItem itemLabel="Ma." itemValue="MA"/>
<f:selectItem itemLabel="MSci" itemValue="MSCI"/>
<f:selectItem itemLabel="Dr" itemValue="DR"/>
</h:selectOneMenu>
<h:message for="titula"/>
<h:outputLabel value="Ime:" for="ime"/>
<h:inputText id="ime" label="Ime"
required="true"
value="#{registrationBean.ime}" />
<h:message for="ime" />
<h:outputLabel value="Prezime:" for="prezime"/>
<h:inputText id="prezime" label="Prezime"
required="true"
value="#{registrationBean.prezime}" />
<h:message for="prezime" />
<h:outputLabel for="starost" value="Starost:"/>
<h:inputText id="starost" label="Starost" size="2"
value="#{registrationBean.starost}"/>
<h:message for="starost"/>

44
Poglavlje 8 JSF - vežbe

<h:outputLabel value="Email adresa:" for="email"/>

<h:inputText id="email" label="Email adresa"


required="true"
value="#{registrationBean.email}">
<f:validator validatorId="emailValidator"/>
</h:inputText>
<h:message for="email" />
<h:panelGroup/>
<h:commandButton id="registracija" value="Registracija"
action="potvrda" />
</h:panelGrid>
</h:form>
</h:body>
</html>

Stranica za prikazivanje rezultata je realizovana sledećim JSF kodom:

<?xml version='1.0' encoding='UTF-8' ?>


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/
TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://xmlns.jcp.org/jsf/html">
<h:head>
<title>Stranica za potvrdu</title>
<h:outputStylesheet name="styles.css"/>
</h:head>
<h:body>
<h2>Stranica za potvrdu</h2>
<h:panelGrid columns="2"
columnClasses="rightalign-bold,leftalign">
<h:outputText value="Titula:"/>
${registrationBean.titula}
<h:outputText value="Ime:"/>
${registrationBean.ime}
<h:outputText value="Prezime:"/>
${registrationBean.prezime}
<h:outputText value="Starost:"/>
${registrationBean.starost}
<h:outputText value="Email adresa:"/>
${registrationBean.email}
</h:panelGrid>
</h:body>
</html>

ZADATAK 2 - JAVA KLASE


Neophodno je kreirati CDI klasu i klasu validator.

Klasa koja obezbeđuje CDI zrno za podršku podacima forme data je sledećim listingom:

45
Poglavlje 8 JSF - vežbe

package com.metropolitan;

/**
*
* @author Vladimir Milicevic
*/
import javax.enterprise.context.RequestScoped;
import javax.inject.Named;

@Named
@RequestScoped
public class RegistrationBean {
private String titula;
private String ime;
private String prezime;
private Integer starost;
private String email;
public String getTitula() {
return titula;
}

public void setTitula(String titula) {


this.titula = titula;
}

public String getIme() {


return ime;
}

public void setIme(String ime) {


this.ime = ime;
}

public String getPrezime() {


return prezime;
}

public void setPrezime(String prezime) {


this.prezime = prezime;
}

public Integer getStarost() {


return starost;
}

public void setStarost(Integer starost) {


this.starost = starost;
}

public String getEmail() {


return email;
}

46
Poglavlje 8 JSF - vežbe

public void setEmail(String email) {


this.email = email;
}

Konačno, klasa validator zaključuje kreiranje ove veb aplikacije.

package com.metropolitan;

/**
*
* @author Vladimir Milicevic
*/
import java.util.regex.Matcher;
import java.util.regex.Pattern;
import javax.faces.application.FacesMessage;
import javax.faces.component.UIComponent;
import javax.faces.component.html.HtmlInputText;
import javax.faces.context.FacesContext;
import javax.faces.validator.FacesValidator;
import javax.faces.validator.Validator;
import javax.faces.validator.ValidatorException;

@FacesValidator(value = "emailValidator")
public class EmailValidator implements Validator {

@Override
public void validate(FacesContext facesContext,
UIComponent uiComponent, Object value) throws
ValidatorException {
Pattern pattern = Pattern.compile("\\w+@\\w+\\.\\w+");
Matcher matcher = pattern.matcher(
(CharSequence) value);
HtmlInputText htmlInputText
= (HtmlInputText) uiComponent;
String label;
if (htmlInputText.getLabel() == null
|| htmlInputText.getLabel().trim().equals("")) {
label = htmlInputText.getId();
} else {
label = htmlInputText.getLabel();
}
if (!matcher.matches()) {
FacesMessage facesMessage
= new FacesMessage(label
+ ": email adresa nije ispravna");
throw new ValidatorException(facesMessage);
}
}
}

47
Poglavlje 8 JSF - vežbe

Urađen i testiran zadatak je priložen u dodatnim aktivnostima lekcije.

INDIVIDUALNA VEŽBA
Pokušajte sami

1. Kreirajte vlastitu JSF aplikaciju po uzoru na Zadatak 2


2. Unesite modifikaciju u Zadatak 2, tako da forma preuzima dodatne podatke o
korisniku kao što je naziv fakulteta koji studira, skraćenica fakulteta i studijski
program.
3. Obezbediti da ove informacije budu obrađene i prikazane.
4. Angažujte aplikaciju i proverite korektnost vašeg rada.

48
Poglavlje 9

Domaći zadatak 5

ZADATAK 1
Unapređenje i proširenje primera urađenog na vežbama.

1. Kao osnovu za domaći zadatak izabrati Zadatak 2 sa vežbi;


2. Umesto kategorije titula, dodati kategoriju "Vrsta studiranja" sa opcijama:
tradicionalno i internet;
3. Polja za unos teksta su za podatke o studentu;
4. Dodati još jednu padajuću listu čiji su elementi fakulteti našeg Univerziteta;
5. Obezbediti mehanizme validacije za polja;
6. Realizovati CDI zrno za pomoć prilikom prihvatanja unetih podataka forme;
7. Na stranci za prikazivanje podataka, prikazati sve podatke o studentu, uključujući
vrstu studiranja i fakultet koji studira.
8. Za realizovanje aplikacije poželjno je korišćenje nekog css šablona ili teme.

49
Poglavlje 10

Zaključak

ZAKLJUČAK
Lekcija se bavila kreiranjem i upotrebom JSF stranica u Java veb
aplikacijama.

Lekcija se bavila kreiranjem i upotrebom JSF stranica u Java veb aplikacijama. Lekcija je
posebno istakla da JavaServer Faces (JSF) predstavlja specifičan Java okvir ( framework )
namenjen za razvoj širokog spektra Java veb aplikacija. Vodeći se navedenim, u ovoj lekciji
je bio cilj pokazivanje načina na koji primena JSF pojednostavljuje razvoj veb aplikacija. U tu
svrhu su bile obrađene neke značajne teme za analizu i demonstraciju ovog specifičnog Java
okvira za razvoj veb aplikacija:

1. Kreiranje JSF projekta primenom izabranog razvojnog okruženja, konkretno je


korišćen NetBeans IDE razvojno okruženje;
2. Postavljanje JSF tagova za korišćenje prednosti koju obezbeđuje primena taga JSF
<h:panelGrid>;
3. Korišćenje statičke i dinamičke navigacije za definisanje navigacije između stranica;
4. Razvoj CDI (Contexts and Dependency Injection for the Java EE Platform) zrna za
enkapsulaciju podataka i programske logike;
5. Implementacija JSF validatora za proveru valjanosti unosa pojedinih polja forme;
6. Kreiranje JSF šablona i isticanje prednosti njihove primene;
7. Rad sa JSF temama i isticanje prednosti njihove primene.

Posebno značajno u prethodnom izlaganju predstavlja činjenica da je lekcija insistirala na


analizi i demonstraciji primenom odabranih primera koji su na najbolji način istakli i pokazali
prednosti primene JSF stranica u Java veb aplikacijama. Od posebnog značaja je bila
fokusiranost primera na rad sa šablonima stranica i temama za pokazivanje veoma
jednostavnog načina kreiranja JSF stranica sa predefinisanim atraktivnim izgledom. Konkretan
primer je, takođe, pokazao kako jedna šablon JSF datoteka na veoma jednostavan način
upravlja nizom JSF datoteka klijenata šablona.

Izlaganje, započeto u teorijskom delu lekcije, posebno je zaokruženo zadacima koji su


kompletirani, testirani i demonstrirani u materijalima za vežbe. Svaki od navedenih zadataka,
odgovara kompletno urađenoj i funkcionalnoj veb aplikaciji čiji je kod priložen kao dodatni
materijal u Objektu učenja "JSF - vežbe" u okviru kategorije Shared Resources.

Savladavanjem ove lekcije studenti su osposobljeni da koriste JSF tehnologiju za razvoj Java
veb aplikacija pored detaljno obrađene JSP tehnologije iz prethodnih lekcija. Studenti su kroz
ove dve tehnologije stekli znanja koja im omogućavaju savladavanje naprednijih koncepata

50
Poglavlje 10 Zaključak

Java EE veb aplikacija čija analiza i demonstracija sledi kroz lekcije koje će biti izučavane
odmah nakon ove lekcije.

LITERATURA
U pripremi lekcije korišćena je najnovija literatura.

1. Eric Jendrock, Ricardo Cervera-Navarro, Ian Evans, Kim Haase, William Markito. 2014.
Java Platform, Enterprise Edition The Java EE Tutorial, Release 7, ORACLE
2. David R. HeffelFinger. 2015. Java EE7 Develpomnet With NetBeans 8, PACK Publishing
3. Yakov Fain. 2015. Java 8 programiranje, Kombib (Wiley)
4. Josh JUneau. 2015. Java EE7 Recipes, Apress
5. https://www.tutorialspoint.com/jsf/

51
CS230 - DISTRIBUIRANI SISTEMI

JSF biblioteke komponenata


Lekcija 06
CS230 - DISTRIBUIRANI SISTEMI
Lekcija 06

JSF BIBLIOTEKE KOMPONENATA

JSF biblioteke komponenata


Poglavlje 1: PrimeFaces biblioteka komponenata
Poglavlje 2: IceFaces biblioteka komponenata
Poglavlje 3: RichFaces biblioteka komponenata
Poglavlje 4: Vežba 6 - JSF biblioteke komponenata
Poglavlje 5: Domaći zadatak 6
Zaključak

Copyright © 2017 – UNIVERZITET METROPOLITAN, Beograd. Sva prava zadržana. Bez prethodne pismene dozvole
od strane Univerziteta METROPOLITAN zabranjena je reprodukcija, transfer, distribucija ili memorisanje nekog
dela ili čitavih sadržaja ovog dokumenta., kopiranjem, snimanjem, elektronskim putem, skeniranjem ili na bilo
koji drugi način.

Copyright © 2017 BELGRADE METROPOLITAN UNIVERSITY. All rights reserved. No part of this publication may
be reproduced, stored in a retrieval system or transmitted in any form or by any means, electronic, mechanical,
photocopying, recording, scanning or otherwise, without the prior written permission of Belgrade Metropolitan
University.

www.metropolitan.ac.rs
Uvod

UVOD
Lekcija će se baviti naprednijim JSF komponetama.

U prethodnoj lekciji je bilo govora o razvoju veb aplikacija koje su razvijene primenom
standardnih JSF komponenata. JSF ima jednu veoma dobru osobinu - proširivost. JSF
tehnologija dozvoljava programerima da razvijaju vlastite JSF komponente. Ovde od velike
pomoći može biti nekoliko poznatih JSF biblioteka komponenata koje u velikoj meri olakšavaju
razvoj veb aplikacija. Lekcija će se fokusirati na tri najpoznatije i najpopularnije biblioteke JSF
dokumenata:

• PrimeFaces;
• ICEfaces;
• RichFaces

Posebno, a u saglasnosti sa prethodno navedenim, lekcija će se pozabaviti sledećim temama:

• Primena PrimeFaceskomponenata u JSF aplikacijama;


• Primena IceFaces komponenata u JSF aplikacijama;
• Primena RichFaces komponenata u JSF aplikacijama.

Savladavanjem ove lekcije studenti će moći da razvijaju naprednije JSF aplikacije, uz olakšan
rad primenom neke od biblioteka komponenata koje će u lekciji biti obrađene.

3
Poglavlje 1

PrimeFaces biblioteka komponenata

UKLJUČIVANJE PRIMEFACES BIBLIOTEKE U PROJEKAT


PrimeFaces je veoma popularna JSF biblioteka komponenata.

PrimeFaces je veoma popularna JSF biblioteka komponenata koja omogućava programerima


razvoj elegantnih veb aplikacija, modernog izgleda, a sa relativno malo uloženog truda.
Da bi PrimeFaces biblioteka bila korišćena neophodno je, na dosta puta obrađen i veoma
poznat način, kreirati Java veb aplikaciju u okviru nekog razvojnog okruženja, ovde će to
biti NetBeans IDE. Prilikom kreiranja projekta neophodno je izabrati JavaServer Faces okvir
(sledeća slika).

Slika 1.1 Izbor JSF i biblioteke komponenata

Na slici je moguće primetiti da je klikom na tab Components moguće izabrati neku od


ponuđenih JSF biblioteka komponenata. Za ovaj deo lekcije neophodno je izabrati opciju
PrimeFaces selektovanjem odgovarajuće CheckBox kontole.

Klikom na Finish razvojno okruženje generiše inicijalnu JSF aplikaciju uz uključivanje


PrimeFaces biblioteke komponenata. Prevođenjem i pokretanjem ove aplikacije, izborim
opcije Run u razvojnom okruženju, dostupne su JSF stranice prikazane sledećim slikama.

Slika 1.2 Početna strana inicijalne JSF aplikacije

4
Poglavlje 1 PrimeFaces biblioteka komponenata

Slika 1.3 Stranica dobrodošlice kreirane aplikacije

GENERISANE JSF STRANICE


Kreiranjem projekta, automatski su kreirane dve JSF stranice.

Kada se kreira JSF projekat, na prethodno opisani način, koji uključuje PrimeFaces biblioteku
komponenata, dolazi do kreiranja i dve JSF datoteke u podfolderu WEB-INF projekta veb
aplikacije: index.xhtml i welcomePrimefaces.xhtml.

Ove datoteke su realizovale jednostavnu veb aplikaciju, opisanu slikama 2 i 3, koja je mnogo
elegantnija nego što je bio slučaj sa aplikacijama kojima se bavila prethodna lekcija. Posebno
je bitno što je ova aplikacija kreirana, a da nije uložen dodatni napor (po pitanju angažovanja
CSS) iz razloga što su JavaScript i CSS obezbeđeni uključivanjem PrimeFaces biblioteke
komponenata.

U sledećem izlaganju slede listinzi navedenih datoteka. Prvo index.xhtml:

<?xml version='1.0' encoding='UTF-8' ?>


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/
TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://xmlns.jcp.org/jsf/html">
<h:head>
<title>Facelet Title</title>
</h:head>
<h:body>
Hello from Facelets
<br/>
<h:link outcome="welcomePrimefaces" value="Primefaces welcome page" />
</h:body>
</html>

Automatski generisana JSF stranica welcomePrimefaces.xhtml je realizovana sledećim


kodom:

5
Poglavlje 1 PrimeFaces biblioteka komponenata

<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:p="http://primefaces.org/ui">

<f:view contentType="text/html">
<h:head>
<f:facet name="first">
<meta content='text/html; charset=UTF-8' http-equiv="Content-Type"/>
<title>PrimeFaces</title>
</f:facet>
</h:head>

<h:body>

<p:layout fullPage="true">

<p:layoutUnit position="north" size="100" resizable="true"


closable="true" collapsible="true">
Header
</p:layoutUnit>

<p:layoutUnit position="south" size="100" closable="true"


collapsible="true">
Footer
</p:layoutUnit>

<p:layoutUnit position="west" size="175" header="Left"


collapsible="true">
<p:menu>
<p:submenu label="Resources">
<p:menuitem value="Demo" url="http://www.primefaces.org/
showcase-labs/ui/home.jsf" />
<p:menuitem value="Documentation"
url="http://www.primefaces.org/documentation.html" />
<p:menuitem value="Forum"
url="http://forum.primefaces.org/" />
<p:menuitem value="Themes"
url="http://www.primefaces.org/themes.html" />

</p:submenu>

</p:menu>
</p:layoutUnit>

<p:layoutUnit position="center">
Welcome to PrimeFaces
</p:layoutUnit>

</p:layout>

</h:body>

6
Poglavlje 1 PrimeFaces biblioteka komponenata

</f:view>
</html>

PRIMEFACES KOMPONENTE RASPOREDA


Neophodno je uključivanje odgovarajućeg prostora naziva.

Da bi bilo moguće korišćenje PrimeFaces komponenata u JSF Java veb aplikaciji, neophodno
je koristiti prostor naziva:

xmlns:p="http://primefaces.org/ui" namespace

Razvojno okruženje NetBeans automatski dodaje prostor naziva


xmlns:p="http://primefaces.org/ui"u generisanu JSF stranicu.

Kada se pogleda Slika 2, koja reprezentuje welcomePrimefaces.xhtml stranicu, moguće je


primetiti da je stranica podeljena na sekcije: zaglavlje (header), podnožje (footer), leva
sekcija i sekcija sa glavnim sadržajem aplikacije. Važno je napomenuti da ovde nema potrebe
za korišćenjem HTML <div> tagova i CSS - a da bi ovakav raspored bio realizovan. PrimeFaces
koristi <p:layout> komponentu koja vodi računa o ovako složenim zadacima.

Unutar <p:layout> komponente neophodno je ugnezditi nekoliko <p:layoutUnit>


komponenata kojima su kreirane odgovarajuće sekcije stranice. posebnu pažnju je
neophodno obratiti na atribut position komponente <p:layoutUnit> kojom se, zapravo i
vrši pozicioniranje sekcija. Postavljanje sekcija na posmatranoj stranici je obavljeno kada su
odgovarajućim atributima position dodeljivane sledeće vrednosti:

• north - postavlja sekciju na vrh stranice. Širina sekcije će automatski prekriti sav
dostupan horizontalni prostor u prozoru veb pregledača. Ovako je generisana Header
sekcija.

• west - postavlja sekciju na levu stranu stranice. Visina sekcije će automatski prekriti sav
dostupan vertikalni prostor u prozoru veb pregledača. Ovako je generisanaLeft sekcija.
• east - postavlja sekciju na desnu stranu stranice. Visina sekcije će automatski prekriti
sav dostupan vertikalni prostor u prozoru veb pregledača. Ova vrednost nije korišćena u
kreiranoj stranici.
• south - postavlja sekciju na dno stranice. Širina sekcije će automatski prekriti sav
dostupan horizontalni prostor u prozoru veb pregledača. Ovako je generisanaFooter
sekcija.
• center - postavlja sekciju na sredinu stranu stranice. Visina i širina sekcije će automatski
prekriti sav dostupan vertikalni i horizontalni prostor u prozoru veb pregledača,
respektivno. Ovako je generisana sekcija sa glavnim sadržajem aplikacije (trenutno je to
String "Welcome to PrimeFaces").

Komponenta <p:layoutUnit> poseduje atribut size kojim se podešava širina (za vrednosti
west i east) ili visina (za vrednosti north i south) odgovarajuće sekcije na stranici. Za ovu

7
Poglavlje 1 PrimeFaces biblioteka komponenata

komponentu moguće je koristiti i atribute resizable, closeable i collapsible. Podešavanjem


ovih atributa na true omogućena je promena veličine, zatvaranje i sakrivanje nekog sadržaja
na stranici.

OSTALE PRIMEFACES KOMPONENTE


Na veoma jednostavan način je moguće realizovati meni i unos
podataka.

Primenom PrimeFaces biblioteke komponenata, omogućeno je i veoma jednostavno kreiranje


menija u JSF stranicama. Kreiranje menija se obavlja angažovanjem komponente PrimeFaces
<p:menu> nakon čega je korisniku moguće omogućiti veoma laku navigaciju kroz kreiranu
veb aplikaciju.

Takođe, za ovu komponentu je moguće primeniti više ugneždenih <p:submenu>


komponenata kojima se realizuju grupe srodnih stavki menija (u formi podmenija). Pomoću
njenog atributa label obeležavaju se stavke menija u formi u kojoj ih korisnik vidi. U
priloženom primeru, priložena je <p:submenu> komponenta sa labelom Resources. Na
komponentu <p:submenu> moguće je primeniti više <p:menuitem> tagova za svaku od
stavki menija posebno. Ove komponente poseduju atribut value čija vrednost odgovara URL
stringu pomoću kojeg se vrši navigacija na neku od željenih veb stranica.

Kada su u pitanju kontrole koje se nalaze na JSF formama, PrimeFaces biblioteka


komponenata poseduje zamene za sve standardne JSF kontrole, uglavnom tako što se prefiks
h menja prefiksom p. N rpimer, polje za unos teksta se korišćenjem PrimeFaces biblioteke
komponenata realizuje tagom <p:inputText> umesto sa <h:inputText>.

U nastavku izlaganja, uvodi se primer koji će poslužiti za demonstraciju primene PrimeFaces


komponenata u JSF aplikacijama. Idealno bi bilo uraditi primer koji će biti ekvivalentan
primeru iz prošle lekcije koji poseduje formu za unos korisničkih podataka, stranicu za
prikazivanje unetih podataka, mehanizme za validaciju i odgovarajuću klasu CDI zrna. Na
ovaj način najbolje može da se sagledaju sve prednosti primene PrimeFaces biblioteke
komponenata.

PRIMEFACES KOMPONENTE - PRIMER


Uvodi se primer za demonstraciju primene PrimeFaces komponenata.

Primenom PrimeFaces biblioteke komponenata biće razvijena aplikacija koja u potpunosti


odgovara aplikaciji koja koristi formu za prikupljanje korisničkih podataka iz prethodne lekcije.
Sledećom slikom je prikazan izgled forme originalne aplikacije (Slika 4 - a), a nakon toga je
prikazana i forma koja je kreirana PrimeFaces komponentama (Slika 4 - b).

8
Poglavlje 1 PrimeFaces biblioteka komponenata

Slika 1.4 Poređenje izgleda formi

Kao što je moguće primetiti, forma kreirana primenom PrimeFaces je veoma lepa, a njena
obavezna polja su istaknuta zvezdicama.

Za razliku od prethodne aplikacije, ovde je iskorišćena index.html datoteka koja će poželeti


dobrodošlicu korisniku i obezbediti link koji vrši navigaciju ka stranici sa formom za
prikupljanje podataka korisnika.

Izvršavanje datoteke index.html prikazuje korisniku sledeću stranicu:

Slika 1.5 Početna stranica aplikacije

Početna stranica je realizovana kodom koji je priložen sledećim listingom:

<?xml version='1.0' encoding='UTF-8' ?>


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/
TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://xmlns.jcp.org/jsf/html">
<h:head>
<title>Pocetna strana</title>
</h:head>
<h:body>
Dobrodosli!!!
Klikom na link predjite na stranicu za unos podataka.
<br/>
<h:link outcome="welcomePrimefaces" value="Stranica za unos podataka" />
</h:body>
</html>

Klikom na link "Stranica za unos podataka" vrši se navigacija do stranice na kojoj je


postavljena forma sa slike 4 - b. O ovoj stranici biće više govora u narednom izlaganju.

9
Poglavlje 1 PrimeFaces biblioteka komponenata

PRIMEFACES KOMPONENTE - PRIMER - JSF


DATOTEKA SA FORMOM
U narednom izlaganju cilj je prikazivanje JSF datoteka razvijenih
primenom PrimeFaces

Kao što je istaknuto u prethodnom izlaganju, klikom na link "Stranica za unos podataka" vrši
se navigacija do stranice na kojoj je postavljena forma. Ova stranica, kada je učitana u veb
pregledač, ima izgled kao na sledećoj slici:

Slika 1.6 Stranica sa formom

Ova stranica je realizovana programskim kodom datoteke welcomePrimeFaces.xhtml koji je


priložen sledećim listingom:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/


TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:p="http://primefaces.org/ui">

<f:view contentType="text/html">
<h:head>
<f:facet name="first">
<meta content='text/html; charset=UTF-8' http-equiv="Content-Type"/>
<title>PrimeFaces - primer</title>

10
Poglavlje 1 PrimeFaces biblioteka komponenata

</f:facet>
</h:head>

<h:body>

<p:layout fullPage="true">

<p:layoutUnit position="north" size="100" resizable="true"


closable="true" collapsible="true">
<h2>Stranica za unos korisnickih podataka</h2>
</p:layoutUnit>

<p:layoutUnit position="south" size="100" closable="true"


collapsible="true">
<h2>CS230 - Lekcija 06</h2>
</p:layoutUnit>

<p:layoutUnit position="west" size="175" header="Dokumentacija"


collapsible="true">
<p:menu>
<p:submenu label="Resursi">
<p:menuitem value="Demo" url="http://www.primefaces.org/
showcase-labs/ui/home.jsf" />
<p:menuitem value="Dokumentacija"
url="http://www.primefaces.org/documentation.html" />
<p:menuitem value="Forum"
url="http://forum.primefaces.org/" />
<p:menuitem value="Teme" url="http://www.primefaces.org/
themes.html" />

</p:submenu>

</p:menu>
</p:layoutUnit>

<p:layoutUnit position="center">
<h3>Registracija</h3>
<p:messages/>
<h:form>
<p:panelGrid columns="2"
columnClasses="rightalign,leftalign">
<p:outputLabel value="Titula: " for="titula"/>
<p:selectOneMenu id="titula" label="titula"
value="#{registrationBean.titula}" >
<f:selectItem itemLabel="" itemValue=""/>
<f:selectItem itemLabel="St." itemValue="ST"/>
<f:selectItem itemLabel="MA" itemValue="MA"/>
<f:selectItem itemLabel="MSc" itemValue="MSC"/>
<f:selectItem itemLabel="Dr." itemValue="DR"/>
</p:selectOneMenu>

<p:outputLabel value="Ime:" for="ime"/>


<p:inputText id="ime" label="Ime"

11
Poglavlje 1 PrimeFaces biblioteka komponenata

required="true"
value="#{registrationBean.ime}" />
<p:outputLabel value="Prezime:" for="prezime"/>
<p:inputText id="prezime" label="Prezime"
required="true"
value="#{registrationBean.prezime}" />

<p:outputLabel for="starost" value="Starost:"/>


<p:inputText id="starost" label="Starost" size="2"
value="#{registrationBean.starost}"/>

<p:outputLabel value="Email adresa:" for="email"/>


<p:inputText id="email" label="Email dresa"

required="true"
value="#{registrationBean.email}">
<f:validator validatorId="emailValidator"/>
</p:inputText>

<h:panelGroup/>
<p:commandButton id="register" value="Registracija"
action="confirmation" ajax="false"/>
</p:panelGrid>
</h:form>

</p:layoutUnit>

</p:layout>

</h:body>

</f:view>
</html>

JSF DATOTEKA SA FORMOM - DODATNA


RAZMATRANJA
Većina specifičnih JSF tagova poseduje odgovarajuću PrimeFaces
alternativu.

Kao što je moguće primetiti iz priloženog koda, većina specifičnih JSF tagova poseduje
odgovarajuću PrimeFaces alternativu. Ono što je moguće primetiti jeste da je serija originalnih
JSF tagova <h:message> zamenjena jednim top - level <p:messages> tagom za prikazivanje
poruka koje su u vezi sa nekorektnim unosom u formu.

Kada se koristi PrimeFaces, komandna dugmad na stranicama imaju podrazumevanu


vrednost atributa ajax podešenu na true. Ovde je ta vrednost promenjena na false.

12
Poglavlje 1 PrimeFaces biblioteka komponenata

Sada je moguće popuniti formu i neko od obaveznih polja, na primer polje za unos adrese
elektronske pošte, bi trebalo ostaviti nepopunjenim. Klikom na dugme za potvrdu, javiće se
greška. Navedeno je prikazano sledećom slikom.

Slika 1.7 Obavezno polje nije uneto

Dalje, ukoliko je email adresa uneta, ali u neispravnom formatu, javiće se poruka da email
adresa nije korektna. Navedeno je realizovano kreiranjem i angažovanjem klase
EmailValidator koja je u potpunosti identična sa klasom iz prethodnog primera i zbog toga
ovde neće biti priložena niti analizirana.

Sledećom slikom je prikazana stranica sa formom koja javlja poruku u slučaju loše unete email
adrese.

Slika 1.8 Nekorektan unos email adrese

JSF DATOTEKA ZA PRIKAZIVANJE PODATAKA SA


POPUNJENE FORME
Stranica za prikazivanje podataka, posredstvom CDI zrna, prikazuje
unete podatke forme.

13
Poglavlje 1 PrimeFaces biblioteka komponenata

Kada su sva obavezna polja popunjena i kada je zadovoljen format podataka koji su uneti
u formu, klikom na dugme "Registracija" podaci će biti sačuvani u objektu (CDI zrnu) klase
RegistrationBean. Klasa je, kao prvo, obeležena obaveznim anotacijama @Named i
@RequestScoped (obrađeno u prethodnoj lekciji) i poseduje sve setter i getter metode za
manipulaciju sa poljima forme, odnosno odgovarajućim podacima unetim u ta polja. Klasa CDI
zrna je u potpunosti identična sa odgovarajućom klasom iz prethodnog primera i zbog toga
ovde neće biti priložena niti analizirana.

Osobine ove klase čuvaju korektno unete podatke prikupljene sa forme prethodno opisane
stranice koji se dalje prosleđuju stranici pod nazivom confirmation.xhtml na prikazivanje.

Slika 1.9 Stranica za prikazivanje korektno unetih podataka korisnika

Pomenuta datoteka confirmation.xhtml je nova JSF datoteka sa PrimeFaces komponentama i


njen kod je priložen sledećim listingom.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/


TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:p="http://primefaces.org/ui">

<f:view contentType="text/html">
<h:head>
<f:facet name="first">
<meta content='text/html; charset=UTF-8' http-equiv="Content-Type"/>
<title>PrimeFaces - primer</title>
</f:facet>
</h:head>

<h:body>

<p:layout fullPage="true">

<p:layoutUnit position="north" size="100" resizable="true"


closable="true" collapsible="true">
<h2>Podaci o korisniku</h2>
</p:layoutUnit>

14
Poglavlje 1 PrimeFaces biblioteka komponenata

<p:layoutUnit position="south" size="100" closable="true"


collapsible="true">
<h2>CS230 - Lekcija 06</h2>
</p:layoutUnit>

<p:layoutUnit position="west" size="175" header="Dokumentacija"


collapsible="true">
<p:menu>
<p:submenu label="Resursi">
<p:menuitem value="Demo" url="http://www.primefaces.org/
showcase-labs/ui/home.jsf" />
<p:menuitem value="Dokumentacija"
url="http://www.primefaces.org/documentation.html" />
<p:menuitem value="Forum"
url="http://forum.primefaces.org/" />
<p:menuitem value="Teme" url="http://www.primefaces.org/
themes.html" />
</p:submenu>
</p:menu>
</p:layoutUnit>

<p:layoutUnit position="center">
<h2>Podaci koje je korisnik uneo:</h2>
<p:panelGrid columns="2"
columnClasses="rightalign-bold,leftalign">
<h:outputText value="Titula:"/>
${registrationBean.titula}
<h:outputText value="Ime:"/>
${registrationBean.ime}
<h:outputText value="Prezime:"/>
${registrationBean.prezime}
<h:outputText value="Starost:"/>
${registrationBean.starost}
<h:outputText value="Email adresa:"/>
${registrationBean.email}
</p:panelGrid>
</p:layoutUnit>

</p:layout>

</h:body>

</f:view>
</html>

POSEBNE NAPOMENE
Posebne napomene se odnose na fazu JSF projekta

15
Poglavlje 1 PrimeFaces biblioteka komponenata

Za početak je neophodno pogledati datoteku web.xml koja sadrži informaciju o trenutnoj fazi
razvoja aktuelne veb aplikacije. Deskriptor veb razvoja je priložen sledećim XML listingom:

<?xml version="1.0" encoding="UTF-8"?>


<web-app version="3.1" xmlns="http://xmlns.jcp.org/xml/ns/javaee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/
javaee/web-app_3_1.xsd">
<context-param>
<param-name>javax.faces.PROJECT_STAGE</param-name>
<param-value>Development</param-value>
</context-param>
<servlet>
<servlet-name>Faces Servlet</servlet-name>
<servlet-class>javax.faces.webapp.FacesServlet</servlet-class>
<load-on-startup>1</load-on-startup>
</servlet>
<servlet-mapping>
<servlet-name>Faces Servlet</servlet-name>
<url-pattern>/faces/*</url-pattern>
</servlet-mapping>
<session-config>
<session-timeout>
30
</session-timeout>
</session-config>
<welcome-file-list>
<welcome-file>faces/index.xhtml</welcome-file>
</welcome-file-list>
</web-app>

Ako se pažljivo pogleda priloženi kod, moguće je primetiti da je aplikacija u Development


fazi razvoja, a to je istaknuto sledećim izolovanim kodom.

<context-param>
<param-name>javax.faces.PROJECT_STAGE</param-name>
<param-value>Development</param-value>
</context-param>

Kada se testira, ovako podešena aplikacija, prilikom navigacije na stranicu sa formom javiće
se informacije od značaja za programera, a koje ne bi trebalo da se vide kada se pusti
konačna verzija aplikacije za upotrebu od strane korisnika. Navedeno je prikazano sledećom
slikom:

16
Poglavlje 1 PrimeFaces biblioteka komponenata

Slika 1.10 0 0 0 Informacije za programera

Da bi ove informacije bile uklonjene, neophodno je u datoteci, web.xml aktuelnog projekta,


promeniti fazu razvoja iz Development u Production, na način urađen sledećim izolovanim
kodom iz ove datoteke:

<context-param>
<param-name>javax.faces.PROJECT_STAGE</param-name>
<param-value>Production</param-value>
</context-param>

Nakon toga, stranica će imati željeni izgled, upravo kao što je prikazan na Slici 6.

PRIMEFACES - VIDEO MATERIJAL


Izlaganje u vezi sa primenom PrimeFaces bibloteke komponenata je
zaokruženo video materijalom.

Ova lekcija sadrži video materijal. Ukoliko želite da pogledate ovaj video morate da
otvorite LAMS lekciju.

17
Poglavlje 2

IceFaces biblioteka komponenata

UKLJUČIVANJE ICEFACES BIBLIOTEKE U PROJEKAT


Još jedna biblioteka za pojednostavljivanje razvoja JSF aplikacija

IceFaces je nova biblioteka koja će biti izučavana, takođe veoma popularna i u velikoj meri
olakšava razvoj veb aplikacija koje koriste JSF stranice. Pre bilo kakvog rada, neophodno
je preuzeti biblioteku, priložena je dodatnim materijalima Shared Resources ili sa linka
http://www.icesoft.org/java/downloads/icefaces-downloads.jsf, i odgovarajuće JAR fajlove
angažovati prilikom izrade novog Java veb projekta.

Dakle, na dobro poznat način će biti kreiran novi Java veb projekat, dobiće naziv
IceFacesDemo, U prozoru u kojem se bira korišćenje JavaServer Faces okvira, klikom na
tab Components, moguće je selektovati CheckBox kontrolu koja odgovara izboru IceFaces
biblioteke. Navedeno je prikazano sledećom slikom.

Slika 2.1 Izbor IceFaces biblioteke

Kao što je moguće primetiti, biblioteka IceFaces, za razliku od PrimeFaces, nije uključena u
razvojno okruženje NetBeans pa je neophodno izvesti dopunske korake da bi ovaj problem bio
prevaziđen. Neophodno je preuzeti napomenute fajlove i kreirati novu biblioteku. Poslednja
verzija IceFace biblioteke nosi oznaku 4.2. Biblioteka je zapakovana u ZIP formatu i
neophodno je izvršiti njeno raspakivanje. Nakon toga u folderu lib, od posebnog su značaja
datoteke icefaces.jar i icefaces-ace.jar koje je neophodno uključiti u biblioteku koja se kreira u
razvojnom okruženju.

Na slici 1, pored opcije IceFaces moguće je uočiti dugme "More". Klikom na ovo dugme
započinje kreiranje IceFace biblioteke za NetBeans IDE razvojno okruženje. Dalje, u novom
prozoru, klikom na dugme IceFace Library dobija se mogućnost unosa naziva biblioteke, na
primer IFLibrary, kao i dodavanja pomenuti JAR fajlova u biblioteku (sledeća slika).

18
Poglavlje 2 IceFaces biblioteka komponenata

Slika 2.2 Kreiranje IceFace biblioteke u NetBeans IDE

INICIJALNI ICEFACES PROJEKAT


Kreiranjem IceFace biblioteke razvojno okruženje je spremno za rad na
novom projektu.

U prethodnom izlaganju je pokazano kako se neophodne JAR datoteke ugrađuju u biblioteku


koja je neophodna za razvoj Java veb aplikacija u kojima se koriste IceFaces stranice. Kada
je biblioteka formirana, obezbeđena je IceFace podrška i na stranici, koja je prikazana Slikom
1, klikom na dugme Finish, kreira se inicijalni Java veb projekat sa IceFaces JSF stranicama.
Projekat, veoma slično slučaju sa PrimeFaces, sadrži dve stranice. Osnovna stranica nudi
pozdravnu poruku (Slika 3) i link za prelazak na drugu stranicu (Slika 4).

Slika 2.3 Početna stranica automatski kreirane veb aplikacije

Ovoj stranici odgovara sledeći kod:

<?xml version='1.0' encoding='UTF-8' ?>


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/
TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://xmlns.jcp.org/jsf/html">
<h:head>
<title>Facelet Title</title>
</h:head>
<h:body>
Hello from Facelets
<br/>
<h:link outcome="welcomeIcefaces" value="ICEfaces welcome page" />
</h:body>
</html>

19
Poglavlje 2 IceFaces biblioteka komponenata

Klikom na link "ICEFaces welcome page" vrši se navigacija ka sledećoj stranici prikazanoj
narednom slikom.

Slika 2.4 JSF stranica sa IceFaces komponentama

Ova datoteka nosi inicijalni naziv welcomeIcefaces.xhtml i njen kod, sa odgovarajućim


komponentama, biće detaljno razmatran u izlaganju koje sledi.

ICEFACES KOMPONETE
Datoteka welcomeIcefaces.xhtml poseduje ugrađene IceFace
komponente koje prikazuje.

Prethodnom slikom je prikazana JSF stranica welcomeIcefaces.xhtml koja pokazuje veoma


lepo organizovan sadržaj, bez preterano velikog utrošenog truda, pomoću IceFaces
komponenata. Sledećim listingom je priožen inicijalni kod ove datoteke:

<?xml version='1.0' encoding='UTF-8' ?>


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/
TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:icecore="http://www.icefaces.org/icefaces/core"
xmlns:ace="http://www.icefaces.org/icefaces/components">
<h:head>
<title>ICEfaces Welcome Page</title>
<!-- This line is only for ICE component, remove it if no ice component is
used in this page.-->
<link rel="stylesheet" type="text/css" href="./xmlhttp/css/rime/rime.css"/>

20
Poglavlje 2 IceFaces biblioteka komponenata

</h:head>
<h:body>
<h:form>

<ace:panel header="Welcome to ICEfaces">


<h:panelGrid columns="1">
<!-- NOTICE -To run this page you must have also ICEfaces ACE
components library on your classpath (project dependencies). -->
<ace:linkButton id="linkButton1" value="ICEfaces Overview"
href="http://wiki.icesoft.org/display/ICE/ICEfaces+Overview"></ace:linkButton>
<ace:linkButton id="linkButton2" value="General Documentation"
href="http://wiki.icesoft.org/display/ICE/ICEfaces+Documentation"></ace:linkButton>
<ace:linkButton id="linkButton3" value="ICEfaces Demos"
href="http://www.icesoft.org/demos/icefaces-demos.jsf"></ace:linkButton>
<ace:linkButton id="linkButton4" value="Tutorials"
href="http://www.icesoft.org/community/tutorials-samples.jsf"></ace:linkButton>
<ace:linkButton id="linkButton5" value="ACE components"
href="http://wiki.icesoft.org/display/ICE/ACE+Components"></ace:linkButton>
<ace:linkButton id="linkButton6" value="ICE components"
href="http://wiki.icesoft.org/display/ICE/ICE+Components"></ace:linkButton>
<!-- You can also use ICE components. Adds ICE namespace in
that case: xmlns:ice="http://www.icesoft.com/icefaces/component" -->
<!-- <ice:outputLink id="aceLink"
value="http://wiki.icesoft.org/display/ICE/ACE+Components" target="_blank">ACE
components</ice:outputLink> -->
<!-- <ice:outputLink id="iceLink"
value="http://wiki.icesoft.org/display/ICE/ICE+Components" target="_blank">ICE
components</ice:outputLink> -->
</h:panelGrid>
</ace:panel>

</h:form>
</h:body>
</html>

Kada je u pitanju rad sa IceFaces komponentama, postoje dva skupa komponenata: ICE
komponente i ACE komponente. ICE komponente poseduju funkcionalnost koja je primarno
implementirana kao server - side kod sa ograničenom primenom JavaScript -a.

Druga komponenta, ACE, predstavlja noviju implementaciju u formi kombinacije server -


side i client - side koda. Prva komponenta se koristi u situacijama kada je neophodno
obezbediti kompatibilnost sa starijim verzijama veb čitača, dok je novi skup komponenata
u potpunosti okrenuta ka savremenim verzijama veb pregledača i u ovim predavanjima
će fokus biti usmeren upravo ka njoj. Iz navedenog razloga, poslednja verzija NetBeans
razvojnog okruženja generiše ICEFaces aplikacije koje se oslanjaju isključivo na primenu
ACEkomponenata u kombinaciji sa standardnim JSF komponentama.

Kada se pogleda priloženi kod uočavaju se komponente stranice o kojima do sada nije bilo
reči. Prvo što se primećuje jeste tag <ace:panel> čiji je zadatak generisanje panela koji sadrži
niz linkova na kreiranoj JSF stranici. Navedeni tag poseduje headeratribut čiji je zadatak,
upravo, kreiranje zaglavlja stranice koja se konstruiše.

21
Poglavlje 2 IceFaces biblioteka komponenata

Dalje, unutar <ace:panel> taga, ugrađeno je nekoliko <ace:linkButton> tagova čiji je zadatak
generisanje linkova na stranici, sličko kao što to čine obrađeni standardni JSF tagovi
<h:outputLink> i <h:commandLink>. U okviru ovih tagova definisani su String koji označava
stranicu na koju se vrši navigacija (atribut value) i sam link koji obezbeđuje navigaciju
(atribut href).

U nastavku izlaganja, inicijali kod će biti zamenjen kodom koji realizuje aplikaciju sa formom
za preuzimanje korisničkih podataka zbog lakšeg poređenja biblioteka komponenata.

ICEFACES KOMPONENTE - PRIMER


Uvodi se primer za demonstraciju primene IceFaces komponenata.

U nastavku će biti kreiran primer sa potpuno identičnim funkcionalnostima kao prethodna dva
primera (primena standardnih JSF i PrimeFaces komponenata respektivno) sa idejom da se
direktnim poređenjem uoče razlike i prednosti različitih korišćenih pristupa.

Kao i u prethodna dva slučaja, postoji uvodna stranica, označena je nazivom index.xhtml koja
sadrži pozdravnu poruku i link ka stranici na kojoj se nalazi forma u koju je neophodno uneti
odgovarajuće korisničke podatke. Izgled uvodne stranice prikazan je sledećom slikom.

Slika 2.5 Početna stranica ICEFace projekta

Kao što je napomenuto klikom na link, kojeg korisnik vidi kao String "Stranica za unos
podataka" vrši se navigacija ka JSF stranici na kojoj je realizovana dobro poznata forma, ali
ovaj put primenom ICEFace komponenata. Ovako, ova forma dobija jedan novi i veoma
atraktivan izgled o kojem će biti dosta reči u izlaganju koje neposredno sledi iza ovoga.

U nastavku je neophodno priložiti izmenjeni kod index.xhtml stanice na osnovu kojeg je


prikazan sadržaj sa Slike 5. Sledi listing ove datoteke:

<?xml version='1.0' encoding='UTF-8' ?>


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/
TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://xmlns.jcp.org/jsf/html">
<h:head>
<title>Pocetna strana</title>
</h:head>
<h:body>
Dobrodosli!!!

22
Poglavlje 2 IceFaces biblioteka komponenata

Klikom na link predjite na stranicu za unos podataka.

<br/>
<h:link outcome="welcomeIcefaces" value="Stranica za unos podataka" />
</h:body>
</html>

Kao i u prethodna dva primera, ključni deo aplikacije predstavlja stranica sa formom pa će, u
narednom izlaganju, diskusija sa početne stranice biti preusmerena sa stranicu sa formom za
unos korisničkih podataka.

ICEFACES KOMPONENTE - PRIMER - JSF DATOTEKA


SA FORMOM
Forma u ICEFaces reprezentaciji poseduje veoma atraktivan izgled.

Datoteku welcomeIcefaces.xhtml, koja je automatski generisana kreiranjem ICEFaces


projekta, moguće je iskoristiti i redefinisati tako da umesto skupa prikazanih linkova sadrži
dobro poznatu formu za unos korisničkih podataka. Forma će imati izgled prikazan sledećom
slikom.

Slika 2.6 Forma sa ICEFace izgledom

Stranica sa slike je realizovana kodom kojem odgovara sledeći listing:

<?xml version='1.0' encoding='UTF-8' ?>


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/
TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"

23
Poglavlje 2 IceFaces biblioteka komponenata

xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:icecore="http://www.icefaces.org/icefaces/core"
xmlns:ace="http://www.icefaces.org/icefaces/components">
<h:head>
<title>ICEfaces Welcome Page</title>
<!-- This line is only for ICE component, remove it if no ice component is
used in this page.-->
<link rel="stylesheet" type="text/css" href="./xmlhttp/css/rime/rime.css"/>
</h:head>
<h:body>
<h:form>
<ace:panel header="Registracija">
<ace:messages/>
<h:panelGrid columns="2"
columnClasses="rightalign,leftalign">
<h:outputLabel value="Titula: "
for="titula"/>
<ace:selectMenu id="titula" label="Titula"
value="#{registrationBean.titula}" >
<f:selectItem itemLabel="" itemValue=""/>
<f:selectItem itemLabel="St." itemValue="ST"/>
<f:selectItem itemLabel="MA"
itemValue="MA"/>
<f:selectItem itemLabel="MSc"
itemValue="MSC"/>
<f:selectItem itemLabel="Dr" itemValue="DR"/>
</ace:selectMenu>
<h:outputLabel value="Ime:"
for="ime"/>
<h:inputText id="ime" label="Ime"
required="true"
value="#{registrationBean.ime}"
/>
<h:outputLabel value="Prezime:" for="prezime"/>
<h:inputText id="prezime" label="Prezime"
required="true"
value="#{registrationBean.prezime}"
/>
<h:outputLabel for="starost" value="Starost:"/>
<ace:sliderEntry id="starost"
value="#{registrationBean.starost}"
min="19" max="65" showLabels="true"
/>
<h:outputLabel value="Email adresa:"
for="email"/>
<h:inputText id="email" label="Email adresa"
required="true"
value="#{registrationBean.email}">
<f:validator validatorId="emailValidator"/>

</h:inputText>

24
Poglavlje 2 IceFaces biblioteka komponenata

<h:panelGroup/>
<ace:pushButton id="register" value="Registracija"
action="confirmation" />
</h:panelGrid>
</ace:panel>
</h:form>
</h:body>
</html>

JSF ICEFACES DATOTEKA SA FORMOM - DODATNA


RAZMATRANJA
Analiza priloženog koda sa ICEFaces komponentama.

Prva komponenta koju je moguće uočiti jeste panel kojim je istaknuta informacija da se na
stranici obavlja "Registracija" korisnika. Ova komponenta je realizovana sledećom linijom
koda koji je izolovan iz prethodno priloženog koda u celini:

<ace:panel header="Registracija">

Nakon toga moguće je uočiti sledeću liniju koda:

<ace:messages/>

Ovaj kod omogućava prikazivanje poruka sa greškama, odmah ispod kreiranog panela. Poruke
sa greškama se odnose na greške koje su rezultat validacije korisničkih podataka (više o tome
kasnije) ili su rezultat izostanka unosa u obaveznim poljima forme.

U nastavku koda nalazi se dobro poznata instrukcija za kreiranje matričnog layout - a u formi
JSF taga <h:panelGrid>. Atributom columns ovog taga određeno je da za kreiranje ovako
lepe forme budu rezervisane dve kolone. Atributom columnClasses obavljena su izvesna
poravnanja teksta u odnosu na kolone. Ovo je realizovano sledećim kodom koji je izolovan iz
prethodno priloženog koda u celini:

<h:panelGrid columns="2" columnClasses = "rightalign,leftalign">

Poznatim komponentama <h:outputLabel>, u stranici su realizovane labele koje posebno


ističu kontrole na koje se direktno odnose.

ICEFaces komponentom <ace:selectMenu> realizovan je padajući meni za izbor titule koju


korisnik čiji se podaci unose poseduje. Svaka od stavki padajućeg menija realizovana je
vlastitim <f:selectItem> i atributima itemLabel i itemValue koji se odnose na naziv stavke
koju vidi korisnik i na njenu vrednost.

Polja za unos teksta su kreirana primenom poznatih tagova <h:inputText> sa poznatim


atributima: id, label, required i value. Sva polja za unos teksta koja poseduju atribut
required podešen na vrednost true, obavezna su za unos. Vrednost value ukazuje na
odgovarajuću osobinu CDI zrna kojom se čuva vrednost koja je uneta u odgovarajuće polje za
unos teksta.

25
Poglavlje 2 IceFaces biblioteka komponenata

Kao posebno atraktivan ICEFaces komponenta javlja se klizač (slider) komponenta kreirana
ICEFaces tagom <ace:sliderEntry>. Ovom komponentom se zadaju naziv osobine (id atibut)
čija će vrednost biti određena položajem klizača, zatim atribut value čija vrednost ukazuje
na odgovarajuću osobinu CDI zrna kojom se čuva vrednost određena položajem klizača,
minimalna i maksimalna vrednost položaja klizača (min = 19 - student brucoš i max =
65 - maksimum godina pred odlazak u penziju) i, konačno, atribut value koji ukazuje na
odgovarajuću osobinu CDI zrna kojom se čuva vrednost koja odgovara starosti korisnika čiji
se podaci unose u formu.

Potvrđivanje forme je realizovano dugmetom koje je kreirano ICEFaces komponetom


<ace:pushButton>.

UNOS PODATAKA U FORMU I STRANICA ZA


PRIKAZIVANJE REZULTATA
Demostracija korišćenja kontrola forme i prikazivanje unetih rezultata.

Za početak je neophodno izabrati jednu od ponuđenih vrednosti: St. (student), Ma (master),


MSc (magistar nauka) ili dr (doktor nauka) kao titulu iz kreiranog ICEFaces padajućeg menija
(prikazano sledećom slikom).

Slika 2.7 Izbor iz ICEFace padajućeg manija i popunjena forma

Nakon izbora titule, u polja za unos teksta je neophodno uneti tražene podatke, a klizač
postaviti na vrednost koja odgovara broju godina korisnika.

Kada se popune odgovarajući podaci forme, klikom na dugme "Registracija", podaci se šalju
na server, i za njihovo čuvanje je od sada zaduženo CDI zrno registrationBean koje je instanca
klase RegistrationBean (više reči u narednom izlaganju).

Stranica za prikazivanje podataka dobija vrednosti koje su unete na formi od pomenutog CDI
zrna i prikazuje ih korisniku u veb pregledaču.

Navedeno je prikazano sledećom slikom:

26
Poglavlje 2 IceFaces biblioteka komponenata

Slika 2.8 Stranica za prikazivanje podataka o korisniku

Datoteka koja odgovara ovoj JSF stranici naziva se confirmation.xhtml, sadrži već pomenute i
opisane ICEFaces komponente i priložena je sledećim listingom.

<?xml version='1.0' encoding='UTF-8' ?>


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://xmlns.jcp.org/jsf/html"
xmlns:ace="http://www.icefaces.org/icefaces/components">
<h:head>
<title>Stranica sa korisnickim podacima</title>

</h:head>
<h:body>
<ace:panel header="Podaci o korisniku">
<h:panelGrid columns="2"
columnClasses="rightalign-bold,leftalign">
<h:outputText value="Titula:"/>
${registrationBean.titula}
<h:outputText value="Ime:"/>
${registrationBean.ime}
<h:outputText value="Prezime:"/>
${registrationBean.prezime}
<h:outputText value="Starost:"/>
${registrationBean.starost}
<h:outputText value="Email adresa:"/>
${registrationBean.email}
</h:panelGrid>
</ace:panel>
</h:body>
</html>

VALIDACIJA PODATAKA U ICEFACES STRANICI SA


FORMOM
Sva obavezna polja moraju da budu popunjena, email adresa mora da
ima standardni format.

27
Poglavlje 2 IceFaces biblioteka komponenata

Validacija unetih podataka u formu je veoma važan zadatak. Ozbiljna veb aplikacija ne bi
trebalo da dozvoli unos nekorektnih korisničkih podataka, u smislu ne poklapanja tipova
podataka, unosa email adrese koja ne odgovara standardnom email formatu adrese ili unos
broja godina koji ne može biti realan.

Ukoliko je polje za unos teksta forme ima atribut required podešen na vrednost true, polje je
obavezno za unos i ukoliko se ne unese odgovarajući podatak u polje u prostoru predviđenom
za poruke biće prikazan odgovarajuća poruka sa greškom. Navedeno je prikazano sledećom
slikom:

Slika 2.9 Poruka sa greškom

Postoji u drugi scenario. U polje je unet podatak koji nema odgovarajući format. Na primer
unet je neki String koji nikako ne odgovara formatu u kojem se inače predstavljaju email
adrese.

Tada klasa Validator (priložen je listing koda klase) stupa na scenu i šalje predefinisanu
informaciju da je unos email adrese nekorektan. Navedeno je prikazano sledećom slikom.

Slika 2.10 0 0 0 Validacija email adrese

package com.metropolitan.IceFaces;

/**
*
* @author Vladimir Milicevic
*/
import java.util.regex.Matcher;
import java.util.regex.Pattern;

28
Poglavlje 2 IceFaces biblioteka komponenata

import javax.faces.application.FacesMessage;
import javax.faces.component.UIComponent;
import javax.faces.component.html.HtmlInputText;
import javax.faces.context.FacesContext;
import javax.faces.validator.FacesValidator;
import javax.faces.validator.Validator;
import javax.faces.validator.ValidatorException;

@FacesValidator(value = "emailValidator")
public class EmailValidator implements Validator {

@Override
public void validate(FacesContext context, UIComponent uiComponent, Object
value) throws ValidatorException {
Pattern pattern = Pattern.compile("\\w+@\\w+\\.\\w+");
Matcher matcher = pattern.matcher(
(CharSequence) value);
HtmlInputText htmlInputText
= (HtmlInputText) uiComponent;
String label;

if (htmlInputText.getLabel() == null
|| htmlInputText.getLabel().trim().equals("")) {
label = htmlInputText.getId();
} else {
label = htmlInputText.getLabel();
}

if (!matcher.matches()) {
FacesMessage facesMessage;
facesMessage = new FacesMessage(label
+ ": Email adresa nije korektna");

throw new ValidatorException(facesMessage);


}
}

KLASA CDI ZRNA


Medijator između forme i stranice za prikazivanje rezultata je CDI zrno.

U nastavku je neophodno skrenuti pažnju na već izučavana CDI zrna, njihov zadatak i
ponašanje. Kao instanca klase koja sadrži sve setter i getter metode, neophodne za
upravljanje podacima koje korisnik zadaje putem neke forme, CDI zrno, pomoću svojih
osobina, čuva podatke unete putem forme i prosleđuje ih na dalju obradu ili prikazivanje
korisnicima. Na ovaj način CDI zrno se ponaša kao posrednik između stranica koje su izvori
podataka i stranica koje su potrošači pomenutih podataka.

29
Poglavlje 2 IceFaces biblioteka komponenata

CDI zrno, koje je u kodu stranice sa formom dobilo na čuvanje podatke unete putem forme,
predstavlja instancu klase koja je obeležena obaveznim anotacijama @Named i
@RequestScoped i priložena je sledećim listingom.

package com.metropolitan.IceFaces;

/**
*
* @author Vladimir Milicevic
*/
import javax.enterprise.context.RequestScoped;
import javax.inject.Named;

@Named
@RequestScoped
public class RegistrationBean {

private String titula;


private String ime;
private String prezime;
private Integer starost;
private String email;

public String getTitula() {


return titula;
}

public void setTitula(String titula) {


this.titula = titula;
}

public String getIme() {


return ime;
}

public void setIme(String ime) {


this.ime = ime;
}

public String getPrezime() {


return prezime;
}

public void setPrezime(String prezime) {


this.prezime = prezime;
}

public Integer getStarost() {


return starost;
}

public void setStarost(Integer starost) {


this.starost = starost;

30
Poglavlje 2 IceFaces biblioteka komponenata

public String getEmail() {


return email;
}

public void setEmail(String email) {


this.email = email;
}

Na samom kraju izlaganja, u vezi sa primenom ICEFaces biblioteke komponenata u veb


aplikacijama koje koriste JSF stranice, moguće je dodati prigodne video materijale kojima će
ovaj deo lekcije biti zaokružen. Materijali daju odličan ICEFaces tutorijal koji je priložen iz dva
dela.

Ova lekcija sadrži video materijal. Ukoliko želite da pogledate ovaj video morate da
otvorite LAMS lekciju.

Ova lekcija sadrži video materijal. Ukoliko želite da pogledate ovaj video morate da
otvorite LAMS lekciju.

31
Poglavlje 3

RichFaces biblioteka komponenata

UKLJUČIVANJE RICHFACES BIBLIOTEKE U PROJEKAT


Neophodno je preuzeti RichFaces podršu i ugraditi je u projekat.

Sledeća, veoma popularna, biblioteka komponenata koja će biti obrađena jeste biblioteka pod
nazivom RichFaces. Kao i prethodne dve biblioteke, kada je RichFaces angažovana u razvoju
veb aplikacija, koje u sebi integrišu i JSF stranice, dosta posla je automatizovano, napor koji
programer ulaže u razvoj same aplikacije, i odgovarajućih JSF stranica, značajno je redukovan,
a same stranice poseduju moćan i veoma atraktivan izgled.

Kada je u pitanju podrška za rad sa RichFaces komponentama, u okviru JSF stranica veb
aplikacije koja se razvija, neophodno je izvršiti neke akcije koje prethode procesu razvoja
aplikacije i uključivanja same RichFaces biblioteke kao podrške tom procesu. Navedeno
podrazumeva da inicijalno ne postoje JAR fajlovi dostupni razvojnom okruženju NetBeans
IDEte je neophodno izvršiti njihovo preuzimanje i dodavanje u novu NetBeans biblioteku za
rad sa RichFaces komponentama veb stranica.

U narednom izlaganju će ovaj postupak biti detaljno objašnjen. Da bi RichFaces biblioteka


bila korišćena neophodno je, na dosta puta obrađen i veoma poznat način, kreirati Java veb
aplikaciju u okviru nekog razvojnog okruženja, ovde će to biti NetBeans IDE. Prilikom kreiranja
projekta neophodno je izabrati JavaServer Faces okvir, a u tabu Componets selektovati opciju
RichFaces (sledeća slika).

32
Poglavlje 3 RichFaces biblioteka komponenata

Slika 3.1 Izbor za uključivanje RichFaces biblioteke komponenata

Kao što je moguće primetiti sa slike, kada se prvi put kreira veb projekat ja JSF stranicama
koje zahtevaju RichFaces komponente, sama biblioteka nije podešena na adekvatan način. Iz
navedenog razloga je neophodno preuzeti odgovarajuće datoteke za podršku (JAR fajlove) i
dodati ih kao elemente RichFaces biblioteke u okviru razvojnog okruženja NetBeans IDE.
Detaljno o ovoj temi biće govora u izlaganju koje neposredno sledi.

PODEŠAVANJE RICHFACES BIBLIOTEKE U


RAZVOJNOM OKRUŽENJU
Inicijalno RichFaces biblioteka nije podešena.

Kao što je napomenuto, prilikom prvog izbora RichFaces biblioteke, za neki veb projekat čije
veb stranice zahtevaju ove komponente, ona još uvek nije podešena i ne može biti korišćena.
Iz navedenog razloga, sa linka http://richfaces.jboss.org/download ili iz dodatnih materijala
Shared Resources, koji su sastavni deo ovog objekta učenja, moguće je preuzeti fajlove
koji predstavljaju kompletnu podršku neophodnu za korišćenje RichFaces komponenata u JSF
stranicama aktuelnog veb projekta. Podrška je spakovana pod ZIP datotekom pod nazivom
richfaces-distribution-4.5.17.Final.zip i sadrži JAR fajlove koje je neophodno uključiti u novu
biblioteku razvojnog okruženja za rad sa RichFaces komponentama.

Sada je neophodno vratiti se na Sliku 1 i uočiti dugme "More" desno od Stringa kojim je u
priloženom prozoru obeležena RichFaces biblioteka. Klikom na ovo dugme otvara se prozor
priložen sledećom slikom:

Slika 3.2 RichFaces prozor za kreiranje nove biblioteke

Kao što je moguće primetiti, u ovom prozoru je omogućeno kreiranje nove NetBeans IDE
RichFaces biblioteke i priložena je informacija o datotekama koje ona mora da sadrži, kao i
neobaveznim datotekama koje mogu biti od koristi prilikom rada sa RichFaces
komponentama.

Na jedan od dva pomenuta načina, neophodno je preuzeti richfaces-


distribution-4.5.17.Final.zip i raspakovati je na izabranoj lokaciji na računaru. Klikom na
dugme Create Library (Slika 2) otvara se nov prozor u kojem će biti moguće kreiranje naziva
biblioteke sa RichFaces komponentama (Slika 2 - a) i dodavanje neophodnih datoteka iz
preuzetog ZIP fajla u biblioteku (Slika 2 - b). Sledi navedena slika.

33
Poglavlje 3 RichFaces biblioteka komponenata

Slika 3.3 Izbor imena i dodavanje JAR fajlova za RichFaces podršku

Klikom na dugme "OK" na Slici 2 - b, kreirana je u razvojnom okruženju NetBeans IDE,


biblioteka sa RichFaces komponentama, naziva RFLibrary.

INICIJALNI RICHFACES PROJEKAT


Sa obezbeđivanjem potpune podrške moguće je kreirati prvi RichFaces
projekat.

Sa obezbeđivanjem potpune podrške moguće je kreirati prvi RichFaces projekat na način što
će ponovo akcenat biti na prozoru prikazanim Slikom 1. Prozor jeponovo je aktuelan nakon
što je razvojno okruženje kreiralo biblioteku RFLibrary. Prozor sada ne poseduje informacije
koje ukazuju da RichFaces biblioteka komponenata nije podešena, a to je pokazatelj da su sve
prethodne akcije obavljene na adekvatan način. Klikom na dugme "Finish" (sledeća slika) biće
kreiran inicijalni projekat koji je dobio naziv RichFacesDemo.

Slika 3.4 Kreiranje RichFaces projekta - kraj

34
Poglavlje 3 RichFaces biblioteka komponenata

Kada je obaljena i ova poslednja aktivnost, kreiran je veb projekat koji, slično prethodnim
slučajevima, sadrži dve JSF stranice: index.xhtml i welcomeRichfaces.xhtml. Prvom stranicom
je realizovana jednostavna pozdravna poruka, a to se može videti na sledećoj slici.

Slika 3.5 Početna stranica kreirane veb aplikacije

Ovoj stranici odgovara sledeći listing koji sadrži automatski generisan kod:

<?xml version='1.0' encoding='UTF-8' ?>


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/
TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://xmlns.jcp.org/jsf/html">
<h:head>
<title>Facelet Title</title>
</h:head>
<h:body>
Hello from Facelets
<br/>
<h:link outcome="welcomeRichfaces" value="Richfaces welcome page" />
</h:body>
</html>

STRANICA SA RICHFACES KOMPONENTAMA


Sledi pregled korišćenih specifičnih RichFaces komponenata.

Na početnoj stranici postoji link pod nazivom "Richfaces welcome page" koji služi za
obezbeđivanje navigacije do JSF stranice welcomeRichfaces.xhtml koja sadrži kod koji je
sačinjen od standardnih JSF i RichFaces komponenata. Izgled navedene stranice je prikazan
sledećom slikom.

Slika 3.6 JSF Stranica sa RIchFace panelom

35
Poglavlje 3 RichFaces biblioteka komponenata

Kao što je moguće primetiti, kreirana je stranica sa predefinisanim izgledom kojeg je moguće
menjati i prilagođavati u skladu sa željenim sadržajem na stranici. Da bi bilo moguće izvršiti
analizu i dati objašnjenje korišćenih specifičnih RichFaces komponenata, neophodno je dati
listing koda datoteke welcomeRichfaces.xhtml iz kojeg je i generisan izlaz koji je dostupan
u veb pregledaču na način prikazan prethodnom slikom. Sledi listing JSF datoteke
welcomeRichfaces.xhtml:

<?xml version='1.0' encoding='UTF-8' ?>


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/
TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:rich="http://richfaces.org/rich"
xmlns:h="http://java.sun.com/jsf/html">
<h:head>
<title>Richfaces Welcome Page</title>
</h:head>
<h:body>
<rich:panel header="Welcome to Richfaces">
RichFaces is an advanced UI component framework for easily integrating
Ajax capabilities into business applications using JSF. Check out the links below
to lear more about using RichFaces in your application.
<ul>
<li><h:outputLink value="http://richfaces.org" >Richfaces Project
Home Page</h:outputLink></li>
<li><h:outputLink value="http://showcase.richfaces.org" >Richfaces
Showcase</h:outputLink></li>
<li><h:outputLink value="https://community.jboss.org/en/
richfaces?view=discussions" >User Forum</h:outputLink></li>
<li><h:outputLink value="http://www.jboss.org/richfaces/docs"
>Richfaces documentation...</h:outputLink>
<ul>
<li><h:outputLink value="http://docs.jboss.org/richfaces/
latest_4_X/Developer_Guide/en-US/html_single/" >Development
Guide</h:outputLink></li>
<li><h:outputLink value="http://docs.jboss.org/richfaces/
latest_4_X/Component_Reference/en-US/html/" >Component Reference</h:outputLink></li>
<li><h:outputLink value="http://docs.jboss.org/richfaces/
latest_4_X/vdldoc/" >Tag Library Docs</h:outputLink></li>
</ul>
</li>
</ul>
</rich:panel>
</h:body>
</html>

Iz priloženog koda je moguće primetiti da je jedini RichFaces specifični tag, koji je korišćen,
jeste tag <rich:panel> koji je iskorišćen za kreiranje panela koji sadrži tekst i linkove ka
stranicama.

36
Poglavlje 3 RichFaces biblioteka komponenata

RICHFACES KOMPONENTE - PRIMER - JSF DATOTEKA


SA FORMOM
Inicijalni projekat će biti modifikovan za demonstraciju RichFaces
podrške u JSF stranicama.

Datoteku welcomeIcefaces.xhtml, koja je automatski generisana kreiranjem RichFaces


projekta, moguće je iskoristiti i redefinisati tako da umesto skupa prikazanih linkova sadrži
dobro poznatu formu za unos korisničkih podataka. Forma će imati izgled, definisan u okviru
pomenutog <rich:panel> RichFaces elementa, koji je prikazan sledećom slikom.

Slika 3.7 Forma za unos podataka kreirana RichFaces komponenatma

Stranica, koja prikazuje formu sa slike, realizovana je kodom kojem odgovara sledeći listing:

<?xml version='1.0' encoding='UTF-8' ?>


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/
TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:rich="http://richfaces.org/rich"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://xmlns.jcp.org/jsf/core">
<h:head>
<title>Richfaces Welcome Page</title>
</h:head>
<h:body>
<rich:panel header="Registracija">
<h:form prependId="false">
<h:panelGrid columns="3"
columnClasses="rightalign,leftalign,left
align">
<h:outputLabel value="Titula: " for="titula"/>

37
Poglavlje 3 RichFaces biblioteka komponenata

<rich:select id="salutation"
value="#{registrationBean.titula}">
<f:selectItem itemLabel="" itemValue=""/>
<f:selectItem itemLabel="St." itemValue="ST"/>
<f:selectItem itemLabel="Ma"
itemValue="MA"/>
<f:selectItem itemLabel="MSc"
itemValue="MMSC"/>
<f:selectItem itemLabel="Dr" itemValue="DR"/>
</rich:select>
<rich:message for="titula"/>
<h:outputLabel value="Ime:"
for="ime"/>
<h:inputText id="ime" label="Ime"
required="true"
value="#{registrationBean.ime}"
/>
<rich:message for="ime" />
<h:outputLabel value="Prezime:" for="prezime"/>
<h:inputText id="prezime" label="Prezime"
required="true"
value="#{registrationBean.prezime}"
/>
<rich:message for="prezime" />
<h:outputLabel for="starost" value="Starost:"/>
<rich:inputNumberSpinner id="starost" label="starost"
value="#{registrationBean.starost}"
minValue="19"
maxValue="65"/>
<rich:message for="starost"/>
<h:outputLabel value="Email adresa:"
for="email"/>
<h:inputText id="email" label="Email adresa"
required="true"
value="#{registrationBean.email}">
<f:validator validatorId="emailValidator"/>
</h:inputText>
<rich:message for="email" />
<h:panelGroup/>
<h:commandButton id="register" value="Regisracija"
action="confirmation" />
</h:panelGrid>
</h:form>
</rich:panel>
</h:body>
</html>

JSF RICHFACES DATOTEKA SA FORMOM - DODATNA


RAZMATRANJA
Sledi analiza priloženog koda sa RichFaces komponentama.

38
Poglavlje 3 RichFaces biblioteka komponenata

U narednom izlaganju sledi detaljna analiza modifikovane stranice welcomeIcefaces.xhtml


koja sada sadrži formu za unos korisničkih podataka. Forma odgovara po sadržaju formama
prethodnih primera sa ciljem kvalitetnijeg poređenja i demonstriranja različitih biblioteka
komponenata.

Ono što je na početku moguće primetiti, iz priloženog listing koda JSF stranice
welcomeIcefaces.xhtml, da je forma za unos korisničkih podataka enkapsulirana unutar
RichFaces komponente <rich:panel>, a to znači da će, prilikom kreiranja sadržaja stranice,
forma biti učitana u odgovarajući panel.

Dalje, u kodu je moguće primetiti sledeću RichFaces komponentu <rich:select>. Zadatak


ove komponente jeste kreiranje drop - down liste za izbor titule koja se odnosi na korisnika.
Ova komponenta ima određenu prednost u odnosu na standardnu JSF komponentu
<h:selectOneMenu> budući da ona može biti podešena kao combobox, a to znači da
je pored izbora ponuđenih opcija, dozvoljen i unos teksta u GUI kontrolu koja je nastala
primenom <rich:select> komponente. Da bi ova funkcionalnost bila omogućena,
neophodno je podesiti vrednost atributa enableManualInput, komponente <rich:select>
na true.

Takođe je moguće primetiti da je priloženim kodom obezbeđen mehanizam za izveštavanje u


slučaju javljanja grešaka prilikom unosa. Greške mogu da nastanu na dva načina:

• nije popunjeno obavezno polje forme;


• uneti podatak nema odgovarajući tip ili format.

Upravljanje prikazivanjem grešaka povereno je skupu RichFaces komponenata koje su


određene tagom <rich:message>.

Izbor godina korisnika je prepušten veoma atraktivnoj kontroli koja je kreirana primenom
RichFaces komponente <rich:inputNumberSpinner>. Ovom komponentom je kreirana
kontrola koja omogućava zadavanje numeričkih vrednosti, koje su u direktnoj vezi sa brojem
godina korisnika, bilo direktnim unosom sa tastature ili izborom koji se vrši pomoću strelica
sa desne strane kontrole.

U ovom delu lekcije su prikazane samo izabrane RichFaces komponente. Detaljno


upoznavanje sa bibliotekom i odgovarajućim komponentama, moguće je angažovanjem
dokumentacije koja je dostupna na linku: http://www.jboss.org/richfaces/docs.

U nastavku, neophodno je pokazati kako se čuvaju podaci koji se prosleđuju sa jedne stranice
na drugu, kako se vrši provera korektnosti unosa RichFaces forme i izvršiti testiranje i
demonstraciju veb aplikacije koja je uzeta kao primer.

UNOS PODATAKA U FORMU I STRANICA ZA


PRIKAZIVANJE REZULTATA
Testiranje unosa u formu kreiranoj na stranici koja sadrži RichFaces
komponente.

39
Poglavlje 3 RichFaces biblioteka komponenata

Za početak je neophodno izabrati jednu od ponuđenih vrednosti: St. (student), Ma (master),


MSc (magistar nauka) ili dr (doktor nauka) kao titulu iz kreiranog RichFaces padajućeg
menija izgrađenog primenom komponente <rich:select>. Dalje, za potrebe demonstracije,
biće popunjena sva tražena polja vodeći računa o tipovima podataka i formatu podataka koji
se unose.(prikazano sledećom slikom).

Slika 3.8 Popunjena forma

Kada se popune odgovarajući podaci forme, klikom na dugme "Registracija", podaci se šalju
na server, i za njihovo čuvanje je od sada zaduženo CDI zrno registrationBean koje je instanca
klase RegistrationBean (više reči u narednom izlaganju). Stranica za prikazivanje podataka,
pod nazivom confirmation.xhtml, dobija vrednosti koje su unete na formi od pomenutog CDI
zrna i prikazuje ih korisniku u veb pregledaču. Sledećom slikom je prikazana stranica koja
prikazuje unete korisničke podatke. Pojavljivanje podataka ukazuje da je aplikacija primera
uspešno kreirana.

Slika 3.9 Podaci uneti na formi stranice sa RichFaces komponentama

Sledi kod JSF stranice confirmation.xhtml, koja je takođe kreirana primenom RichFaces
komponenata:

<?xml version='1.0' encoding='UTF-8' ?>


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:rich="http://richfaces.org/rich"
xmlns:h="http://xmlns.jcp.org/jsf/html">
<h:head>
<title>Podaci o korisniku</title>
</h:head>
<h:body>

40
Poglavlje 3 RichFaces biblioteka komponenata

<rich:panel header="Registracija">
<h:form prependId="false">
<h:panelGrid columns="2"
columnClasses="rightalign-bold,leftalign">
<h:outputText value="Titula:"/>
${registrationBean.titula}
<h:outputText value="Ime:"/>
${registrationBean.ime}
<h:outputText value="Prezime:"/>
${registrationBean.prezime}
<h:outputText value="Starost:"/>
${registrationBean.starost}
<h:outputText value="Email adresa:"/>
${registrationBean.email}
</h:panelGrid>
</h:form>
</rich:panel>
</h:body>
</html>

VALIDACIJA PODATAKA U RICHFACES STRANICI SA


FORMOM
Provera unosa forme kreirane pomoću RichFaces komponenata.

Kao što je već dobro poznato, validacija unetih podataka u formu je veoma važan zadatak.
Ozbiljna veb aplikacija ne bi trebalo da dozvoli unos nekorektnih korisničkih podataka, u
smislu ne poklapanja tipova podataka, unosa email adrese koja ne odgovara standardnom
email formatu adrese ili unos broja godina koji ne može biti realan.

Ukoliko je polje za unos teksta forme ima atribut required podešen na vrednost true, polje je
obavezno za unos i ukoliko se ne unese odgovarajući podatak u polje u prostoru predviđenom
za poruke biće prikazan odgovarajuća poruka sa greškom. Ovo je standardno za sve JSF
stranice, a ovde je cilj prikazivanje poruka sa greškama u RichFaces maniru. Navedeno je
prikazano sledećom slikom:

Slika 3.10 0 0 0 Poruka sa greškom prikazana komponetom

41
Poglavlje 3 RichFaces biblioteka komponenata

Postoji u drugi scenario, dobro poznati scenario. U polje je unet podatak koji nema
odgovarajući format, a to je opet email adresa.

Tada klasa Validator (priložen je listing koda klase) stupa na scenu i šalje predefinisanu
informaciju da je unos email adrese nekorektan. Navedeno je prikazano sledećom slikom.

Slika 3.11 Poruka o nekorekntom String formatu prikazana komponetom

package com.metropolitan.IceFaces;

/**
*
* @author Vladimir Milicevic
*/
import java.util.regex.Matcher;
import java.util.regex.Pattern;
import javax.faces.application.FacesMessage;
import javax.faces.component.UIComponent;
import javax.faces.component.html.HtmlInputText;
import javax.faces.context.FacesContext;
import javax.faces.validator.FacesValidator;
import javax.faces.validator.Validator;
import javax.faces.validator.ValidatorException;

@FacesValidator(value = "emailValidator")
public class EmailValidator implements Validator {

@Override
public void validate(FacesContext context, UIComponent uiComponent, Object
value) throws ValidatorException {
Pattern pattern = Pattern.compile("\\w+@\\w+\\.\\w+");
Matcher matcher = pattern.matcher(
(CharSequence) value);
HtmlInputText htmlInputText
= (HtmlInputText) uiComponent;
String label;

if (htmlInputText.getLabel() == null
|| htmlInputText.getLabel().trim().equals("")) {
label = htmlInputText.getId();
} else {
label = htmlInputText.getLabel();
}

if (!matcher.matches()) {

42
Poglavlje 3 RichFaces biblioteka komponenata

FacesMessage facesMessage;
facesMessage = new FacesMessage(label
+ ": Email adresa nije korektna");

throw new ValidatorException(facesMessage);


}
}

RICHFACES - VIDEO MATERIJAL


Ovaj deo lekcije je zaokružen odgovarajućim video materijalom.

Ova lekcija sadrži video materijal. Ukoliko želite da pogledate ovaj video morate da
otvorite LAMS lekciju.

43
Poglavlje 4

Vežba 6 - JSF biblioteke


komponenata

ZADATAK 1
Vežbanje na računaru kreiranja veb aplikacija koje koriste neku od
biblioteka komponenata.

1. Otvoriti NetBeans razvojno okruženje i kreirati nov projekat pod nazivom


IceFaceVezba6;
2. Projekat mora da ima uključen JSF okvir i ICEFaces biblioteku komponenata;
3. Projekat sadrži tri ICEFaces stranice: index.xhtml, formaMeni.xhtml, potvrda.xhtml.
4. index.xhtml (sadrži poruku dobrodošlice i link za navigaciju ka stranici
formaMeni.xhtml;
5. Stranica formaMeni.xhtml sadrži glavni panel podeljen na dva panela: levi i desni;
6. Levi panel sadrži formu za prikupljanje korisničkih podataka- može biti i forma koja je
korišćena na predavanjima;
7. Desni panel sadrži dva menija sa likovima - prvu grupu čine ICEFaces korisni linkovi,
a drugu linkovi značajni za odlazak na prezentacije našeg Univerziteta i njegovih
fakulteta;
8. Stranica potvrda.xhtml prikazuje podatke koje je korisnih uneo preko forme.
9. Kreirati klasu odgovarajućeg CDI zrna;
10. Kreirati klasu za validaciju email formata.

Prvo je neophodno prikazati kako bi trebalo da izgleda stranica formaMeni.xhtml. Stranica je


prikazana sledećom slikom:

Slika 4.1 Izgled stranice formaMeni.xhtml

Prilaže se kod JSF stranice index.xhtml:

44
Poglavlje 4 Vežba 6 - JSF biblioteke komponenata

<?xml version='1.0' encoding='UTF-8' ?>


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/
TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://xmlns.jcp.org/jsf/html">
<h:head>
<title>Pocetna strana</title>
</h:head>
<h:body>
Dobrodosli!!!
<p>
Klikom na link predjite na stranicu za unos podataka.
</p>
<br/>
<h:link outcome="formaMeni" value="Stranica za unos podataka i izbor linka"
/>
</h:body>
</html>

ZADATAK 1 - JSF STRANICE FORMAMENI.XHTML I


POTVRDA.XHTML.
Slede JSF stranice kreirane pomoću ICEFaces biblioteke komponenata

Sledi kod JSF datoteke formaMeni.xhtml:

<?xml version='1.0' encoding='UTF-8' ?>


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/
TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:ace="http://www.icefaces.org/icefaces/components">
<h:head>
<title>JSF - Vezba broj 6</title>
<!-- This line is only for ICE component, remove it if no ice component is
used in this page.-->
<link rel="stylesheet" type="text/css" href="./xmlhttp/css/rime/rime.css"/>
</h:head>
<h:body>
<h:form id="form">

<ace:panel id="panel">

<ace:splitPane id="splitPane" scrollable="true"


columnDivider="50">

<f:facet name="left" id="leftFacet">


<h:outputText id="out1" value="Levi panel" />
<h:panelGroup id="pg1">

45
Poglavlje 4 Vežba 6 - JSF biblioteke komponenata

<p>Rad sa formama</p>
</h:panelGroup>
<h:form>
<ace:panel header="Registracija"
style="background-color:red">
<ace:messages/>
<h:panelGrid columns="2"
columnClasses="rightalign,leftalign">
<h:outputLabel value="Titula: "
for="titula"/>
<ace:selectMenu id="titula" label="Titula"

value="#{registrationBean.titula}" >
<f:selectItem itemLabel="" itemValue=""/>
<f:selectItem itemLabel="St."
itemValue="ST"/>
<f:selectItem itemLabel="MA"
itemValue="MA"/>
<f:selectItem itemLabel="MSc"
itemValue="MSC"/>
<f:selectItem itemLabel="Dr"
itemValue="DR"/>
</ace:selectMenu>
<h:outputLabel value="Ime:"
for="ime"/>
<h:inputText id="ime" label="Ime"
required="true"
value="#{registrationBean.ime}"
/>
<h:outputLabel value="Prezime:" for="prezime"/>
<h:inputText id="prezime" label="Prezime"
required="true"
value="#{registrationBean.prezime}"
/>
<h:outputLabel for="starost" value="Starost:"/>
<ace:sliderEntry id="starost"

value="#{registrationBean.starost}"
min="19" max="65"
showLabels="true"
/>
<h:outputLabel value="Email adresa:"
for="email"/>
<h:inputText id="email" label="Email adresa"
required="true"
value="#{registrationBean.email}">
<f:validator validatorId="emailValidator"/>

</h:inputText>
<h:panelGroup/>
<ace:pushButton id="register"
value="Registracija"
action="potvrda" style=""/>

46
Poglavlje 4 Vežba 6 - JSF biblioteke komponenata

</h:panelGrid>
</ace:panel>
</h:form>

</f:facet>
<f:facet name="right" id="rightFacet">
<h:outputText id="out2" value="Desni panel" />
<h:panelGroup id="pg2">
<p>Rada sa menijima i linkovima</p>
</h:panelGroup>
<ace:panel id="rightPanel" header="Right panel"
style="background-color:blanchedalmond">
<ace:menu style="background-color: gainsboro">
<ace:submenu label="ICEFaces Linkovi">
<ace:menuItem value="ICEfaces"
url="http://www.icefaces.org" target="_blank" icon="ui-icon ui-icon-home"/>
<ace:menuItem value="ICEpush"
url="http://www.icepush.org" target="_blank" icon="ui-icon ui-icon-home"/>
<ace:menuItem value="ICEpdf"
url="http://www.icepdf.org" target="_blank" icon="ui-icon ui-icon-home"/>
<ace:menuItem value="ICEsoft"
url="http://www.icesoft.com" target="_blank" icon="ui-icon ui-icon-home"/>
</ace:submenu>

<ace:submenu label="Metropolitan">
<ace:menuItem value="Metropolitan"
url="http://www.metropolitan.ac.rs/" target="_blank" icon="ui-icon ui-icon-home"/>
<ace:menuItem value="FIT"
url="http://www.metropolitan.ac.rs/osnovne-studije/
fakultet-informacionih-tehnologija/" target="_blank" icon="ui-icon ui-icon-home"/>
<ace:menuItem value="FDU"
url="http://www.metropolitan.ac.rs/fakultet-digitalnih-umetnosti-2/"
target="_blank" icon="ui-icon ui-icon-home"/>
<ace:menuItem value="FAM"
url="http://www.metropolitan.ac.rs/osnovne-studije/fakultet-za-menadzment/"
target="_blank" icon="ui-icon ui-icon-home"/>
</ace:submenu>
</ace:menu>

</ace:panel>
</f:facet>

</ace:splitPane>

</ace:panel>

</h:form>

</h:body>

</html>

Sledi kod JSF datoteke potvrda.xhtml:

47
Poglavlje 4 Vežba 6 - JSF biblioteke komponenata

<?xml version='1.0' encoding='UTF-8' ?>


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://xmlns.jcp.org/jsf/html"
xmlns:ace="http://www.icefaces.org/icefaces/components">
<h:head>
<title>Stranica sa korisnickim podacima</title>

</h:head>
<h:body>
<ace:panel header="Podaci o korisniku">
<h:panelGrid columns="2"
columnClasses="rightalign-bold,leftalign">
<h:outputText value="Titula:"/>
${registrationBean.titula}
<h:outputText value="Ime:"/>
${registrationBean.ime}
<h:outputText value="Prezime:"/>
${registrationBean.prezime}
<h:outputText value="Starost:"/>
${registrationBean.starost}
<h:outputText value="Email adresa:"/>
${registrationBean.email}
</h:panelGrid>
</ace:panel>
</h:body>
</html>

ZADATAK 1 - JAVA KLASE - CDI I VALIDATOR


Slede rešenja za klasu CDI zrna i klasu za validaciju unete email adrese
u formi.

Klasa RegistrationBean.java je priložena sledećim listingom:

package com.metropolitan.IceFaces.vezba6;

/**
*
* @author Vladimir Milicevic
*/
import javax.enterprise.context.RequestScoped;
import javax.inject.Named;

@Named
@RequestScoped
public class RegistrationBean {

private String titula;

48
Poglavlje 4 Vežba 6 - JSF biblioteke komponenata

private String ime;


private String prezime;
private Integer starost;
private String email;

public String getTitula() {


return titula;
}

public void setTitula(String titula) {


this.titula = titula;
}

public String getIme() {


return ime;
}

public void setIme(String ime) {


this.ime = ime;
}

public String getPrezime() {


return prezime;
}

public void setPrezime(String prezime) {


this.prezime = prezime;
}

public Integer getStarost() {


return starost;
}

public void setStarost(Integer starost) {


this.starost = starost;
}

public String getEmail() {


return email;
}

public void setEmail(String email) {


this.email = email;
}

Klasa EmailValidator.java je priložena sledećim listingom:

package com.metropolitan.IceFaces.vezba6;

/**
*

49
Poglavlje 4 Vežba 6 - JSF biblioteke komponenata

* @author Vladimir Milicevic


*/
import java.util.regex.Matcher;
import java.util.regex.Pattern;
import javax.faces.application.FacesMessage;
import javax.faces.component.UIComponent;
import javax.faces.component.html.HtmlInputText;
import javax.faces.context.FacesContext;
import javax.faces.validator.FacesValidator;
import javax.faces.validator.Validator;
import javax.faces.validator.ValidatorException;

@FacesValidator(value = "emailValidator")
public class EmailValidator implements Validator {

@Override
public void validate(FacesContext context, UIComponent uiComponent, Object
value) throws ValidatorException {
Pattern pattern = Pattern.compile("\\w+@\\w+\\.\\w+");
Matcher matcher = pattern.matcher(
(CharSequence) value);
HtmlInputText htmlInputText
= (HtmlInputText) uiComponent;
String label;

if (htmlInputText.getLabel() == null
|| htmlInputText.getLabel().trim().equals("")) {
label = htmlInputText.getId();
} else {
label = htmlInputText.getLabel();
}

if (!matcher.matches()) {
FacesMessage facesMessage;
facesMessage = new FacesMessage(label
+ ": Email adresa nije korektna");

throw new ValidatorException(facesMessage);


}
}

INDIVIDUALNA VEŽBA
Probajte sami

Koristeći literaturu i stečena znanja, pokušajte prethodni zadatak da realizujete primenom:

1. PrimeFaces biblioteke komponenata;


2. RichFaces biblioteke komponenata.

50
Poglavlje 5

Domaći zadatak 6

ZADATAK 1
Izrada domaćeg zadatka broj 6.

Primenom neke od obrađenih JSF biblioteka komponenata rešiti sledeći zadatak:

• Glavna stranica sadrži sledeći formu za unos i potvrdu korisničkog imena i lozinke. Primer
izgleda forme dat je sledećom slikom:

Slika 5.1 Primer izgleda forme

• Unošenjem podataka, veb pregledač će vas pitati da li želite da Vam sačuva podatke
(sledeća slika):

Slika 5.2 Snimanje ili ažuriranje registracije

• U slučaju da se ne podudaraju vrednosti za "Lozinka" i "Potvrdite lozinku" prikazati


odgovarajuće obaveštenje, kao na primer:

51
Poglavlje 5 Domaći zadatak 6

Slika 5.3 Lozinka i potvrda se ne podudaraju

• Kreirati odgovarajuće CDI zrno za podatke forme i u njemu definisati ograničenja po


pitanju minimalne i maksimalne dužine korisničkog imena i lozinke;
• Ispunjeni zadaci se boduju, u zavisnosti od stepena realizacije, do 50% od ukupnog broja
predviđenih poena;
• Dodati po vlastitom izboru sadržaj u veb aplikaciju (originalnost i kompleksnost
realizovanog se posebno boduje i nosi do 50% od predviđenog broja bodova)

Primer zadatka, koji može biti od koristi, priložen je u dodatnim materijalima Shared
Resources uz domaće zadatke. Domaći zadatak ne sme da budeprosta kopija ovog zadatka,
ali može da se oslanja na njega.

52
Poglavlje 6

Zaključak

ZAKLJUČAK
Lekcija se bavila primenom korisnih JSF biblioteka komponenata

Lekcija je nastavila izlaganje o JSF stranicama u odnosu na prethodnu lekciju koja se bavila
razvojem veb aplikacija primenom standardnih JSF komponenata. Posebno je u ovoj lekciji
istaknuto da JSF ima jednu veoma dobru i moćnu osobinu - proširivost. JSF tehnologija
dozvoljava programerima da razvijaju vlastite JSF komponente pa je u tu svrhu u lekciji bilo
govora o nekoliko poznatih JSF biblioteka komponenata koje u velikoj meri olakšavaju razvoj
veb aplikacija. Lekcija se, upravo, fokusirala na tri najpoznatije i najpopularnije biblioteke JSF
dokumenata:

• PrimeFaces;
• ICEfaces;
• RichFaces.

Posebno, a u saglasnosti sa prethodno navedenim, lekcija je detaljno obradila sledeće teme,


uz obavljanje pratećih zadataka:

• Primena PrimeFaceskomponenata u JSF aplikacijama, podešavanje biblioteke razvojnog


okruženja i demonstracija primerom;
• Primena IceFaces komponenata u JSF aplikacijama, podešavanje biblioteke razvojnog
okruženja uz preuzimanje datoteka za podršku i demonstracija primerom;
• Primena RichFaces komponenata u JSF aplikacijama, podešavanje biblioteke razvojnog
okruženja uz preuzimanje datoteka za podršku i demonstracija primerom.

Savladavanjem ove lekcije studenti su stekli kompletniju sliku o primeni JSF stranica u Java
veb aplikacijama.

LITERATURA
Za pripremanje lekcije korišćena je najnovija literatura.

1. Eric Jendrock, Ricardo Cervera-Navarro, Ian Evans, Kim Haase, William Markito. 2014.
Java Platform, Enterprise Edition The Java EE Tutorial, Release 7, ORACLE
2. David R. HeffelFinger. 2015. Java EE7 Develpomnet With NetBeans 8, PACK Publishing
3. Yakov Fain. 2015. Java 8 programiranje, Kombib (Wiley)
4. Josh JUneau. 2015. Java EE7 Recipes, Apress
5. https://www.tutorialspoint.com/jsf/

53
Poglavlje 6 Zaključak

6. https://www.tutorialspoint.com/jpa/

54

You might also like