JSFMc lc1.Gii thiu11.1Java Server Faces l g?11.2Phn mm yu cu11.3c im ca JSF21.4Vai tr ca Framework31.5Kin trc JavaServer Faces41.5.1Kin trc MVC:41.5.2Kin trc JSF:41.6Cc thnh phn chnh51.7u nhc im ca JSF61.7.1u im dng RequestDispatcher:61.7.2u im dng Dng Chun:61.7.3Khuyt im dng RequestDispatcher:61.7.4Khuyt im dng Dng Chun:71.7.5u im so vi Struts:71.7.6Khuyt im so vi Struts:71.8Mc ch ra i ca JSF81.9Cc phin bn ca JSF81.10JSF Life Cycle91.10.1Restore View:91.10.2Apply Request Values :91.10.3Process Validations91.10.4Update Model Values101.10.5Invoke Application101.10.6Render Response102.Managed Beans112.1nh ngha112.2Backing Bean122.3Bean Scope133.Navigation143.1Static Navigation (iu hng tnh)143.2Dynamic Navigation (iu hng ng)144.Standard JSF Tags144.1Tng quan cc th JSF Core154.2Tng quan cc th JSF HTML.164.3Panel.194.4Head, Body v th Form.204.5Text Fields v Text Areas234.5.1Hidden Fields254.5.2V d v s dng Text Fields v Text Areas254.5.3Hin th Text v Images.274.6Buttons v Links.294.7Cc th Selection.334.7.1Checkboxes and Radio Buttons354.7.2Menus and Listboxes374.7.3Items394.8Messages405.Facets416.Data Table41Thuc tnh ca th h:dataTable Attributes41Thuc tnh ca th h:column Attributes426.1Headers, Footers, and Captions426.1.1Headers426.1.2Footers426.1.3Captions436.2JSF Components436.3Chnh sa Table446.4Styles456.5Database Tables467.Conversion and Validation467.1Standard Converters467.2Standard Validators467.3Bean validation : JSF 2.0468.Event Handling468.1S kin v vng i ca JSF468.2Chuyn i gi tr u vo478.3S dng cc s kin thay i gi tr489.Ajax 2.0529.1nh ngha Ajax529.2Vng i ca JSF v Ajax529.3The JSF Ajax Recipe (Cng thc ca JSF Ajax)539.4Ajax Group549.5Ajax Field Validation55

Gii thiuJava Server Faces l g?Cng ngh Java Server Faces l mt UI framework cho vic xy dng cc ng dng web chy trn Java server v thay th UI pha sau cho client. Cc thnh phn chnh ca cng ngh JSF bao gm: Tp hm API pht trin thay th cc thnh phn UI v qun l trng thi ca chng; x l cc s kin, kim tra pha server v chuyn i d liu; nh ngha navigation ca trang; h tr quc t ha v accessibility; v cung cp kh nng m rng cho tt c cc c im ny. Mt th vin th ty bin JavaServer Pages (JSP) cho vic nh ngha cc thnh phn UI trong mt trang JSP.M hnh lp trnh c nh ngha tt ny v th vin th thnh phn UI to k thut d dng ti vic xy dng v sa cha cc ng dng web vi cc UI pha server. Vi s t chc nh , c th: iu khin vic to ra cc s kin pha client t vic vit m ng dng pha server. nh x cc thnh phn UI trn mt trang cho d liu pha server. Khi dng mt UI vi cc thnh phn c th ti s dng v c kh nng m rng. Lu tr v phc hi trng thi UI ngay sau cc request.Phn mm yu cu xy dng, deploy v chy cc ng dng JSF cn mt mi trng deploy chng hn Java Web Software Development Pack v Java 2 Platform, Standard Edition (J2SE) SDK 1.3 tr ln. ng thi download b sung cng ngh Java Server Faces. C th download cc phn mm cn thit ti cc link di y: http://java.sun.com/webservices/downloads/webservicespack.html http://java.sun.com/j2se/1.5 http://java.sun.com/j2se/javaserverfaces/download.htmlc im ca JSFMt trong nhng li im ln nht ca cng ngh JSF l n cho php mt s phn chia rch ri gia behavior (cch x l) v presentation (cch trnh by). Xy dng ng dng web vi cng ngh JSP lu tr tng phn ca vic phn chia ny. Tuy nhin, mt ng dng JSP khng th nh x nhng request HTTP thnh nhng x l s kin cc thnh phn c th hoc qun l cc thnh phn UI nh nhng i tng c trng thi trn server. Cng ngh JSF cho php bn xy dng cc ng dng Web nhm b sung vic phn chia r rng hn behavior v presentation c cho php bi kin trc UI.Vic phn chia lun l t presentation cng cho php mi thnh vin ca mt nhm pht trin ng dng Web tp trung vo nhng phn trong tin trnh pht trin ca h, v cung cp mt m hnh lp trnh n gin lin kt nhng phn vi nhau. Mt mc tiu quan trng khc ca cng ngh JSF l cung cp cc mc thn thuc cc thnh phn UI v cc khi nim tng Web m khng gii hn bn trong mt cng ngh scripting c th hoc mt ngn ng nh du. Trong khi cng ngh JSF bao gm mt th vin th ty bin JSP dng thay th cc thnh phn trn trang JSP, API ca cng ngh JSP c phn lp trc tip trn nh ca JavaServlet API. iu ny cho php bn lm c vi iu: s dng cng ngh trnh by khc bn cnh JSP, to ra nhng thnh phn ty bin ca bn thn bn trc tip t nhng lp thnh phn, v to ra lung xut cho nhng thit b client khc nhau.Quan trng hn ht, cng ngh JSF cung cp mt kin trc dnh cho vic qun l trng thi cc thnh phn, x l d liu thnh phn, kim tra nhp liu ca ngi dng v x l cc s kin. Trong hu ht nhng phn , cc ng dng JSF cng tng t nh bt k cc ng dng Java Web khc, chng chy trn mt Java Servlet container, v thng thng cha: Cc thnh phns JavaBean (c gi l nhng m hnh i tng trong cng ngh JSF). Cc event listener. Cc trang, chng hn nh JSP. Cc lp helper pha server, chng hn nh cc bean truy cp d liu.Thm vo nhng thnh phn trn, mt ng dng JSF cng c: Mt th vin th ty bin thc thi cc thnh phn UI trn mt trang. Mt th vin th ty bin thay th cc x l s kin, kim tra v nhng hnh ng khc. Nhng thnh phn UI thay th trng thi cc i tng trn server. Cc kim tra, x l s kin, v x l navigation.Mi ng dng JSF phi bao gm mt th vin th ty bin nhm nh ngha cc th thay th cc thnh phn UI v mt th vin th ty bin nhm thay th cc hnh ng ct li khc, chng hn nh cc kim tra v cc x l s kin. C hai loi th vin th ny c cung cp bi vic b sung JSF.

Th vin th ty bin xa b nhng g cn thit cho cc thnh phn UI trong HTML hoc ngn ng nh du khc, kt qu l nhng thnh phn ti s dng hon ton. V th vin core to nn s d dng ng k cc s kin, kim tra v nhng hnh ng khc. Th vin th ty bin c th l th vin th HTML c bn cha cng vi cng ngh JSF tham kho b sung, hoc bn c th nh ngha th vin th ca ring mnh nhm to ra cc thnh phn ty bin hoc xut ra kiu khc HTML.Cui cng, cng ngh JSF cho php bn chuyn i v kim tra d liu trn nhng thnh phn ring bit v thng bo bt k li g trc khi d liu pha server c cp nht.

Vai tr ca FrameworkBi v vic phn chia cng vic c cho php bi thit k cng ngh JSF, vic pht trin v sa cha cc ng dng JSF c th x l d dng v nhanh chng. Cc thnh vin ca mt nhm pht trin thng thng bao gm mt danh sch di y. Trong nhiu nhm, cc nh pht trin ring bit ng nhiu hn mt trong nhng vai tr di y: PageAuthors: ngi s dng ngn ng nh du, ging nh HTML, to ra cc trang cho ng dng Web. Khi s dng framework cng ngh JSF, page authors s hu ht s dng th vin th. Application Developers: ngi lp trnh m hnh cc thnh phn, cc x l s kin, cc kim tra, v navigation ca trang. Application developer c th cung cp cc lp helper m rng. Component Writers: ngi c kinh nghim lp trnh UI v ngh to ra cc thnh phn ty bin s dng ngn ng lp trnh. Nhng ngi ny c th to ra cc thnh phn ca ring h trc tip t cc lp thnh phn, hoc h c th k tha cc thnh phn chun cung cp bi cng ngh JSF Tool Verdors: ngi cung cp cc cng c nhm to ra cng ngh JSF xy dng UI pha server d dng hn. Nhng thnh vin chnh ca cng ngh JSF s l page authors v application developers.Kin trc JavaServer FacesKin trc MVC:Chia ng dng ra lm 3 phn: Model Lu d liu xung c s d liu. Kim tra d liu trc khi thao tc. X l hu nh tt c cc nghip v. View Hin th thng tin cho ngi dng. Nhn d liu t ngi dng a vo. D liu nhn c t view s c chuyn xung model v kim tra trc khi x l. Controller Tng trung gian gia model v view. Nhn yu cu t client. Sinh ra kt qu cho ngi dng. Cc thnh phn ca Controller l: ActionServlet, ActionFormCc thnh phn c nhim v duy nht v khng ph thuc ln nhau.Kin trc JSF: Ging nh kin trc MVC. Front Controller l 1 FacesServlet, vai tr nh ngi gc cng. Cu trc JSF ging dng cy. Mi node l 1 component. FacesServlet c trch nhim dch component sang m HTML, WML. Cc thnh phn trn kt hp vi Backend Model gi l Backing bean x l s kin.Cc thnh phn chnhNh hu ht cc cng ngh, Faces c nhng quy nh ca n nhm a ra cc khi nim c bn cho nhng c im m n cung cp. C 8 khi nim khi pht trin cc ng dng JSF: UI Component (cn gi l mt control hay n gin l component): mt i tng c trng thi, c cha trn server, cung cp cc chc nng c th tng tc vi mt ngi dng cui. UI component l nhng JavaBean vi cc thuc tnh, phng thc, s kin. Chng c t chc thnh mt cy cc component thng hin th nh mt trang Renderer: Tr li cho vic hin th mt UI component v trao i mt d liu nhp ca user vao gi tr ca component. Renderer c th c thit k lm vic vi mt hoc nhiu UI component, v mt UI component c th tp hp vi nhiu renderer khc nhau. Validator: Tr li cho vic chc chn rng gi tr nhp vo bi user c chp nhn. Mt hoc nhiu validator c th c tp hp vi mt UI component. Backing beans: Cc Java Bean xc nh tp hp cc gi tr t cc UI component v b sung cc phng thc listener cho event. Chng cng c th nm gi cc tham chiu n cc UI component. Converter: Chuyn i mt gi tr ca component thnh v t mt chui hin th. Mt UI component c th c tp hp vi mt converter duy nht. Event/listener: JSF s dng m hnh event/listener JavaBeans (cng c s dng cho Swing). UI component (v nhng i tng khc) to ra cc event, v cc listener c th ng k x l cc s kin. Messages: Thng tin hin th cho user. Ch bt k phn ng dng no (backing beans, validators, converter ) c th to ra thng tin hoc thng ip li nhm hin th cho user. Navigation: Kh nng di chuyn t mt trang n trang khc. JSF c mt h thng navigation mnh m tch hp vi nhng event listeners.u nhc im ca JSFu im dng RequestDispatcher: Custom GUI Controls. JSF cung cp 1 tp hm API v cc th t to c th gn gi tr to ra cc HTML form c giao din phc tp. Event Handling. Gip thit k Java code lin quan n s kin submit d dng hn. M code tng tc d dng hn vi button. Managed beans. Trong JSP, jsp: setProperty c th ghi property=* t ng gi ti mt bean da trn tham s truyn vo. JSF c th m rng chc nng ny v thm vo mt vi tin ch phc v cho vic n gin ha tin trnh yu cu tham s. Expression Language. JSF cung cp mt ngn ng ngn gn v mnh m truy cp cc thuc tnh ca bean v cc tp thnh phn (collection elements).u im dng Dng Chun: Form field conversion and validation (s chuyn i v hp chun ha). JSF c tch hp cc chc nng kim tra cc gi tr trong form c ng nh dng yu cu khng v chuyn i t dng chui sang nhiu dng d liu khc. Nu gi tr b b trng hoc sai nh dng, form c th t ng hin th li vi thng bo li v gi tr nhp vo trc . Centralized file-based configurationThay v code cng cc thng tin d liu vo chng trnh Java th nhiu gi tr JSF c th hin di dng XML hoc cc tp tin c t. Do cc thay i ch cn chnh sa trn 1 tp tin duy nht m khng cn chnh sa code hay recompiling code. Consistent ApproachKhuyn khch cch lm ng b, thng nht ca MVC trong xuyn sut ng dng.Khuyt im dng RequestDispatcher: Bigger learning curve. Worse documentation.Khuyt im dng Dng Chun: Vi cc ng dng JSF, c rt nhiu vic thc thi ngoi l so vi cc ng dng Web vit bng Java bnh thng. V vy kh hiu v kh nh gi. C nhiu IDEs h tr mnh cho standard servlet v JSP, h tr cho JSF ch mi bt u xut hin.u im so vi Struts: Custom Components. JSF kt hp cc GUIs phc tp vo trong mt component n c th qun l mt cch d dng v c tnh lin kt. Struts th khng. JSF khng gii hn i vi HTML v HTTP, Struts th c. JSF cho php t tn cho beans, sau gi tn cc beans trong forms. Struts c qu trnh phc tp vi nhiu bc trung gian m ta phi nh form no l u vo ca hnh ng no. JSF expression language (ngn ng m rng ca JSF dng binding gia cc thnh phn ca component vi cc thnh phn ca backing bean ) ngn gn v mnh hn Struts bean. JSF khng i hi cc lp bean v controller phi k tha t b k lp cha (v d: Action) hay phng thc (v d: execute) no, Struts th bt buc. Tp tin faces-config.xml d dng hn tp tin struts-config.xml file.Khuyt im so vi Struts: Trang thc s dng trong JSF c ui .jsp nhng trong URLs hin th ui .faces hoc .jsp. Nn khi gi trc tip s b exception. Kh truy cp n trang non-faces trong tp tin faces-config.xml. Trong Struts, form (v d: blah.jsp) v handler (blah.do) c URLs khc nhau; trong JSF th ging nhau. Struts c h tr bi nhiu IDEs, JSF th cha. Struts kim tra tnh hp l ca a ch email, m th tn dng, regular expressions v nhiu th na. JSF ch kim tra gi tr rng, chiu di v gii hn cc s. JSF khng h tr phng thc GET nn khng th bookmark cc trang kt qu.Mc ch ra i ca JSF8 mc tiu thit k sau l l do cho s ra i ca JSF: To ra mt b khung gm cc thnh phn giao din ngi dng chun (standard GUI component framework) nhm gip cho cc cng c pht trin d dng hn cho ngi dng trong vic to GUI cht lng cao ng thi qun l cc kt qu ca GUI vi x l thc thi ca chng trnh. nh ra mt tp cc lp c s ca Java (lightweight Java base classes) biu din cho cc thnh phn UI, trng thi mi thnh phn, v cc s kin u vo. Nhng lp ny s x l nhng vn lin quan n chu k sng ca GUI, c bit l qun l trng thi trong sut chu trnh sng ca mt trang ca thnh phn GUI . Cung cp mt tp cc thnh phn GUI chung, bao gm cc thnh phnHTML form input. Nhng thnh phn ny s c dn xut t tp n gin cc lp c s ( cp #1) t c th nh ra cc thnh phn mi. Cung cp mt m hnh JavaBeans c th truyn i (dispatch) cc s kin t cc GUI controls pha my khch n cc x l hin thc c th t pha ng dng my ch. nh ra cc hm APIs kim chng d liu nhp, bao gm h tr kim chng t pha my ch. Ch nh mt m hnh c th a ngn ng ha hay a phng ha cc GUI. Khi to t ng d liu ra ph hp cho my khch ch, da vo mi d liu cu hnh my khch , bao gm c da vo phin bn trnh duyt. Vic khi to t ng d liu cn km theo cc i hi v h tr ngi dng (accessibility), c qui nh bi WAI.Cc phin bn ca JSF JSF 1.0 - bn miu t k thut ca JSF chnh thc u tin. JSF 1.1 - bn sa li chnh thc. Khng c thay i v k thut hayHTML renderkit. JSF 1.2 - bn chnh thc chun b ra mt v c miu t bi JSR 252. Nhng ci tin cung cp nhng gii php tm thi cho vn trn ln ni dung(content-interweaving problem) c ni n tihttp://www.onjava.com/pub/a/onjava/2004/06/09/jsf.html Cung cp cc XML Schema cho cc file cu hnh, thay cho vic dng DTD. Cc ci tin cho php cc 'faces applicationsc th x l nhiu khung (multi-frame), hay cc thit k a ca s ngi dng (multi-window UI). Cc ci tin th vin th f: nng cao 'TCK coverage, cc s kin lin quan chu trnh sng ca f:view, v mt s c tnh nh khc Cc ci tin trong vic h trtrang trcho cc i tng API. Ci tin an ninh cho pha trnh khch trong vic lu gi trng thi. Gii quyt vn "duplicate button press". T chc li bn miu t k thut theo tng phn tiu chun (normative), v khng tiu chun, gip cho vic hin thc d dng hn. Cc sa li choportlet. Mt s sa li i hi s thay i cht t trong bn miu t k thut.

JSF Life Cycle

Bao gm 6 giai on : Restore View: + Nu khng c request value n s kim tra xem c component tree (View) trong b nh cha, nu c ri (post back) th s restore li, ngc li s to mi component tree n s chuyn n phn Render Response phase + Ngc li nu c request value s chuyn sang Apply Request Values Apply Request Values :- Lu li ton b gi tr ngi dng nhp vo vo component objects (gi tr ny c gi l local values) v ActionEvent Process Validations- Khi to mt trang JSF, bn c th thm vo validators kim tra loval values c hp l khng, c ng nh ng kiu khng Nu kim tra thnh cng s chuyn sang Update Model Values, ngc li to mt error message a vo FacesContext, sau gi phng thc FacesContext.responseComplete terminate resquest processing v hin th li current page Update Model Values- Sau khi incoming data pass validation v conversion, d liu s c update vo Managed Bean (managed bean l mt java class c bound properties ca n vi UI components thng qua JSF Expression Language). n bc ny th n mi set value vo managed bean, in Apply Request Values n ch lu gi tr ca ngi dng vo component objects Invoke Application- Thc thi method ca button hoc link c click gy ra form submission, tr v outcome string, chuyn sang navigation handler, navigation handler s xc nh next page Render Response- encodes the response v gi tr v client

Example : Thc hin trang ng nhp (login.xhtml)- User thc hin mt request vo trang login.xhtml Request s c Faces Controller Servlet x l, to ra FacesContext instance, bi v y l initial request (hay non-postback request) Restore View phase s to mt empty View component tree v lu n vo FacesContext instance, sau khi View c to, life cycle lp tc chuyn sang Render Response Phase bi v khng c incoming field data trong request (request value) user s thy trang registration trong browser- Gi s user nhp username, qun nhp password, sau nhn nt login, lc ny n s restore li View trc (postback), d liu lc ny c lu di dng String, sau chuyn sang Process Validation phase, lc ny d liu s c kim tra v convert, lc ny to mt error message c a vo trong FacesContext, component no b li s c nh du invalid, sau hon tt Process Validations phase. Bi v c validation or conversion errors, life cycle chuyn sang Render Response phase, render li trang login.xhtm v hin th ra error message. - Lc ny user nhp ng nh dng, s chuyn sang Update Model Values phase, lc ny managed bean properties s c update new values m c submitted t form- Sau , chuyn sang Invoke Application phase, thc thi event gy ra form submission (query database), tr v outcome string, Navigation Handler s xc nh next page, sau sang Render Response phase, tr response v client

Managed Beansnh nghaManaged bean l m lp Java bnh thng, c ng k v c qun l bi JSF framework, managed bean c s dng nh l tng model ca UI component. Trong JSF 1.2, mt lp java l mt managed bean, bn phi cu hnh n trong configuration file (c th trong jsf gi l faces-config.xml). Nhng nu s lng managed bean qu ln, chng ta s rt kh qun l tn v nhng thay i, v th JSF 2 gii thiu annotations ng k bean. Vi annotations, tt c cu hnh u nm trong file java class v th s d dng qun l hn. Nhng trong mt s trng hp cu hnh phc tp, chng ta phi dng jsf configuation file cu hnh managed bean.V d: cu hnh managed beanJSF 1.2

userBeanexample.UserBeanrequest

JSF 2.0packageexample;importjavax.faces.bean.ManagedBean;importjavax.faces.bean.RequestScoped;@ManagedBean(name="user")@RequestScopedpublicclass UserBean {privateString name;publicString getName(){return name;}publicvoid setName(String name){this.name= name;}public UserBean(){}}

- @ManagedBean : ng k java class l managed bean, vi thuc tnh name, nu khng ch r thuc tnh name th managed bean s mc nh ly tn class vi ch ci u tin vit thng l tn managed bean. Trong trng hp trn, tn ca managed bean l userBean. Mi khi bean c nh ngha, n c th c truy cp bi cc UI components ca JSF (khi JSF render mt page, n s gi phng thc getName, khi user submit page, n s gi phng thc setName thit lp li gi tr ca managed bean)

Backing BeanL mt bean cha UI components.V d:@ManagedBean(name="quizForm") @SessionScoped public class QuizFormBean {private UIInput usernameComponent;public UIInput getUsernameComponent () { return usernameComponent; }public void setAnswerComponent(UIInput newValue) { usernameComponent = newValue; }}

Khi s dng backing bean, bn phi kt ni nhng components trong form ti bean, s dng bindingattribute.

Bean ScopeKhi nh ngha mt bean, bn nn phi ch r scope ca n (mc nh l request scope). C 3 loi scope thng dng : Request scope Session scope Application scope

- Request scope : N bt u t lc HTTP request c submit v kt thc sau khi response c tr v client. S dng request scope cho message thng bo.- Session scope: i khi chng ta cn nhng d liu c lu xuyn sut qua nhiu trang bi v giao th HTTP l stateles (khng lu gi trng thi), khi chn ta dng session scope, mt session chp dt khi web application gi phng thc invalidate trong HttpSession object hoc l n times out. V d: s dng session scope lu tr thng tin ca user hoc l shopping cart- Application scope: tn ti trong ton ng dng web. N chp dt khi ng dng c xo khi application server, s dng application scope m s ngi truy cp...

NavigationStatic Navigation (iu hng tnh)- Static navigationV d:

Gi tr ca action c gi l outcome, nu outcome khng c phn m rng, n s thm phn m rng ca chnh view hin ti. Trc JSF 2, bn cn phi khai bo navigation rule trong faces-config.xml, k t phin bn JSF 2 th khng cn.Dynamic Navigation (iu hng ng)Standard JSF TagsVic pht trin cc ng dng JSF i hi phi c mt th vin th JSF tt. JSF 1.2 c hai th vin th: core v HTML. JSF 2.0 c su th vin c lit k trong bng sau vi hn 100 th:Th vinnh danh namespaceTin t thng dngS lng th

Corehttp://java.sun.com/jsf/coref:27

HTMLhttp://java.sun.com/jsf/htmlh:31

Faceletshttp://java.sun.com/jsf/faceletsui:11

Composite Componentshttp://java.sun.com/jsf/corecomposite:12

JSTL Corehttp://java.sun.com/jsf/corec:7

JSTL Functionshttp://java.sun.com/jsf/corefn:16

Mt trang JSF c th dng nhiu th vin khc nhau, ng vi mi th vin c th t tin t bt k cc th c xc nh ng th vin. V d:

...

Tng quan cc th JSF CoreThM t

attributeThit lp mt thuc tnh (kha/gi tr)

paramThm mt parameter

facetThm mt facet

actionListenerThm mt action listener

setPropertyActionListenerThm mt action listener thit lp mt property

valueChangeListenerThm mt value change listener

phaseListenerThm mt phase listener

eventThm mt thnh phn h thng event listener

converterThm mt converter ty

convertDateTimeThm mt datetime converter

convertNumberThm mt number converter

validatorThm mt validator

validateDoubleRangeKim tra gi tr nm trong khong kiu Double

validateLengthKim tra di ca gi tr

validateLongRangeKim tra gi tr nm trong khong kiu Long

validateRequiredKim tra gi tr c c nhp vo hay khng

validateRegexKim tra gi tr c thch hp iu kin hay khng

validateBeanS dng Bean Validation API kim tra

loadBundleTi mt gi ti nguyn, cc gi thuc tnh nh Map

selectitemsCh nh chn nhiu item

selectitemCh nh chn mt item

verbatimiu chnh ni dung, vn bn

viewParamXc nh mt view parameter khi to bi mt request parameter

metadataCha view parameter

ajaxCho php dng Ajax

viewTo mt khung nhn cp ngoi cng

subviewTo mt khung nhn cp con

Attribute, Parameter v Facet.Cc th f:attribute, f:param v f:facet l nhng th thng dng thm thng tin vo mt thnh phn. Mi thnh phn c th cha cc cp tn/gi tr trong bn thuc tnh. C th thit lp mt thuc tnh trong mt trang v lp trnh truy xut n. V d:

Th f:param cng cho php xc nh mt cp tn/gi tr, nhng gi tr c t trong mt thnh phn con khc. Tuy nhin cc thnh phn con c dng list, khng phi dng bn . C th s dng f:param nu cn thm vo cc gi tr cng tn.

Th f:facet thm mt thnh phn vo facet map. Facet khng phi l mt thnh phn con, mi thnh phn c c list thnh phn con ln bn thnh phn facet. Cc thnh phn facet thng c biu din mt ni c bit. Mt trang Facets gc c hai facet l head v body.

Bng cc thuc tnh ca cc th f:attribute, f:param v f:facet:Thuc tnhM t

nameTn ca thuc tnh, tham s hoc facet

valueGi tr ca thuc tnh hoc tham s (khng p dng cho facet)

bindingKt ni vi i tng d liu (ch dng cho f:param)

idId ca th (ch dng cho f:param)

Tng quan cc th JSF HTML.Cc th JSF HTML c chia thnh cc nhm khc nhau ty theo cng dng v c tnh ca cc th. InputTh M t

inputTextiu khin nhp dng single-line

inputTextareaiu khin nhp dng multiline

inputSecretiu khin nhp dng password

inputHiddenHidden field

OutputThM t

outputLabelText dng label

outputLinkLink lin kt

outputFormatText dng single-line nhng nh dng thng ip phc tp

outputTextText dng single-line

outputStylesheetThm mt stylesheet vo trang

outputScriptThm mt script vo trang

graphicImageHin th mt image

CommandThM t

commandButtonButton: submit, reset hoc pushbutton

commandLinkLink dng button

SelectionThM t

selectOneListboxDanh sch ch c chn 1 item

selectOneMenuDanh mc ch c chn 1 item

selectOneRadioRadio button ch c chn 1 item

selectBooleanCheckboxCheckbox

selectManyCheckboxDanh sch cc checkbox

selectManyListboxDanh sch c chn nhiu listbox

selectManyMenuDanh mc c chn nhiu item

LayoutThM t

panelGridLayout dng li

panelGroupNhm cc panel

Data tableThM t

dataTableTable lu d liu

MessageThM t

messageHin th thng ip gn y

messagesHin th tt c cc thng ip

Cc thuc tnh thng dngNgoi cc thuc tnh c bn HTML v DHTML nh: border, title, onclick, onfocus, onblur cn c th s dng thm cc thuc tnh JSF sau:Thuc tnh M t

idId ca th

bindingKt ni vi i tng d liu

renderedS dng hoc khng s dng rendered

styleClassTn class CSS

valueGi tr

valueChangeListenerM t phng thc tr v gi tr thay i

converterChuyn i tn class

validatorTn validator ca thnh phn

requiredYu cu bt buc nhp gi tr hay khng

converterMessage, validatorMessage, requiredMessageThng bo li cho validation

Tt c thnh phn c th c thuc tnh id, binding v rendered. Thuc tnh value v converter cho php xc nh gi tr thnh phn chuyn i t kiu chui thnh kiu object hoc ngc li.Thuc tnh validator, required v valueChangeListener s dng cho cc iu khin nhp kim tra v thay i d liu.

ID v BindingThuc tnh id cho php: Truy cp cc thnh phn JSF t cc th JSF khc. C c s quan h gia cc thnh phn trong m Java. Truy cp cc yu t HTML vi scripts. Thuc tnh id cng cho php tham kho mt thnh phn t th khc. V d:

Cng c th s dng cc nh danh thnh phn c c mt thnh phn trong m java. V d:UIComponent component = event.getComponent().findComponent(name); C mt cch khc truy cp thnh phn trong m Java. nh ngha mt thnh phn, cung cp phng thc get v set ri s dng thuc tnh binding:

Thuc tnh binding c nh ngha vi mt gi tr biu thc:private UIComponent nameField = new UIInput();public UIComponent getNameField() { return nameField; }public void setNameField(UIComponent newValue) { nameField = newValue; }

Value, Converter v ValidatorInput, output, command v data table u c mt gi tr. Cc th lin quan trong th vin HTML nh h:inputText v h:dataTable u c mt thuc tnh gi tr. C th nh ngha gi tr vi mt chui:

Thng th phn ln s dng mt gi tr biu thc:

Thuc tnh converter c chia s bi input v output, cho php thm mt converter vo thnh phn. Th input cng c mt thuc tnh validator c th s dng thm validator vo thnh phn.

RenderedChng ta s dng thuc tnh rendered bao gm hoc loi tr mt thnh phn, da trn mt iu kin. V d, mun hin th nt Logout ch khi ngi dng hin ang log in:

Panel.C th xc nh s ct bng thuc tnh columns:

Thuc tnh column l khng bt buc, nu khng khai bo, mc nh s ct l 1. Th h:panelGrid t cc thnh phn trong ct t tr qua phi, t trn xung di. V d, nu c mt panel grid vi 3 ct v 9 thnh phn, s phi c 3 hng, mi hng 3 ct. Nu khai bo 3 hng v 10 thnh phn, s c c 4 hng, v hng cui s ch c 1 ct u tin cha thnh phn th 10.

Bng cc thuc tnh ca h:panelGrid:Thuc tnhM t

bgcolorMu nn cho table

border dy ng vin ca table

cellpadingKhong cch t ng bin ti ni dung

cellspacingKhong cch gia cc

columnClassesCSS cho ct

columnsS ct ca table

footerClassCSS cho footer ca table

frameKhung bao quanh table, c cc gi tr:none, above, below, hsides, vsides, lhs, rhs, box, border

headerClassCSS cho header ca table

rowClassesCSS cho dng

rulesNhng quy nh cho cc , c cc gi tr: groups, rows, columns, all

summaryTng hp cu trc ca table

captionClass, captionStyleCSS cho cc ch thch ca table

binding, id, rendered, valueThuc tnh c bn

dir, lang, style, styleClass, title, widthHTML 4.0

onclick, ondbclick, onkeydown, onkeypress, onkeyup, onmousedown, onmousemove, onmouseout, onmouseover, onmouseupCc s kin DHTML

C th nh ngha cc lp CSS cho nhng phn khc nhau ca table: header, footer, rows, columns. Cc columnClasses v rowClasses nh ngha danh sch lp CSS ca cc dng v ct, cc lp CSS ny c dng chung.Nhng thuc tnh cellpadding, cellspacing, frame, rules v summary l nhng thuc tnh HTML ch s dng cho table.h:panelGrid thng c s dng vi h:panelGroup, nhm cc thnh phn li thnh mt. V d:

Vic nhm text field v error message t chng vo cng 1 cell ca table.

Bng cc thuc tnh ca h:panelGroup:Thuc tnhM t

layoutNu gi tr l block, s dng th div, ngc li, dng span

binding, id, renderedCc thuc tnh c bn

style, styleClassHTML 4.0

Head, Body v th Form.Bng cc thuc tnh ca h:head v h:body:Thuc tnhM t

id, binding, renderedCc thuc tnh c bn

dir, langstyle, styleClass, target, title (ch dng cho h:body)HTML 4.0

onclick, ondbclick, onkeydown, onkeypress, onkeyup, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup, onunload (ch dng cho h:body)Cc s kin DHTML

Bng cc thuc tnh ca h:form:Thuc tnhM t

prependIdId thng dng trong javascript

binding, id, renderedCc thuc tnh c bn

accept, acceptcharset, dir, enctype, lang, style, styleClass, target, titleHTML 4.0

onclick, ondbclick, onkeydown, onkeypress, onkeyup, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup, onreset, onsubmitCc s kin DHTML

Cng nh HTML, JSF s dng form gi (submit) d liu gia cc trang.Khc vi th form trong HTML c thuc tnh method v action, th h:form trong JSF th khng c nhng thuc tnh ny. Bi v thuc tnh method c th s dng phng thc GET chuyn d liu, iu ny c th dn n vic trn b nh m. V vy JSF ch s dng phng thc POST.Mt khc vic gi hnh ng no s c th hin thng qua thuc tnh action trong tng command (button), vic s lm cho vic chuyn d liu tr nn linh ng hn. Trong cng 1 form c th dng nhiu action khc nhau. Cc yu t Form v JavaScriptJavaServer Faces l tt c v cc thnh phn server-side, nhng n cng c thit k lm vic vi cc ngn ng script, nh JavaScript. V d mt chng trnh s dng JavaScript xc nhn khung password v khung confirm password c trng khp nhau hay khng. Nu khng trng khp, hp thoi JavaScript bo li s hin th. Nu ngc li, form c submit.Chng ta s dng thuc tnh id nh danh cho cc yu t HTML c th truy cp vi JavaScript:.........

Khi ngi dng nhn button, chc nng JavaScript checkPassword s c gi. y l hin thc:function checkPassword(form) { var password = form[form.id + ":password"].value; var passwordConfirm = form[form.id + ":passwordConfirm"].value;if (password == passwordConfirm) form.submit();else alert(Password and password confirm fields dont match);}

Tt c iu khin form to bi JSF c tn theo formName:componentName trong formName biu din form ca iu khin v componentName biu din tn ca iu khin. Nu khng nh danh thuc tnh id, JSF s t to cho mnh. y khng ch nh id cho form, v th truy cp n password, ta s dng:form[form.id + :password]

V d trang index.html

#{msgs.windowTitle} #{msgs.namePrompt} #{msgs.passwordPrompt} #{msgs.confirmPasswordPrompt}

V d hm checkPassword.js

function checkPassword(form) {var password = form[form.id + ":password"].value;var passwordConfirm = form[form.id + ":passwordConfirm"].value;

if (password == passwordConfirm) form.submit();elsealert("Password and password confirm fields don't match"); }

V d styles.css

.evenColumns { font-style: italic; }

.oddColumns { padding-left: 1em;}

V d messages.properties

windowTitle=Accessing Form Elements with JavaScriptnamePrompt=Name:passwordPrompt=Password:confirmPasswordPrompt=Confirm Password:

Text Fields v Text AreasCc iu khin nhp l tr ct trong hu ht cc chng trnh web. JSF h tr 3 th sau: h:inputText h:inputSecret h:inputTextareaBng cc thuc tnh ca h:inputText, h:inputSecret, h:inputTextarea v h:inputHidden:Thuc tnhM t

colsS lng ct (ch dng cho h:inputTextarea)

immediateCc thuc tnh c bn ca JSF

redisplayTh hin li gi tr khi reload trang (ch dng cho h:inputSecret)

requiredYu cu nhp d liu khi submit form

rowsS lng hng (ch dng cho h:inputTextarea)

valueChangeListenerM t phng thc tr v gi tr thay i

labelDng thng bo li (khng dng cho h:inputHidden)

binding, converter, converterMessage, id, rendered, required, requiredMessage, value, validator, validatorMessageCc thuc tnh c bn

accesskey, alt, dir, disabled, lang,maxlength, readonly, size, style,styleClass, tabindex, titleHTML 4.0

autocompleteT ng in gi tr

onclick, ondbclick, onkeydown, onkeypress, onkeyup, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup, onselectCc s kin DHTML

Tt c 3 th trn u c cc thuc tnh immediate, required, value v valueChangeListener. Thuc tnh immediate s dng cho thay i gi tr nh hng n giao din ngi dng v him khi dng bi 3 th ny. Thay vo , chng thng c s dng bi cc thnh phn nhp nh listbox.Ba thuc tnh cols, rows, redisplay ch c dng cho mt loi th. Thuc tnh rows v cols dng cho h:inputTextarea xc nh s dng v s ct. Thuc tnh redisplay s dng cho th h:inputSecret l mt boolean xc nh xem c tr v gi tr hay khng v hin th n khi form c submit li.

V d th h:inputText v h:inputSecret

V dHin th

Thuc tnh size xc nh s k t hin th trn text field, nhng v hu ht cc phng ch a dng v chiu rng nn thuc tnh size khng chnh xc, n c th hin th 6 k t thay v 5 nh khai bo. Thuc tnh maxlength xc nh s k t ti a m text field hin th. Thuc tnh ny l chnh xc.Th h:inputTextarea c thuc tnh cols v rows xc nh s lng ct v hng tng ng. Thuc tnh cols cng tng t nh thuc tnh size ca th h:inputText v cng khng c chnh xc.V d cho th h:inputTextareaV dHin th

Hidden FieldsJSF h tr cho cc mng n bng th h:inputHidden. Cc mng n thng s dng vi JavaScript gi d liu v li server. Th h:inputHidden c cc thuc tnh ging nh l cc th input khc, ngoi tr mt iu l n khng h tr cc th HTML v DHTML.

V d v s dng Text Fields v Text Areas

Trang index.xhtml

#{msgs.indexWindowTitle} #{msgs.namePrompt} #{msgs.passwordPrompt} #{msgs.tellUsPrompt}

Trang thankYou.xhtml

#{msgs.thankYouWindowTitle} #{user.name}

#{user.aboutYourself}

V d UserBean.java

package com.corejsf;

import java.io.Serializable;

import javax.inject.Named; // or import javax.faces.bean.ManagedBean; import javax.enterprise.context.SessionScoped; // or import javax.faces.bean.SessionScoped;

@Named("user") // or @ManagedBean(name="user") @SessionScoped public class UserBean implements Serializable { private String name; private String password;private String aboutYourself;

public String getName() { return name; }public void setName(String newValue) { name = newValue; }

public String getPassword() { return password; } public void setPassword(String newValue) { password = newValue; }

public String getAboutYourself() { return aboutYourself; } public void setAboutYourself(String newValue) { aboutYourself = newValue; } }

V d messages.properties

indexWindowTitle=Using Textfields and TextareasthankYouWindowTitle=Thank you for submitting your informationthankYouPageTitle=Thank you!indexPageTitle=Please enter the following personal informationnamePrompt=Name:passwordPrompt=Password:tellUsPrompt=Please tell us about yourself:aboutYourselfPrompt=Some information about you:submitPrompt=Submit your information

Hin th Text v Images.JSF s dng cc th sau hin th text v Images:h:outputTexth:outputFormath:graphicImageTh h:outputText l mt trong nhng th JSF n gin nht. Ch vi mt s t cc thuc tnh, n khng t to cc yu t HTML. Thay vo , n ch to ra text, tr khi chng ta ch nh thuc tnh style hoc styleClass, h:outputText s to ra mt th span HTML. JSF 2.0, ta khng cn th h:outputText v chng ta c th chn vo mt gi tr biu thc mt cch n gin, nh #{msgs.namePrompt} vo trang web. Ch nn s dng th h:outputText trong cc trng hp: Xut ra gi tr theo styleTrong mt panel grid m bo rng text c t trong mt ca gridTo HTML markupTh h:outputText v h:outputFormat c mt thuc tnh duy nht gia cc th JSF khc, l escape. Mc nh thuc tnh escape l true, n s chuyn i cc k t < > & thnh cc k t < > &amp tng ng. Vic chuyn i cc k t ny s trnh c vic tn cng bng m. Thit lp thnh false nu mun to HTML markup.Ch : Thuc tnh value ca th h:outputText c th khng bao gi c k t

#{msgs.linkText}

to 1 commandlink ging nh button c th submit d liu bn c th tham kho cch lm sau:registerTh h:outputLink cng ging nh HTML ch xut ra 1 ng link n mt trang web.Thuc tnh cho h:outputLinkThuc TnhM T

binding, converter, id, lang, rendered, valueCc thuc tnh c bn

accesskey, charset, coords, dir, disabled lang, hreflang, rel, rev, shape, style, styleClass, tabindex, target, title, typeHTML 4.0

Onblur,onclick,ondblclick,onfocus, onkeydown, onkeypress,onkeyup, onmousedown, mousemove,onmouseout,onmouseover, onmouseup.Cc s kin DHTML

Cc v d h:outputLinkV dM t

< h:outputLinkvalue=http://java.net>< h:graphicImage value="net.jpg"/>< h:outputText value="java.net"/>

#{form.welcomeLinkText}

Conclusion

Table of Contents

Ch : Nu bn s dng JSF 1.1, bn cn phi s dng e: ng nguyn vn t kha khi bn mun t vn bn bn trong mt th. V d, v d cui cng trong Bng 4-22phi lTable of ContentsTrong JSF 1.1, cc vn bn s xut hin bn ngoi lin kt. Bin php khc phc l tvn bn bn trong thnh phn khc, chng hn nh h: outputText hoc f:verbatim.iu ny vn c c nh trong JSF 1.2.

Cc th Selection.JSF c tt c 7 th lm cho cc la chn h:selectBooleanCheckbox h:selectManyCheckbox h:selectOneRadio h:selectOneListbox h:selectManyListbox h:selectOneMenu h:selectManyMenu

V d v Selection TagsTagCode HTMLV d minh ha

h:selectBooleanCheckbox

h:selectManyCheckbox...

...

h:selectOneRadio...

...

h:selectOneListbox

Cheese

...

h:selectManyListbox

Cheese

...

h:selectOneMenu

Cheese

...

h:selectManyMenu

Sunday

...

h:selectBooleanCheckbox l mt th chn n gin nht hin th mt checkbox a vo 1 gi tr boolean.Cng c th hin th mt danh sch cc chekbox vi th h: selectManyCheckbox.Nhng th bt u vi selectOne cho php chn 1 item.Cc th selectOne hin th danh sch cc radioButton,Menu single-Select hoc ListBox.Cc th selectMany hin th danh sch cc checkbox,list menu,hoc listbox.

Bng cc thuc tnh ca cc th h:selectBooleanCheckbox, h:selectManyCheckbox,h:selectOneRadio, h:selectOneListbox, h:selectManyListbox, h:selectOneMenu, vh:selectManyMenu

Thuc tnhM t

enabledClass, disabledClassCc lp CSS cho th h:selectOneRadio v h:selectManyCheckbox

selectedClass, unselectedClassCc lp CSS cho h:selectManyCheckbox

layoutDng layout cho th hin ca th theo hng dc hoc hng ngang (ch dng cho h:selectOneRadio v h:selectManyCheckbox)

labelS dng thng bo li.

collectionType1 chui hoc 1 gi tr biu thc nh l java.util.TreeSet

hideNoSelectionOptionn cc ItemNo selection option

binding, converter,converterMessage ,requiredMessage ,id, immediate, required, rendered,validator, validatorMessage ,value, valueChangeListenerCc thuc tnh c bn

accesskey, border, dir, disabled, lang,readonly, style, styleClass, size,tabindex, titleHTML 4.0

onblur, onchange, onclick, ondblclick,onfocus, onkeydown, onkeypress, onkeyup,onmousedown, onmousemove, onmouseout,onmouseover, onmouseup, onselectCc s kin DHTML

Checkboxes and Radio Buttons Hai th JSF hin th cc checkbox: h:selectBooleanCheckbox h:selectManyCheckboxV d th h:selectManyCheckbox

V d th h:selectManyCheckbox

Red

...

V d minh ha cho s kin thuc tnh value ca h:selectOneRadio xc nh chn Items.Chng ta s dng th f:selectItem hin th cc radio buttons: