TechAlpine – Txog tej Technology

Txheej txheem cej luam: Nyob rau cov tshooj no peb yuav tham txog qhov yuav ua raws li cov JSF (JavaServer ib sab) templates. Tus qauv siv template yog ib nam tseem ceeb ntawm ib daim ntawv thov web. Template yog ib usable rov tivthaiv uas yuav muab siv los ua kev loj hlob daim UI web yooj yim thiab ceev.

Taw qhia: Ntsib lub JavaServer yog lub moj khaum java raws li mas UI tivthaiv txoj kev loj hlob. Nws yog ib tug neeg rau zaub mov tej tshuab li daim UI Cheebtsam Tus Kas tswj tseg rau hauv tus neeg rau zaub mov. Cov UI Cheebtsam nrog nkawv lub neej nws hais tseg thiab raws li tus java enterprise ib tsab qauv (Java EE qauv). JSF kev siv khiav rau ib tug neeg rau zaub web los yog tsab ntawv teev npe mov ib yam li tomcat, weblogic, websphere, jetty thiab lwm yam.










JSF Template: Ib template yuav tau txhais tias yog ib qho interface layout style tib yam thiab feature. Ib template yog tsim raws li tus usable rov tivthaiv thiab siv nyob rau hauv tag nrho cov nplooj ntawv hauv daim ntawv thov. Yog qhov zoo uas siv template

• Re-usability ntawm qhov layout heev
• Kev xav
• Maintainability yooj yim
• Yooj yim li / kev hloov kho
• Siv ib tivthaiv plug-in

JSF template no kuj muaj cov yam ntxwv hais los saum toj. Nram qab no yog ib co uas facelets cim npe rau hom nta rau txheej povhwm poob haujlwm. Nyob rau hauv qab no kuv yuav piav tus functionalities ntawm lossis txhua.

• povhwm poob haujlwm:ntxig: Raws li qhia lub npe, Nws yog siv ib tug template thiab ntawd hais yuav muab tso rau hauv lub template. Nws yuav siv ib tug xib npe’ attribute qhia hais tias cov chaw sab.

Qhia 1: Displaying qauv ntxig lag luam
[chaws]

<povhwm poob haujlwm:ntxig npe =”header” >

<povhwm poob haujlwm:xws li src =”header.xhtml” />

</povhwm poob haujlwm:ntxig>

[/chaws]

• povhwm poob haujlwm:txhais kom meej :No lossis siv kom txhais tau cov ntsiab lus/ntawv yuav tsum tso/hloov nrog rau ib txoj kev poob haujlwm:ntxig lossis. Nws ua tau ntau xyoo txog lub neej ntawd tus nqi (tam sim no nyob rau hauv cov template) muaj ib cov lus qhia kev cai.

Listing2: Displaying qauv txhais tau lag luam

[chaws]

<povhwm poob haujlwm:txhais tau lub npe =”header”>

<h2>Phau ntawv kev cai header</h2>

</povhwm poob haujlwm:txhais kom meej>

[/chaws]

• povhwm poob haujlwm:xws li: No lossis siv kom tsuas muaj cov ntsiab lus ntawm ib sab xhtml rau lwm sab xhtml. Qhov no xwb li yog ' jsp:xws li’ lossis nyob rau phab jsp.

Listing3: Displaying coj qhia lag luam

[chaws]

<povhwm poob haujlwm:ntxig npe =”ntsiab lus” >

<povhwm poob haujlwm:xws li src =”Contents.xhtml” />

</povhwm poob haujlwm:ntxig>

[/chaws]

• povhwm poob haujlwm:muaj pes tsawg leeg: No xyov lossis muaj ob nta. Yog hais tias nws yog siv nrog ib ' template’ attribute, ces nws loads cov template. Cov me nyuam ntawm no lossis yuav siv los txhais kom meej qhov layout ntawm lub template. No lossis kuj yuav siv kom txhais tau cov lus hais thiab ces cov neeg hais los hauv lub template.

Listing4: Displaying cov kev pab uas muaj pes tsawg leeg coj
Usage1: Nyob rau hauv hom template

[chaws]

<povhwm poob haujlwm:muaj pes tsawg leeg template =”templates/commonheader.xhtml”>

<povhwm poob haujlwm:txhais tau lub npe =”header”>

<h2>Kev cai phab 1 header</h2>

</povhwm poob haujlwm:txhais kom meej>

</povhwm poob haujlwm:muaj pes tsawg leeg>

[/chaws]

Usage2: Nyob rau hauv hom tivthaiv

[chaws]

<lub cev>

<povhwm poob haujlwm:muaj pes tsawg leeg>

<h1>Neej ntawd tshwm sim header</h1>

</povhwm poob haujlwm:muaj pes tsawg leeg>

</lub cev>

[/chaws]

Daim duab hauv qab no qhia tau hais tias lub Cheebtsam dav ntawm ib JSF template

Daim duab 1: Hom architecture ntawm ib JSF template










Nyob rau sab lus no peb yuav tham txog txoj kev ruam yog kauj ruam los txhais tau ib JSF template.

Ib kauj ruam: Ntawm no peb yuav xub tsim cov header tivthaiv tus template. Tom qab no header tivthaiv yuav tau xob-hauv nrog cov nplooj ntawv template. Cov ntsiab lus yog lub neej ntawd ib tug thiab yuav tau muas dua tshiab nyob hauv lub txoos yuav siv nrog cov ntsiab lus kev cai. Txoj Kex lossis twb tau muab siv kom txhais tau cov header tivthaiv.

Listing5: Qauv displaying header tivthaiv (header_name.xhtml)

[chaws]

<povhwm poob haujlwm:muaj pes tsawg leeg>

<h1>Vim header tivthaiv</h1>

</povhwm poob haujlwm:muaj pes tsawg leeg>

[/chaws]

Kauj ruam 2: Nyob rau theem ob peb yuav tsim lub footer tivthaiv. Muaj pes tsawg leeg tib yam lossis yuav muab coj los txhais tau lub footer.

Listing6: Qauv displaying footer tivthaiv (footer_name.xhtml)

[chaws]

<povhwm poob haujlwm:muaj pes tsawg leeg>

<h1>Vim footer tivthaiv</h1>

</povhwm poob haujlwm:muaj pes tsawg leeg>

[/chaws]

Kauj ruam 3: Nyob rau hauv cov kauj ruam no peb yuav tsim cov ntawv. Cov ntsiab lus tseeb yuav tau hloov li hauv lub template hauv qhov kev siv sij. Rov muaj pes tsawg leeg lossis yuav muab siv los txhais tau cov ntsiab lus.

Listing7: Displaying tivthaiv cov qauv (contents_name.xhtml)

[chaws]

<povhwm poob haujlwm:muaj pes tsawg leeg>

<h1>Sai cov nplooj ntawv</h1>

</povhwm poob haujlwm:muaj pes tsawg leeg>

[/chaws]

Kauj ruam plaub: Nyob rau hauv cov kauj ruam no peb yuav tsim ntawv template (Template.xhtml) nrog header.xhtml, footer.xhtml thiab contents.xhtml. Tej cheebtsam peb yuav tau xob ua ntawv template uas yog ib yam (.xhtml) cov ntaub ntawv. Peb yuav siv ui.insert thiab kev povhwm poob haujlwm:muaj ntxiv lub Cheebtsam. Tus attribute lub npe ntawm tus povhwm poob haujlwm:ntxig lossis yuav muab coj los qhia coj sab lus thiab yuav hloov tau cov lus qhia.

Listing8: Qauv displaying template (Template.xhtml)

[chaws]

<h:lub cev>

<povhwm poob haujlwm:ntxig npe =”header_name” >

<povhwm poob haujlwm:xws li src =”header_name.xhtml” />

</povhwm poob haujlwm:ntxig>

<povhwm poob haujlwm:ntxig npe =”content_name” >

<povhwm poob haujlwm:xws li src =”contents_name.xhtml” />

</povhwm poob haujlwm:ntxig>

<povhwm poob haujlwm:ntxig npe =”footer_name” >

<povhwm poob haujlwm:xws li src =”footer_name.xhtml” />

</povhwm poob haujlwm:ntxig>

</h:lub cev>

[/chaws]

Kauj ruam 5: Nyob rau hauv cov kauj ruam no peb yuav qhia yuav thauj template ntaub ntawv rau ib sab (home_page.xhtml). Nyob hauv thawj ntu peb yuav thauj template ntaub ntawv cov ntaub ntawv kawm vim. Thiab nyob rau ntu ob peb yuav thauj cov template thiab override lub neej ntawd cov ui: txhais kom meej lossis. Qhov kev povhwm poob haujlwm: muaj pes tsawg leeg lossis yuav muab sau rau hauv ob tus piv txwv rau thauj lub template.

Qhia 9: Qauv loading cov template nrog cov ntaub ntawv kawm vim

[chaws]

<h:lub cev>

<povhwm poob haujlwm:muaj pes tsawg leeg template =”Template.xhtml”>

</h:lub cev>

[/chaws]

Qhia 10: Loading tus template muaj kawm kev cai qauv

[chaws]

<h:lub cev>

<povhwm poob haujlwm:muaj pes tsawg leeg template =”templates/Template.xhtml”>

<povhwm poob haujlwm:txhais tau lub npe =”content_name”>

<h:txuas tus nqi =”Ib sab” sij hawm =”page_one” />

&nbsp&nbsp;

<h:txuas tus nqi =”Page 2” sij hawm =”page_two” />

</povhwm poob haujlwm:txhais kom meej>

</povhwm poob haujlwm:muaj pes tsawg leeg>

</h:lub cev>

[/chaws]

Tam sim no nyob rau hauv cov lus nram peb yuav tsim ib tug complte piv txwv nrog txhua lub Cheebtsam.

Tsim header: Tsim header tej ntaub ntawv 'header_comp.xhtml'. Raws li tau piav los saum no qhov no yog qhov uas tivthaiv rau header seem ntawm daim UI layout. Daim ntawv thov yuav siv nws ncaj qha los pauv cov ntsiab lus uas muaj kev cai qhov tseem ceeb.

Qhia 11: Qauv ntaub ntawv header (header_comp.xhtml)

[chaws]

<?xml version =”1.0″ encoding =”UTF-8″?>

<!DOCTYPE html PUBLIC “-//W3C / / DTD XHTML 1.0 Hauv / / EN”

“http://www.w3.org/TR/xhtml1/DTD/xhtml1-Transitional.dtd”>

<html xmlns =”http://www.w3.org/1999/xhtml”

xmlns:UI =”http://java.Sun.com/jsf/facelets”>

<lub cev>

<povhwm poob haujlwm:muaj pes tsawg leeg>

<h1>Qhov no nws yog ntawv header vim</h1>

</povhwm poob haujlwm:muaj pes tsawg leeg>

</lub cev>

</html>

[/chaws]

Ua footer: Tsim footer ntaub ntawv 'footer_comp.xhtml'. Raws li tau piav los saum no qhov no yog qhov uas tivthaiv rau footer ntawm cov UI layout ntu. Daim ntawv thov yuav siv nws ncaj qha los pauv cov ntsiab lus uas muaj kev cai qhov tseem ceeb.

Qhia 12: Qauv ntaub ntawv footer (footer_comp.xhtml)

[chaws]

<?xml version =”1.0″ encoding =”UTF-8″?>

<!DOCTYPE html PUBLIC “-//W3C / / DTD XHTML 1.0 Hauv / / EN”

“http://www.w3.org/TR/xhtml1/DTD/xhtml1-Transitional.dtd”>

<html xmlns =”http://www.w3.org/1999/xhtml”

xmlns:UI =”http://java.Sun.com/jsf/facelets”>

<lub cev>

<povhwm poob haujlwm:muaj pes tsawg leeg>

<h1>Qhov no yog vim footer sab</h1>

</povhwm poob haujlwm:muaj pes tsawg leeg>

</lub cev>

</html>

[/chaws]

Tsim cov nplooj ntawv: Cov ntaub ntawv kawm ntawd ' content_comp.xhtml’ muaj cov ntu txheej txheej povhwm poob haujlwm. Raws li tau piav los saum no qhov no yog qhov uas tivthaiv rau cov ntu ntawm daim UI layout. Daim ntawv thov yuav siv nws ncaj qha los pauv cov ntsiab lus uas muaj phau ntawv kev cai.

Qhia 13: Qauv rau cov ntaub ntawv (content_comp.xhtml)

[chaws]

<?xml version =”1.0″ encoding =”UTF-8″?>

<!DOCTYPE html PUBLIC “-//W3C / / DTD XHTML 1.0 Hauv / / EN”

“http://www.w3.org/TR/xhtml1/DTD/xhtml1-Transitional.dtd”>

<html xmlns =”http://www.w3.org/1999/xhtml”

xmlns:UI =”http://java.Sun.com/jsf/facelets”>

<lub cev>

<povhwm poob haujlwm:muaj pes tsawg leeg>

<h1>Qhov no yog vim cov nplooj ntawv</h1>

</povhwm poob haujlwm:muaj pes tsawg leeg>

</lub cev>

</html>

Ua kom muaj sab template: Tus template ntaub ntawv muaj tag nrho cov peb Cheebtsam. Nws yeej yog assembling tas nrho cov hom Cheebtsam. Ces tus template yuav loaded mus rau sab as per lub sij. Tus txheem yuav raug hloov uas muaj povhwm poob haujlwm:txhais kom meej lossis.

Qhia 14: Qauv template ntaub ntawv (template_comp.xhtml)

[chaws]

<?xml version =”1.0″ encoding =”UTF-8″?>

<!DOCTYPE html PUBLIC “-//W3C / / DTD XHTML 1.0 Hauv / / EN”

“http://www.w3.org/TR/xhtml1/DTD/xhtml1-Transitional.dtd”>

<html xmlns =”http://www.w3.org/1999/xhtml”

xmlns:h =”http://java.Sun.com/jsf/html”

xmlns:UI =”http://java.Sun.com/jsf/facelets”>

<h:lub taub hau>Qhov no yog cov header</h:lub taub hau>

<h:lub cev>

<div style =”ciam teb dav:4px; ciam teb-xim:dub nciab; ciam teb-style:khoom;”>

<povhwm poob haujlwm:ntxig npe =”header_comp” >

<povhwm poob haujlwm:xws li src =”/templates/header_comp.xhtml” />

</povhwm poob haujlwm:ntxig>

</div>

<br />

<div style =”ciam teb dav:6px; ciam teb-xim:dub nciab; ciam teb-style:khoom;”>

<povhwm poob haujlwm:ntxig npe =”content_comp” >

<povhwm poob haujlwm:xws li src =”/templates/content_comp.xhtml” />

</povhwm poob haujlwm:ntxig>

</div>

<br />

<div style =”ciam teb dav:4px; ciam teb-xim:liab; ciam teb-style:khoom;”>

<povhwm poob haujlwm:ntxig npe =”footer_comp” >

<povhwm poob haujlwm:xws li src =”/templates/footer_comp.xhtml” />

</povhwm poob haujlwm:ntxig>

</div>

</h:lub cev>

</html>

[/chaws]

Sau cov lug: Tam sim no peb yuav tsim tau lug siv tsim dlua tus template.

Qhia 15: Lug nrog tus template (sample_page.xhtml)

[chaws]

<?xml version =”1.0″ encoding =”UTF-8″?>

<!DOCTYPE html PUBLIC “-//W3C / / DTD XHTML 1.0 Hauv / / EN”

“http://www.w3.org/TR/xhtml1/DTD/xhtml1-Transitional.dtd”>

<html xmlns =”http://www.w3.org/1999/xhtml”

xmlns:h =”http://java.Sun.com/jsf/html”

xmlns:UI =”http://java.Sun.com/jsf/facelets”>

<h:lub cev>

<povhwm poob haujlwm:muaj pes tsawg leeg template =”templates/template_comp.xhtml”>

<povhwm poob haujlwm:txhais tau lub npe =”header_name”>

<h2>Qauv header</h2>

</povhwm poob haujlwm:txhais kom meej>

<povhwm poob haujlwm:txhais tau lub npe =”content_name”>

<h2>Qauv ntsiab lus</h2>

<h:txuas tus nqi =”Tsev” sij hawm =”home_pg” />

</povhwm poob haujlwm:txhais kom meej>

<povhwm poob haujlwm:txhais tau lub npe =”footer_name”>

<h2>Coj footer</h2>

</povhwm poob haujlwm:txhais kom meej>

</povhwm poob haujlwm:muaj pes tsawg leeg>

</h:lub cev>

</html>

[/chaws]










Xaus: Nyob rau cov tshooj no peb muaj sab laj txog qhov JSF Cheebtsam. Peb kuj muaj nyob ntau lub Cheebtsam ntawm ib template. Qhov kawg ntawm sab lus peb tau ua ib sab nrog ib JSF template tag. Vam tias koj muaj kev to taub lub ntsiab lus yooj yim thiab enjoyed tsab xov xwm.