11/17/12

Introduction to JavaServer Faces 2.0 - NetBeans IDE Tutorial

Choosepagelanguage

NetBeansIDE
HOME/Docs&Support

NetBeansPlatform

Plugins

Docs&Support

Community

Partners

Search

IntroductiontoJavaServerFaces2.0
JavaServerFaces(JSF)isauserinterface(UI)frameworkforJavawebapplications.Itisdesignedtosignificantlyeasetheburdenofwriting andmaintainingapplicationsthatrunonaJavaapplicationserverandrendertheirUIsbacktoatargetclient.JSFprovideseaseofuseinthe followingways: MakesiteasytoconstructaUIfromasetofreusableUIcomponents SimplifiesmigrationofapplicationdatatoandfromtheUI HelpsmanageUIstateacrossserverrequests Providesasimplemodelforwiringclientgeneratedeventstoserversideapplicationcode AllowscustomUIcomponentstobeeasilybuiltandreused ForanindepthdescriptionoftheJSFframework,seetheJavaEE6Tutorial,Chapter5:JavaServerFacesTechnology. ThistutorialdemonstrateshowyoucanapplyJSF2.0supporttoawebapplicationusingtheNetBeansIDE.YoubeginbyaddingJSF2.0 frameworksupporttoabasicwebapplication,andproceedby: creatingaJSFmanagedbeantohandlerequestdata, wiringthemanagedbeantotheapplication'swebpages,and convertingthewebpagesintoFaceletstemplatefiles. TheNetBeansIDEhasprovidedlongstandingsupportforJavaServerFaces.WiththereleaseofJSF2.0andJavaEE6,NetBeansIDE rovidesspecialsupportforJSF2.0.Formoreinformation,seeJSF2.0SupportinNetBeansIDE. OracleDevelopmentTools SupportOfferingfor NetBeansIDE

Training
JavaProgramming Language

Support

Documentation
GeneralJavaDevelopment ExternalToolsand Services JavaGUIApplications JavaEE&JavaWeb Development WebServicesApplications NetBeansPlatform(RCP) andModuleDevelopment PHPApplications C/C++Applications MobileApplications SampleApplications DemosandScreencasts

Contents
AddingJSF2.0SupporttoaWebApplication CreatingaManagedBean UsingtheManagedBeanWizard CreatingaConstructor AddingProperties WiringtheManagedBeantoPages index.xhtml response.xhtml ApplyingaFaceletsTemplate CreatingtheFaceletsTemplateFile CreatingTemplateClientFiles SeeAlso Tocompletethistutorial,youneedthefollowingsoftwareandresources. SoftwareorResource NetBeansIDE JavaDevelopmentKit(JDK) GlassFishserver VersionRequired 6.9,7.0,7.1,7.2,JavaEEbundle 6or7 OpenSourceEdition3.x

More
FAQs ContributeDocumentation! DocsforEarlierReleases

jfeo s D m webapplicationproject n/a

Notes: TheNetBeansIDEJavaBundlealsoincludestheGlassFishserver,aJavaEE6compliantserver,whichyourequireforthis tutorial. Tocompareyourprojectwithaworkingsolution,downloadthecompletedsampleproject.

AddingJSF2.0SupporttoaWebApplication
Beginbyopeningthej f e o s D m webapplicationprojectintheIDE.OnceyouhavetheprojectopenedintheIDE,youcanaddframework supporttoitusingtheproject'sPropertieswindow.

netbeans.org/kb/docs/web/jsf20-intro.html#index

1/22

11/17/12

Introduction to JavaServer Faces 2.0 - NetBeans IDE Tutorial

TheIDEalsoallowsyoutocreatenewprojectswithJSF2.0support.Formoreinformation,seeCreatingaNewProjectwithJSF2.0 Support.

1. ClicktheOpenProject(

)buttonintheIDE'smaintoolbar,orpressCtrlShiftO(ShiftOonMac).

2. IntheOpenProjectdialog,navigatetothelocationonyourcomputerwhereyoustoredtheunzippedtutorialproject.Selectit,thenclick OpenProjecttoopenitintheIDE. 3. Runtheprojecttoseewhatitlookslikeinabrowser.Eitherrightclickthej f e o s D m projectnodeintheProjectswindowandchoose Run,orclicktheRunProject( )buttoninthemaintoolbar.TheprojectispackagedanddeployedtotheGlassFishserver,andyour browseropenstodisplaythewelcomepage(i d x x t l n e . h m ).

4. ClicktheSubmitbutton.Theresponsepage(r s o s . h m )displaysasfollows: epnextl

Currentlythewelcomeandresponsepagesarestaticand,togetherwiththes y e h e . s fileandd k . n image,arethe tlsetcs uepg onlyapplicationfilesaccessiblefromabrowser. 5. IntheProjectswindow(Ctrl11onMac),rightclickyourprojectnodeandchoosePropertiestoopentheProjectPropertieswindow. 6. SelecttheFrameworkscategoryandthenclicktheAddbutton. 7. SelectJavaServerFacesintheAddaFrameworkdialogbox.ClickOK.

netbeans.org/kb/docs/web/jsf20-intro.html#index

2/22

11/17/12

Introduction to JavaServer Faces 2.0 - NetBeans IDE Tutorial

AfterselectingJavaServerFaces,variousconfigurationoptionsbecomeavailable.UndertheLibrariestab,youcanspecifyhowthe projectaccessesJSF2.0libraries.Thedefaultoptionistousethelibrariesincludedwiththeserver(theGlassFishserver).However, theIDEalsobundlestheJSF2.0libraries.(YoucanselecttheRegisteredLibrariesoptionifyouwantyourprojecttousethese.)

8. ClicktheConfigurationtab.YoucanspecifyhowtheFacesservletisregisteredintheproject'sdeploymentdescriptor.Youcanalso indicatewhetheryouwantFaceletsorJSPpagestobetheusedwiththeproject.

NetBeansIDE7.1and7.2enableyoutoeasilyconfigureyourprojecttousevariousJSFcomponentsuitesintheComponents tab.TouseacomponentsuiteyouwillneedtodownloadtherequiredlibrariesandusetheLibrariesmanagertocreateanew librarywiththecomponentsuitelibraries.

netbeans.org/kb/docs/web/jsf20-intro.html#index

3/22

11/17/12

Introduction to JavaServer Faces 2.0 - NetBeans IDE Tutorial

9. ClickOKtofinalizechangesandexittheProjectPropertieswindow. AfteraddingJSFsupporttoyourproject,theproject'sw b x l e . m deploymentdescriptorismodifiedtolookasfollows.(Changesinbold.)

<epeso=30mn=ht:/aasncmxln/aae wbapvrin"."xls"tp/jv.u.o/m/sjve" xlsxi"tp/www.r/01XLceaisac" mn:s=ht:/w.3og20/MShmntne xishmLcto=ht:/aasncmxln/aae s:ceaoain"tp/jv.u.o/m/sjve ht:/aasncmxln/aaewbap30xd> tp/jv.u.o/m/sjve/ep__.s" <otxaa> cnetprm <aaaejvxfcsPOETSAE/aaae prmnm>aa.ae.RJC_TG<prmnm> <aaau>eeomn<prmvle prmvleDvlpet/aaau> <cnetprm /otxaa> <eve> srlt <eveaeFcsSrlt/eveae srltnm>aeeve<srltnm> <evels>aa.ae.eapFcseve<srltcas srltcasjvxfcswbp.aeSrlt/evels> <odotru><lansatp lansatp1/odotru> <srlt /eve> <eveapn> srltmpig <eveaeFcsSrlt/eveae srltnm>aeeve<srltnm> <ratr>fcs*/ratr> ulpten/ae/<ulpten <srltmpig /eveapn> <esoofg ssincni> <esoieu> ssintmot 3 0 <ssintmot /esoieu> <ssincni> /esoofg <ecmiels> wloeflit <ecmiefcsidxxtl/ecmie wloefl>ae/ne.hm<wloefl> <wloeflit /ecmiels> <wbap /ep>
Important:Ifyour< e c m i e entrydoesnotcontain'f c s ',youshouldadditmanually.Thisensuresthatyourproject's wloefl> ae/ welcomepage(i d x x t l n e . h m )passesthroughtheFacesservletbeforebeingdisplayedinabrowser.Thisisnecessaryinorderto rendertheFaceletstaglibrarycomponentsproperly.SeeIssue182277formoreinformation. TheFacesservletisregisteredwiththeproject,andthei d x x t l n e . h m welcomepageisnowpassedthroughtheFacesservletwhenitis requested.Also,notethatanentryfortheP O E T S A E R J C _ T G contextparameterhasbeenadded.Settingthisparameterto'D v l p e t eeomn' providesyouwithusefulinformationwhendebuggingyourapplication.Seehttp://blogs.oracle.com/rlubke/entry/jsf_2_0_new_feature2for moreinformation. YoucanlocatetheJSFlibrariesbyexpandingtheproject'sLibrariesnodeintheProjectswindow.Ifyouareusingthedefaultlibrariesincluded withGlassFishServer3.1.2thisisthej v x f c s j r a a . a e . a thatisvisibleundertheGlassFishServernode.(Ifyouareusinganolderversion ofGlassFishyouwillseethej f a i j r s p . a andj f i p . a librariesinsteadofj v x f c s j r smljr a a . a e . a .) TheIDE'sJSF2.0supportprimarilyincludesnumerousJSFspecificwizards,andspecialfunctionalityprovidedbytheFaceletseditor.You explorethesefunctionalcapabilitiesinthefollowingsteps.Formoreinformation,seeJSF2.0SupportinNetBeansIDE.

CreatingaManagedBean
YoucanuseJSF'smanagedbeanstoprocessuserdataandretainitbetweenrequests.AmanagedbeanisaPOJO(PlainOldJavaObject) thatcanbeusedtostoredata,andismanagedbythecontainer(e.g.,theGlassFishserver)usingtheJSFframework. APOJOisessentiallyaJavaclassthatcontainsapublic,noargumentconstructorandconformstotheJavaBeansnamingconventions foritsproperties. Lookingatthestaticpageproducedfromrunningtheproject,youneedamechanismthatdetermineswhetherauserenterednumbermatches theonecurrentlyselected,andreturnsaviewthatisappropriateforthisoutcome.UsetheIDE'sManagedBeanwizardtocreateamanaged beanforthispurpose.TheFaceletspagesthatyoucreateinthenextsectionwillneedtoaccessthenumberthattheusertypesin,andthe generatedresponse.Toenablethis,addu e N m e andr s o s propertiestothemanagedbean. srubr epne UsingtheManagedBeanWizard CreatingaConstructor AddingProperties

UsingtheManagedBeanWizard
1. IntheProjectswindow,rightclickthej f e o s D m projectnodeandchooseNew>JSFManagedBean.(IfManagedBeanisnot listed,chooseOther.ThenselecttheJSFManagedBeanoptionfromtheJavaServerFacescategory.ClickNext.) 2. Inthewizard,enterthefollowing: ClassName:UserNumberBean

netbeans.org/kb/docs/web/jsf20-intro.html#index

4/22

11/17/12

Introduction to JavaServer Faces 2.0 - NetBeans IDE Tutorial

Package:guessNumber Name:UserNumberBean Scope:Session

3. ClickFinish.TheU e N m e B a classisgeneratedandopensintheeditor.Notethefollowingannotations(showninbold): srubren

pcaegesubr akgusNme ipraa.ae.enMngden motjvxfcsba.aaeBa ipraa.ae.enSsincpd motjvxfcsba.esoSoe /* * * atobsr *@uhrnue / * @aaeBa(ae"srubren) Mngdennm=UeNmeBa" @esoSoe Ssincpd pbilssrubren{ ulccasUeNmeBa /*CetsanwisacfUeNmeBa/ *raeentneosrubren* pbisrubren){ ulcUeNmeBa( } }
BecauseyouareusingJSF2.0,youcandeclareallJSFspecificcomponentsusingannotations.Inpreviousversions,youwould needtodeclarethemintheFacesconfigurationfile(f c s c n i . m ). aeofgxl ToviewtheJavadocforallJSF2.0annotations,seetheFacesManagedBeanAnnotationSpecification.

CreatingaConstructor
TheU e N m e B a constructormustgeneratearandomnumberbetween0and10andstoreitinaninstancevariable.Thispartially srubren formsthebusinesslogicfortheapplication. 1. DefineaconstructorfortheU e N m e B a class.Enterthefollowingcode(changesdisplayedinbold). srubren

netbeans.org/kb/docs/web/jsf20-intro.html#index

5/22

11/17/12

Introduction to JavaServer Faces 2.0 - NetBeans IDE Tutorial

pbilssrubren{ ulccasUeNmeBa ItgrrnoIt neeadmn /*CetsanwisacfUeNmeBa/ *raeentneosrubren* pbisrubren){ ulcUeNmeBa( RnoadmR=nwRno( admrnoGeadm) rnoIt=nwItgrrnoG.etn(0) admnenee(admRnxIt1) Sse.u.rnl(Dk'ubradmn) ytmotpitn"uesnme:"+rnoIt } }
Theabovecodegeneratesarandomnumberbetween0and10,andoutputsthenumberintheserverlog. 2. Fiximports.Todoso,clickthehintbadge( )thatdisplaysintheeditor'sleftmargin,thenchoosetheoptiontoimport

j v . t l R n o intotheclass. aaui.adm
3. Runtheprojectagain(clicktheRunProject( )button,orpressF6fnF6onMac).Whenyourunyourproject,theserver'slogfile automaticallyopensintheOutputwindow.

4. Noticethatyoudonotsee"D k ' u b r u e s n m e : "listedintheoutput(aswouldbeindicatedfromtheconstructor).A

U e N m e B a objectwasnotcreatedbecauseJSFuseslazyinstantiationbydefault.Thatis,beansinparticularscopesare srubren
onlycreatedandinitializedwhentheyareneededbytheapplication. TheJavadocforthe@ a a e B a annotationstates: Mngden Ifthevalueofthee g r ) a e ( attributeist u ,andthem n g d b a c p valueis"application",theruntimemust re aaeensoe instantiatethisclasswhentheapplicationstarts.Thisinstantiationandstoringoftheinstancemusthappenbeforeanyrequests areserviced.Ifeagerisunspecifiedorf l e a s ,orthem n g d b a c p issomethingotherthan"application",the aaeensoe default"lazy"instantiationandscopedstorageofthemanagedbeanhappens. 5. BecauseU e N m e B a issessionscoped,haveitimplementtheS r a i a l interface. srubren eilzbe

@aaeBa(ae"srubren) Mngdennm=UeNmeBa" @esoSoe Ssincpd pbilssrubrenipeeteilzbe{ ulccasUeNmeBamlmnsSraial

Usethehintbadge( )toimportj v . o S r a i a l intotheclass. aai.eilzbe

AddingProperties
TheFaceletspagesthatyoucreateinthenextsectionwillneedtoaccessthenumberthattheusertypesin,andthegeneratedresponse. Tofacilitatethis,addu e N m e andr s o s propertiestotheclass. srubr epne 1. StartbydeclaringanI t g r n e e namedu e N m e . srubr

@aaeBa(ae"srubren) Mngdennm=UeNmeBa" @esoSoe Ssincpd pbilssrubrenipeeteilzbe{ ulccasUeNmeBamlmnsSraial ItgrrnoIt neeadmn ItgrueNme neesrubr
2. RightclickintheeditorandchooseInsertCode(AltInsertCtrlIonMac).ChooseGetterandSetter.

netbeans.org/kb/docs/web/jsf20-intro.html#index

6/22

11/17/12

Introduction to JavaServer Faces 2.0 - NetBeans IDE Tutorial

3. Selecttheu e N m e :I t g r s r u b r n e e option.

ClickGenerate.Notethattheg t s r u b r ) e U e N m e ( ands t s r u b r I t g r u e N m e ) e U e N m e ( n e e s r u b r methodsareaddedto theclass. 4. Createar s o s property.DeclareaS r n namedr s o s . epne tig epne

@aaeBa(ae"srubren) Mngdennm=UeNmeBa" @esoSoe Ssincpd pbilssrubrenipeeteilzbe{ ulccasUeNmeBamlmnsSraial ItgrrnoIt neeadmn ItgrueNme neesrubr Srnepne tigrsos
5. Createagettermethodforr s o s .(Thisapplicationwillnotrequireasetter.)YoucouldusetheIDE'sGenerateCodepopup epne showninstep2abovetogeneratetemplatecode.Forpurposesofthistutorialhowever,justpastethebelowmethodintotheclass.

pbitiggtepne){ ulcSrneRsos( i(srubr!ul&(srubrcmaeornoIt=0){ f(ueNme=nl)&ueNme.oprT(admn)=) /ivldtsrssin /naiaeueeso FcsotxotxaeCnetgturnIsac( aeCnetcnet=Fcsotx.eCretntne) HtSsinssin=(tpeso) tpesoesoHtSsin cnetgtxenlotx(.eSsinfle otx.eEtraCnet)gteso(as) ssinivldt( eso.naiae) rtrYyoot" eun"a!Yugti! }es le{ rtr<>or,"+ueNmes't<p" eun"pSrysrubr+"inti./> +"pGesaan.<p" <>usgi../> } }
Theabovemethodperformstwofunctions: 1. Ittestswhethertheuserenterednumber(u e N m e )equalstherandomnumbergeneratedforthesession srubr (r n o I t a d m n )andreturnsaS r n responseaccordingly. tig 2. Itinvalidatestheusersessioniftheuserguessestherightnumber(i.e.,ifu e N m e equalsr n o I t srubr a d m n ).Thisis necessarysothatanewnumberisgeneratedshouldtheuserwanttoplayagain. 6. RightclickintheeditorandchooseFixImports(AltShiftIShiftIonMac).Importstatementsareautomaticallycreatedfor:

netbeans.org/kb/docs/web/jsf20-intro.html#index

7/22

11/17/12

Introduction to JavaServer Faces 2.0 - NetBeans IDE Tutorial

jvxsrltht.tpeso aa.eve.tpHtSsin jvxfcscnetFcsotx aa.ae.otx.aeCnet
YoucanpressCtrlSpaceonitemsintheeditortoinvokecodecompletionsuggestionsanddocumentationsupport.Press CtrlSpaceonF c s o t x toviewtheclassdescriptionfromtheJavadoc. aeCnet

Clickthewebbrowser( )iconinthedocumentationwindowtoopentheJavadocinanexternalwebbrowser.

WiringManagedBeanstoPages
OneoftheprimarypurposesofJSFistoremovetheneedtowriteboilerplatecodetomanagePOJOsandtheirinteractionwiththe application'sviews.Yousawanexampleofthisintheprevioussection,whereJSFinstantiatedaU e N m e B a objectwhenyouranthe srubren application.ThisnotionisreferredtoasInversionofControl(IoC),whichenablesthecontainertotakeresponsibilityformanagingportionsof theapplicationthatwouldotherwiserequirethedevelopertowriterepetitiouscode. Intheprevioussectionyoucreatedamanagedbeanthatgeneratesarandomnumberbetween0and10.Youalsocreatedtwoproperties,

u e N m e ,andr s o s ,whichrepresentthenumberinputbytheuser,andtheresponsetoauserguess,respectively. srubr epne

Inthissection,youexplorehowyoucanusetheU e N m e B a anditspropertiesinwebpages.JSFenablesyoutodothisusingits srubren expressionlanguage(EL).YouusetheexpressionlanguagetobindpropertyvaluestoJSF'sUIcomponentscontainedinyourapplication's webpages.ThissectionalsodemonstrateshowyoucantakeadvantageofJSF2.0'simplicitnavigationfeaturetonavigatebetweentheindex andresponsepages. TheIDEprovidessupportforthisworkthroughitscodecompletionanddocumentationfacilities,whichyoucaninvokebypressingCtrlSpace onitemsintheeditor. Startbymakingchangestoi d x x t l n e . h m ,thenmakechangestor s o s . h m .Inbothpages,replaceHTMLformelementswith epnextl theirJSFcounterparts,astheyaredefinedintheJSFHTMLtaglibrary.Then,usetheJSFexpressionlanguagetobindpropertyvalueswith selectedUIcomponents. index.xhtml response.xhtml

index.xhtml
1. Openthei d x x t l n e . h m pageintheeditor.Eitherdoubleclickthei d x x t l n e . h m nodefromtheProjectswindow,orpressAlt ShiftOtousetheGotoFiledialog. BothindexandresponsepagesalreadycontaintheJSFUIcomponentsyourequireforthisexercise.Simplyuncommentthemand commentouttheHTMLelementscurrentlybeingused. 2. CommentouttheHTMLformelement.Todoso,highlighttheHTMLformelementasintheimagebelow,thenpressCtrl/(/on Mac). Note:Tohighlight,eitherclickanddragintheeditorwithyourmouse,or,usingthekeyboard,holdShiftandpressthearrow keys.

netbeans.org/kb/docs/web/jsf20-intro.html#index

8/22

11/17/12

Introduction to JavaServer Faces 2.0 - NetBeans IDE Tutorial

UseCtrl/(/onMac)totogglecommentsintheeditor.Youcanalsoapplythiskeyboardshortcuttootherfiletypes,suchas JavaandCSS. 3. UncommenttheJSFHTMLformcomponent.Highlightthecomponentasintheimagebelow,thenpressCtrl/(/onMac).

AfteruncommentingtheJSFHTMLformcomponent,theeditorindicatesthatthe< : o m ,< : n u T x > h f r > h i p t e t ,and

<:omnBto> h c m a d u t n tagshaven'tbeendeclared.

4. Todeclarethesecomponents,usetheIDE'scodecompletiontoaddthetaglibrarynamespacetothepage's< t l tag.Place hm> yourcursoronanyoftheundeclaredtagsandpressCtrlSpace.Codecompletionsuggestionsanddocumentationsupport displays.

ClickEnter.(Iftherearemultipleoptions,makesuretoselectthetagthatisdisplayedintheeditorbeforeclickingEnter.)TheJSF HTMLtaglibrarynamespaceisaddedtothe< t l tag(showninboldbelow),andtheerrorindicatorsdisappear. hm>

<tlxls"tp/www.r/99xtl hmmn=ht:/w.3og19/hm" xlsh"tp/jv.u.o/s/tl> mn:=ht:/aasncmjfhm"

5. UsetheJSFexpressionlanguagetobindU e N m e B a 'su e N m e propertytothei p t e t srubren srubr n u T x component.The

vle a u attributecanbeusedtospecifythecurrentvalueoftherenderedcomponent.Typeinthecodedisplayedinboldbelow. <:om hfr> <:nuTxie""mxegh""vle"{srubrenueNme}> hiptetsz=2alnt=2au=#UeNmeBa.srubr"/

JSFexpressionlanguageusesthe# } { syntax.Withinthesedelimiters,youspecifythenameofthemanagedbeanandthebean

netbeans.org/kb/docs/web/jsf20-intro.html#index

9/22

11/17/12

Introduction to JavaServer Faces 2.0 - NetBeans IDE Tutorial

propertyyouwanttoapply,separatedbyadot(. ).Now,whentheformdataissenttotheserver,thevalueisautomaticallysavedin theu e N m e propertyusingtheproperty'ssetter(s t s r u b r ) srubr e U e N m e ( ).Also,whenthepageisrequestedandavaluefor

u e N m e hasalreadybeenset,thevaluewillautomaticallydisplayintherenderedi p t e t srubr n u T x component.Formore

information,seetheJavaEE6Tutorial:UsingtheUnifiedELtoReferenceBackingBeans. 6. Specifythedestinationfortherequestthatisinvokedwhenclickingtheformbutton.IntheHTMLversionoftheform,youwereable todothisusingthe< o m tag'sa t o attribute.WithJSF,youcanusethec m a d u t n a t o attribute. fr> cin o m n B t o 's c i n Furthermore,duetoJSF2.0'simplicitnavigationfeature,youonlyneedtospecifythenameofthedestinationfile,withoutthefile extension. Typeinthecodedisplayedinboldbelow.

<:om hfr> <:nuTxie""mxegh""vle"{srubrenueNme}> hiptetsz=2alnt=2au=#UeNmeBa.srubr"/ <:omnBtod"umtau=sbi"ato=rsos"/ hcmadutni=sbi"vle"umtcin"epne> <hfr> /:om

TheJSFruntimesearchesforafilenamedr s o s .Itassumesthefileextensionisthesameastheextensionusedbyfilefrom epne whichtherequestoriginated(i d x x t l n e . h m )andlooksforforther s o s . h m fileinthesamedirectoryastheoriginating epnextl file(i.e.,thewebroot). Note:JSF2.0aimstomakedevelopers'tasksmucheasier.IfyouwereusingJSF1.2forthisproject,youwouldneedto declareanavigationruleinaFacesconfigurationfilethatwouldlooksimilartothefollowing:

<aiainrl> nvgtoue <rmved/ne.hm<foiwi> foiwi>idxxtl/rmved <aiaincs> nvgtoae <rmotoersos<foucm> foucm>epne/rmotoe <oved/epnextl/oved tiwi>rsos.hm<tiwi> <nvgtoae /aiaincs> <nvgtoue /aiainrl>
Steps7through12belowareoptional.Ifyou'dliketoquicklybuildtheproject,skipaheadtor s o s . h m . epnextl 7. TestwhethertheaboveELexpressiondoesinfactcallthes t s r u b r ) e U e N m e ( methodwhentherequestisprocessed.Todoso, usetheIDE'sJavadebugger. SwitchtotheU e N m e B a class(PressCtrlTabandchoosethefilefromthelist.)Setabreakpointonthe srubren

stsrubr) e U e N m e ( methodsignature.Youcandothisbyclickingintheleftmargin.Aredbadgedisplays,indicatingamethod
breakpointhasbeenset.

8. ClicktheDebugProject( browser.

)buttonintheIDE'smaintoolbar.Adebugsessionstarts,andprojectwelcomepageopensinthe

Note:IfaDebugProjectdialogdisplays,selectthedefault'ServersideJava'optionandclickDebug. 9. Inthebrowser,enteranumberintotheformandclickthe'submit'button. 10. SwitchbacktotheIDEandinspecttheU e N m e B a class.Thedebuggerissuspendedwithinthes t s r u b r ) srubren eUeNme( method.

11. OpentheDebugger'sVariableswindow(ChooseWindow>Debugging>Variables,orpressCtrlShift1).Youseethevariable valuesforthepointatwhichthedebuggerissuspended.

netbeans.org/kb/docs/web/jsf20-intro.html#index

10/22

11/17/12

Introduction to JavaServer Faces 2.0 - NetBeans IDE Tutorial

Intheimageabove,avalueof'4 'isprovidedfortheu e N m e variableinthes t s r u b r ) srubr e U e N m e ( signature.(Thenumber4 wasenteredintotheform.)'t i 'referstotheU e N m e B a objectthatwascreatedfortheusersession.Beneathit,you hs srubren seethatthevaluefortheu e N m e propertyiscurrentlyn l . srubr ul 12. IntheDebuggertoolbar,clicktheStepInto( )button.Thedebuggerexecutesthelineonwhichitiscurrentlysuspended.The

Variableswindowrefreshes,indicatingchangesfromtheexecution.

Theu e N m e propertyisnowsettothevalueenteredintheform. srubr 13. ChooseDebug>FinishDebuggerSession(ShiftF5ShiftFnF5onMac)fromthemainmenutostopthedebugger.

response.xhtml
1. Openther s o s . h m pageintheeditor.Eitherdoubleclickther s o s . h m nodefromtheProjectswindow,or epnextl epnextl pressAltShiftOtousetheGotoFiledialog. 2. CommentouttheHTMLformelement.HighlighttheopeningandclosingHTML< o m tagsandthecodebetweenthem,then fr> pressCtrl/(/onMac). Note:Tohighlight,eitherclickanddragintheeditorwithyourmouse,or,usingthekeyboard,holdShiftandpressthearrow keys. 3. UncommenttheJSFHTMLformcomponent.Highlighttheopeningandclosing< : o m tagsandthecodebetweenthem,then hfr> pressCtrl/(/onMac). Atthisstage,yourcodebetweenthe< o y tagslooksasfollows: bd>

<oy bd> <id"anotie" dvi=miCnanr> <id"etls=sbotieryo" dvi=lf"cas"uCnanrgeBx> <4[rsosee]/4 h>epnehr<h> <<omato=idxxtl> !frcin"ne.hm" <nuye"umtd"akutnau=Bc"> ipttp=sbi"i=bcBto"vle"ak/ <fr> /om> <:om hfr> <:omnBtod"akutnau=Bc"/ hcmadutni=bcBto"vle"ak> <hfr> /:om <dv /i> <id"ih"cas"uCnanr> dvi=rgtls=sbotie"

netbeans.org/kb/docs/web/jsf20-intro.html#index

11/22

11/17/12

Introduction to JavaServer Faces 2.0 - NetBeans IDE Tutorial

<mr=dk.n"at"uewvn"/ igsc"uepgl=Dkaig> !hgahcmgr=/uepgl=Dkaig> <<:rpiIaeul"dk.n"at"uewvn"/> <dv /i> <dv /i> <bd> /oy
AfteruncommentingtheJSFHTMLformcomponent,theeditorindicatesthatthe< : o m and< : o m n B t o > hfr> h c m a d u t n tags haven'tbeendeclared. 4. Todeclarethesecomponents,usetheIDE'scodecompletiontoaddthetaglibrarynamespacetothepage's< t l tag. hm> Usetheeditor'scodecompletionsupporttoaddrequiredJSFnamespacestothefile.WhenselectingaJSForFaceletstag throughcodecompletion,therequirednamespaceisautomaticallyaddedtothedocument'srootelement.Formore information,seeJSF2.0SupportinNetBeansIDE. PlaceyourcursoronanyoftheundeclaredtagsandpressCtrlSpace.Codecompletionsuggestionsanddocumentationsupport displays.

ClickEnter.(Iftherearemultipleoptions,makesuretoselectthetagthatisdisplayedintheeditorbeforeclickingEnter.)TheJSF HTMLtaglibrarynamespaceisaddedtothe< t l tag(showninboldbelow),andtheerrorindicatorsdisappear. hm>

<tlxls"tp/www.r/99xtl hmmn=ht:/w.3og19/hm" xlsh"tp/jv.u.o/s/tl> mn:=ht:/aasncmjfhm"

5. Specifythedestinationfortherequestthatisinvokedwhentheuserclickstheformbutton.Youwanttosetthebuttonsothatwhena userclicksit,heorsheisreturnedtotheindexpage.Toaccomplishthis,usethec m a d u t n a t o attribute.Typein o m n B t o 's c i n thecodedisplayedinbold.

<:om hfr> <:omnBtod"akutnau=Bc"ato=idx> hcmadutni=bcBto"vle"akcin"ne"/ <hfr> /:om

Note:Bytypinga t o = i d x ,youarerelyingonJSF'simplicitnavigationfeature.Whenauserclickstheformbutton, cin"ne" theJSFruntimesearchesforafilenamedi d x n e .Itassumesthefileextensionisthesameastheextensionusedbyfilefrom whichtherequestoriginated(r s o s . h m )andlooksforforthei d x x t l epnextl n e . h m fileinthesamedirectoryasthe originatingfile(i.e.,thewebroot). 6. Replacethestatic"[responsehere]"textwiththevalueoftheU e N m e B a 'sr s o s property.Todothis,usetheJSF srubren epne expressionlanguage.Enterthefollowing(inbold).

<id"etls=sbotieryo" dvi=lf"cas"uCnanrgeBx> <4<:uptetvle"{srubrenrsos}/<h> h>hotuTxau=#UeNmeBa.epne">/4

7. Runtheproject(clicktheRunProject( )button,orpressF6fnF6onMac).Whenthewelcomepagedisplaysinthebrowser, enteranumberandclicks b i .Youseetheresponsepagedisplaysimilartothefollowing(providedyoudidnotguessthe umt

netbeans.org/kb/docs/web/jsf20-intro.html#index

12/22

11/17/12
correctnumber).

Introduction to JavaServer Faces 2.0 - NetBeans IDE Tutorial

Twothingsarewrongwiththecurrentstatusoftheresponsepage: 1. Thehtml< > p tagsaredisplayingintheresponsemessage. 2. TheBackbuttonisnotdisplayinginthecorrectlocation.(Compareittotheoriginalversion.) Thefollowingtwostepscorrectthesepoints,respectively. 8. Setthe< : u p t e t tag'se c p attributetof l e hotuTx> sae a s .Placeyourcursorbetweeno t u T x andv l e uptet a u ,inserta space,thenpressCtrlSpacetoinvokecodecompletion.Scrolldowntochoosethee c p attributeandinspectthe sae documentation.

Asindicatedbythedocumentation,thee c p valueissettot u bydefault.Thismeansthatanycharactersthatwould sae re normallybeparsedashtmlareincludedinthestring,asshownabove.Settingthevaluetof l e a s enablesanycharactersthatcan beparsedashtmltoberenderedassuch. ClickEnter,thentypef l e a s asthevalue.

netbeans.org/kb/docs/web/jsf20-intro.html#index

13/22

11/17/12

Introduction to JavaServer Faces 2.0 - NetBeans IDE Tutorial

<4<:uptetecp=fleau=#UeNmeBa.epne">/4 h>hotuTxsae"as"vle"{srubrenrsos}/<h>
9. Setthe< : o m tag'sp e e d d hfr> r p n I attributetof l e a s .Placeyourcursorjustafter'm < : o m andinsertaspace,then 'in h f r > pressCtrlSpacetoinvokecodecompletion.Scrolldowntochoosethep e e d d r p n I attributeandinspectthedocumentation.Then clickEnter,andtypef l e a s asthevalue.

<:ompeedd"as" hfrrpnI=fle>
JSFappliesinternalid'stokeeptrackofUIcomponents.Inthecurrentexample,ifyouinspectthesourcecodeoftherendered page,youwillseesomethinglikethefollowing:

<omi=jit"nm=jit"mto=ps"ato=/sDm/ae/epnextl frd"_d5ae"_d5ehd"otcin"jfeofcsrsos.hm" ecye"plcto/womulnoe" ntp=apiainxwwfrrecdd> <nuye"idnae"_d5au=jit"/ ipttp=hde"nm=jit"vle"_d5> <nud"_d5bcBto"tp=sbi"nm=jit:akutnau=Bc" ipti=jit:akutnye"umtae"_d5bcBto"vle"ak / > <nuye"idnae"aa.ae.iwtt"i=jvxfcsVeSae ipttp=hde"nm=jvxfcsVeSaed"aa.ae.iwtt" vle"446303424:8236633896uoopee"f"/ au=7649540463683998882"atcmlt=of> <fr> /om
Theidfortheformelementisj i t ,andthisidisprependedtotheidfortheBackbuttonincludedintheform(showninbold _d5 above).BecausetheBackbuttonreliesonthe# a k u t n b c B t o stylerule(definedins y e h e . s ),thisrulebecomes tlsetcs obstructedwhentheJSFidisprepended.Thiscanbeavoidedbysettingp e e d d f l e r p n I to a s . 10. Runtheprojectagain(clicktheRunProject( )button,orpressF6fnF6onMac).Enteranumberinthewelcomepage,then clickSubmit.Theresponsepagenowdisplaystheresponsemessagewithoutthe< > p tags,andtheBackbuttonispositioned correctly.

11. ClicktheBackbutton.BecausethecurrentvalueofU e N m e B a 'su e N m e propertyisboundtotheJSF srubren srubr

iptet n u T x component,thenumberyoupreviouslyenteredisnowdisplayedinthetextfield.
12. InspecttheserverlogintheIDE'sOutputwindow(Ctrl44onMac)todeterminewhatthecorrectguessnumberis. Ifyoucan'tseetheserverlogforanyreason,youcanopenitbyswitchingtotheServiceswindow(Ctrl55onMac)and expandingtheServersnode.ThenrightclicktheGlassFishserveronwhichtheprojectisdeployedandchooseViewServer Log.Ifyoucannotseethenumberintheserverlog,tryrebuildingtheapplicationbyrightclickingtheprojectnodeand choosingCleanandBuild. 13. TypeinthecorrectnumberandclickSubmit.Theapplicationcomparesyourinputwiththecurrentlysavednumberanddisplaysthe appropriatemessage.

netbeans.org/kb/docs/web/jsf20-intro.html#index

14/22

11/17/12

Introduction to JavaServer Faces 2.0 - NetBeans IDE Tutorial

14. ClicktheBackbuttonagain.Noticethatthepreviouslyenterednumberisnolongerdisplayedinthetextfield.Recallthat

U e N m e B a 'sg t e p n e ) s r u b r e n e R s o s ( methodinvalidatesthecurrentusersessionuponguessingthecorrectnumber.

ApplyingaFaceletsTemplate
FaceletshasbecomethestandarddisplaytechnologyforJSF2.0.FaceletsisalightweighttemplatingframeworkthatsupportsalloftheJSF UIcomponentsandisusedtobuildandrendertheJSFcomponenttreeforapplicationviews.ItalsoprovidesdevelopmentsupportwhenEL errorsoccurbyenablingyoutoinspectthestacktrace,componenttree,andscopedvariables. Althoughyoumaynothaverealizedit,thei d x x t l n e . h m andr s o s . h m filesyouhavebeenworkingwithsofarinthetutorialare epnextl Faceletspages.Faceletspagesusethe. h m extensionandsinceyouareworkinginaJSF2.0project(TheJSF2.0librariesincludethe xtl FaceletsJARfiles.),theviewswereabletoappropriatelyrendertheJSFcomponenttree. ThepurposeofthissectionistofamiliarizeyouwithFaceletstemplating.Forprojectscontainingmanyviews,itisoftenadvantageoustoapply atemplatefilethatdefinesthestructureandappearanceformultipleviews.Whenservicingrequests,theapplicationinsertsdynamically preparedcontentintothetemplatefileandsendstheresultbacktotheclient.Althoughthisprojectonlycontainstwoviews(thewelcomepage andtheresponsepage),itiseasytoseethattheycontainalotofduplicatedcontent.YoucanfactoroutthisduplicatedcontentintoaFacelets template,andcreatetemplateclientfilestohandlecontentthatisspecifictothewelcomeandresponsepages. TheIDEprovidesaFaceletsTemplatewizardforcreatingFaceletstemplates,andaFaceletsTemplateClientwizardforcreatingfilesthatrely onatemplate.Thissectionmakesuseofthesewizards. Note:TheIDEalsoprovidesaJSFPagewizardthatenablesyoutocreateindividualFaceletspagesforyourproject.Formore information,seeJSF2.0SupportinNetBeansIDE. CreatingtheFaceletsTemplateFile CreatingTemplateClientFiles

CreatingtheFaceletsTemplateFile
1. CreateaFaceletstemplatefile.PressCtrlN(NonMac)toopentheFilewizard.SelecttheJavaServerFacescategory,then FaceletsTemplate.ClickNext. 2. Typeint m l t forthefilename. epae 3. ChoosefromanyoftheeightlayoutstylesandclickFinish.(Youwillbeusingtheexistingstylesheet,soitdoesn'tmatterwhich layoutstyleyouchoose.)

netbeans.org/kb/docs/web/jsf20-intro.html#index

15/22

11/17/12

Introduction to JavaServer Faces 2.0 - NetBeans IDE Tutorial

Thewizardgeneratesthet m l t . h m fileandaccompanyingstylesheetsbasedonyourselection,andplacestheseina epaextl

rsucs cs e o r e > s folderwithintheproject'swebroot.

Aftercompletingthewizard,thetemplatefileopensintheeditor.Toviewthetemplateinabrowser,rightclickintheeditor andchooseView. 4. Examinethetemplatefilemarkup.Notethefollowingpoints: Thef c l t taglibraryisdeclaredinthepage's< t l tag.Thetaglibraryhastheu prefix. aees hm> i

<tlxls"tp/www.r/99xtl hmmn=ht:/w.3og19/hm" xlsu=ht:/aasncmjffclt" mn:i"tp/jv.u.o/s/aees xlsh"tp/jv.u.o/s/tl> mn:=ht:/aasncmjfhm"

TheFaceletspageusesthe< : e d and< : o y tagsinsteadofthehtml< e d and< o y tags.Byusing hha> hbd> ha> bd> thesetags,Faceletsisabletoconstructacomponenttreethatencompassestheentirepage. Thepagereferencesthestylesheetsthatwerealsocreatedwhenyoucompletedthewizard.

<:ed hha> <eahtqi=CnetTp"cnet"ethmcastUF8> mttpeuv"otnyeotn=tx/tlhre=T"/ <ikhe=.rsucscsdfutcse=syehe"tp=tx/s" lnrf"/eore/s/eal.s"rl"tlsetye"etcs / > <ikhe=.rsucscscsaotcse=syehe"tp=tx/s" lnrf"/eore/s/sLyu.s"rl"tlsetye"etcs / > <il>aeesTmlt<tte tteFcltepae/il> <hha> /:ed <iisr> u : n e t tagsareusedinthepage'sbodyforeverycompartmentassociatedwiththelayoutstyleyouchose.Each <iisr> u : n e t taghasan m attributethatidentifiesthecompartment.Forexample: ae <id"o" dvi=tp> <iisrae"o"Tp/iisr> u:netnm=tp>o<u:net <dv /i>
5. Reexaminethewelcomeandresponsepages.Theonlycontentthatchangesbetweenthetwopagesisthetitleandthetext containedinthegreysquare.Thetemplate,therefore,canprovideallremainingcontent. 6. Replacetheentirecontentofyourtemplatefilewiththecontentbelow.

<xlvrin'.'ecdn=UF8> ?meso=10noig'T'? <DCYEhmULC"/WC/THM.rniinl/N !OTPtlPBI/3/DDXTL10Tastoa/E" "tp/www.r/Rxtl/T/hm1tastoa.t" ht:/w.3ogT/hm1DDxtlrniinldd> <tlxls"tp/www.r/99xtl hmmn=ht:/w.3og19/hm" xlsu=ht:/aasncmjffclt" mn:i"tp/jv.u.o/s/aees xlsh"tp/jv.u.o/s/tl> mn:=ht:/aasncmjfhm" <:ed hha> <eahtqi=CnetTp"cnet"ethmcastUF8> mttpeuv"otnyeotn=tx/tlhre=T"/ <ikhe=cssyehe.s"rl"tlsetye"etcs> lnrf"s/tlsetcse=syehe"tp=tx/s"/ <il>u:netnm=tte>aeesTmlt<u:net<tte tte<iisrae"il"Fcltepae/iisr>/il> <hha> /:ed <:oy hbd> <id"et> dvi=lf" <iisrae"o"BxCnetHr<u:net u:netnm=bx>ootnee/iisr>

netbeans.org/kb/docs/web/jsf20-intro.html#index

16/22

11/17/12

Introduction to JavaServer Faces 2.0 - NetBeans IDE Tutorial

<dv /i> <hbd> /:oy <hm> /tl
Theabovecodeimplementsthefollowingchanges: Theproject'ss y e h e . s filereplacesthetemplatestylesheetreferencescreatedbythewizard. tlsetcs All< i i s r > u : n e t tags(andtheircontaining< i > d v tags)havebeenremoved,exceptforonenamedb x o. An< i i s r > u : n e t tagpairhasbeenplacedaroundthepagetitle,andnamedt t e il. 7. Copyrelevantcodefromeitherthei d x x t l r s o s . h m fileintothetemplate.Addthecontentshowninbold n e . h m or e p n e x t l belowtothetemplatefile's< : o y tags. hbd>

<:oy hbd> <id"anotie" dvi=miCnanr> <id"etls=sbotieryo" dvi=lf"cas"uCnanrgeBx> <iisrae"o"BxCnetHr<u:net u:netnm=bx>ootnee/iisr> <dv /i> <id"ih"cas"uCnanr> dvi=rgtls=sbotie" <mr=dk.n"at"uewvn"/ igsc"uepgl=Dkaig> <dv /i> <dv /i> <hbd> /:oy
8. Runtheproject.Whenthewelcomepageopensinthebrowser,modifytheURLtothefollowing:

ht:/oahs:00jfeofcstmlt.hm tp/lclot88/sDm/ae/epaextl
Thetemplatefiledisplaysasfollows:

Theprojectnowcontainsatemplatefilethatprovidestheappearanceandstructureforallviews.Youcannowcreateclientfilesthat invokethetemplate.

CreatingTemplateClientFiles
Createtemplateclientfilesforthewelcomeandresponsepages.Namethetemplateclientfileforthewelcomepageg e t n . h m . reigxtl Fortheresponsepage,thefilewillber s o s . h m . epnextl

greeting.xhtml
1. PressCtrlN(NonMac)toopentheNewFilewizard.SelecttheJavaServerFacescategory,thenselectFaceletsTemplate Client.ClickNext.

netbeans.org/kb/docs/web/jsf20-intro.html#index

17/22

11/17/12

Introduction to JavaServer Faces 2.0 - NetBeans IDE Tutorial

2. Typeing e t n forthefilename. reig 3. ClicktheBrowsebuttonnexttotheTemplatefield,thenusethedialogthatdisplaystonavigatetothet m l t . h m fileyou epaextl createdintheprevioussection.

4. ClickFinish.Thenewg e t n . h m templateclientfileisgeneratedanddisplaysintheeditor. reigxtl 5. Examinethemarkup.Notethecontenthightlightedinbold.

<tlxls"tp/www.r/99xtl hmmn=ht:/w.3og19/hm" xlsu=ht:/aasncmjffclt" mn:i"tp/jv.u.o/s/aees> <oy bd> <icmoiintmlt=.tmlt.hm" u:opstoepae"/epaextl> <idfnae"il" u:eienm=tte> tte il <u:eie /idfn> <idfnae"o" u:eienm=bx> bx o <u:eie /idfn> <u:opsto> /icmoiin <bd> /oy <hm> /tl
Thetemplateclientfilereferencesatemplateusingthe< i c m o i i n tag'st m l t attribute.Becausethetemplate u:opsto> epae contains< i i s r > u : n e t tagsfort t e i l andb x o ,thistemplateclientcontains< i d f n > u : e i e tagsforthesetwonames.The contentthatyouspecifybetweenthe< i d f n > u : e i e tagsiswhatwillbeinsertedintothetemplatebetweenthe< i i s r > u:net tagsofthecorrespondingname. 6. Specifyg e t n asthetitleforthefile.Makethefollowingchangeinbold. reig

<idfnae"il" u:eienm=tte> Getn reig <u:eie /idfn>

7. Switchtothei d x x t l n e . h m file(pressCtrlTab)andcopythecontentthatwouldnormallyappearinthegreysquarethatdisplays intherenderedpage.Thenswitchbacktog e t n . h m andpasteitintothetemplateclientfile.(Changesinbold.) reigxtl

<idfnae"o" u:eienm=bx> <4H,maeiue<h> h>iynmsDk!/4 <5Imtiknfanme h>'hnigoubr <r> b/

netbeans.org/kb/docs/web/jsf20-intro.html#index

18/22

11/17/12

Introduction to JavaServer Faces 2.0 - NetBeans IDE Tutorial

bten ewe <pncas"ihih"0/pnn sals=hglgt><sa>ad <pncas"ihih"1<sa><h> sals=hglgt>0/pn./5 <5Cnyugesi?/5 h>aoust<h> <:om hfr> <:nuTxie""mxegh""vle"{srubrenueNme}> hiptetsz=2alnt=2au=#UeNmeBa.srubr"/ <:omnBtod"umtau=sbi"ato=rsos"/ hcmadutni=sbi"vle"umtcin"epne> <hfr> /:om <u:eie /idfn>
8. DeclaretheJSFHTMLtaglibraryforthefile.Placeyourcursoronanyofthetagsthatareflaggedwithanerror(anytagusingthe'h ' prefix),andpressCtrlSpace.Thenselectthetagfromthelistofcodecompletionsuggestions.Thetaglibrarynamespaceisadded tothefile's< t l tag(showninboldbelow),andtheerrorindicatorsdisappear. hm>

<tlxls"tp/www.r/99xtl hmmn=ht:/w.3og19/hm" xlsu=ht:/aasncmjffclt" mn:i"tp/jv.u.o/s/aees xlsh"tp/jv.u.o/s/tl> mn:=ht:/aasncmjfhm"

Ifyouplaceyourcursorafterthe'm < : o m andpressCtrlSpace,thenamespaceisautomaticallyaddedtothefile.If 'in h f r > onlyonelogicaloptionisavailablewhenpressingCtrlSpace,itisimmediatelyappliedtothefile.JSFtaglibrariesare automaticallydeclaredwheninvokingcodecompletionontags.

response.xhtml
Becausetheprojectalreadycontainsafilenamedr s o s . h m ,andsinceyouknowwhatthetemplateclientfileshouldlooklike epnextl now,modifytheexistingr s o s . h m tobecomethetemplateclientfile.(Forpurposesofthistutorial,justcopyandpastethe epnextl providedcode.) 1. Openr s o s . h m intheeditor.(Ifitisalreadyopened,pressCtrlTabandchooseit.)Replacethecontentsoftheentirefile epnextl withthecodebelow.

<xlvrin'.'ecdn=UF8> ?meso=10noig'T'? <DCYEhmULC"/WC/THM.rniinl/N !OTPtlPBI/3/DDXTL10Tastoa/E" "tp/www.r/Rxtl/T/hm1tastoa.t" ht:/w.3ogT/hm1DDxtlrniinldd> <tlxls"tp/www.r/99xtl hmmn=ht:/w.3og19/hm" xlsu=ht:/aasncmjffclt" mn:i"tp/jv.u.o/s/aees xlsh"tp/jv.u.o/s/tl> mn:=ht:/aasncmjfhm" <oy bd> <icmoiintmlt=.tmlt.hm" u:opstoepae"/epaextl> <idfnae"il" u:eienm=tte> Rsos epne <u:eie /idfn> <idfnae"o" u:eienm=bx> <4<:uptetecp=fleau=#UeNmeBa.epne"> h>hotuTxsae"as"vle"{srubrenrsos}/ <h> /4 <:ompeedd"as" hfrrpnI=fle> <:omnBtod"akutnau=Bc"ato=getn" hcmadutni=bcBto"vle"akcin"reig / > <hfr> /:om <u:eie /idfn> <u:opsto> /icmoiin <bd> /oy <hm> /tl
Notethatthefileisidenticaltog e t n . h m ,exceptforthecontentspecifiedbetweenthe< i d f n > reigxtl u : e i e tagsfort t e il andb x o. 2. Intheproject'sw b x l e . m deploymentdescriptor,modifythewelcomefileentrysothatg e t n . h m isthepagethatopens reigxtl

netbeans.org/kb/docs/web/jsf20-intro.html#index

19/22

11/17/12

Introduction to JavaServer Faces 2.0 - NetBeans IDE Tutorial

whentheapplicationisrun. IntheProjectswindow,doubleclickConfigurationFiles>w b x l e . m toopenitintheeditor.UnderthePagestab,changethe WelcomeFilesfieldtof c s g e t n . h m . ae/reigxtl

3. Runtheprojecttoseewhatitlookslikeinabrowser.PressF6(fnF6onMac),orclicktheRunProject( )buttoninthemain toolbar.TheprojectisdeployedtotheGlassFishserver,andopensinabrowser. UsingtheFaceletstemplateandtemplateclientfiles,theapplicationbehavesinexactlythesamewayasitdidpreviously.Byfactoringout duplicatedcodeintheapplication'swelcomeandresponsepages,yousucceededinreducingthesizeoftheapplicationandeliminated thepossibilityofwritingmoreduplicatecode,shouldmorepagesbeaddedatalaterpoint.Thiscanmakedevelopmentmoreefficientand easiertomaintainwhenworkinginlargeprojects. SendFeedbackonThisTutorial

SeeAlso
FormoreinformationaboutJSF2.0,seethefollowingresources.

NetBeansArticlesandTutorials
JSF2.0SupportinNetBeansIDE GeneratingaJavaServerFaces2.0CRUDApplicationfromaDatabase ScrumToysTheJSF2.0CompleteSampleApplication GettingStartedwithJavaEE6Applications JavaEE&JavaWebLearningTrail

ExternalResources
JavaServerFacesTechnology(Officialhomepage) JSR314SpecificationforJavaServerFaces2.0 TheJavaEE6Tutorial,Chapter5:JavaServerFacesTechnology GlassFishProjectMojarra(OfficialreferenceimplementationforJSF2.0) OTNDiscussionForums:JavaServerFaces JSFCentral

Blogs
EdBurns RyanLubke JimDriscoll

netbeans.org/kb/docs/web/jsf20-intro.html#index

20/22

11/17/12

Introduction to JavaServer Faces 2.0 - NetBeans IDE Tutorial

netbeans.org/kb/docs/web/jsf20-intro.html#index

21/22

11/17/12

Introduction to JavaServer Faces 2.0 - NetBeans IDE Tutorial

SiteMap

AboutUs

Contact

Legal&Licences

Byuseofthiswebsite,youagreetotheNetBeansPoliciesandTermsofUse.2012,OracleCorporationand/oritsaffiliates.Sponsoredby

netbeans.org/kb/docs/web/jsf20-intro.html#index

22/22