İnternet sitelerinde çoğunlukla sayfaların yapısı benzerdir. Böyle benzer sayfaları olan herhangi bir siteyi mühendis gözüyle incelersek 🙂 sitenin hemen hemen bütün sayfalarının temel olarak bir başlık alanı, menü alan(lar)ı, içeriğin geldiği bir alan ve sayfa sonunu belirleyen bir alandan oluştuğunu, yani bir şablon üzerine sayfaların oluşturulduğunu görebiliriz.

JSF “facelets tag” lar ile de şablon oluşturup bu şablonu kullanabiliriz.

Şablonlar da diğer sayfalar gibi xhtml sayfalarıdır. Şablon dosyası ve bu dosyayı oluşturan diğer dosyaları proje içinde farklı bir klasörde tutmak şablonu değiştirmek istediğimizde kolayca ulaşmamızı sağlayacaktır. Bu projede dosyalar “resources” adlı klasördedir.

Şimdi bu şablonu ayrıntılı incelersek;

• 8. satırda ${pageTitle} değişkenini title etiketi arasına alarak şablonu kullanacağımız sayfaların başlıklarını parametre ile geçirmeyi sağlamış olduk. Bu işlem şablonu kullandığımız sayfada şu şekilde yapılır;
  <ui:param name="pageTitle" value="Sayfa Başlığı" />
• 10. satırdaki h:outputStylesheet ile temamızın stil dosyasının konumunu belirtiyoruz.
• 17., 21. ve 31. satırlardaki ui:include etiketiyle şablona her sayfada aynı olması gerektiğini düşündüğümüz başlık(header.xhtml), menü(menu.xhtml) ve sayfa sonu(bottom.xhtml) kısımlarını dahil etmiş oluyoruz.
• 25. satırda <ui:insert name="content"> etiketini kullanarak her sayfada farklı olması gerektiğini düşündüğümüz kısımları(bu örnekte sadece içerik(content)) belirtiyoruz. Şablonu kullandığımız sayfada;
  <ui:define name="content"> Sayfa içeriği... </ui:define> ile bunu sağlıyoruz.

Şablonda kullanılan diğer dosyalar:

body {
	background-color: #E2E2E2;
	font-size: 12px;
	font-family: Verdana, "Verdana CE", Arial, "Arial CE", "Lucida Grande CE", lucida, "Helvetica CE", sans-serif;
	color: #000000;
	margin: 10px;
}

#container {
	border: 1px solid navy;
	margin-left: 100px;
	margin-right: 100px;
	border-radius: 5px;
}

#header {
	height: 100px;
	position: relative;
	background-color: #036fab;
	color: white;
	padding: 5px;
	margin: 0px 0px 5px 0px;
}

#menu {
	height: 30px;
	vertical-align: middle;
	border: 1px solid navy;
	font-weight: bold;
	margin: 5px 5px;
}

#content {	
	padding: 5px;
	margin: 5px 5px;
	border: 1px solid navy;
	min-height: 300px;
}

#bottom {
	position: relative;
	padding: 5px;
	margin: 5px 5px;
	border-top: 1px solid navy;
}

	
	
MALKOÇ SOFT :)

	Her hakkı saklıdır. 

Tek başına template.xhtml görünümü:

template.xhtml şablonunu kullanarak 2 sayfa oluşturalım.
Bu sayfaları oluştururken yapmamız gereken ui:composition etiketini kullanmak ve template="resources/template.xhtml satırında görüldüğü gibi şablon dosyasının yolunu belirtmektir. Daha sonra sayfaya özel kısımları yukarıda da açıklandığı gibi yazarak sayfayı oluşturmuş oluyoruz.

index.xhtml

	
	
	
		Hoşgeldiniz...

	

urunler.xhtml

	
	

		Ürünlerimiz:
		

			
Ürün 1
			
Ürün 2