JSF – 27 – Facelets Tags

Merhaba Arkadaslar.
Bu bolumde Facelets Tag’larini incelemeye baslayacagiz. JSF Facelets tag’lari ;

  • ui:insert
  • ui:define
  • ui:include
  • ui:composition
  • ui:param
  • ui:decorate
  • ui:component
  • ui:fragment
  • ui:debug
  • ui:remove
  • ui:repeat

Simple Example

Oncelikle basit bir uygulama yapalim. ui:include tag’i ile bir xhtml icerigini diger bir xhtml sayfasina ekleriz/yukleriz/import. ui:include tag’i JSP sayfalarinda kullandigimiz <jsp:include> standard action’a benzer sekilde calisir.
Servlet & JSP – 25 – Static Inclusion & Dynamic Inclusion

Facelets taglarini kullanabilmek icin xlmns:ui eklememiz gereklidir ;
xmlns:ui=”http://java.sun.com/jsf/facelets

includePage.xhtml

 <p>before ui:include</p>
 <ui:include src="includeMe.xhtml" />
 <ui:include src="test.txt" />
 <p>after ui:include</p>

includeMe.xhtml

<h1>this is includeMe.xhtml content</h1>

test.txt

<h1>this is test.txt content</h1>

Ornegimizi calistirdigimizda ;

uiinclude

Templating with Facelets

Web uygulamalarinda bir cok sayfanin genel tasarimi/layout birbirine benzerdir. Ornegin tipik olarak header , footer ve sidebar bir cok sayfa icin ortak olacaktir.

JSF Facelets tag’lari bize genel bir template kullanma imkani saglar , boylelikle her sayfayi tek tek degistirmek yerine kullandigimiz template uzerinde kucuk degisiklikler yapabiliriz.

ui:insert
ui:insert tag’i template dosyasinda kullanilir. Template dosyasinda yer alacak icerigi belirtir. ui:define tag’i bu icerigi replace edebilir.

ui:define
Template dosyasina insert edilecek icerigi belirtir. ilgili ui:insert icerigi replace edilir.

ui:include
ui:include tag’i ile bir xhtml icerigini diger bir xhtml sayfasina ekleriz/yukleriz/import.

ui:composition
ui:composition tag’i 2 amacla kullanilabilir. Birincisi sayfaya eklenecek componentleri belirtmemizi saglar. Ikinci olarak template attribute ile template xhtml dosyamizi yuklememizi saglar.

ui:param
ui:param tag’i ile template dosyasina ya da include edilen dosyaya parametre gecebiliriz.

ui:decorate
ui:decorate tag’i , ui:composition tag’ina benzer sekilde calisir. ui:composition tag’i disindaki kodlar ihmal edilirken ui:decorate tag’i disindaki kodlar ihmal edilmez.

ui:component
ui:component tag’i , ui:composition tag’i ile ozdestir/identical. ui:composition tag’indan farkli olarak bir component olusturur ve olusturulan bu component , component tree ‘de yer alir.

ui:fragment
ui:fragment tag’i ui:decorate tag’i ile ozdestir/identical. ui:decorate tag’indan farkli olarak bir component olusturur ve olusturulan bu component , component tree ‘de yer alir.

Tanimlamalar biraz kafa karistirici olabilir , ornek uzerinden inceledigimizde daha iyi anlayabiliriz.

FaceletsTemplateBean.java

import javax.faces.bean.ManagedBean;

@ManagedBean
public class FaceletsTemplateBean {

    private String defaultFooterParam = "This is defaultFooterParam parameter.";
    private String defaultHeaderMessage = "This is defaultHeaderMessage parameter.";
    //getters and setters
    ...
}

Oncelikle footer.xhtml dosyamiz ile baslayalim.

footer.xhtml
Facelets taglarini kullanabilmek icin xlmns:ui eklememiz gereklidir.
ui:composition tag’ini burada birinci gorev olarak kullaniyoruz yani sayfaya eklenecek componentleri belirtiyoruz , belirtmedigimiz componentler template sayfasinda yer almayacaktir.
ui:param kullanimi JSPdeki jsp:param kullanimina benzemektedir.

....
 xmlns:ui="http://java.sun.com/jsf/facelets">
 <!--ui taglarini kullanabilmek icin xlmns:ui eklememiz gerekli -->
...
<ui:composition>
    <h1>Default footer</h1>
    <h2>www.injavawetrust.com</h2>
    <h2>#{defaultFooterParam}</h2>
    <!-- ui:param kullanarak footerHeaderParam icin parametre degeri gonderecegiz.-->
</ui:composition>

<!-- ui:composition tag'i disinda oldugu icin bu kisim template dosyamiza eklenmeyecektir.-->
<h1>Do not include me!</h1>
..

header.xhml ve content.xhtml dosyalarimizda benzer sekilde ui:composition tag’ini kullaniyoruz.

header.xhtml

... 
<ui:composition>
     <h2>Default Header</h2>
     <h2>#{defaultHeaderParam}</h2>
 </ui:composition>

content.xhtml

...
 <ui:composition>
     <h2>Default content</h2>
     <h2>#{defaultContentParam}</h2>
 </ui:composition>

Simdi sira geldi template dosyamizi olusturmaya burada ui:insert ve ui:include tag’larini kullanacagiz.

ui:insert tag’i template dosyalarinda kullanabiliriz. name attribute’u ile bir isim veriyoruz.
header area , contentArea ve footerArea olacak sekilde isimlendirme yaptik. Basit olarak div ve css border kodu ekliyoruz.

ui:include tag’inda src attribute’e ekleyecegimiz dosya adini yaziyoruz.
header.xhtml , content.xhtml ve footer.xhtml …

commonTemplate.xhtml

...
<title>#{title}</title>
...
<div style="border-width: 2px; border-color: green; border-style: solid;">
<ui:insert name="headerArea">
	<ui:include src="header.xhtml">
		<ui:param name="defaultHeaderParam"
			value="#{faceletsTemplateBean.defaultHeaderMessage}">
		</ui:param>
	</ui:include>
</ui:insert>
</div>
<br />

<divstyle="border-width: 2px; border-color: black; border-style: solid;">
<ui:insert name="contentArea">
	<ui:include src="content.xhtml" >
		<ui:param name="defautContentParam"
			value="Hello content parameter.">
		</ui:param>
	</ui:include>
</ui:insert>
</div>
<br />
<div style="border-width: 2px; border-color: red; border-style: solid;">
<ui:insert name="footerArea">
	<ui:include src="footer.xhtml">
		<ui:param name="defaultFooterParam"
			value="#{faceletsTemplateBean.defaultFooterParam}">
		</ui:param>
	</ui:include>
</ui:insert>
</div>

Simdi commonTemplate.xhtml dosyamizi calistiralim ve sonucu gorelim ;
footer.xhml , header.xhml ve content.xhtml dosyalari ui:include tag’i sonrasinda sayfaya eklendi. footer.xhtml dosyasinda ui:composition tag’i disinda ekledigimiz alan burada yer almamaktadir !

<!-- ui:composition tag'i disinda oldugu icin bu kisim template dosyamiza eklenmeyecektir.-->
<h1>Do not include me!</h1>

facelets

Default template dosyamizi olusturduk peki bu template’i nasil kullaniriz ve diledigimizce nasil degisiklik yapariz.Oncelikle template dosyasini xhtml sayfamiza yuklememiz gereklidir. Bunun icin ui:composition tag’ini tekrar kullanalim , bu sefer template attribute’unu kullanacagiz.

page1.xhtml
template attribute ile commonTemplate.xhtml dosyamizi yukluyoruz. ui:define ilgili ui:insert tag’i ile eklenen alani override eder.

footerArea icin ui:define ile replace islemi yapmadik bu nedenle commonTemplate.xhtml deki formati gozukecek yani default hali.

commonTemplate.xhtml de #{title} seklinde bir ifade kullandik. page1.xhtml de ui:param kullanarak title parametresi icin value verebiliriz.

....
<!-- ui:composition disindaki kodlar ihmal edilir.-->
<h1>wont be seen.</h1>
<ui:composition template="template/commonTemplate.xhtml">
    <ui:param name="title" value="Page1 title!" />
    <ui:define name="headerArea">
	<h2>Page1 header</h2>
	<p>Hello JSF facelets</p>
    </ui:define>

<ui:define name="contentArea">
    <!-- replace edecegimiz ui:insert un adini veriyoruz. -->
    <h2>Page1 content</h2>
</ui:define>

<!-- 
footerArea icin ui:define ile replace islemi yapmadik bu nedenle commonTemplate.xhtml deki formati gozukecek
yani default hali.
 -->

</ui:composition />

page2.xhtml

<ui:composition template="template/commonTemplate.xhtml">
<ui:param name="title" value="Page2 title!" />
<ui:define name="headerArea">
	<h2>Page2 header</h2>
	<p>Hello JSF facelets</p>
</ui:define>

<ui:define name="contentArea">
	<!-- replace edecegimiz ui:insert un adini veriyoruz. -->
	<h2>Page2 content</h2>
</ui:define>

<ui:define name="footerArea">

	<h2>Page2 footer</h2>
</ui:define>

</ui:composition>

header ve content icin contentArea ve headerArea alanlarini ui:define ile replace ettik.
footer icin footerArea alanini replace etmedik bu nedenle default olarak commonTemplate.xhml dosyasindaki hali gelecektir.

page2.xhtml dosyamiz icin footerArea , headerArea ve contentArea alanlarini ui:define tag’i ile replace ettik.

commonTemplate.xhtml de #{title} seklinde bir ifade kullandik. page2.xhtml de ui:param kullanarak title parametresi icin value verebiliriz.

facelets page1

facelets page2

Simdi de ui:composition yerine ui:decorate tag’ini kullanalim.

page3.xhml

<h1>outside ui:decorate</h1>
<ui:decorate template="template/commonTemplate.xhtml">
	<ui:param name="title" value="Page3 title!" />
	<ui:define name="headerArea">
		<h2>Page3 header</h2>
		<p>Hello JSF facelets</p>
	</ui:define>

	<ui:define name="contentArea">
		<!-- replace edecegimiz ui:insert un adini veriyoruz. -->
		<h2>Page3 content</h2>
	</ui:define>

	<ui:define name="footerArea">
		<h2>Page3 footer</h2>
	</ui:define>
</ui:decorate>
<h1>after ui:decorate</h1>
<ui:remove>
   <p>This content will be removed.</p>
</ui:remove>

facelets page3

ui:remove tag’i arasina yazdigimiz icerikler xhtml sayfasinda yer almayacaktir.

 <p>page4.xhtml</p>
 <p>before ui:remove</p>
 <ui:remove>
 This content will be removed.
 </ui:remove>
 <p>after ui:remove</p>

uiremove

Kaynak kodlar: Injavawetrust.jsf
Yazimi burada sonlandiriyorum.

Herkese bol Javali gunler dilerim.
Be an oracle man , import java.*;
Levent Erguder
OCP, Java SE 6 Programmer
OCE, Java EE 6 Web Component Developer

Print Friendly, PDF & Email

Leave a Reply

Your email address will not be published. Required fields are marked *