Facelet Etiketleri

Merhaba arkadaşlar. Bu makalemizde Facelet Tags (Facelet Etiketleri) konusunu irdeleyeceğiz.

Facelet Etiketleri Nedir?

Facelet etiketleri bizim yazmış olduğumuz bir xhtml sayfasını başka bir xhtml sayfası içinde kullanmamızı sağlayan yapıdır. Yani bir başka deyişle JSF sayfalarımızı bir şablona (template) oturtmamızı sağlayan yapıdır.

Nasıl Kullanılır?

Şimdi facelet etiketlerinin nasıl kullanıldığını örneğimiz üzerinden inceleyip anlamaya çalışalım. Örneğimizde şablon kullanımını göstererek bu yapının kullanımını görelim. Uygulamanın kodlarına direk buradan da ulaşabilirsiniz.

index.xhtml Kodu

<?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://xmlns.jcp.org/jsf/html"
	  xmlns:ui="http://java.sun.com/jsf/facelets">
	<h:head>
	</h:head>
	<h:body>
		<ui:composition template="template/TemplateSayfamiz.xhtml">
			<ui:define name="title">Ana Sayfa</ui:define>

			<ui:define name="content">
			<h3><h:outputText value="Ana Sayfaya Hoşgeldiniz!" /></h3>
			<h3><h:outputText value="Hakkımda sayfasından hakkımda bilgi edinebilir ya da" /></h3>
			<h3><h:outputText value="Video Dersleri sayfasından JSF video derslerine ulaşabilirsiniz." /></h3>
		</ui:define>
		</ui:composition>
	</h:body>
</html>

TemplateSayfamiz.xhtml Kodu

<?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://xmlns.jcp.org/jsf/html"
	  xmlns:ui="http://java.sun.com/jsf/facelets">
	<h:head>
		<title><ui:insert name="title">SayfaBasligi</ui:insert></title>
	<h:outputStylesheet name="common-style.css" library="css" />
	</h:head>

	<h:body>

	<div id="page">

		<div id="header">
		<ui:insert name="header" >
		  <ui:include src="/template/headerPage.xhtml" />
		</ui:insert>
		</div>

		<div id="content">
		<ui:insert name="content" >
		  <ui:include src="/template/contentPage.xhtml" />
		</ui:insert>
		</div>

		<div id="footer">
			<ui:insert name="footer" >
			  <ui:include src="/template/footerPage.xhtml" />
			</ui:insert>
			</div>

		</div>

	</h:body>
</html>

Kodun Açıklaması

Index sayfamız içinde şablon olarak kullanmak istediğimiz sayfayı etiketinin template özelliğine atayarak sayfamıza şablon atamamızı yapmış oluyoruz. Dikkat etmemiz gereken nokta ile sayfamıza özel bilgileri override ettiğimizdir. Her sayfanın kendine özel içeriği olacağından content isimli şablon parçası her sayfa için override edilmeli.

TemplateSayfamiz kodu içerisinde şablon parçaları olarak tanımlayacağımız herbir parça etiketinin name özelliğine atama yapılarak tanımlanır. etiketi ile de bu parçaları hangi sayfaların temsil edeceğini söylüyoruz.

headerPage.xhtml Kodu

<?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"
	  xmlns:h="http://xmlns.jcp.org/jsf/html"    
	  xmlns:f="http://xmlns.jcp.org/jsf/core">
	<body>
		<ui:composition>
			<h:form>
				<h:commandLink value="AnaSayfa" action="index.xhtml?faces-redirect=true"/>
				<h:outputText value="  "/>
				<h:commandLink value="Hakkımda" action="hakkimda.xhtml?faces-redirect=true"/>
				<h:outputText value="  "/>
				<h:commandLink value="JSF Video Dersleri" action="videoDersler.xhtml?faces-redirect=true"/>
			</h:form>
		</ui:composition>
	</body>
</html>

HeaderPage sayfamız şablonumuzun üst kısmını oluşturuyor. Biz de şablon olarak kullanacağımız için bu sayfaya özgü içeriğimizi ui:composition etiketlerinin arasında tanımlıyoruz. Örneğin burada headerPage basit bir menü tutacak. Biz de ui:composition etiketinin arasına yazarak bu yapıyı şablonun bir parçası haline getirdik.

Ekran Çıktısı

XHTML içerisinde xhtml kullanımını sağlayan facelet etiketlerinin kullanımı bu şekilde arkadaşlar. Siz de xhtml sayfasını dilediğiniz gibi oluşturup diğer sayfalar içerisinden çekebilirsiniz.

Gelecek yazımızda Composite Components konusuna değineceğiz.

Esen kalın.

Selam ve Sevgilerimle