JSF Template
Visió de conjunt: In this article we will discuss about the implementation of JSF (JavaServer Faces) templates. The template design is an important aspect of any web application. Plantilla és un component reutilitzable que s'utilitza per fer que el desenvolupament interfície web fàcil i més ràpid.
Introducció: JavaServer Faces és un marc basat en Java per al desenvolupament de components d'interfície d'usuari, principalment. Es tracta d'una tecnologia del costat del servidor com els estats dels components d'interfície d'usuari es mantenen al servidor. Els components d'interfície d'usuari estan tenint el seu propi cicle de vida definit i que segueix les normes de l'edició Enterprise Java (estàndards de Java EE). aplicacions JSF s'executen en un servidor web o d'aplicacions com Tomcat, WebLogic, websphere, embarcador, etc..
JSF Template: Una plantilla pot ser definit com un disseny de la interfície comú amb el mateix estil i característica. Una plantilla es fa com un component reutilitzable i s'utilitza en totes les pàgines de la sol·licitud. Els avantatges d'utilitzar la plantilla són
- La reutilització del disseny comú
- Faster development
- manteniment més fàcil
- millora més fàcil / modificació
- S'utilitza com un component plug-in
JSF plantilla també està tenint les característiques anteriors. A continuació es presenten algunes etiquetes Facelets comuns per proporcionar característiques comunes a la capa d'interfície d'usuari. En la següent secció descriuré les funcionalitats de cada etiqueta.
- ui:inserir: Com el seu nom indica, s'usa en una plantilla i s'indica el que s'insereix en la plantilla. S'utilitza un nom’ atribuir a identificar la pàgina inclosa.
Listing 1: La mostra es presenten operació d'inserció
[codi]
<ui:inserir el nom =”encapçalament” >
<ui:src = incloure”header.xhtml” />
</ui:inserir>
[/codi]
- ui:definir :Aquesta etiqueta s'utilitza per definir el contingut / text que s'insereix / reemplaçat amb una interfície d'usuari coincident:etiqueta insert. En realitat, reemplaça el valor per defecte (present a la plantilla) amb un contingut personalitzat.
LISTING2: La mostra es presenten definir l'operació
[codi]
<ui:definir el nom =”encapçalament”>
<h2>text de capçalera personalitzada</h2>
</ui:definir>
[/codi]
- ui:incloure: Aquesta etiqueta s'utilitza per incloure només el contingut d'una pàgina XHTML en una altra pàgina XHTML. Això és igual que 'JSP:incloure’ etiqueta en pàgines JSP.
Listing3: La mostra es presenten incloure l'operació
[codi]
<ui:inserir el nom =”contingut” >
<ui:src = incloure”contents.xhtml” />
</ui:inserir>
[/codi]
- ui:composició: Aquesta etiqueta en particular té dues característiques. Si s'utilitza amb una "plantilla’ atribut, a continuació, es carrega la plantilla. Els fills d'aquesta etiqueta s'utilitzen per definir el disseny de la plantilla. Aquesta etiqueta també es pot utilitzar per definir els elements de grup i, a continuació s'utilitzen aquests elements del grup dins de la plantilla.
Listing4: Mostra que mostra l'ús de la composició de
usage1: En la manera de plantilla
[codi]
<ui:plantilla de composició =”templates / commonheader.xhtml”>
<ui:definir el nom =”encapçalament”>
<h2>pàgina personalitzada 1 encapçalament</h2>
</ui:definir>
</ui:composició>
[/codi]
usage2: En la manera de component
[codi]
<body>
<ui:composició>
<h1>Per defecte comú capçalera</h1>
</ui:composició>
</body>
[/codi]
Següent diagrama mostra els components generals d'una plantilla de JSF
Architecture of JSF template
Figure 1: arquitectura comuna d'una plantilla de JSF
A la següent secció discutirem el procés pas a pas per definir una plantilla de JSF.
pas 1: Aquí crearem el primer component de capçalera de la plantilla. A finals d'aquest component de capçalera es connecta a la pàgina de la plantilla. El contingut és un defecte i serà reemplaçat en l'execució real amb contingut personalitzat. L'etiqueta de composició s'ha utilitzat per definir el component capçalera.
Listing5: La mostra es presenten component de capçalera (header_name.xhtml)
[codi]
<ui:composició>
<h1>component de capçalera per defecte</h1>
</ui:composició>
[/codi]
pas 2: En el segon pas crearem el component de peu de pàgina. Mateixa etiqueta de composició s'utilitza per definir el peu de pàgina.
Listing6: La mostra es presenten component peu de pàgina (footer_name.xhtml)
[codi]
<ui:composició>
<h1>component peu de pàgina predeterminat</h1>
</ui:composició>
[/codi]
pas 3: En aquest pas crearem l'arxiu de contingut. El contingut real serà reemplaçat en la plantilla més endavant en la implementació real. Un cop més l'etiqueta composició s'utilitza per definir el contingut.
Listing7: Mostra presenten component de contingut (contents_name.xhtml)
[codi]
<ui:composició>
<h1>Incompliments pàgina de contingut</h1>
</ui:composició>
[/codi]
pas 4: En aquest pas crearem el fitxer de plantilla (template.xhtml) amb header.xhtml, footer.xhtml i contents.xhtml. Aquests tres components es poden connectar a l'arxiu de plantilla que és una altra (.XHTML) expedient. Utilitzarem ui.insert i ui:incloure afegir els components. L'atribut nom de la interfície d'usuari:etiqueta d'inserció s'utilitza per identificar la secció corresponent i reemplaçar el contingut.
Listing8: Mostra de la plantilla es presenten (template.xhtml)
[codi]
<h:body>
<ui:inserir el nom =”HEADER_NAME” >
<ui:src = incloure”header_name.xhtml” />
</ui:inserir>
<ui:inserir el nom =”content_name” >
<ui:src = incloure”contents_name.xhtml” />
</ui:inserir>
<ui:inserir el nom =”footer_name” >
<ui:src = incloure”footer_name.xhtml” />
</ui:inserir>
</h:body>
[/codi]
pas 5: En aquest pas anem a mostrar com carregar el fitxer de plantilla en una pàgina (home_page.xhtml). En el primer exemple anem a carregar el fitxer de plantilla amb el contingut predeterminat. I en el segon exemple anem a carregar la plantilla i després anul·lar la interfície d'usuari de contingut predeterminat: definir l'etiqueta. la interfície d'usuari: etiqueta composició s'utilitza tant en els exemples per carregar la plantilla.
Listing 9: Mostra la càrrega de la plantilla amb contingut predeterminat
[codi]
<h:body>
<ui:plantilla de composició =”template.xhtml”>
</h:body>
[/codi]
Listing 10: Mostra la càrrega de la plantilla amb contingut personalitzat
[codi]
<h:body>
<ui:plantilla de composició =”templates / template.xhtml”>
<ui:definir el nom =”content_name”>
<h:= Valor de vincle”La pàgina un” resultat =”page_one” />
 
<h:= Valor de vincle”pàgina 2” resultat =”page_two” />
</ui:definir>
</ui:composició>
</h:body>
[/codi]
Ara a la següent secció crearem un exemple complto amb tots els components.
crear capçalera: Crea un fitxer de capçalera 'header_comp.xhtml'. Com es va descriure anteriorment aquest és el component comú per a la secció de capçalera de la disposició de la interfície d'usuari. L'aplicació pot utilitzar directament o canviar el contingut amb valors personalitzats.
Listing 11: Mostra el fitxer de capçalera (header_comp.xhtml)
[codi]
<?xml version=”1.0″ encoding=”UTF-8″?>
<!DOCTYPE html PUBLIC “-//W3C // DTD XHTML 1.0 Transitional//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”>
<body>
<ui:composició>
<h1>Aquest és l'arxiu de capçalera per defecte</h1>
</ui:composició>
</body>
</html>
[/codi]
crear el peu de pàgina: Crea un fitxer de peu de pàgina 'footer_comp.xhtml'. Com es va descriure anteriorment aquest és el component comú per a la secció de peu de pàgina del disseny d'interfície d'usuari. L'aplicació pot utilitzar directament o canviar el contingut amb valors personalitzats.
Listing 12: arxiu de peu de pàgina de la mostra (footer_comp.xhtml)
[codi]
<?xml version=”1.0″ encoding=”UTF-8″?>
<!DOCTYPE html PUBLIC “-//W3C // DTD XHTML 1.0 Transitional//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”>
<body>
<ui:composició>
<h1>Aquesta és la pàgina per defecte de peu de pàgina</h1>
</ui:composició>
</body>
</html>
[/codi]
Crea una pàgina de contingut: El contingut de l'arxiu 'content_comp.xhtml’ conté la secció de contingut de la capa d'interfície d'usuari. Com es va descriure anteriorment aquest és el component comú per a la secció de contingut de la disposició de la interfície d'usuari. L'aplicació pot utilitzar directament o canviar el contingut amb text personalitzat.
Listing 13: Mostra el contingut de l'arxiu (content_comp.xhtml)
[codi]
<?xml version=”1.0″ encoding=”UTF-8″?>
<!DOCTYPE html PUBLIC “-//W3C // DTD XHTML 1.0 Transitional//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”>
<body>
<ui:composició>
<h1>Aquesta és la pàgina de contingut per defecte</h1>
</ui:composició>
</body>
</html>
Crear pàgina de la plantilla: L'arxiu de plantilla conté tots els tres components. Bàsicament és el muntatge de tots els components comuns. A continuació, la plantilla es carregarà a la pàgina real com per l'exigència. Els continguts es poden adaptar amb ui:definir l'etiqueta.
Listing 14: fitxer de plantilla d'exemple (template_comp.xhtml)
[codi]
<?xml version=”1.0″ encoding=”UTF-8″?>
<!DOCTYPE html PUBLIC “-//W3C // DTD XHTML 1.0 Transitional//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:head>Aquest és l'encapçalament</h:head>
<h:body>
<div style =”border-width:4px; border-color:negre; Border-style:sòlid;”>
<ui:inserir el nom =”header_comp” >
<ui:src = incloure”/templates / header_comp.xhtml” />
</ui:inserir>
</div>
<br />
<div style =”border-width:6px; border-color:negre; Border-style:sòlid;”>
<ui:inserir el nom =”content_comp” >
<ui:src = incloure”/templates / content_comp.xhtml” />
</ui:inserir>
</div>
<br />
<div style =”border-width:4px; border-color:red; Border-style:sòlid;”>
<ui:inserir el nom =”footer_comp” >
<ui:src = incloure”/templates / footer_comp.xhtml” />
</ui:inserir>
</div>
</h:body>
</html>
[/codi]
Crea una pàgina de mostra: Ara crearem una pàgina de mostra usant la plantilla creada per sobre.
Listing 15: La pàgina de mostra amb la plantilla (sample_page.xhtml)
[codi]
<?xml version=”1.0″ encoding=”UTF-8″?>
<!DOCTYPE html PUBLIC “-//W3C // DTD XHTML 1.0 Transitional//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:body>
<ui:plantilla de composició =”templates / template_comp.xhtml”>
<ui:definir el nom =”HEADER_NAME”>
<h2>capçalera de la mostra</h2>
</ui:definir>
<ui:definir el nom =”content_name”>
<h2>contingut de la mostra</h2>
<h:= Valor de vincle”Casa” resultat =”home_pg” />
</ui:definir>
<ui:definir el nom =”footer_name”>
<h2>Mostra el peu de pàgina</h2>
</ui:definir>
</ui:composició>
</h:body>
</html>
[/codi]
Conclusió: En aquest article hem discutit sobre els components JSF. També hem descrit diferents components d'una plantilla. Al final de la secció que hem construït una pàgina completa amb una plantilla de JSF. Espero que hagin entès els conceptes bàsics i gaudit de l'article.
