Facelets bu noktada template desteği ile bizim yardımımıza koşmakta. Şablon dosyamızda dinamik bölgeler oluşturarak, diğer sayfalarda yapmamız gereken sadece bu bölgeleri tanımlamak.

Örnek bir şablon yapısı üzerinden gidersek çok daha iyi olacak.

Dinamik bölgeleri tanımlamak için <ui:insert /> bileşenini kullanıyoruz. name parametresi sayfalarımızda kullanırken belirtedeğimiz tanımlama ismini belirtiyor. Şimdi bu template dosyasını kullanan bir sayfa hazırlayalım.

Sayfamızı oluştururken öncelikle ui:composition bileşenine parametre olarak hangi şablonu kullanacağımızı belirtiyoruz. Bizim şablon dosyamız sablon.xhtml olduğu için parametre olarak bu dosyayı giriyoruz. Sonrasında ise şablonumuzdaki dinamik bölgeleri tanımlayarak içeriğimizi oluşturuyoruz. Dinamik bölgeleri belirtmek için <ui:define /> bileşenini kullanıyoruz. Parametre olarak gönderdiğimiz name şablonda kullandığımız <ui:insert>‘e parametre olarak gönderdiğimiz değeri yazıyoruz.

Bir önceki yazımızda (JSF ve Richfaces) netbeans kullanıyorduk. Netbeans’e facelets desteği kazandırmıştık.  Şimdi bu facelets desteği kullanarak önce bir şablon dosyası ve sonrasında bu dosyayı kullanan bir sayfa hazırlayalım. Projemize Sağ tıklayıp  New->Order seçeneğini seçiyoruz. Categories bölümünden JavaServerFaces, File Types bölümünden ise Facelets Tepmlate‘i seçip next butonuna basıyoruz.

Daha sonra karşımıza çıkan pencerede template dosyamıza bir isim vermemiz isteniliyor.  Bir isim verdikten sonra bizim için daha önceden hazırlanmış layoutlar mevcut. Bunlardan herhangi bir tanesini seçiyoruz. Layout şeklini css  mi yoksa table kullanakarak mı vermek istediğimizi soruyor. Biz web standartlarına bağlı kalarak css diyoruz tabiki

Finish butonuna basınca şablon dosyamız bizim için otomatik olarak üretiliyor.

Şimdi bu template dosyasını kullanan bir sayfa oluşturalım. Bunun için gene projemize sağ tıklayıp  New->Other seçiyoruz. Buradan Categories bölümünden JavaServer Faces , FileTypes bölümünden de Facelets Template Client seçeneğini seçerek next butonuna basıyoruz.

2. adımda çıkan pencerede ise sayfamıza bir isim vermemiz isteniliyor. İsmi verdikten sonra  bir tane de template seçmemiz isteniyor. Template karşısındaki browse butonuna tıklayarak biraz önce oluşturduğumuz sablon.xhtml dosyasını seçiyoruz. Şablonu seçtikten sonra Genereted Root tag kısmında html mi <ui:composition> ‘mı kullanmak istediğimiz soruluyor. Burada <ui:composition> seçerekten finish diyoruz .

Otomatik olarak şablon dosyamızdaki dinamik bölgelere bakaraktan sayfamız oluşturuldu   Her şey bu kadar basit.  Template sistemi bizi bir çok yükten kurtardığı gibi projemize de dinamik bir templating yapısı sunmakta.

Bir sonraki yazımda JSF Temel bileşenlerinden bahsedeceğim.

JSF java için geliştirilmiş  bir framework’dür. Model – View – Controller (MVC) yapısı ile yeni nesil standartlara göre web uygulaması geliştirmemizi sağlar.  Bünyesinde bulundurduğu bileşenler (DataTable, OutputText, SelectOneListbox vs. )  ile projeyi geliştirmemizde bir çok kolaylık sunar.

JSF her ne kadar kendi içerisinde bir çok bileşen barındırsada profesyonel bir proje geliştirirken bileşenleri yetersiz kalmakta. İşte bu anda yardımımıza 3. parti jsf kütüphaneleri yetişmekte. RichFaces, Icefaces ve yerli malı yurdun herkes onu kullanmalı PrimeFaces gibi bir çok 3. parti bileşen kütüphanesi bulunmakta. Bu kütüphaneler bize zengin bir bileşen topluğu sunarak projelerimizi geliştirmemizi sağlamaktadırlar.

Bu yazıda ve ardından gelecek olan yazılarımda richfaces bileşenlerinin kullanımı hakkında bilgiler vereceğim. Richfaces benim için jsf için yazılmış en iyi 3. parti kütüphanedir. Jboss firması tarafından opensource olarak geliştirilmekte ve ücretsiz dağıtılmaktadır.  Richfaces’ın en beğendiğim özelliği ise JSF Html bileşenler de dahil her türlü bileşene kolayca ajax desteği verebilmemiz. Bu sayede kullanıcılar ile etkileşimi oldukça iyi olan uygulamalar ortaya çıkartabiliyoruz.

Richfaces kütüphanelerini şu adresten en son stabil sürümünü indirebilirsiniz. Ben richfaces’ı seam ile beraber kullanıyorum. Yanlız yeni başlayanlar için seam hakkında da bilgi vermek gerektiğinden  jsf ( facelets)  ile beraber anlatacağım. IDE olarak kullanımı yeni arkadaşlara daha kolay geldiğinden Netbeans’i seçiyorum. Normal şartlarda Eclipse kullanmaktayım

Öncelikle netbeans’a facelets desteğini kazandırmak zorundayız. Bunun için netbeans için facelets eklentisini kurmamız gerekmekte. Netbeans 6.7.1 sürümünde Tools->Plugins penceresinde Available Plugins sekmesinde Facelets Support, bizi onu kurmamız için beklemekte. Facelets Support eklentisini kurduktan sonra artık yeni bir proje oluşturarak örneklerimize geçelim.

Netbeans başladıktan sonra File->New Project penceresinden Categories bölümünden Java Web’i seçiyoruz. Sonrasında yan taraftaki Projects bölümünden ise Web Application’ı seçerek Next butonuna basıp devam ediyoruz.

Sıradaki penceremizde ise projemize bir isim vererek Next butonuna basıyoruz. Ben bu projeye yengec kod adını verdim

3.  pencerede projenin çalışacağı server’ı seçmemiz isteniyor.

4. pencere de ise projemizde kullanacağımız framework’leri seçmemiz isteniyor.  Burada Facelets ‘ı seçip finish butonuna basıyoruz.

Evet artık bir java web projesi oluşturmuş durumdayız. Projemiz en yalın hali ile aşağıdaki gibi bir görüntü vermekte.

Buraya kadar yaptığımızı özetlersek , netbeans’e facelets desteği kazandırdık ve facelets kullanarak bir proje oluşturduk. Herşeyin normal gittiğini test etmek için projemizi build edip (Kısayol Tuşu: F6) çalıştıralım. Eğerki herhangi bir sorun yok ise işletim sistemimizin default tarayıcısı çalışarak projemizi açacaktır.

Sıra projemize jboss.org adresinden indirdiğimiz Richfaces kütüphanelerini dahil etmeye geldi. Ben richfaces-ui-3.3.2.SR1 versiyonunu indirdim. Zip dosyasını açtığımız zaman richfaces-ui-3.3.2.SR1\lib klasöründe  projemize dahil etmemiz gereken jar dosyaları bulunmakta. Proje ağacındaki Libraries’e sağ tıklayıp Add Jar /Folder seçeneğini seçiyoruz. Burada richfaces-ui-3.3.2.SR1\lib altındaki jar dosyalarını seçerek projemize dahil ediyoruz.

richfaces-api-3.3.2.SR1.jar

richfaces-impl-3.3.2.SR1.jar

richfaces-ui-3.3.2.SR1.jar

Projemize Richfaces kütüphanelerini dahil ettikten sonra sıra web.xml dosyasında richfaces için gerekli olan tanımlamaları yapmaya geldi. web.xml dosyasındaki </web-app> tagının hemen üstüne aşağıdaki kodları yapıştırıyoruz.

<!– BEGIN:RichFaces Tanımlamaları –>

<context-param>
<param-name>org.richfaces.SKIN</param-name>
<param-value>blueSky</param-value>
</context-param>

<context-param>
<param-name>org.richfaces.CONTROL_SKINNING</param-name>
<param-value>enable</param-value>
</context-param>

<filter>
<display-name>RichFaces Filter</display-name>
<filter-name>richfaces</filter-name>
<filter-class>org.ajax4jsf.Filter</filter-class>
</filter>

<filter-mapping>
<filter-name>richfaces</filter-name>
<servlet-name>Faces Servlet</servlet-name>
<dispatcher>REQUEST</dispatcher>
<dispatcher>FORWARD</dispatcher>
<dispatcher>INCLUDE</dispatcher>
</filter-mapping>

<!– END:RichFaces Tanımlamaları –>

Artık projemize richfaces’ı da tanıtmış olduk. Şimdi buraya kadar herşeyin yolunda gidip gitmediğini kontrol etmek için bir deneme yapalım. Projemizi oluştururken bizim için otomatik olarak üretilmiş iki adet xhtml dosyası bulunmakta. Bunlardan bir tanesi şablon dosyamız olan template.xhtml, diğeri ise template-client.xhtml.

template.xhtml dosyası  Asp.net bilenler için masterpage benzeyen bir yapı diyebiliriz. Daha sonra daha detaylı olarak bu konuya değineceğim.  template-client.xhtml dosyasını açalım. Öncelikle richfaces için tanımlı olan prefix’leri eklememiz gerekmekte. Dosyamıza şu prefixleri ekliyoruz.

xmlns:f=”http://java.sun.com/jsf/core”
xmlns:rich=”http://richfaces.org/rich”
xmlns:a=”http://richfaces.org/a4j”

Şimdi basit bir test için <ui:define name=”body”> </ui:define> arasına aşağıdaki kodu yazıyoruz.

<rich:panel>
<f:facet name=”header”>Merhaba</f:facet>
Merhaba Dunya
</rich:panel>

Bu kod richfaces bileşenlerinden olan panel’in tanımlamasını yapıyor. Buraya kadar herşeyin doğru olup olmadığını kontrol için projemizi build edip çalıştırıyoruz.

Evet gördüğünüz üzere buraya kadar herşeyi doğru bir şekilde tanımladığımızın kanıtı olarak sayfamızda richPanel güzel bir şekilde gözüktü.  Richfaces’ın kurulumu bu kadar. Bundan sonra facelets şablon yapısı ve richfaces bileşenleri ile devam edeceğiz.

Şu ana kadar yaptığımız tüm işlemlerin bulunduğu netbeans proje dosyasını buradan indirebilirsiniz.