Professional Documents
Culture Documents
SI1P1 2004
1/15
ta je JSF?
Skup Web-baziranih GUI kontrola i povezanih obrada? JSF omoguava veliki broj HTML-orijentisanih GUI kontrola, j d k t l zajedno sa kodom koji obrauje njihove dogaaje. k d k ji b j jih d j Nezavisan GUI kontrolni framework? JSF imaju mogunost da generiu i grafike kontrole koje nisu HTML, koje koriste protokole koji nisu HTTP U odnosu na Struts? Kao i Struts, JSF se moe koristiti kao MVC framework za Struts generisanje HTML formi, validaciju njihovih vrednosti, realizaciju poslovne logike i prikazivanje rezultata. Koja od navedenih je najvanija osobina JSF? Odgovor zavisi od naina upotrebe, ali razlozi 1 i 3 su j p najei za upotrebu JSF.
SI1P1 2004 2/15
ta je JSF?
Glavna odlika ove tehnologije je da se sastoji od sledeih delova:
skup ugraenih ulazno-izlaznih komponenti dogaajima voen (event driven) programski model, sa opcijama za obradu i reagovanje na dogaaje g j g j model komponenti koji omoguava programerima serverske strane razvoj dodatnih komponenti
Neke od JSF komponenti su jednostavne, kao na primer ulazna p j polja ili dugmad. Druge su dosta sofisticiranije, na p g g j , primer tabele podataka i stabla. JSF sadri sav potreban kod za obradu dogaaja i organizaciju komponenti. Aplikativni programeri mogu da zanemare sve nepotrebne detalje i da se usredsrede na sam razvoj aplikacione logike. Takoe, treba napomenuti da je JSF danas deo Java EE standarda, to znai da je ukljuena u svaki Java EE aplikacioni server, i da se moe j d d jednostavno dodati na Web servere, kao t d d ti W b k to je Jakarta Tomcat. Tada je potrebno koristiti i dodatne JSF biblioteke (videti na p //j j http://javaserverfaces.dev.java.net
SI1P1 2004 3/15
SI1P1 2004
6/15
Nedostaci JSF
Potrebno vie vremena za uenje Da bi se realizovao MVC pristup sa standardnom naredbom RequestDispatcher, potrebno je znati samo standardni JSP i servlet API D bi se realizovao MVC pristup t d d i l t API. Da li i t pomou JSF frameworka, potrebno je znati standardni JSP i servlet API i veliki i sloeni framework koji je otprilike jednak po veliini sa osnovnim sistemom. O j nedostatak dolazi do lii i i i t Ovaj d t t k d l i d izraaja posebno kod malih projekata, kratkih rokova, i manjeg iskustva razvojnog tima. Mogue je da se provede isto i t vremena uei JSF k lik i za realizaciju samog sistema. i koliko li ij i t Nedovoljna dokumentacija U poreenju sa standardnim servlet i JSP API, JSF ima samo nekoliko online resursa, a mnogi poetnici e smatrati da je online Apache dokumentacija konfuzna i loe organizovana. Takoe, mnogo manje knjiga postoji o ovoj tehnologiji, nego o servletima i JSP.
SI1P1 2004
8/15
Nedostaci JSF
Manje transparentno Sa JSF aplikacijama, dosta vie stvari se deava u p pozadini, nego kod uobiajenih Java-based Web aplikacija. , g j p j Kao krajni rezultat, JSF aplikacije su: tee za razumevanje tee za testiranje i optimizaciju i j i i ij Rigidni pristup Navedeno je da je jedna od prednosti JSF ohrabrivanje za korienje MVC pristupa. Iz ovog razloga u okviru JSF je teko koristiti druge pristupe.
SI1P1 2004
9/15
SI1P1 2004
11/15
12/15
/WEB-INF
/classes
SI1P1 2004
/lib
Dokumentacija
API Javadocs http://java.sun.com/j2ee/javaserverfaces/1.1/docs/api/ Tag library dokumenta http://java.sun.com/j2ee/javaserverfaces/1.1/docs/tlddocs/ http://horstmann.com/corejsf/faces-config.html MyFaces Reference http://myfaces.apache.org/ User's Guide, extensions documentation, FAQs, ... Knjige
SI1P1 2004
16/15
SI1P1 2004
17/15
Dodatne mogunosti
jsf-blank-myfaces-minimal j y
Sadri sve potrebne ulaze Ne sadri dodatke
j f bl k S jsf-blank-Sun-RI RI
Sadri sve potrebne ulaze Ne sadri dodatke
SI1P1 2004 18/15
ivotni ciklus
JSF specifikacija definie 6 razliitih faza Faza Restore View vraa stablo komponenti, za stranicu koja je ranije prikazivana, odnosno pravi novo stablo komponenti ako p j prvi p put. Ako j stranica ranije je j se stranica prikazuje p prikazivana, sve komponente se postavljaju na poetno stanje. To znai da JSF automatski postavlja informacije o traenoj formi. Na primer kada korisnik unese i poalje odreene nelegalne podatke, koji se nee propustiti na dalju obradu podatke tokom njihove provere, ulazni podaci se korisniku ponovo prikazuju, tako da korisnik moe da ih ispravi. Ako zahtev ne sadri ulazne podatke, JSF implementacija prelazi na Render Response f fazu. Ovo se d dogaa k d se stranica prikazuje prvi kada i ik j i put. Sledea faza je Apply Request Values. U okviru ove faze JSF implementacija prolazi kroz objekte komponenti u okviru stabla komponenti. Za svaki objekat komponenti se proverava koja mu vrednost pripada i ona mu se dodeljuje. U ovoj fazi se dodaju dogaaji vezani za dugme ili link u red dogaaja.
SI1P1 2004 19/15
ivotni ciklus
U okviru Process Validation poslati stringovi se prvo prebacuju u lokalne vrednosti, koji mogu biti objekti bilo kog tipa. Kada se diznira JSF stranica, mogu se za klijentsku stranicu vezati validatori koji izvravaju proveru korektnosti lokalnih vrednosti. Ako je validacija uspena, JSF ciklus se nastavlja normalno. Kada se desi greka JSF implementacija poziva Render Response fazu direktno, prikazujui ponovo traenu stranicu, tako da se korisniku omogui korektan unos. Moe se prikazati i odgoavarjua poruka, koja korisniku objanjava zato ponovo vidi iste podatke. podatke Kada se izvre konverzije i validacije, pretpostavlja se da je bezbedno promeniti model podataka. Tokom Update Model Values faze, lokalne vrednosti se koriste da bi se promenile vrednosti u Bean-ovima povezanim sa komponentama komponentama. U okviru Invoke Application faze izvrava se metod action() dugmeta ili linka koji je doveo do slanja forme. U ovom metodu se mogu izvriti dodatne aplikacione obrade. Takoe, tu se generie izlazni string, koji se lj delovima odgovornim za navigaciju, gde se izvrava poziv alje d l i d i i ij d i i nove stranice. Na kraju, Render Response faza dekodira odgovor i alje ga klijentu. Kada korisnik sa nove stranice poalje novu formu, klikne na link ili na p j , 20/15 SI1P1 drugi nain generie novi zahtev, startuje se novi ciklus 2004
ivotni ciklus
SI1P1 2004
21/15
ivotni ciklus
Za realizaciju web aplikacija JSF pojednostavljuje razvojni proces obezbeujui komponentnocentrian pristup razvoju java web user intreface-a. Glavne komponente JSF-a su: API koji omoguava predstavljanje UI komponenti i manipulisanje njihovim stanjima upravljanje stanjima, dogaajima, validacije na strani servera, konverziju podataka, definisanje navigacije izmeu stranica, internacionalizaciju. i t i li ij Dve JSP tag biblioteke za predstavljanje UI komponenti u okviru JSP strane i za povezivanje komponenti sa serverskim objektima.
SI1P1 2004 22/15
ivotni ciklus
Korisniki interfejs koji je kreiran pomou JSF tehnologije (myUI ) se izvrava na serveru i renderuje nazad klijentu.
tagove. Ona prikazuje UI komponente koristei tagove definisane JavaServer Faces tehnologijom. UI za web aplikaciju (myUI) manipulie objektima koje koristi JSP strana. Ovi objekti ukljuuju:
UI component objekte koji se mapiraju na tag-ove na JSP strani Event lintener-e, validator-e, i converter-e koji su registrovani na komponente SI1P1 2004 Objekte koji enkapsuliraju podatke i funkcionalnosti komponente specifine za aplikaciju
23/15
ivotni ciklus
JSF framework prati Model View Controller (MVC) pattern to Model-View-Controller JSF aplikacije ini dosta prilagodljivijm i pogodnijim za rad user-interface kod (View) je razdvojen od aplikacionih podataka i logike (Model). JSF servlet (Controller) upravlja svom korisnikom interakcijom sa aplikacijom. On priprema JSF kontekst koji omoguava stranicama pristup aplikacionim podacima kao i zatitu od neovlaenog i neadekvatnog pristupa stranicama stranicama.
SI1P1 2004
24/15
SI1P1 2004
29/15
SI1P1 2004
31/15
LengthValidator
validateLength
LongRangeValidator
validateLongRange
SI1P1 2004
SI1P1 2004
34/15
Realizacija navigacije
JSF kontrola toka Osnovni koraci kod upotrebe JSF Statika navigacija Mapiranje u jedan rezultat Dinamika navigacija Mapiranje u vie rezultata
SI1P1 2004
37/15
SI1P1 2004
38/15
SI1P1 2004
39/15
Primer 1
Kopirati jsf-blank jsf blank Preinemovati u jsf-test Identian rad sa Apache MyFaces i Sun RI Originalni URL: http://hostname/jsf-test/register1.faces Kada se forma submituje: Statika stranica (result1.jsp) se prikazuje Statiki rezultat: Nema poslovne logike, bean-ova, ili Java koda Glavni ciljevi Format originalne forme Upotreba faces config.xml fajla faces-config xml
SI1P1 2004 41/15
Ciljevi primera
Poetna forma je u sledeem formatu: j <%@ taglib uri="http://java.sun.com/jsf/core" prefix="f" %> <%@ taglib uri="http://java.sun.com/jsf/html" prefix="h" %> <f:view>
HTML markup p
<h:form> </h:form>
HTML markup p
42/15
43/15
SI1P1 2004
46/15
Koraci 2 i 3: rezultat
Fajl je tomcat dir/webapps/jsf test/register1 jsp tomcat_dir/webapps/jsf-test/register1.jsp URL he http://localhost/jsf-test/register1.faces
SI1P1 2004
47/15
50/15
Rezultat
SI1P1 2004
51/15
Korak 7
<web app> <web-app> <security-constraint> <display-name> p y Prevent access to raw JSP pages that are for JSF pages. </display-name> <web-resource-collection> <web-resource-name>Raw-JSF-JSP-Pages</web-resource-name> <!-- Add url-pattern for EACH raw JSP page --> <url-pattern>/welcome.jsp</url-pattern> <url-pattern>/register1.jsp</url-pattern> <url pattern>/register1 jsp</url pattern> </web-resource-collection> <auth constraint> <auth-constraint> <description>No roles, so no direct access</description> </auth-constraint> </security-constraint> /security constraint SI1P1 2004 </web-app>
53/15
Rezultat
Tomcat rezultuje u zbunjujuim porukama o grekama Ne moe se jednostavno koristiti error-page i errorj p g code za bolji prikaz Status kod 500 se koristi i za druge Tomcat greke
SI1P1 2004
54/15
Glavni ciljevi
Specificirati controller sa #{controllerName.methodName} <h:commandButton value="Sign Me Up! action="#{healthPlanController.register}"/> Metod controller-a vraa stringove koji odgovaraju uslovima Ako se vrati null, forma se ponovo prikazuje Za razliku od Struts-a, controller ne zahteva da nasledi neku posebnu klasu Pomou faces-config.xml deklarisati controller <faces-config> <faces config> <managed-bean> <managed-bean-name>controller name</managed-bean-name> <managed bean class> <managed-bean-class>controller class</managed-bean-class> </managed bean class> <managed-bean-scope>request</managed-bean-scope> </managed-bean> </faces-config> / g Dodati vie ulaza navigation-rule entries u faces-config.xml Jedan za svaki mogui string koji vraa controller Ako se ne pronae odgovarajue poklapanje, form se ponovo prikazuje
SI1P1 2004 56/15
57/15
SI1P1 2004
58/15
SI1P1 2004
59/15
SI1P1 2004
61/15
<faces-config> g <navigation-rule> <from-view-id>/signup.jsp</from-view-id> <navigation-case> <from-outcome>accepted</from-outcome> <to-view-id>/WEB-INF/results/accepted.jsp</to-view-id> </navigation-case> </navigation case> <navigation-case> <from-outcome>rejected</from-outcome> <to view id>/WEB INF/results/rejected.jsp</to view id> <to-view-id>/WEB-INF/results/rejected jsp</to-view-id> </navigation-case> </navigation-rule> SI1P1 2004 </faces-config>
64/15
Rezultat
SI1P1 2004
67/15
Glavni zadaci
Veina konkretnih JSF aplikacija koristi form beanbean ove Kasnije j U ovom primeru se itanje obavlja runo Zahteva odreeni deo Java koda (ExternalContext) ExternalContext se koristi i u konkretnim JSF stranicama Za itanje request header-a Z it j cookie-ija Za itanje ki ij Za postavljanje response header-a ili status kodova Za pristup promenljivama koje nisu povezane sa form bean-om
SI1P1 2004 70/15
SI1P1 2004
73/15
SI1P1 2004
74/15
SI1P1 2004
75/15
76/15
78/15
Rezultat
SI1P1 2004
80/15
SI1P1 2004
82/15
SI1P1 2004
84/15
Koristiti bean-ove
Upotrebiti bean-ove za prikazivanje parametara bean ove zahteva Deklarisat bean-ove u faces-config.xml g Prikaz propertie-ija bean-a Standardni JSF pristup JSP 2.0 expression jezik Koristiti properties fajlove S d d i upiti/stringovi Standardni i i/ i i Internacionalizacija sadraja
SI1P1 2004
86/15
SI1P1 2004
87/15
88/15
89/15
Glavni zadaci
Napraviti property ije bean a za svaki parametar zahteva property-ije bean-a public class MyBean { public String getBlah() {} p public void setBlah(String newValue) {} ( g ){ } } Koristiti faces-config.xml za deklaraciju bean-a <faces-config> <managed-bean> <managed-bean-name>beanName</managed-bean-name> <managed-bean-class>package.MyBean</managed-bean-class> <managed-bean-scope>request</managed-bean-scope> db t / db </managed-bean> </faces-config> Koristiti h:inputText za povezivanje tekst polja sa propertyijem <h:inputText value="#{beanName.propertyName}"/> Koristiti h:outputText da bi se p p prikazali p p y j bean-a property-iji SI1P1 2004 <h:outputText value="#{beanName.propertyName}"/>
91/15
SI1P1 2004
92/15
93/15
SI1P1 2004
94/15
95/15
96/15
SI1P1 2004
98/15
SI1P1 2004
99/15
public String register() { if ((email == null) || (( ) (email.trim().length() < 3) || (email.indexOf("@") == -1)) { suggestion = SuggestionUtils.getSuggestionBean(); return("bad-address"); } else if ((password == null) || (password.trim().length() < 6)) { suggestion = SuggestionUtils.getSuggestionBean(); ti S ti Util tS ti B () return("bad-password"); } else { return( success ); return("success"); } } }
SI1P1 2004
101/15
103/15
SI1P1 2004
104/15
105/15
Rezultat
SI1P1 2004
106/15
107/15
Rezultat
SI1P1 2004
108/15
Rezultat
SI1P1 2004
110/15
Mogue alternative
Koristiti JSP 2 0 EL 2.0 Ako izlazne stranice samo prikazuju property-ije bean-a ( (ne obavljaju operacije sa formom ili koriste elemente j j p j forme): Zato i f:view i povezana taglib deklaracija? Zato koristiti h:outputText i odgovarajuu taglib deklaraciju, kada je upotreba JSP 2.0 EL jednostavnija? Ako se koristi JSP 2 0 EL mora se koristiti: 2.0 EL, JSP 2.0 okruenje (na primer, Tomcat 5, a ne Tomcat 4) Koristiti JSP 2.0 deklaracija u okviru web.xml (kasnije) j ( j )
SI1P1 2004
112/15
SI1P1 2004
115/15
Mogu se koristiti bilo gde u okviru JSP stranice Ne zahtevaju taglib deklaraciju Koriste se na serverima koji podravaju JSP 2.0 WebLogic 9, Tomcat 5, ... W bL i 9 T t5 Koriste ${blah} Prikazuju samo izlazne vrednosti Pristupaju bean-ovima definisanim u okviru zahteva, sesije ili aplikacije
JSP 2 0 EL 2.0
117/15
118/15
Primer TestBean
SI1P1 2004
119/15
Primer faces-config.xml
<?xml version= 1.0 encoding='UTF 8'?> version='1 0' encoding= UTF-8 ?> <!DOCTYPE ...> g <faces-config> <managed-bean> <managed-bean-name>testBean</managed-beanname> <managed-bean-class> coreservlets.TestBean </managed-bean-class> <managed-bean-scope>request</managed-beanscope> </managed-bean> ... </faces-config>
SI1P1 2004
120/15
Primer bean-properties.jsp
<%@ taglib uri="http://java sun com/jsf/core" prefix="f" %> uri= http://java.sun.com/jsf/core prefix= f <%@ taglib uri="http://java.sun.com/jsf/html" prefix="h" %> <f:view> ... <BODY> <TABLE BORDER=5 ALIGN="CENTER"> <TR><TH CLASS="TITLE">Accessing Bean Properties</TH></TR> </TABLE> <UL> <LI>Creation time: <h:outputText value="#{testBean.creationTime}"/> <h t tT t l "#{t tB ti Ti }"/> <LI>Greeting: <h:outputText value="#{testBean.greeting}"/> <LI>Random number: <h:outputText value="#{testBean.randomNumber}"/> </UL> / / </BODY></HTML> SI1P1 2004 </f:view>
121/15
Primer web.xml
<?xml version="1.0" encoding="ISO-8859-1"?> version 1.0 encoding ISO 8859 1 ?> <web-app xmlns="http://java.sun.com/xml/ns/j2ee" ... version="2.4"> ... <security-constraint> <display-name> Prevent access to raw JSP pages that are for JSF p g p g pages. </display-name> <web-resource-collection> <web-resource-name>Raw-JSF-JSP-Pages</web-resource-name> <url-pattern>/bean-properties.jsp</url-pattern> <url pattern>/bean properties jsp</url pattern> ... </web-resource-collection> <auth-constraint> <description>No roles, so no direct access</description> </auth-constraint> </security-constraint> </web-app>
SI1P1 2004 122/15
Primer rezultat
SI1P1 2004
123/15
SI1P1 2004
124/15
Primer NameBean
SI1P1 2004
125/15
Primer CompanyBean
SI1P1 2004
126/15
Primer EmployeeBean
SI1P1 2004
127/15
Primer faces-config.xml
<faces-config> <faces config> ... <managed bean> <managed-bean> <managed-bean-name>employee</managed-bean-name> <managed-bean-class> g coreservlets.EmployeeBean </managed-bean-class> <managed-bean-scope>request</managed-bean-scope> </managed-bean> ... </faces-config>
SI1P1 2004 128/15
Primer nested-properties.jsp
<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f" %> uri http://java.sun.com/jsf/core prefix f <%@ taglib uri="http://java.sun.com/jsf/html" prefix="h" %> <f:view> ... <BODY> BODY <TABLE BORDER=5 ALIGN="CENTER"> <TR><TH CLASS="TITLE">Using Nested Bean Properties</TH></TR> </TABLE> / <UL> <LI>Employee's first name: <h:outputText value="#{employee.name.firstName}"/> <LI>Employee's last name: <h:outputText value="#{employee.name.lastName}"/> <LI>Name of employee's company: <h:outputText value="#{employee.company.companyName}"/> <LI>Business area of employee's company: <h:outputText value="#{employee.company.business}"/> </UL> </BODY></HTML> 129/15 SI1P1 2004 </f:view>
Primer web.xml
<?xml version 1.0 encoding="ISO-8859-1"?> version="1.0" encoding ISO 8859 1 ?> <web-app xmlns="http://java.sun.com/xml/ns/j2ee" ... version="2.4"> ... <security-constraint> <display-name> Prevent access to raw JSP pages that are for JSF pages. p g p g </display-name> <web-resource-collection> <web-resource-name>Raw-JSF-JSP-Pages</web-resource-name> <url-pattern>/nested-properties.jsp</url-pattern> <url pattern>/nested properties jsp</url pattern> ... </web-resource-collection> <auth-constraint> <description>No roles, so no direct access</description> </auth-constraint> </security-constraint> </web-app>
SI1P1 2004 130/15
Primer rezultat
SI1P1 2004
131/15
Primer EmployeeBean
package coreservlets; public class EmployeeBean { p private NameBean name; ; private CompanyBean company; ... public String processEmployee() { bli St i E l () if (Math.random() < 0.5) { return( accept ); return("accept"); } else { return("reject"); } } }
SI1P1 2004 133/15
Primer faces-config.xml
<faces config> <faces-config> ... <managed-bean> <managed-bean-name>employee</managed-bean-name> <managed bean class> <managed-bean-class> coreservlets.EmployeeBean </managed-bean-class> <managed-bean-scope>request</managed-bean-scope> </managed bean> </managed-bean> ... <navigation-rule> <from-view-id>/submitting-properties.jsp</from-view-id> <navigation-case> a gat o case <from-outcome>accept</from-outcome> <to-view-id>/WEB-INF/results/accept.jsp</to-view-id> </navigation-case> <navigation-case> g <from-outcome>reject</from-outcome> <to-view-id>/WEB-INF/results/reject.jsp</to-view-id> </navigation-case> / g </navigation-rule> </faces-config> SI1P1 2004
134/15
Primer web.xml
<?xml version="1.0" encoding="ISO-8859-1"?> version 1.0 encoding ISO 8859 1 ?> <web-app xmlns="http://java.sun.com/xml/ns/j2ee" ... version="2.4"> ... <security-constraint> <display-name> Prevent access to raw JSP pages that are for JSF p g p g pages. </display-name> <web-resource-collection> <web-resource-name>Raw-JSF-JSP-Pages</web-resource-name> <url-pattern>/submitting-properties.jsp</url-pattern> <url pattern>/submitting properties jsp</url pattern> ... </web-resource-collection> <auth-constraint> <description>No roles, so no direct access</description> </auth-constraint> </security-constraint> </web-app>
SI1P1 2004 135/15
Primer web.xml
SI1P1 2004
136/15
Primer rezultat
SI1P1 2004
141/15
Pristup kolekcijama
Ekvivalentne forme #{name.property} #{name["property"]} #{name[ property ]} Razlozi za upotrebu notacije nizova Za pristup nizovima, listama, i drugim kolekcijama p p , , g j Da bi se izraunalo ime property-ija u trenutku zahteva. #{name1[name2]} (nema navodnika oko name2) Da bi se koristila imena koja su nelegalna kao imena Java promenljivih #{foo[ bar-baz ]} #{foo["bar baz"]} #{foo["bar.baz"]}
SI1P1 2004 142/15
Pristup kolekcijama
#{attributeName[entryName]} Mogue je sa Nizovima. Ekvivalentno sa theArray[index] Listama. Ekvivalentno sa th Li t t(i d ) ili theList.set(index, submitted-val) theList.get(index) th Li t t(i d b itt d l Mapama. Ekvivalentno sa theMap.get(key) ili theMap.put(key, submitted-val) submitted val Ekvivalentne forme (za HashMap) #{stateCapitals["maryland"]} #{stateCapitals.maryland} { l l d} Ali sledei izraz nije dozvoljen, jer 2 nije legalno ime za p promenljivu j #{listVar.2}
SI1P1 2004
143/15
Primer PurchaseBean
SI1P1 2004
144/15
Primer PurchaseBean
public String purchaseItems() { isEverythingOK = Utils.doBusinessLogic(this); isEverythingOK = Utils.doDataAccessLogic(this); Utils doDataAccessLogic(this); if (isEverythingOK) { return("success"); ( ); } else { return("failure"); } } }
SI1P1 2004
145/15
Primer Utils
public class Utils { public static boolean doBusinessLogic (PurchaseBean bean) { // Business logic omitted return(Math.random() > 0.1); ( () ); } public static boolean doDataAccessLogic (PurchaseBean bean) { // Database access omitted return(Math.random() > 0.1); t (M th d () 0 1) } }
SI1P1 2004
146/15
Primer faces-config.xml
<faces config> <faces-config> ... <managed-bean> <managed-bean-name>purchases</managed-bean-name> <managed bean class> <managed-bean-class> coreservlets.PurchaseBean </managed-bean-class> <managed-bean-scope>request</managed-bean-scope> </managed bean> </managed-bean> ... <navigation-rule> <from-view-id>/using-collections.jsp</from-view-id> <navigation-case> a gat o case <from-outcome>success</from-outcome> <to-view-id>/WEB-INF/results/success.jsp</to-view-id> </navigation-case> <navigation-case> g <from-outcome>failure</from-outcome> <to-view-id>/WEB-INF/results/failure.jsp</to-view-id> </navigation-case> / g </navigation-rule> </faces-config> SI1P1 2004
147/15
Primer using-collections.jsp
... <h:form> <UL> <LI><B>Cheap Items</B> <OL> <LI><h:inputText value="#{purchases.cheapItems[0]}"/> <LI><h:inputText value #{purchases.cheapItems[1]} /> value="#{purchases.cheapItems[1]}"/> <LI><h:inputText value="#{purchases.cheapItems[2]}"/> </OL> <LI><B>Medium Items</B> ed u te s / <OL> <LI><h:inputText value="#{purchases.mediumItems[0]}"/> <LI><h:inputText p value="#{purchases.mediumItems[1]}"/> <LI><h:inputText value="#{purchases.mediumItems[2]}"/> / </OL>
SI1P1 2004 148/15
Primer using-collections.jsp
<LI><B>Valuable Items</B> <UL> <LI>Low: <h:inputText p value='#{purchases.valuableItems["low"]}'/> <LI>Medium: <h:inputText value='#{purchases.valuableItems["medium"]}'/> <LI>High: <h:inputText value='#{purchases.valuableItems["high"]}'/> l '#{ h l bl It ["hi h"]}'/> </UL> </UL> <h:commandButton value="Purchase" value= Purchase action="#{purchases.purchaseItems}"/> </h:form> ...
SI1P1 2004 149/15
Primer web.xml
<?xml version="1.0" encoding="ISO-8859-1"?> version 1.0 encoding ISO 8859 1 ?> <web-app xmlns="http://java.sun.com/xml/ns/j2ee" ... version="2.4"> ... <security-constraint> <display-name> Prevent access to raw JSP pages that are for JSF p g p g pages. </display-name> <web-resource-collection> <web-resource-name>Raw-JSF-JSP-Pages</web-resource-name> <url-pattern>/using-collections.jsp</url-pattern> <url pattern>/using collections jsp</url pattern> ... </web-resource-collection> <auth-constraint> <description>No roles, so no direct access</description> </auth-constraint> </security-constraint> </web-app>
SI1P1 2004 150/15
Primer rezultat
SI1P1 2004
151/15
153/15
Primer rezultat
SI1P1 2004
154/15
Implicitni objekti
<!DOCTYPE > > <P> <UL> <LI><B>test Request Parameter:</B> ${p ${param.test} } <LI><B>User-Agent Header:</B> ${header["User-Agent"]} <LI><B>JSESSIONID Cookie Value:</B> ${cookie.JSESSIONID.value} <LI><B>Server:</B> ${pageContext.servletContext.serverInfo} </UL> </BODY></HTML> / /
SI1P1 2004 155/15
Operatori
<TABLE BORDER=1 ALIGN="CENTER"> <TR><TH CLASS="COLORED" COLSPAN=2>Arithmetic Operators <TH CLASS="COLORED" COLSPAN=2>Relational Operators p <TR><TH>Expression<TH>Result<TH>Expression<TH>Result <TR ALIGN="CENTER"> <TD>\${3+2-1}<TD>${3+2-1} <TD>\${1<2}<TD>${1<2} <TR ALIGN="CENTER"> <TD>\${"1"+2}<TD>${"1"+2} <TD>\${"a"<"b"}<TD>${"a"<"b"} <TD>\${" "< "b"}<TD>${" "<"b"} <TR ALIGN="CENTER"> <TD>\${1 + 2*3 + 3/4}<TD>${1 + 2*3 + 3/4} <TD>\${2/3 >= 3/2}<TD>${2/3 >= 3/2} <TR ALIGN="CENTER"> <TD>\${3%2}<TD>${3%2} <TD>\${3/4 == 0.75}<TD>${3/4 == 0.75}
SI1P1 2004 156/15
SI1P1 2004
157/15
WEB-INF/classes/ messages1.properties
title=Registration text=Please enter your first name last name name, name, and email address. firstNamePrompt=Enter first name p lastNamePrompt=Enter last name emailAddressPrompt=Enter email address buttonLabel=Register Me
SI1P1 2004
158/15
signup1.jsp (.faces)
<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f" %> <%@ taglib uri="http://java.sun.com/jsf/html" prefix="h" %> <f:view> <f:loadBundle basename messages1 var="msgs"/> basename="messages1" var msgs /> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD><TITLE> <h:outputText value #{msgs.title} /> value="#{msgs.title}"/> </TITLE> <LINK REL="STYLESHEET" HREF="./css/styles.css" TYPE="text/css"> te t/css </HEAD> <BODY> <CENTER> <TABLE BORDER=5> <TR><TH CLASS="TITLE"> <h:outputText value="#{msgs.title}"/></TH></TR> </TABLE> <BR> <h:outputText value="#{msgs.text}"/> SI1P1 2004 <P>
159/15
signup1.jsp (.faces)
<h:form> <h:outputText value="#{msgs.firstNamePrompt}"/>: <h:inputText value="#{person.firstName}"/> <BR> <h:outputText value="#{msgs.lastNamePrompt}"/>: p { g p } / <h:inputText value="#{person.lastName}"/> <BR> <h:outputText value="#{msgs emailAddressPrompt}"/>: value= #{msgs.emailAddressPrompt} />: <h:inputText value="#{person.emailAddress}"/> <BR> <h:commandButton value="#{msgs.buttonLabel}" action="#{person.doRegistration}"/> {p g } / SI1P1 2004 </h:form> </CENTER></BODY></HTML>
160/15
Stringovi sa parametrima
1. Kreira 1 K i se .properties fajl u okviru WEB INF/ l ti f jl k i WEB-INF/classes Vrednosti sadre {0}, {1}, {2}, ... N.p., nekoIme blah {0} blah {1} nekoIme=blah 2. Uitati fajl sa f:loadBundle kao i ranije basename definie osnovno ime fajla var definie promenljivu koja e sadrati rezultat 3. Izlazne poruke koriste h:outputFormat vrednost definie osnovnu poruku ugneene f:param daju vrednosti za zamenu N.p.: <h:outputFormat value="#{msgs.someName}"> <f:param value="value for 0th entry"/> <f:param value="value for 1st entry"/> value value entry /> </h:outputFormat>
SI1P1 2004
161/15
messages2.properties
title=Registration firstName=first name lastName=last name emailAddress=email address text=Please enter your {0}, {1}, and {2}. prompt=Enter {0} buttonLabel=Register Me g
SI1P1 2004
162/15
signup2.jsp (.faces)
<%@ taglib uri="http://java sun com/jsf/html" prefix="h" %> uri="http://java.sun.com/jsf/html" <f:view locale="#{facesContext.externalContext.request.locale}"> <f:loadBundle basename="messages2" var="msgs"/> ... <TABLE BORDER=5> <TR><TH CLASS="TITLE"> <h:outputText value="#{msgs.title}"/></TH></TR> </TABLE> <BR> <h:outputFormat value="#{msgs.text}"> <f:param value="#{msgs.firstName}"/> <f:param value="#{msgs.lastName}"/> <f:param value="#{msgs.emailAddress}"/> </h:outputFormat> <P> <h:form> <h:outputFormat value="#{msgs.prompt}"> <f:param value="#{msgs.firstName}"/> </h:outputFormat>: /h t tF t SI1P1 2004 <h:inputText value="#{person.firstName}"/>
163/15
signup2.jsp (.faces)
<BR> BR <h:outputFormat value="#{msgs.prompt}"> <f:param value="#{msgs.lastName}"/> </h:outputFormat>: /h <h:inputText value="#{person.lastName}"/> <BR> <h:outputFormat value="#{msgs.prompt}"> <f:param value="#{msgs.emailAddress}"/> </h:outputFormat>: <h:inputText value="#{person.emailAddress}"/> <BR> <h:commandButton value="#{msgs.buttonLabel}" action="#{person.doRegistration}"/> </h:form> / SI1P1 2004 </CENTER></BODY></HTML> </f:view>
164/15
Obrada dogaaja
Postoje d P t j dve varijante dogaaja koje generii ij t d j k j ii korisnici Dogaaji koji strartuju neki back-end proces g j j j p Dogaaji koji utiu samo na format korisnikog interfejsa JSF izvrava podelu koda koji izvrava ove operacije na action controllers i event listeners Action controllers obrauju slanje glavne forme Okidaju se posle popunjavanja bean-ova j p p p j j Okidaju se posle validacione logike Vraa stringove koji utiu na dalju navigaciju E ent listene s ob a j ulazno izlazne dogaaje Event listeners obrauju la no i la ne Uobiajeno je da se okidaju pre popunjavanja bean-ova Uob aj o j b ga aju a da o u og u Uobiajeno je da izbegavaju validacionu logiku Nikada direktno ne utiu na navigaciju
SI1P1 2004
165/15
SI1P1 2004
166/15
Upotreba ActionListener-a
Neko dugme treba da poalje formu i pokrene backend procese Koristi se <h:commandButton action= ..." ...> action=" > Druga vrsta utie samo na UI Koristi se <h:commandButton actionListener="..." .../> / Uobiajeno je da se ovaj proces izvrava pre nego to se popune bean-ovi i posebno pre validacije Veina formi je nekompletno popunjeno kada se UI podeava Zato se korsiti atribut "immediate" da bi se naznailo immediate izvravanje pre navedenih operacija <h:commandButton actionListener="... immediate="true" .../>
SI1P1 2004
167/15
Upotreba ActionListener-a
Listeneri su obino u f Li t i bi form b bean kl i klasi Mogu biti i u odvojenoj klasi ako se koristi FacesContext da bi se dobio request ili session objekat i potraio form q j p bean eksplicitno Definiu ActionEvent kao argument N Nema vraanja rezultata (nije St i k k d action j lt t ij String kao kod ti controllers) ActionEvent je u javax.faces.event j j ActionEvent ima getComponent metod koji definie UIComponent reference Iz UIComponent, moe se dobiti component ID, renderer, UIComponent ID renderer i druge informacije niskog nivoa public void someMethod(ActionEvent event) { doSomeSideEffects(); }
SI1P1 2004
168/15
Primer
Svaka S k UI k t l ima "di bl d" property k ji je po kontrola i "disabled" t koji j default false Treba koristiti button za koji e biti vezan j ActionListener da bi se zabranila ili odobrila upotreba odreene kontrole Primer Prihvata promenljive name i job title da bi ih prikazao Kreira polja za potvrdu da bi korisnik selektovao foreground i background boje f d b k db j <h:selectOneMenu value="..." disabled="..." ...> <f:selectItems value="..."/> value ... /> </h:selectOneMenu> Vrednost za f:selectItems mora da bude SelectItem niz Postavie se dugme koje zabranjuje ili dozvoljava rad sa poljima za potvrdu
SI1P1 2004
169/15
I korak
SI1P1 2004
171/15
I korak
... private String name = ""; private String jobTitle = ""; ; ... public String getName() { return(name); } public void setName(String name) { this.name = name; } public String getJobTitle() { return(jobTitle); } public void setJobTitle(String jobTitle) { this.jobTitle = jobTitle; }
SI1P1 2004 172/15
II korak
SI1P1 2004
Nove mogunosti Koristiti h:selectOneMenu da bi se formirao combobox Koristiti f:selectItems da bi se popunila lista Koristiti h:commandButton sa actionListener -om Napisati event listener kod koji se izvrava kada se klikne na dugme Promenit labelu (vrednost) dugmeta u zavisnosti od toga ta dugme radi Primer koda <h:commandButton value="#{someBean.buttonLabel}" actionListener="#{someBean.doSideEffect}" immediate="true"/>
173/15
II korak
<h:form> h:form ... Foreground color: <h:selectOneMenu value="#{resumeBean.fgColor}" disabled="#{!resumeBean.colorSupported}"> disabled "#{!resumeBean colorSupported}"> <f:selectItems value="#{resumeBean.availableColors}"/> </h:selectOneMenu> <BR> Background color: <h:selectOneMenu value="#{resumeBean.bgColor}" disabled="#{!resumeBean.colorSupported}"> <f:selectItems value= #{resumeBean.availableColors} /> value="#{resumeBean availableColors}"/> </h:selectOneMenu><BR> <h:commandButton value="#{resumeBean.colorSupportLabel}" actionListener="#{resumeBean.toggleColorSupport}" immediate="true"/> ... </h:form>
SI1P1 2004 174/15
III korak
SI1P1 2004
175/15
III korak
Isti pristup kao i u prethodnom primeru <h:form> ... Name: <h:inputText value="#{resumeBean.name}"/><BR> Job Title: <h:inputText value="#{resumeBean.jobTitle}"/><P> <h:commandButton value="Show Preview" action="#{resumeBean.showPreview}"/> </h:form>
SI1P1 2004
176/15
IV korak
Boni efekti Logiki flag povezan sa dugmetom se postavlja ako je boja p podrana, ali i deaktivira oba combobox-a , ... public void toggleColorSupport(ActionEvent event) { isColorSupported = !isColorSupported; }
SI1P1 2004
177/15
IV korak
Isti pristup kao u prethodnom primeru Kod za kontrolu je unutar form bean-a (ResumeBean) Proverava se da li su unete boje razliite ... public String showPreview() { if (isColorSupported && fgColor.equals(bgColor)) { return("same-color"); } else { return("success"); } }
SI1P1 2004 178/15
Poetni rezultat
SI1P1 2004
179/15
Korak 5
Deklarisanje bean-a <faces-config> <managed-bean> <managed-bean-name>resumeBean</managedbean name> bean-name> <managed-bean-class> coreservlets.ResumeBean </managed-bean-class> <managed-bean-scope>session</managed-beanscope> </managed-bean> </faces-config>
SI1P1 2004
180/15
Korak 5
Specificiranje pravila navigacije <faces-config> <navigation-rule> <from-view-id>/customize.jsp</from-view-id> <navigation-case> <navigation case> <from-outcome>same-color</from-outcome> <to-view-id>/WEB-INF/results/same-color.jsp</to-view-id> </navigation-case> </navigation case> <navigation-case> <from-outcome>success</from-outcome> <to-view-id>/WEB-INF/results/show-preview.jsp</to-view-id> <t i id>/WEB INF/ lt / h i j </t i id> </navigation-case> </navigation-rule> </faces-config> /f fi 181/15 SI1P1 2004
Korak 6
WEB INF/results/same color.jsp WEB-INF/results/same-color jsp <%@ taglib uri="http://java.sun.com/jsf/core" prefix="f" %> <%@ taglib uri="http://java.sun.com/jsf/html" prefix="h" %> <f:view> <!DOCTYPE > <HTML> You chose "<h:outputText value="#{resumeBean.fgColor}"/>" as both the foreground and background color color. <P> You don't deserve to get a job, but I suppose we will let you <A HREF="customize.faces">try again</A>. ill l t HREF " t i f ">t i </A> </HTML> </f:view> /f i 182/15 SI1P1 2004
Korak 6
WEB INF/results/show preview.jsp WEB-INF/results/show-preview.jsp <%@ taglib uri="http://java.sun.com/jsf/core" prefix="f" %> <%@ taglib uri="http://java.sun.com/jsf/html" prefix="h" %> <f:view> <!DOCTYPE > > <HTML> <BODY TEXT="<h:outputText value="#{resumeBean.fgColor}"/>" p { g } BGCOLOR="<h:outputText value="#{resumeBean.bgColor}"/>"> <H1 ALIGN="CENTER"> <h:outputText value="#{resumeBean.name}"/><BR> <SMALL><h:outputText value= #{resumeBean.jobTitle} /> value="#{resumeBean jobTitle}"/> </SMALL></H1> Experienced <h:outputText value="#{resumeBean.jobTitle}"/> seeks challenging position doing something. <H2>Employment History</H2> Blah, blah, blah, blah. Yadda, yadda, yadda, yadda. </HTML> SI1P1 2004 </f:view>
183/15
Korak 6
SI1P1 2004
184/15
Korak 7
<web app> <web-app> <security-constraint> <display-name> p y Prevent access to raw JSP pages that are for JSF pages. </display-name> <web-resource-collection> <web-resource-name>Raw-JSF-JSP-Pages</web-resourcename> <!-- Add url-pattern for EACH raw JSP page --> <url-pattern>/customize.jsp</url-pattern> <url-pattern>/customize jsp</url-pattern> </web-resource-collection> <auth-constraint> <description>No roles, so no direct access</description> </auth-constraint> </security-constraint> </web-app>
SI1P1 2004 185/15
SI1P1 2004
ActionListener je vezan za dugme Forma se automatski alje kada se dugme pritisne ValueChangeListener je povezan za combobox, listbox, radio button, checkbox, textfield, ... Forma se alje automatski Potrebno je dodati JavaScript da bi se forma poslala onclick="submit()" or onchange="submit()" P t ji i nekompatibilnost izmeu N t Postoji k tibil ti Netscape i IE Netscape, Mozilla, i Opera okidaju onchange dogaaj kada se promeni selekcija combobox-a, kada je radio button combobox a, selektovan, ili kada checkbox promeni vrednost Internet Explorer okida dogaaj nakon promene selekcije, ali samo kada neka druga GUI kontrola prihvati fokus li k d k d k t l ih ti f k
186/15
h:selectOneMenu koristi f:selectItems da bi dobio listu combobox ulaza Koristi se checkbox da bi se pozvao p ValueChangeListener Postoje dve definisane liste Imena b j boja RGB vrednosti
SI1P1 2004
188/15
JSF koraci
1. 1 Kreira se bean sa property ijima za podatke sa property-ijima forme 2. Kreira se ulazna forma pomou f:view i h:form p 3. Specificirati action controller metod pomou action atributa od h:commandButton 4. Kreiraju se action controller-i i drugi tipovi event i j i ll i d i i i listener-a 5. Promeniti faces-config.xml da bi se deklarisali form faces config.xml bean i pravila navigacije 6. Kreirati JSP stranice za svaki return uslov 7. Zatiti pristup JSP stranicama
189/15
SI1P1 2004
Korak 1
SI1P1 2004
190/15
Koraci 2 i 3
Nove mogunosti Koristiti h:selectBooleanCheckbox da bi se kreirao checkbox Koristiti valueChangeListener za realizaciju event listener koda Koristiti onclick da bi se automatski slala fomra kada checkbox menja vrednosti h kb j d i Primer <h:selectBooleanCheckbox valueChangeListener="#{resumeBean.changeColorMo de}" } onclick="submit()" immediate="true"/>
SI1P1 2004 191/15
Korak 4
Kada je checkbox selektovan, menjaju se izbori boja selektovan da bi se dobile RGB vrednosti umesto imena boja public void changeColorMode(ValueChangeEvent event) { boolean flag = b l fl ((Boolean)event.getNewValue()).booleanValue(); setUsingColorNames(!flag); }
SI1P1 2004
192/15
Rezultati
SI1P1 2004
193/15
controller-a
SI1P1 2004
194/15
SI1P1 2004
195/15
Korak 1
package coreservlets; ... public class ColorBean { private String bgColor = "WHITE"; public String getBgColor() { return(bgColor); } public void setBgColor(String bgColor) { this.bgColor = bgColor; }
SI1P1 2004
196/15
Korak 2
Koristiti h:commandButton sa slikom umesto vrednosti Rezultat je mapa slike na sereverskoj strani j p j Kod <h:commandButton image="images/GrayBar.gif" actionListener="#{colorBean.selectGrayLevel}" ti Li t "#{ l B l tG L l}" action="#{colorBean.showPreview}"/>
SI1P1 2004
197/15
Korak 2
SI1P1 2004
198/15
Korak 3
Koristiti i actionListener i action u okviru istog dugmeta <h:form> ... <h:commandButton image="images/GrayBar.gif" actionListener="#{colorBean.selectGrayLevel}" ti Li t "#{ l B l tG L l}" action="#{colorBean.showPreview}"/> </h:form>
SI1P1 2004
199/15
Korak 3
Listener trai x vrednost i kreira boju public void selectGrayLevel(ActionEvent event) { FacesContext context = FacesContext.getCurrentInstance(); String clientId = event.getComponent().getClientId(context); HttpServletRequest request = (HttpServletRequest)context.getExternalContext().getRequest(); String grayLevelString = request.getParameter(clientId + ".x"); int grayLevel = 220; g y ; try { grayLevel = Integer.parseInt(grayLevelString); } catch(NumberFormatException nfe) {} // Image is 440 pixels, so scale. pixels scale grayLevel = (256 * grayLevel) / 440; String rVal = Integer.toString(grayLevel, 16); setBgColor("#" + rVal + rVal + rVal); } Controller definie izlaznu stranu public String showPreview() { return( success ); return("success"); SI1P1 2004 }
200/15
Korak 5
Declarisanje bean-a <faces-config> ... <managed-bean> <managed-bean-name>colorBean</managed-bean-name> g g <managed-bean-class> coreservlets.ColorBean </managed-bean-class> <managed-bean-scope>request</managed-bean-scope> </managed-bean> </faces-config>
SI1P1 2004 201/15
Korak 5
Specifikacija pravila navigacije <faces-config> <navigation-rule> <from-view-id>/customize-bg.jsp</from-view-id> gj p <navigation-case> <from-outcome>success</from-outcome> <to-view-id> /WEB-INF/results/show-preview2.jsp </to-view-id> </navigation-case> / i i </navigation-rule> </faces-config>
SI1P1 2004 202/15
Korak 6
WEB INF/results/show preview2.jsp WEB-INF/results/show-preview2.jsp <%@ taglib uri="http://java.sun.com/jsf/core" prefix="f" %> <%@ taglib uri="http://java.sun.com/jsf/html" prefix="h" %> <f:view> <!DOCTYPE ...> <HTML> <HEAD><TITLE>Preview of Background Color</TITLE></HEAD> <BODY BGCOLOR="<h:outputText value="#{colorBean.bgColor}"/>"> <H1 ALIGN="CENTER">Preview of Background Color</H1> ALIGN CENTER >Preview Experienced employee seeks challenging position doing something. <H2>Employment History</H2> Blah, blah, blah, blah. Yadda, yadda, yadda, yadda. </HTML> </f:view> /f i 203/15 SI1P1 2004
Rezultat
SI1P1 2004
204/15
Korak 7
<web app> <web-app> <security-constraint> <display-name> p y Prevent access to raw JSP pages that are for JSF pages. </display-name> <web-resource-collection> <web-resource-name>Raw-JSF-JSP-Pages</web-resourcename> <!-- Add url-pattern for EACH raw JSP page --> <url-pattern>/customize.jsp</url-pattern> <url-pattern>/customize jsp</url-pattern> <url-pattern>/customize-bg.jsp</url-pattern> </web-resource-collection> <auth constraint> <auth-constraint> <description>No roles, so no direct access</description> </auth-constraint> </security-constraint> </web-app> SI1P1 2004
205/15
h biblioteka
h:form Ne specificira se ACTION specified Mora da se koristi POST! h:inputText NAME se generise automatski VALUE je u formi #{beanName propertyName} #{beanName.propertyName} h:inputSecret NAME se generise automatski g VALUE se primenjuje samo na izlaz, ne na ulaz h:commandButton Ak ij odgovara atributu ACTION t Akcija d t ib t taga f forme h:outputText Prikazuju se property-iji bean a property iji bean-a
SI1P1 2004 206/15
h biblioteka
Deljeni atributi Ove atribute je mogue koristiti u skoro svim h:blah elementima Nee se ponavljati prilikom opisa svakog elementa Najvie korieni deljeni atributi id Identifikator; koristi se da bi se dodelilo ime elementu, id. elementu tako da moe da mu se pristupi kasnije (n.p., za validaciju) onclick, ondblclick, ... JavaScript obrada dogaaja. Obratiti panju na velika i mala slova, onClick nije b lk l l l k ispravno. styleClass. CSS ime stila. y Oekivani atributi Ovi atributi su oni koji odgovaraju odreenom HTML elementu, n.p. elementu n p size i maxlength za tekst polje
SI1P1 2004
207/15
h:form
Odgovarajui HTML element <FORM > Mogunosti Ne specificira se akcija Atribut enctype - Tip kodiranja. application/x-www-form-urlencoded (default) multipart/form-data target. Frame deo u kome se prikazuje rezultat onsubmit JavaScript kod koji se izvrava pre slanja onsubmit. forme j p j j j Moe da se izvri validacija polja na klijentskoj strani
SI1P1 2004 208/15
h:inputText
Odgovarajui HTML element <INPUT TYPE="TEXT" > Atributi value Odgovarajua vrednost bean-a. value="#{beanName.propertyName}" Koristi se i za inicijalnu vrednost i pri slanju serverskoj komponenti j p j j p valueChangeListener. Koji se metod izvrava kada se alje forma i vrednost ztekst polja je promenjena. onchange. JavaScript koji se izvrava pri promeni vrednosti immediate. Koristi se da pozove validaciju listener-a required. Flag koji definie da li korisnik mora da unese vrednost. Kao je ne unese forma se ponovo prikazuje i prikazuje se poruka o unese, greci. validator. Metod koji izvrava validaciju.
SI1P1 2004 209/15
h:inputSecret
Odgovarajui HTML element <INPUT TYPE="PASSWORD" > Atributi value. Odgovarajua vrednost bean-a. value="#{beanName.propertyName}" Koristi se samo za slanje podataka j p valueChangeListener. Koji se metod izvrava kada se alje forma i vrednost ztekst polja je promenjena. onchange. JavaScript koji se izvrava pri promeni vrednosti immediate. Koristi se da pozove validaciju listener-a required. Flag koji definie da li korisnik mora da unese vrednost. Kao je ne unese forma se ponovo prikazuje i prikazuje se poruka o unese, greci. converter, validator. Metodi koji izvravaju konverziju stringa i validaciju podataka. podataka
SI1P1 2004
210/15
h:commandButton
Odgovarajui HTML element <INPUT TYPE="SUBMIT" > Atributi value. Natpis na dugmetu. esto je statiki string, ali se moe dinamiki menjati action. Metod action controller-a koji se izvrava kada se alje forma. Izvrava se kada svi listener-i zavre svoj posao. posao actionListener. Metod listener-a koji se izvrava kada se alje forma. Izvrava se pre action controller-a.
SI1P1 2004
211/15
SI1P1 2004
212/15
h:commandLink
Odgovarajui HTML element <A HREF="..."> sa povezanim JavaScript kodom koji alje formu kada se link aktivira JavaScript se ubacuje automatski pomou JSF Atributi value Tekst linka esto je statiki string, ali se moe value. linka. string dinamiki menjati action. Metod action controller-a koji se izvrava kada se alje forma Izvrava se kada svi listener i zavre svoj forma. listener-i posao. actionListener. Metod listener-a koji se izvrava kada se alje forma. Izvrava se pre action controller-a. Napomena Mora da se navede u okviru h:form (u ranijim verzijama MyFaces se javljala greka)
SI1P1 2004
213/15
SI1P1 2004
214/15
SI1P1 2004
215/15
SI1P1 2004
216/15
Mogunosti prikaza
h:outputText Prikazuje se bean property ili element kolekcije Vrednosti iz properties fajla se upisuju u kolekciju pomou f:loadBundle Slino bean:write iz Struts-a Atributi styleClass ili style: rezultat je SPAN element escape: vrednost f l j ne korienje filtera za < i > d t false je k i j filt h:outputFormat Prikazuje poruke o greci sa paramtrima Parametri se prosleuju sa f:param
SI1P1 2004 217/15
Validacija
Runa validacija Koriste se string property-iji za bean Sprovede se validacija u setter metodama i/ili action controller-ima Vraa se null da bi se ponovo prikazala forma Kreiraju se odgovarjue poruke o grekama Implicitna automatska validacija Koriste se int double ... bean property iji Ili required int, double, property-iji. required. Sistem ponovo prikazuje formu, ako postoji greka prilikom konverzije Koristi se h:message da se prikae poruka za odreeno polje Eksplicitna validacija Koriste se f:convertNumber, f:convertDateTime, f:validateLength, f:validateDoubleRange, ili f:validateLongRange Si t Sistem ponovo prikazuje forma u sluaju greke; opet h ik j f l j k t h:message Kreiranje sopstvenih metoda validacija Kreiranje uobiajenih validacija K i se FacesMessage, u okviru ValidatorException, throw Kreira F M k i V lid E i h SI1P1 2004
218/15
Runa validacija
Setter metodi konvertuju iz stringova Koriste se try/catch blokovi Koristi se logika specifina za aplikaciju Action controller proverava vrednosti Ako su vrednosti u redu, vraa se uobiajeni izlaz Ako vrednosti nedostaju ili su nelegalne, smeta se poruka o greci u bean i vraa se null Poetna forma P t f Prikazuje poruke o greci Poruke su prazni stringovi po defaultu u okviru h:outputText, treba koristiti escape="false" ako poruka sadri HTML tagove
SI1P1 2004 219/15
Bean kod
package coreservlets; import java.util.ArrayList; public class BidBean1 { p private String userID = ""; g ; private String keyword = ""; private String bidAmount; private double numericBidAmount = 0; private String bidDuration; private int numericBidDuration = 0; private ArrayList errorMessages = new ArrayList(); public String getUserID() { return(userID); } public void setUserID(String userID) { this.userID = userID.trim(); } public String getKeyword() { return(keyword); } public void setKeyword(String keyword) { this.keyword = keyword.trim(); SI1P1 2004 }
221/15
Bean kod
public String getBidAmount() { return(bidAmount); } public void setBidAmount(String bidAmount) { this.bidAmount = bidAmount; try { numericBidAmount = Double.parseDouble(bidAmount); Double parseDouble(bidAmount); } catch(NumberFormatException nfe) {} } p public double g getNumericBidAmount() { () return(numericBidAmount); } public String getBidDuration() { return(bidDuration); } public void setBidDuration(String bidDuration) { this.bidDuration = bidDuration; try { numericBidDuration = Integer.parseInt(bidDuration); } catch(NumberFormatException nfe) {} } public int getNumericBidDuration() { return(numericBidDuration); SI1P1 2004 }
222/15
223/15
bid1.jsp
<h:form> h:form <h:outputText value="#{bidBean1.errorMessages} escape="false"/> <TABLE> <TR> <TD>User ID: <h:inputText value="#{bidBean1.userID}"/></TD></TR> <TR> <TD>Keyword: y <h:inputText value="#{bidBean1.keyword}"/></TD></TR> <TR> <TD>Bid Amount: $<h:inputText value= #{bidBean1.bidAmount} /></TD></TR> value="#{bidBean1 bidAmount}"/></TD></TR> <TR> <TD>Duration: <h:inputText value="#{bidBean1.bidDuration}"/></TD></TR> <TR><TH> <h:commandButton value="Send Bid!" action="#{bidBean1.doBid}"/></TH></TR> </TABLE> 225/15 SI1P1 2004 </h:form>
Rezultat
SI1P1 2004
226/15
SI1P1 2004
227/15
Bean kod
package coreservlets; public class BidBean2 { private String userID; private String keyword; private double bidAmount; p private int bidDuration; public double getBidAmount() { return(bidAmount); } public void setBidAmount(double bidAmount) { this.bidAmount = bidAmount; } public int getBidDuration() { return(bidDuration); } bli i id i () (bid i ) public void setBidDuration(int bidDuration) { this.bidDuration = bidDuration; SI1P1 2004 }
230/15
SI1P1 2004
231/15
Ulazna forma
<h:form> h:form <TABLE> <TR> <TD>User ID: <h:inputText value="#{bidBean2.userID}" required="true id="userID"/></TD> required "true id "userID"/></TD> <TD><h:message for="userID" styleClass="RED"/></TD></TR> <TR> <TD>Keyword: <h:inputText value="#{bidBean2.keyword}" y p { y } required="true id="keyword"/></TD> <TD><h:message for="keyword" styleClass="RED"/></TD></TR> <TR> <TD>Bid Amount: $<h:inputText value="#{bidBean2 bidAmount}" value= #{bidBean2.bidAmount} id="amount"/></TD> <TD><h:message for="amount" styleClass="RED"/></TD></TR> <TR> <TD>Duration: <h:inputText value="#{bidBean2.bidDuration}" id="duration"/></TD> <TD><h:message for="duration" styleClass="RED"/></TD></TR> </TABLE></h:form>
SI1P1 2004 232/15
Rezultat
SI1P1 2004
233/15
SI1P1 2004
234/15
Eksplicitna validacija
Definisati bean property-ije na proste tipove podataka int, long, double, boolean, char, ... Dodaje se f:validateBlah ili f:convertBlah elementima Sistem proverava da li polja odgovaraju pravilima f:validateBlah atributi dozvoljavaju da se kontrolie format Ako postoji g p j greka p prilikom validacije, forma se p j ponovo prikazuje I smeta se poruka o greci Ostale mogunosti su iste I dalje se moe dodati atribut required za bilo koji ulazni element I dalje se sa use h:message prikazuju poruke h:message vraa prazan string ako nema poruke I dalje se dodaje atribut immediate attribute da bi se izbegla validacija
SI1P1 2004 235/15
SI1P1 2004
236/15
Poetna forma
<h:form> <TABLE> <TR> <TD>User ID: <h:inputText value="#{bidBean2.userID} id="userID"> <f:validateLength minimum="5" maximum="6"/> g </h:inputText></TD> <TD><h:message for="userID" tyleClass="RED"/></TD></TR> <TR> <TD>Keyword: <h:inputText value="#{bidBean2.keyword} id="keyword"> <f:validateLength minimum="3"/> f lid h i i "3"/ </h:inputText></TD> <TD><h:message for="keyword" 237/15 SI1P1 styleClass="RED"/></TD></TR> 2004
Poetna forma
<TR> <TD>Bid Amount: $<h:inputText value="#{bidBean2.bidAmount} id="amount"> <f:validateDoubleRange minimum="0.10"/> g </h:inputText></TD> <TD><h:message for="amount" styleClass="RED"/></TD></TR> <TR> <TD>Duration: <h:inputText value="#{bidBean2.bidDuration} id="duration"> <f:validateLongRange minimum= 15 /> minimum="15"/> </h:inputText></TD> <TD><h:message for="duration" styleClass="RED"/> </TD></TR> <TR><TH COLSPAN=2> <h:commandButton value="Send Bid! action="#{bidBean2.doBid}"/></TH></TR> </TABLE>
SI1P1 2004
238/15
Rezultat
SI1P1 2004
239/15
Konverzija vs validacija
I f:convertBlah i f:validateBlah proveravaju format i prikazuju ponovo formu u sluaju greke Ali f:convertBlah takoe i menja format u kome se polje j p j prikazuje f:validateBlah ima smisla samo sa h:inputText f f:convertBlah i l h ima smisla koristiti i sa h:inputText i sa i l k i ii hi h:outputText Primer <h:inputText value="#{orderBean.discountCode}"> <f:convertNumber maxFractionDigits="2"/> g </h:inputText> Prikazuje 0.75 a ne 0.749
SI1P1 2004 240/15
Atributi
f:convertNumber currencyCode, currencySymbol groupingUsed g y integerOnly locale max(min)FractionDigits max(min)IntegerDigits pattern (ala DecimalFormat) type number, currency, percentage f:convertDateTime type date, time, both dateStyle timeStyle dateStyle, default, short, medium, long,full pattern (ala SimpleDateFormat) locale timeZone SI1P1 2004 f:validateLength minimum maximum g g f:validateLongRange minimum maximum f:validateDoubleRange minimum maximum
241/15
SI1P1 2004
242/15
SI1P1 2004
243/15
SI1P1 2004
244/15
245/15
Rezultat
SI1P1 2004
246/15
SI1P1 2004
247/15
h:dataTable
value: kolekcija podataka (obino lista bean-ova). Legalni bean-ova) tipovi kolekcija: Array List (A a List LinkedList) (ArrayList, ResultSet Result (omota ResultSet iz JSTL) DataModel (u javax.faces.model) var: okruuje svaki ulaz kolekcije Ovja ulaz treba da bude neto to JSF EL moe da prikae Bean, Array, List, Map Drugi atributi Standardni TABLE atributi border, bgcolor, width, cellpadding, cellspacing, frame, ... Style sheet SI1P1 2004 rowClasses, headerClass, footerClass
249/15
h:column
Obino okruuju h:outputText elemente <h:column> <h:outputText value="#{rowVar.colData}"/> value #{rowVar.colData} /> </h:column> Mogu okruivati druge h:Xxxx elemente h:inputText, ili bilo koje druge elemente Regularni HTML sadraj mora biti u okviru f:verbatim <h:column> <f:verbatim>First Name: </f:verbatim> <h:outputText value "#{rowVar firstName}"/> value="#{rowVar.firstName}"/> </h:column> Heading i footer tabele se specificira pomou f:facet
SI1P1 2004 250/15
Primer
Prikaz tabele prodaje baziranoj na podacima tipa Array Klasa SalesBean prezentuje p p j prodaju j j jabuka i pomorandi Niz SalesBean objekata prezentuje kvartalnu prodaju u godini Sve vrednosti e se prikazati u okviru HTML tabele
SI1P1 2004
251/15
SalesBean
SI1P1 2004
252/15
SalesBean
public SalesBean[] getYearlySales() { SalesBean[] yearlySales = { new SalesBean(100.22, 200.32), new SalesBean(300.44, 400.55), new SalesBean(500.66, 600.77), new SalesBean(700.88, 800.99) }; return(yearlySales); }
SI1P1 2004
253/15
faces-config.xml
... <faces-config> <managed bean> <managed-bean> <managed-bean-name>salesBean</managed-beanname> <managed-bean-class> coreservlets.SalesBean </managed-bean-class> / d b l <managed-bean-scope>session</managed-beanscope> </managed-bean> ... </faces-config>
SI1P1 2004
254/15
Jsp strana
<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f" %> uri http://java.sun.com/jsf/core prefix f <%@ taglib uri="http://java.sun.com/jsf/html" prefix="h" %> <f:view> ... <H2>Apples and Oranges</H2> <h:dataTable value="#{salesBean.yearlySales} var="quarterlySales" border="1"> <h:column> <f:verbatim>$</f:verbatim> <h:outputText value="#{quarterlySales.apples}"/> </h:column> <h:column> <f:verbatim>$</f:verbatim> <h:outputText value= #{quarterlySales.oranges} /> value="#{quarterlySales.oranges}"/> </h:column> </h:dataTable> ... </f:view> SI1P1 2004
255/15
Rezultat
SI1P1 2004
256/15
Header i footer
Header Koristi se f:facet sa name="header" Vrednost moe da bude f:verbatim ili h:outputText I dalje je potrebno h:outputText za ne-heading vrednosti Footer Koristi se f:facet sa name="footer" Vrednost moe da bude f:verbatim ili h:outputText Primer koda <h:column> <f:facet name="header"> <f:verbatim>...</f:verbatim> </f:facet> /f f <h:outputText value="#{rowVar.colVal}"/> </h:column>
SI1P1 2004 257/15
Primer: bean
SI1P1 2004
259/15
Primer: bean
public ArrayList getYearlySales() { ArrayList yearlySales = new ArrayList(); yearlySales.add (new MonthlySalesBean("January", 101.11, 501.11)); yearlySales.add ( (new MonthlySalesBean("February", 102.22, 502.22)); y ( y )) yearlySales.add (new MonthlySalesBean("March", 103.33, 503.33)); ... yearlySales.add (new MonthlySalesBean("November", 111.11, 511.11)); yearlySales.add l l dd (new MonthlySalesBean("December", 112.22, 512.22)); return(yearlySales); SI1P1 2004 }
260/15
faces-config.xml
... <faces-config> <managed-bean> <managed-bean-name> monthlySalesBean </managed-bean-name> </managed bean name> <managed-bean-class> coreservlets.MonthlySalesBean y </managed-bean-class> <managed-bean-scope>session</managed-beanscope> </managed-bean> ... </faces-config>
SI1P1 2004
261/15
Jsp strana
<h:form> <h:dataTable value="#{monthlySalesBean.yearlySales}" var="monthlySales border="1"> <h:column> <f:facet name="header"> <f:verbatim>Month</f:verbatim> </f:facet> <h:outputText value="#{monthlySales.month}"/> </h:column> <h:column> <f:facet name="header"> name "header"> <f:verbatim>Apples</f:verbatim> </f:facet> <f:verbatim>$</f:verbatim> <h:inputText value="#{monthlySales.salesBean.apples}"/> </h:column> ... Oranges ... SI1P1 2004 </h:dataTable>
262/15
Rezultat
SI1P1 2004
263/15
CSS
.HEADING { HEADING font-family: Arial, Helvetica, sans-serif; font weight: font-weight: bold; font-size: 20px; color: black; background-color: silver; text-align: center; }
SI1P1 2004
264/15
CSS
.ROW1 { ROW1 font-family: Arial, Helvetica, sans-serif; font-size: 18px; color: black; background-color: white; text-indent: 20px; p } .ROW2 { font-family: Arial, Helvetica, sans-serif; Arial Helvetica font-size: 18px; color: white; background-color: black; b k d l bl k text-indent: 20px; }
SI1P1 2004 265/15
JSP
<h:dataTable value= #{monthlySalesBean.yearlySales} value="#{monthlySalesBean yearlySales}" var="monthlySales border="1" headerClass="HEADING rowClasses="ROW1,ROW2"> <h:column> <f:facet name=header"> <f:verbatim>Month</f:verbatim> </f:facet> <h:outputText value="#{monthlySales.month}"/> </h:column> <h:column> ... Apples ... </h:column> <h:column> <h l > ... Oranges ... </h:column> </h:dataTable> /h d T bl SI1P1 2004
266/15
Rezultat
SI1P1 2004
267/15