Download - JSF 2_mykong.docx
-
8/9/2019 JSF 2_mykong.docx
1/97
In JSF 2.0, all your web resources files like css, images or JavaScript, should put in resources!
folder, under the root of your web application "same folder level with WEB-INF #.
$he sub-folderunder resources! folder is consider as library! or project theme, later you can
reference those resources! with library attribute. $his new JSF resources management
mechanism is really useful, it allow developer to change the web resources easily by theme%library!
or versioning!.
See below e&les '
Figure 1-0 : Example of a JSF2 project folder structure.
-
8/9/2019 JSF 2_mykong.docx
2/97
1. Normal Example(ere are some e&les using resources! and library! in JSF 2.0.
). Include *SS file + h:outputStylesheet
($- output
2. /isplay images + h:graphicImage
($- output
. Include JavaScript + h:outputScript
($- output
2. Versioning Example
-
8/9/2019 JSF 2_mykong.docx
3/97
1efer to Figure 1-0, create a version! folder matching rege& \d+(_\d+) under library! folder, and
the default JSF!esource"a#dler will always get the highest version to display.
P.S Assume your project is Figure 1-0 structure
Include *SS file + h:outputStylesheet
Since default! theme contains version 1_! and 2_, JSF will always get the resources from the
highest version, and append the version at the end of the resource.
See ($- output '
!edirectiony default, JSF 2 is perform a forward while navigating to another page, it caused the page 31- is
always one behind '#. For e&le, when you move from page).&html! to page2.&html!, the
browser 31- address bar will still showing the same page).&html! 31-.
$o avoid this, you can tell JSF to use the redirection by append the faces-redirect"true! to the end
of the outcome! string.
Note
For simple page navigation, this new implicit navigation is more then enough4 For comple& page
navigation, you are still allow to declare the page flow "navigation rule# in the faces-config.xmlfile.
http://docs.oracle.com/javaee/6/api/javax/faces/application/ResourceHandler.htmlhttp://docs.oracle.com/javaee/6/api/javax/faces/application/ResourceHandler.html -
8/9/2019 JSF 2_mykong.docx
4/97
#age for$ard.
#age redirection.
In the navigation rule, you can enable the page redirection by adding a $redirect &' element within
the $#aigatio#-case &' .
start.xhtml
pae1
pae1.xhtml
In this tutorial, we demonstrate the use of resource bundle to display messages in JSF 2.0. For
maintainability concern, it5s always recommended to put all the messages in properties file, instead
of hard6code the message in page directly.
1. #roperties %ile
-
8/9/2019 JSF 2_mykong.docx
5/97
*reate a properties file, contains message for the page, and put it into the pro7ect5s resource folder,
see figure below
messages.properties
messae = his is "messae"
messae.test1 = his is "messae.test1"
messae.test' = his is ""
messae.test = his is "%lt&h'%t&messae.test0%lt&/h'%t&"
messae.param1 = his is "messae.param1"+ {)}
messae.param' = his is "messae.param'"+ {)}an$ {1}
8ro7ect folder structure.
2. &sing !esource 'undles$here are two ways to load the properties file into JSF 2.0.
-
8/9/2019 JSF 2_mykong.docx
6/97
1. (lobal !esource 'undle
$o load the properties file globally, so that all the 7sf pages can access the messages. 9ou can create
a faces-config.xml! file and declare the properties file e&plicitly.
faces-config.xml
com.m6yon.messaes
ms
2. )ocal !esource 'undle
$o load the properties file locally, or for specified page only. /eclare the *f+load'undle ,tag in the
page that need to access the message in the messages.properties.
. /0% 2. #ages
-
8/9/2019 JSF 2_mykong.docx
7/97
In this case, the messages.propertiesfile is given a name of msg, to access the message, 7ust
use msg.ey.
hello.xhtml
JSF '.) an$ @esource *un$les xamples
-
8/9/2019 JSF 2_mykong.docx
8/97
. 3o$ it $ors4Example 1
: normal way to access the message.
//properties file
messae = his is "messae"
-
8/9/2019 JSF 2_mykong.docx
9/97
Example 2
For a key that has a dot .! as name, you can5t use the normal way 56msg.message.test17, it will
not work. Instead, you should use bracket like 56msg89message.test19:7.
//properties file
messae.test1 = his is "messae.test1"
Example
$o display ($- tag in the message, 7ust add the escape! attribute and set it to false.
//properties file
messae.test' = his is "messae.test"
messae.test = his is "%lt&h'%t&messae.test0%lt&/h'%t&"
Example
For a parameter message, 7ust use the *h+output%ormat ,and *f+param , tag.
-
8/9/2019 JSF 2_mykong.docx
10/97
//properties file
messae.param1 = his is "messae.param1" + C)D
messae.param' = his is "messae.param'" + C)D an$ C1D
;.
-
8/9/2019 JSF 2_mykong.docx
11/97
Facesontext.eturrent#[email protected]&
It makes JSF support for internationali;ation or multiple languages easily.
>omplete /0% internationali?ation exampleIn this tutorial, we show you a JSF 2.0 web application, which display a welcome page, retrieve a
welcome message from properties file, and change the welcome message dynamically based on the
selected language.
1. #roject %older/irectory structure for this e&le.
-
8/9/2019 JSF 2_mykong.docx
12/97
2. #roperties file(ere5s two properties files to store
http://www.mkyong.com/java/java-convert-chinese-character-to-unicode-with-native2ascii/http://www.mkyong.com/java/java-convert-chinese-character-to-unicode-with-native2ascii/ -
8/9/2019 JSF 2_mykong.docx
13/97
en
com.m6yon.3elcome
ms
. @anaged 'ean: managed bean, which provide language selection list , and a value change event listener to
change the locale programmatically.
'a&guage(ea& .ja)a
packagecom.m6yon&
importava.io.SerialiNable&
importava.util.5in6e$ash,ap&
importava.util.5ocale&
importava.util.,ap&
importavax.faces.bean.,anae$*ean&
importavax.faces.bean.SessionScope$&
importavax.faces.context.Facesontext&
-
8/9/2019 JSF 2_mykong.docx
14/97
importavax.faces.event.aluehanevent&
O,anae$*eanHname="lanuae"I
OSessionScope$
publicclass5anuae*ean implementsSerialiNableC
privatestaticfinallongserialersion#8 = 15&
privateStrin localeo$e&
privatestatic,ap countries&
staticC
countries = new5in6e$ash,apHI&
countries.putH"nlish"P 5ocale.?Q5#SI& //label, value
countries.putH"hinese"P 5ocale.S#,-5#F#8(#?SI&
D
public,ap etountries#n,apHI C
returncountries&
D
publicStrin et5ocaleo$eHI C
returnlocaleo$e&
-
8/9/2019 JSF 2_mykong.docx
15/97
D
publicvoidset5ocaleo$eHStrin localeo$eI C
this.localeo$e = localeo$e&
D
//value change event listener
publicvoidcountry5ocaleo$ehane$Haluehanevent eIC
Strin ne35ocalealue = e.et?e3alueHI.toStrinHI&
//loop country map to compare the locale code
forH,ap.ntry entry : countries.entrySetHII C
ifHentry.etalueHI.toStrinHI.eRualsHne35ocalealueIIC
Facesontext.eturrent#nstanceHI
D
D
D
-
8/9/2019 JSF 2_mykong.docx
16/97
D
;. /0% #age: JSF page to display a welcome message from properties file, and attach a value change event
listener to a dropdown bo&.
JSF ' internationaliNation example
-
8/9/2019 JSF 2_mykong.docx
17/97
5anuae :
A.
-
8/9/2019 JSF 2_mykong.docx
18/97
If user changes the dropdown bo& language, it will fire a value change event listener and change the
application locale accordingly.
In JSF, *h+select'oolean>hecbox ,tag is used to render a single ($- input element ofchecbox! type.
//JSF...
@emember ,e
-
8/9/2019 JSF 2_mykong.docx
19/97
//,5 output...
@emember ,e
>hile *h+select@any>hecbox ,tag is used to render a set of ($- input element of type
checkbo&!, and format it with ($- table and label tags.
//JSF...
//,5 output...
?umber1 + 1
?umber1 + '
-
8/9/2019 JSF 2_mykong.docx
20/97
?umber1 +
/0% 2. example(ere5s a JSF 2.0 e&le to show the use of h+select'oolean>hecbox! and
h+select@any>hecbox! tags.
h+select'oolean>hecbox
1ender a single checkbo&, and wire it with a boolean property.
h+select@any>hecbox
1ender a group of checkbo&es and populate the data in different ways '
). (ardcoded value in f+selectBtem! tag.
2. ?enerate values with an :rray and put it into f+selectBtems! tag.
. ?enerate values with a ap and put it into f+selectBtems! tag.
@. ?enerate values with an Ab7ect array and put it into f+selectBtems! tag, then represent thevalue with var! attribute.
1. 'acing 'ean: backing bean to hold the submitted checkbo&es values.
packagecom.m6yon&
importava.util.rrays&
-
8/9/2019 JSF 2_mykong.docx
21/97
-
8/9/2019 JSF 2_mykong.docx
22/97
fav?umber' =newStrinELG&
fav?umber'E)G="?umber' + 1"&
fav?umber'E1G="?umber' + '"&
fav?umber'E'G="?umber' + "&
fav?umber'EG="?umber' + 0"&
fav?umber'E0G="?umber' + L"&
returnfav?umber'&
D
publicStrinetFav?umber'#nStrinHIC
returnrrays.toStrinHfav?umber'I&
D
//Generated by Map
privatestatic,apnumberalue&
staticC
numberalue =new5in6e$ash,apHI&
numberalue.putH"?umber + 1"P "1"I&//label, value
numberalue.putH"?umber + '"P "'"I&
numberalue.putH"?umber + "P ""I&
numberalue.putH"?umber + 0"P "0"I&
-
8/9/2019 JSF 2_mykong.docx
23/97
numberalue.putH"?umber + L"P "L"I&
D
public,apetFav?umberalueHIC
returnnumberalue&
D
publicStrinetFav?umber#nStrinHIC
returnrrays.toStrinHfav?umberI&
D
//Generated by Object array
publicstaticclass?umberC
publicStrinnumber5abel&
publicStrinnumberalue&
public?umberHStrinnumber5abelP StrinnumberalueIC
this.number5abel=number5abel&
this.numberalue=numberalue&
D
publicStrinet?umber5abelHIC
returnnumber5abel&
D
-
8/9/2019 JSF 2_mykong.docx
24/97
publicStrinet?umberalueHIC
returnnumberalue&
D
D
public?umberEGnumber05ist&
public?umberEGetFav?umber0alueHIC
number05ist =new?umberELG&
number05istE)G=new?umberH"?umber0 + 1"P "1"I&
number05istE1G=new?umberH"?umber0 + '"P "'"I&
number05istE'G=new?umberH"?umber0 + "P ""I&
number05istEG=new?umberH"?umber0 + 0"P "0"I&
number05istE0G=new?umberH"?umber0 + L"P "L"I&
returnnumber05ist&
D
publicStrinetFav?umber0#nStrinHIC
returnrrays.toStrinHfav?umber0I&
D
-
8/9/2019 JSF 2_mykong.docx
25/97
D
: JSF page to demonstrate the use h+select'oolean>hecbox! and h+select@any>hecbox!tags.
JSF ' chec6boxes example
1. Sinle chec6box
@emember ,e
'. ,utiple chec6boxes
1. ar$+co$e$ 3ith "f:select#tem" :
-
8/9/2019 JSF 2_mykong.docx
26/97
'. Qenerate$ by rray :
. Qenerate$ by ,ap :
0. Qenerate$ by 9bect 3ith var :
-
8/9/2019 JSF 2_mykong.docx
27/97
result.&html
-
8/9/2019 JSF 2_mykong.docx
28/97
JSF ' chec6boxes example
result.xhtml
user.remember,e : BCuser.remember,eD
user.fav?umber1 : BCuser.fav?umber1#nStrinD
user.fav?umber' : BCuser.fav?umber'#nStrinD
user.fav?umber : BCuser.fav?umber#nStrinD
user.fav?umber0 : BCuser.fav?umber0#nStrinD
.
-
8/9/2019 JSF 2_mykong.docx
29/97
>hen submit! button is clicked, link to result.&html! page and display the submitted checkbo&e
values.
-
8/9/2019 JSF 2_mykong.docx
30/97
3o$ to checed checboxCs value by default4h+select'oolean>hecbox
$he value of f'selectItem! tag is checked if the boolean value is set to true. In above e&le, if you
set boolean property remembere! to true '
O,anae$*eanHname="user"I
OSessionScope$
publicclassser*eanC
publicbooleanremember,e =true&
//...
$he remembere! checkbo& value is checked by default.
-
8/9/2019 JSF 2_mykong.docx
31/97
h+select@any>hecbox
$he values of f'selectItems! tag are checked if it matched to the value! of h'selectany*heckbo&!
tag. In above e&le, if you set favBumber to C)D,!DE '
O,anae$*eanHname="user"I
OSessionScope$
publicclassser*eanC
publicStrinEGfav?umber =C"1"P""D&
//...
$he favBumberD checkbo&es, Bumber )D and Bumber D values are checked by default.
/0% 2. Dh+selectne!adioF example: JSF 2.0 e&le to show the use of h+selectne!adio! tag to render radio buttons, and
populate the data in different ways '
). (ardcoded values in f+selectBtem! tag.
2. ?enerate values with a ap and put it into f+selectBtems! tag.
. ?enerate values with an Ab7ect array and put it into f+selectBtems! tag, then represent thevalue with a var! attribute.
1. 'acing 'ean: backing bean to hold the submitted data.
packagecom.m6yon&
-
8/9/2019 JSF 2_mykong.docx
32/97
importava.util.5in6e$ash,ap&
importava.util.,ap&
importavax.faces.bean.,anae$*ean&
importavax.faces.bean.SessionScope$&
O,anae$*eanHname="user"I
OSessionScope$
publicclassser*eanC
publicStrinfavolor1&
publicStrinfavolor'&
publicStrinfavolor&
//getter and setter methods
//Generated by Map
privatestatic,apcolor'alue&
staticC
color'alue =new5in6e$ash,apHI&
color'alue.putH"olor' + @e$"P "@e$"I&//label, value
color'alue.putH"olor' + Qreen"P "Qreen"I&
color'alue.putH"olor + *lue"P "*lue"I&
D
-
8/9/2019 JSF 2_mykong.docx
33/97
-
8/9/2019 JSF 2_mykong.docx
34/97
-
8/9/2019 JSF 2_mykong.docx
35/97
JSF ' ra$io button example
1. ar$+co$e$ 3ith "f:select#tem" :
'. Qenerate$ by ,ap :
. Qenerate$ by 9bect array an$ iterate 3ith var :
-
8/9/2019 JSF 2_mykong.docx
36/97
result.&html
JSF ' ra$io button example
-
8/9/2019 JSF 2_mykong.docx
37/97
result.xhtml
user.favolor1 : BCuser.favolor1D
user.favolor' : BCuser.favolor'D
user.favolor : BCuser.favolorD
.
-
8/9/2019 JSF 2_mykong.docx
38/97
>hen submit! button is clicked, link to result.&html! and display the submitted radio button values.
3o$ to select radio button value by default4
In JSF, the radio button values of f+selectBtems! tag is selected if it matched to the value! of
h+selectne!adio! tag. In above e&le, if you set fav*olor2 to 1ed! '
O,anae$*eanHname="user"I
OSessionScope$
publicclassser*eanC
publicStrinEGfavolor ="@e$"&
//...
$he fav*olor2D radio button, 1ed! option is selected by default.
-
8/9/2019 JSF 2_mykong.docx
39/97
h+selectne)istbox example: JSF 2.0 e&le to show the use of h+selectne)istbox! tag to render a single select listbo&,
and populate the data in different ways '
). (ardcoded value in f+selectBtem! tag.
2. ?enerate values with a ap and put it into f+selectBtems! tag.
. ?enerate values with an Ab7ect array and put it into f+selectBtems! tag, then represent thevalue with var! attribute.
1. 'acing 'ean
: backing bean to hold and generate data for listbo& values.
packagecom.m6yon&
importava.io.SerialiNable&
importava.util.5in6e$ash,ap&
importava.util.,ap&
importavax.faces.bean.,anae$*ean&
importavax.faces.bean.SessionScope$&
O,anae$*eanHname="user"I
OSessionScope$
publicclassser*ean implementsSerialiNableC
publicStrinfav;ear1&
publicStrinfav;ear'&
-
8/9/2019 JSF 2_mykong.docx
40/97
publicStrinfav;ear&
//getter and setter methods
//Generated by Map
privatestatic,apyear'alue&
staticC
year'alue =new5in6e$ash,apHI&
year'alue.putH";ear' + ')))"P "')))"I&//label, value
year'alue.putH";ear' + ')1)"P "')1)"I&
year'alue.putH";ear' + ')')"P "')')"I&
D
public,apetFav;ear'alueHIC
returnyear'alue&
D
//Generated by Object array
publicstaticclass;earC
publicStrinyear5abel&
publicStrinyearalue&
public;earHStrinyear5abelP StrinyearalueIC
this.year5abel=year5abel&
-
8/9/2019 JSF 2_mykong.docx
41/97
this.yearalue=yearalue&
D
publicStrinet;ear5abelHIC
returnyear5abel&
D
publicStrinet;earalueHIC
returnyearalue&
D
D
public;earEGyear5ist&
public;earEGetFav;earalueHIC
year5ist =new;earEG&
year5istE)G=new;earH";ear + ')))"P "')))"I&
year5istE1G=new;earH";ear + ')1)"P "')1)"I&
year5istE'G=new;earH";ear + ')')"P "')')"I&
returnyear5ist&
D
-
8/9/2019 JSF 2_mykong.docx
42/97
D
2. /0% #age: JSF page to demonstrate the use h+selectne)istbox! tag.
JSF ' listbox example
1. ar$+co$e$ 3ith "f:select#tem" :
-
8/9/2019 JSF 2_mykong.docx
43/97
'. Qenerate$ by ,ap :
. Qenerate$ by 9bect array an$ iterate 3ith var :
-
8/9/2019 JSF 2_mykong.docx
44/97
result.&html
JSF ' listbox example
result.xhtml
user.fav;ear1 : BCuser.fav;ear1D
user.fav;ear' : BCuser.fav;ear'D
user.fav;ear : BCuser.fav;earD
-
8/9/2019 JSF 2_mykong.docx
45/97
. hen submit! button is clicked, link to result.&html! page and display the submitted listbo& values.
-
8/9/2019 JSF 2_mykong.docx
46/97
3o$ to pre-select a listbox value4$he value of f+selectBtems! tag is selected if it matched to the value! of h+selectne)istbox! tag.
In above e&le, if you set fav9ear) property to 20)0D '
O,anae$*eanHname="user"I
OSessionScope$
publicclassser*eanC
publicStrinfav;ear1 ="')1)"&
//...
-
8/9/2019 JSF 2_mykong.docx
47/97
$he fav9ear)D listbo&, value 20)0D is selected by default.
In JSF web application, h+output%ormat! tag is similar with h+outputGext! tag, but with e&tra
function to render parameteri;ed message. For e&le,
It will output the following result
param) : ?umber 1P param1 : ?umber '
). C0E match to f'param valueG!Bumber )D %H
2. C)E match to f'param valueG!Bumber 2D %H
utput%ormat exampleSee few use cases of h+output%ormat! tag coded in JSF 2.0 web application.
1. @anaged 'ean: managed bean, provide some te&t for demonstration.
importavax.faces.bean.,anae$*ean&
importavax.faces.bean.SessionScope$&
O,anae$*eanHname="user"I
OSessionScope$
-
8/9/2019 JSF 2_mykong.docx
48/97
publicclassser*eanC
publicStrintext ="ello C)D"&
publicStrinhtml#nput =""&
//getter and setter methods...
D
2. Vie$ #age8age with few h+output%ormat! tags e&le.
JSF
JSF '.) h:outputFormat xample
-
8/9/2019 JSF 2_mykong.docx
49/97
-
8/9/2019 JSF 2_mykong.docx
50/97
?enerate following ($- code
JSF '.) h:outputFormat xample
this is param ) : ?umber 1P param 1 : ?umber '
ello m6yon
%lt&input type=%Ruot&text%Ruot&siNe=) /%t&
-
8/9/2019 JSF 2_mykong.docx
51/97
.
-
8/9/2019 JSF 2_mykong.docx
52/97
$he h+button! is a new tag in JSF 2.0, you can declared the navigation outcome directly in the
outcome! attribute, no need to call a bean to return an outcome like h'commandutton! above.
ut, if browser5s with JavaScript disabled, the navigation will failed, because the h+button! tag is
generate an onclick! event to handle the navigation via window.location.href!. See e&les '
). Bormal button without outcome
//JSF
//,5 output
P.S if t#e outcome attriute is omitted/ t#e curre&t page ,' ill treat as t#e outcome.
2. Bormal button with an outcome
//JSF
//,5 output
. Bormal button with JavaScript.
-
8/9/2019 JSF 2_mykong.docx
53/97
//JSF
//,5 output
@y thoughtH
Bo really sure why JSF 2.0 released this h+button! tag, the JavaScript redirection is not practical,
especially in JavaScript disabled browser. $he best is integrate the outcome! attribute into the
h+command'utton! tag, hope it can be done in future release.
1. /0% h+lin example$he h+lin! tag is a new tag in JSF 2.0, the value! attribute is rendered as the anchor te&t,
outcome! attribute is determined the target 31- of the ($- href! attribute. See e&les '
). link outcome!
//JSF
//,5 output
5oin pae
2. link outcome! parammeter
//JSF
-
8/9/2019 JSF 2_mykong.docx
54/97
//,5 output
5oin pae T-aram
. link outcome! image
//JSF
//,5 output
2. /0% h+command)in example$he h+command)in! tag is released since JSF ).&, which is generate a link act like a submit
button when clicked. $he value! attribute is rendered as the anchor te&t, action! attribute is
determined the target 31- of the ($- href! attribute. In addition, the h'command-ink! will include
a jsf.js! file in the page and attached an onclick! event to the generated link, see e&les '
Note
$he j_idtx! is a random value generated by JSF.
-
8/9/2019 JSF 2_mykong.docx
55/97
). command-ink
//JSF
//,5 output
5oin pae
P.S if t#e action attriute is omitted/ it ill reload curre&t page #ile t#e utto& is cliced.
2. command-ink action
//JSF
//,5 output
-
8/9/2019 JSF 2_mykong.docx
56/97
-
8/9/2019 JSF 2_mykong.docx
57/97
onclic6="moarra.sfclsH$ocument.etlement*y#$H(i$tMIP
C(i$tM:(i$t'):(i$tM:(i$t')Pusername:m6yonDPI&
return false">
5oin pae T -aram
@. command-ink action image
//JSF
//,5 output
-
8/9/2019 JSF 2_mykong.docx
58/97
. /0% h+output)in example$he h+output)in! tag is released in JSF ).&, the body of the tag is rendered as the anchor te&t,
value! attribute is rendered as the value of the ($- href! attribute directly, see e&les '
). output-ink
//JSF
5oin pae
//,5 output
5oin pae
P.S if t#e value attriute is omitted/ it ill put t#e curre&t page ,' as t#e )alue of t#e #ref
attriute.
2. output-ink value!
//JSF
5oin pae
//,5 output
5oin pae
. output-ink value! output$e&t parameter
//JSF
-
8/9/2019 JSF 2_mykong.docx
59/97
//,5 output
5oin pae
@. output-ink value5 output$e&t image
//JSF
//,5 output
@y thoughtHSome review of above three link tags '
). $he h+lin! tag is useful to generate a link which reuires to interact with the JSFoutcome! , but lack of action! support make it hard to generate a dynamic outcome.
-
8/9/2019 JSF 2_mykong.docx
60/97
2. $he h+command)in! tag is suck, the generated JavaScript is really scaryK Bot recommendto use this tag, unless you have a solid reason to support. ut it supports the action! attribute,which is what h+lin! lack of.
. $he h+output)in! is useful to generate a link which does not reuire to interact with theJSF program itself.
:t last, it will be perfect if the action! attribute is added into the h+lin.
In JSF , h+panel(rid! tag is used to generate ($- table tags to place JSF components in rows
and columns layout, from left to right, top to bottom.
For e&le, you used to group JSF components with ($- table tags like this '
3G@)
nter a number :
-
8/9/2019 JSF 2_mykong.docx
61/97
>ith h+panel(rid! tag, you can get the same table layout above, without typing any of the ($-
table tags '
h+panel(rid
nter a number :
Note
$he column! attribute is optional, which define the number of columns are reuired to lay out the
JSF component, defaults to ).
-
8/9/2019 JSF 2_mykong.docx
62/97
h+panel(rid example: JSF 2.0 e&le to show you how to use the h+panel(rid! tag to lay out the components
properly.
1. @anaged 'ean: dummy bean for demo.
packagecom.m6yon&
importava.io.SerialiNable&
importavax.faces.bean.,anae$*ean&
importavax.faces.bean.SessionScope$&
O,anae$*eanHname="$ummy"I
OSessionScope$
publicclass8ummy*ean implementsSerialiNableC
intnumber&
publicintet?umberHIC
returnnumber&
D
publicvoidset?umberHintnumberIC
this.number=number&
-
8/9/2019 JSF 2_mykong.docx
63/97
D
D
2. /0% #age: JSF L($- page to use h+panel(rid! tag to places JSF components in columns layout.
JSF ' panelQri$ example
nter a number :
-
8/9/2019 JSF 2_mykong.docx
64/97
Autput following ($- result '
JSF ' panelQri$ example
-
8/9/2019 JSF 2_mykong.docx
65/97
nter a number :
-
8/9/2019 JSF 2_mykong.docx
66/97
.
-
8/9/2019 JSF 2_mykong.docx
67/97
In JSF, you can output message via following two messages tags '
). h+message+ Autput a single message for a specific component.
2. h+messages+ Autput all messages in current page.
See following JSF 2.0 e&le to show the use of both h+message! and h+messages! tags to
display the validation error message.
JSF page8
-
8/9/2019 JSF 2_mykong.docx
68/97
JSF ' messae T messaes example
nter your username :
nter your ae :
-
8/9/2019 JSF 2_mykong.docx
69/97
siNe="')"reRuire$="true"
label="e">
5ere4s t#e output8
-
8/9/2019 JSF 2_mykong.docx
70/97
n JSF, f+param! tag allow you to pass a parameter to a component, but it5s behavior is different
depends on which type of component it5s attached. For e&le,
1. f+param I h+output%ormatIf attach a f:param! tag to #:outputFormat, the parameter is specifies the placeholder.
(ere5s the output + 3ello /0% &ser. Jou are from >hina.
2. f+param I ther >omponentIf you attach a f:param! tag to other components like #:comma&d(utto&! , the parameter is turned
into reuest parameter.
-
8/9/2019 JSF 2_mykong.docx
71/97
value="Submit + S"action="BCuser.outcomeD">
In user bean, you can get back the parameter value like this '
,apparams =
Facesontext.etxternalontextHI.et@eRuest-arameter,apHI&
Strincountrry =params.etH"country"I&
/0% f+param example(ere5s a JSF 2.0 application, to show the use of f+paramtag in both h+command'utton! and
h+output%ormat! componenets.
1. @anaged 'ean: simple managed bean.
,ser(ea&.ja)a
packagecom.m6yon&
importava.util.,ap&
importavax.faces.bean.,anae$*ean&
importavax.faces.bean.SessionScope$&
-
8/9/2019 JSF 2_mykong.docx
72/97
importavax.faces.context.Facesontext&
O,anae$*eanHname="user"I
OSessionScope$
publicclassser*eanC
publicStrinname&
publicStrincountry&
publicStrinoutcomeHIC
Facesontext fc =Facesontext.eturrent#nstanceHI&
this.country=etountry-aramHfcI&
return"result"&
D
//get value from "fparam"
publicStrinetountry-aramHFacesontext fcIC
,apparams =fc.etxternalontextHI.et@eRuest-arameter,apHI&
returnparams.etH"country"I&
D
-
8/9/2019 JSF 2_mykong.docx
73/97
//getter and setter methods
D
2. /0% #age$wo JSF pages for demonstration.
default.x#tml
JSF ' param example
nter your name :
-
8/9/2019 JSF 2_mykong.docx
74/97
result.x#tml
-
8/9/2019 JSF 2_mykong.docx
75/97
JSF ' param example
.
-
8/9/2019 JSF 2_mykong.docx
76/97
/isplay the formatted message, name! from user input, country! from button parameter.
-
8/9/2019 JSF 2_mykong.docx
77/97
In JSF, f+attribute! tag allow you to pass a attribute value to a component, or a parameter to a
component via action listener. For e&le,
). :ssign a attribute value to a component.
-
8/9/2019 JSF 2_mykong.docx
78/97
D
/0% f+attribute exampleAk, let5s see a full e&le in JSF 2.0.
1. @anaged 'ean: managed bean named user!, with an action listener method.
packagecom.m6yon&
importavax.faces.bean.,anae$*ean&
importavax.faces.bean.SessionScope$&
importavax.faces.event.ctionvent&
O,anae$*eanHname="user"I
OSessionScope$
publicclassser*eanC
publicStrinnic6name&
//action listener event
publicvoidattr5istenerHctionventeventIC
nic6name =HStrinIevent.etomponentHI.etttributesHI.etH"username"I&
-
8/9/2019 JSF 2_mykong.docx
79/97
D
publicStrinoutcomeHIC
return"result"&
D
publicStrinet?ic6nameHIC
returnnic6name&
D
publicvoidset?ic6nameHStrinnic6nameIC
this.nic6name=nic6name&
D
D
2. /0% #ageJSF pages to show the use of f+attribute! tag to pass a attribute value to a #:comma&d(utto&!
component.
default.x#tml
-
8/9/2019 JSF 2_mykong.docx
80/97
JSF ' attribute example
result.x#tml
-
8/9/2019 JSF 2_mykong.docx
81/97
JSF ' attribute example
BCuser.nic6nameD
.
-
8/9/2019 JSF 2_mykong.docx
82/97
In JSF, f+set#ropertyKction)istener! tag is allow you to set a value directly into the property of
your backing bean. For e&le,
-
8/9/2019 JSF 2_mykong.docx
83/97
In above JSF code snippets, if the button is clicked, it will set the myo&g! value to the user&ame!property viaset,ser&ame9method.
O,anae$*eanHname="user"I
OSessionScope$
publicclassser*eanC
publicStrinusername&
publicvoidsetsernameHStrinusernameIC
this.username=username&
D
D
/0% f+set#ropertyKction)istener exampleAk, let5s see a full e&le in JSF 2.0.
1. @anaged 'ean: super simple managed bean named user!.
packagecom.m6yon&
-
8/9/2019 JSF 2_mykong.docx
84/97
-
8/9/2019 JSF 2_mykong.docx
85/97
JSF page to show the use of f+set#ropertyKction)istener! to set a value myo&g! directly into the
property user&ame! of your backing bean.
default.x#tml
JSF ' set-ropertyction5istener example
-
8/9/2019 JSF 2_mykong.docx
86/97
result.x#tml
JSF ' set-ropertyction5istener example
BCuser.usernameD
.
-
8/9/2019 JSF 2_mykong.docx
87/97
-
8/9/2019 JSF 2_mykong.docx
88/97
2. @anaged bean: managed bean named order!, initiali;ed the array ob7ect for later use.
rder'ean.java
packagecom.m6yon&
importava.io.SerialiNable&
importava.math.*i8ecimal&
importavax.faces.bean.,anae$*ean&
importavax.faces.bean.SessionScope$&
O,anae$*eanHname="or$er"I
-
8/9/2019 JSF 2_mykong.docx
89/97
OSessionScope$
publicclass9r$er*ean implementsSerialiNableC
privatestaticfinallongserialersion#8 =15&
privatestaticfinal9r$erEGor$er5ist =new9r$erEGC
new9r$erH")))1"P "#ntel -"P
new*i8ecimalH"U)).))"IP 1IP
new9r$erH")))'"P "ar$$is6 1)*"P
new*i8ecimalH"L)).))"IP 'IP
new9r$erH")))"P "8ell 5aptop"P
new*i8ecimalH"11M)).))"IP 2IP
new9r$erH")))0"P "Samsun 58"P
new*i8ecimalH"L')).))"IP IP
new9r$erH")))L"P "0ech ,ouse"P
new*i8ecimalH"1)).))"IP 1)I
D&
public9r$erEGet9r$er5istHIC
returnor$er5ist&
D
-
8/9/2019 JSF 2_mykong.docx
90/97
publicstaticclass9r$erC
Strinor$er?o&
Strinpro$uct?ame&
*i8ecimalprice&
intRty&
public9r$erHStrinor$er?oP Strinpro$uct?ameP
*i8ecimalpriceP intRtyIC
this.or$er?o=or$er?o&
this.pro$uct?ame=pro$uct?ame&
this.price=price&
this.Rty=Rty&
D
//getter and setter methods
D
D
. >00*reate a *SS file to style the table layout.
table-style.css
-
8/9/2019 JSF 2_mykong.docx
91/97
.or$er+tableC
border-collapse:collapse&
D
.or$er+table+hea$erC
text-align:center&
background:nonerepeatscroll))BLLL&
border-bottom:1pxsoli$B******&
padding:1Mpx&
D
.or$er+table+o$$+ro3C
text-align:center&
background:nonerepeatscroll))BFFFFFFF&
border-top:1pxsoli$B******&
D
.or$er+table+even+ro3C
text-align:center&
background:nonerepeatscroll))BFAFAFA&
border-top:1pxsoli$B******&
D
. h+dataGable
-
8/9/2019 JSF 2_mykong.docx
92/97
: JSF 2.0 &html page to show the use of h+dataGable! tag to loop over the array of order! ob7ect.
$his e&le should be self6e&planatory.
default.xhtml
JSF ' $ataable example
-
8/9/2019 JSF 2_mykong.docx
93/97
!## column header ##$
9r$er ?o
!## ro% record ##$
BCo.or$er?oD
-ro$uct ?ame
BCo.pro$uct?ameD
-rice
BCo.priceD
Vuantity
BCo.RtyD
-
8/9/2019 JSF 2_mykong.docx
94/97
?enerate this ($- output
JSF ' $ataable example
9r$er ?o
-ro$uct ?ame
-rice
Vuantity
-
8/9/2019 JSF 2_mykong.docx
95/97
)))1
#ntel -
U)).))
1
)))'
ar$$is6 1)*
L)).))
'
)))
8ell 5aptop
11M)).))
2
)))0
Samsun 58
-
8/9/2019 JSF 2_mykong.docx
96/97
L')).))
)))L
0ech ,ouse
1)).))
1)
A.
-
8/9/2019 JSF 2_mykong.docx
97/97