Facelet ile bir şablon yapılması ve o şablondan birden fazla sayfa üretilmesi mümkündür. Facelet'te şablon yapılması için normal bir XHTML sayfası yapılması ve boş olarak tanımlanan (şablonu kullanacak olan sayfanın girmesi gerektiği bölge) bölgeler ui:insert elementi ile işaretlenmesi gerekir. Örneğin aşağıda bir şablon gözükmektedir :
<!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"> <title>Sablon Test</title> <body> Burasi Sablon <ui:insert name="Body" /> </body> </html>
Yukarıdaki normal sayfadan tek farkı ui:insert elementinin eklenmiş olmasıdır. Yukarıdaki şablon bir sayfada aşağıdaki gibi kullanılabilir :
<ui:composition template="/template.xhtml" xmlns="http://www.w3.org/1999/xhtml" xmlns:ui="http://java.sun.com/jsf/facelets"> <ui:define name="Body"> <h1>Body Content</h1> </ui:define> </ui:composition>
Şablon kullanmak isteyen bir sayfa ui:composition ile başlaması gerekmektedir. Bu element ile birlikte verilen şablonun path'i template="" şeklinde verilir. Şablonda belirtilen (insert elementi ile) bölgelere ui:define ile elementi set edilirler. Yukarıdaki örnekte görüldüğü gibi Body ile tanımlanmış insert elementinin yerine <h1> Body Content </h1> içeriği eklenmiştir. Sayfa gösterildiği zaman şablon sayfası yüklenecek ve Body olarak tanımlanan bölgesine <h1> Body Content </h1> içeriği yerleştirilecektir.
JSF 2'de Facelet'te Composition (ui:composition) ve Decorate (ui:decorate) elementleri şablon yaratmak amacıyla benzer şeklinde kullanılır. Ancak Composition tek bir sayfanın şablonu içindir ve ui:composition dışında kalan kodlar sayfa render edilirken dikkate alınmaz. Decorate ise aynı sayfada birden fazla kullanılabilmektedir. Sonuç olarak Composition sayfanın ana yapısının şablonu için, Decorate ise sayfa içinde tekrarlanan bölümlerin şablonu içindedir
JSF 2'de Facelet'te Component (ui:component) ve Fragment (ui:fragment) elementleri bileşen ağacına (component tree) yeni bir bileşen (component) eklemek için kullanılmaktadır. Component sayfada sadece bir kere kullanılabilir ve dışındaki elementler dikkate alınmamaktadır. Fragment'da ise aynı sayfa içinde birden fazla kullanılabilmektedir
JSF 2 Facelet'te kullanılan temel dört elementin (Composition , Decorate, Component, Fragment) farkları aşağıdaki gibi özetlenebilir :
JSF 2'de Facelet ile en basit şablon örneği aşağıdaki gibi yapılabilir :
Şablon İçeriği (template.xhtml olarak kaydediyoruz) :
<!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"> <title>Sablon Test</title> <body> Burasi Sablon <ui:insert name="Body" /> </body> </html>
Yukarıda şablonun değişecek bölümü ui:insert ile adı "Body" olarak verilmiştir. Bu şablona uygun bir sayfa aşağıdaki gibidir :
<ui:composition template="/template.xhtml" xmlns="http://www.w3.org/1999/xhtml" xmlns:ui="http://java.sun.com/jsf/facelets"> <ui:define name="Body"> <h1>Body Content</h1> </ui:define> </ui:composition>
Bir şablon kullanmak için ui:composition elementi kullanılmakta ve template (şablon) olarak bir üsteki şablon dosyasının path'i verilmiştir. Bu şekilde şablonu seçtikten sonra şablondaki Body alanını ui:define ile <h1> elementi ekliyoruz. Yukarıdaki sayfa çalıştırıldığı zaman şablon sayfası çalıştırılacak ve body içerisine <h1>Body Content</h1> eklenecektir. Yukarıdaki template.xhtml sayfası başka sayfalarda da kullanılabilir.
JSF 2'de bir sayfa içinde birden fazla kullanılabilecek şablonlar yazılabilmektedir . Aşağıda bir dekorasyon (decorate) şablon örneği görülmektedir :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <div xmlns="http://www.w3.org/1999/xhtml" xmlns:h="http://java.sun.com/jsf/html" xmlns:ui="http://java.sun.com/jsf/facelets" style="background-color: red" > <ui:insert/> </div>
Yukarıda bir div eklenmiş ve arkaplanı (background) kırmızı yapılmıştır (Dosyanın adını dec_template.xthml olsun). Arkaplanı kırmızı div şablonunu bir sayfada birden fazla kullınabilir :
<!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"> <title>Decarate Sablon Test</title> <body> <ui:decorate template="/dec_template.xhtml"> Burada Kırmızı Background'lu Div </ui:decorate> <div>Buraya herhangi bir div</div> <ui:decorate template="/dec_template.xhtml"> Burada Başka Kırmızı Background'lu Div </ui:decorate> </body> </html>
Yukarıdaki sayfada div şablonu iki kere kullanılmıştır. Görüldüğü gibi ui:decorate etiketi kullanılmış ve şablon dosyası verilmiştir
Aşağıda bir String listesini repeat kullanarak liste (ol ve li ile) gösteren örnek :
<!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"> <title></title> <body> Repeat Test <ul> <ui:repeat value="#{testBean.testList}" var="item"> <li><h:outputText value="#{item}" /></li> </ui:repeat> </ul> </body> </html>
Bean sınıfı aşağıdaki gibidir :
package com.test; import java.util.*; import javax.faces.bean.*; @ManagedBean(name="testBean") public class TestBean { private List<String> testList; public TestBean() { testList=new ArrayList<String>(); testList.add("A"); testList.add("B"); testList.add("C"); testList.add("D"); } public List<String> getTestList() { return testList; } public void setTestList(List<String> testList) { this.testList = testList; } }
<ui:repeat value="#{testBean.list}" var="item" varStatus="myVarStatus">
İndex Sayısı : #{myVarStatus.index}
</ui:repeat>
<ui:repeat value="#{testBean.list}" var="item" varStatus="myVarStatus">
İndex Sayısı : #{myVarStatus.index}
</ui:repeat>