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&amples '

Figure 1-0 : Example of a JSF2 project folder structure.


2/97

1. Normal Example(ere are some e&amples 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


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&ample, 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


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


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.


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


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/97

. 3o$ it $ors4Example 1

: normal way to access the message.

//properties file

messae = his is "messae"


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.


10/97

//properties file

messae.param1 = his is "messae.param1" + C)D

messae.param' = his is "messae.param'" + C)D an$ C1D

;.


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


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/


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&


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&


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

[email protected]&

D

D

D


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


17/97

5anuae :

A.


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


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 + '


20/97

?umber1 +

/0% 2. example(ere5s a JSF 2.0 e&ample 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&


21/97


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&


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


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


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" :


26/97

'. Qenerate$ by rray :

. Qenerate$ by ,ap :

0. Qenerate$ by 9bect 3ith var :


27/97

result.&html


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

.


29/97

>hen submit! button is clicked, link to result.&html! page and display the submitted checkbo&e

values.


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&ample, 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.


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&ample, if you set favBumber to C)D,!DE '


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&ample 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&


32/97


importava.util.,ap&




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


33/97


34/97


35/97

JSF ' ra$io button example


'. Qenerate$ by ,ap :

. Qenerate$ by 9bect array an$ iterate 3ith var :


36/97

result.&html

JSF ' ra$io button example


37/97

result.xhtml

user.favolor1 : BCuser.favolor1D

user.favolor' : BCuser.favolor'D

user.favolor : BCuser.favolorD

.


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&ample, if you set fav*olor2 to 1ed! '


OSessionScope$

publicclassser*eanC

publicStrinEGfavolor ="@e$"&

//...

$he fav*olor2D radio button, 1ed! option is selected by default.


39/97

h+selectne)istbox example: JSF 2.0 e&ample 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.util.,ap&




OSessionScope$

publicclassser*ean implementsSerialiNableC

publicStrinfav;ear1&

publicStrinfav;ear'&


40/97

publicStrinfav;ear&


//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&


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


42/97

D

2. /0% #age: JSF page to demonstrate the use h+selectne)istbox! tag.

JSF ' listbox example



43/97

'. Qenerate$ by ,ap :

. Qenerate$ by 9bect array an$ iterate 3ith var :


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


45/97

. hen submit! button is clicked, link to result.&html! page and display the submitted listbo& values.


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&ample, if you set fav9ear) property to 20)0D '


OSessionScope$

publicclassser*eanC

publicStrinfav;ear1 ="')1)"&

//...


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&ample,

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.




OSessionScope$


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

JSF

JSF '.) h:outputFormat xample


49/97


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&


51/97

.


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&amples '

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


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&amples '

). link outcome!

//JSF

//,5 output

5oin pae

2. link outcome! parammeter

//JSF


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&amples '

Note

$he j_idtx! is a random value generated by JSF.


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


56/97


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


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&amples '

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


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.


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&ample, you used to group JSF components with ($- table tags like this '

3G@)

nter a number :


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


62/97

h+panel(rid example: JSF 2.0 e&ample 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&




O,anae$*eanHname="$ummy"I

OSessionScope$

publicclass8ummy*ean implementsSerialiNableC

intnumber&

publicintet?umberHIC

returnnumber&

D

publicvoidset?umberHintnumberIC

this.number=number&


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 :


64/97

Autput following ($- result '

JSF ' panelQri$ example


65/97

nter a number :


66/97

.


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&ample to show the use of both h+message! and h+messages! tags to

display the validation error message.

JSF page8


68/97

JSF ' messae T messaes example

nter your username :

nter your ae :


69/97

siNe="')"reRuire$="true"

label="e">

5ere4s t#e output8


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&ample,

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.


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&




72/97

importavax.faces.context.Facesontext&


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


73/97


D

2. /0% #age$wo JSF pages for demonstration.

default.x#tml

JSF ' param example

nter your name :


74/97

result.x#tml


75/97

JSF ' param example

.


76/97

/isplay the formatted message, name! from user input, country! from button parameter.


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&ample,

). :ssign a attribute value to a component.


78/97

D

/0% f+attribute exampleAk, let5s see a full e&ample in JSF 2.0.

1. @anaged 'ean: managed bean named user!, with an action listener method.

packagecom.m6yon&



importavax.faces.event.ctionvent&


OSessionScope$

publicclassser*eanC

publicStrinnic6name&

//action listener event

publicvoidattr5istenerHctionventeventIC

nic6name =HStrinIevent.etomponentHI.etttributesHI.etH"username"I&


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


80/97

JSF ' attribute example

result.x#tml


81/97

JSF ' attribute example

BCuser.nic6nameD

.


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&ample,


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.


OSessionScope$

publicclassser*eanC

publicStrinusername&

publicvoidsetsernameHStrinusernameIC

this.username=username&

D

D

/0% f+set#ropertyKction)istener exampleAk, let5s see a full e&ample in JSF 2.0.

1. @anaged 'ean: super simple managed bean named user!.

packagecom.m6yon&


84/97


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


86/97

result.x#tml

JSF ' set-ropertyction5istener example

BCuser.usernameD

.


87/97


88/97

2. @anaged bean: managed bean named order!, initiali;ed the array ob7ect for later use.

rder'ean.java

packagecom.m6yon&


importava.math.*i8ecimal&



O,anae$*eanHname="or$er"I


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


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


D

D

. >00*reate a *SS file to style the table layout.

table-style.css


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


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&ample should be self6e&planatory.

default.xhtml

JSF ' $ataable example


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


94/97

?enerate this ($- output

JSF ' $ataable example

9r$er ?o

-ro$uct ?ame

-rice

Vuantity


95/97

)))1

#ntel -

U)).))

1

)))'

ar$$is6 1)*

L)).))

'

)))

8ell 5aptop

11M)).))

2

)))0

Samsun 58


96/97

L')).))

)))L

0ech ,ouse

1)).))

1)

A.


97/97

jsf 2_mykong.docx

Documents