JSF ile template kullanımı

JSF Template hazırlama

JSF ile web application yapacaksak, template hazırlayarak işimizi kolaylaştırabiliriz.
Facebook, twitter, instagram, eksisözlük vb sayfalarda header, footer, vb bazı alanların hep sabit olduğunu görüyoruz.
İşte bu değişmeyen alanları bir tema şeklinde hazırlayıp, bütün sayfalarımızın bu çerçeve içinde görünmesini JSF template'leri ile sağlayabiliyoruz.
JSF de birden fazla template hazırlayarak, ya da varolan template'lerde değişiklikler yaparak kolay bir şekilde yeni tasarımlar elde edebiliyoruz.
İşin püf noktası ise buradaki business logic yani sozlük entry'lerinin ya da twitter kayıtlarının getirilmesi işlemi tamamen temadan bağımsız olmuş oluyor.
Temayı tak-çıkar mantığıyla değiştirebiliyor, içeriğe dokunmuyoruz.
Master page de denilen template yani tema kavramı, özellikle view kısmına business logic karıştırılmaması açısından çok önemli.


1. Öncelikle sayfada sabit kalan ve değişen kısımları tespit ederek başlıyoruz.
Diyelim ki sayfada header, footer ve sol menü kısımları sabit, ortadaki content kısmı değişiyor.

2. NetBeans'te yeni bir template açarak html template i buraya yapıştırıyoruz.
NetBeans hangi kısmın değişeceğini sorduğunda sadece content kısmını seçiyoruz. Böylece content kısmına <ui:insert> tagı otomatik olarak konuluyor.
Template bu şekilde yaratılmış oldu.

3. Template için gereken css ve js dosyalarını resources klasöründe yarattığımız css ve js klasörlerinin içine atıyoruz.

4. Template.xhtml'de css ve js referanslarını projemizin klasör yapısına göre ayarlıyoruz.
Bunu ihmal ettiğimizde tema ihtiyaç duyduğu css ve js dosyalarını göremiyor.
Bunlar olmadan da tema pek bir şey ifade etmiyor zaten.

5. Template.xhtml dosyasındaki hataları düzeltiyoruz.
Kapatılmamış taglar genellikle buna sebep oluyor.
Özellikle input ve img tagları genellikle açık bırakıldığından bunları kapatıyoruz.

6. Hatasız şekilde template.xhtml çalışıyorsa, ve içindeki değişken kısım yani content kısmında da default olarak konan content yazısı görünüyorsa tema hazır demektir.

JSF Template kullanarak sayfa hazırlama

Buradan sonra temayı kullanarak client sayfalar yaratmaya başlıyoruz.
Artık hazır tema olduğunda tekrar tekrar css include vb işlemler yapmaya gerek kalmadan onlarca sayfayı hızlı biçimde yazabiliriz. Bütün bu tema client sayfaları, temadaki ortak sabit alanlar ile çerçevelenmiş olarak kullanıcıya gösterilecek.

1. Yeni template client yaratıyoruz. Bu anasayfa oluyor. Adını index.xhtml yapıyoruz.

2. Sayfa içeriğinin sözluk mantığıyla, uzayan bir liste şeklinde doldurulmasını istiyoruz.
Bu yüzden bir döngü yaratarak içinde kayıt getirme işlemini tekrarlatmamız gerekiyor.
c:foreach tagı ile bir döngü yaratıp içerisine tipik bir entry'nin html kodunu yazıyoruz.
Örneğin bir url ve bir metin içeren basit bir entry için:

<c:foreach items="itemBean.items" var="item">
    <a href="item.href" title="item.title"></a>
    <p>#{item.content}</p>
</c:foreach>

3. Bu entry'leri temsil edecek bir modele ihtiyacımız var.
Veritabanında bulunan entryleri bu model aracılığıyla managed bean'e bağlayabiliriz.
Managed bean ile de ekrana listeleyebiliriz.
Bunun için önce model olması için bir POJO yazıyoruz.
Bunu bir model package'ı altına atıp uygun bir isim veriyoruz.

4. Bu örnekte property olarak href, title ve content bulunması gerekiyor. Bu alanları ekliyoruz.

5. Boş ve dolu constructor metodlarını, getter ve setterlarını ekliyoruz.
Bunları unuttuğumuz anda JSF sayfasında kullandığımız EL statement'larında kullanılamıyor.
Hata ile karşılaşabiliyoruz.

6. Bu modeli baz alarak veritabanındaki entry'leri getirecek bir managed bean yazıyoruz.
Bu örnekte ismi itemBean oldu. Yeni bir beans package'i altında yaratıyorum.
Annotation ile adını ve scope bilgisini veriyorum.

@ManagedBean("itemBean")

Scope olarak request scope seçiyorum.

@RequestScoped

7. JSF sayfasında EL ifadeleri kullanarak yazdığımız foreach döngüsünü kontrol ediyoruz.
Her şey doğru ise bu aşamada hatasız sayfanın görüntülenebiliyor olması gerekiyor.

Aslında EL aşamasını burada yazmak daha kolay olurdu.
Ben en son aşamada yaratılacak olan view'ı en başta tasarlayarak sonra arka tarafını planlamayı tercih ettim.

8. Manged bean'deki listeyi getiren getter metoduna bir kaç örnek entry ekleyerek içeriğin nasıl göründüğünü test ediyoruz. Bu noktada her şey istediğimiz gibi görünüyorsa artık veritabanı bağlantısını yapabiliriz demektir.
Artık managed bean'de metod içerisinde yaptığımız örnek entry ekleme satırlarını silerek gerçek veri kullanma aşamasına geçiyoruz.

9. Varolan veritabanına bağlantıda aracılık edecek bir helper sınıfı yaratıyoruz.
Bunu da model paketinin içine atabiliriz. Böylece ileride tak-çıkar yöntemiyle başka projeye taşımak çok kolay olacaktır.

10. İçerisinde JDBC ile bağlanıyorsak driverı projeye ekleyip initialize ediyoruz.

Ekstra: Sayfa entry'leri için veritabanı dizayn etme

Eğer sayfa içeriği için elde hazır bir veritabanı yoksa, bunu sıfırdan yapmak gerekiyor.
SQLite ya da MySQL ile kolayca yapabiliriz.

SQLite ile sozluk veritabanı hazırlama

Firefox eklentisini kullanarak proje klasörü içine yeni bir sqlite veritabanı yaratıyoruz.
Adına proje ile uyumlu bir isim veriyoruz.

Yukarıda yazdığımız modeli baz alarak bir entry tablosu oluşturuyoruz.
Tabloya sütun olarak modelimizin property'lerini veriyoruz.

CREATE TABLE ENTRY( TITLE VARCHAR(50), HREF VARCHAR(50), CONTENT VARCHAR(200) );

İçeriğin etiketi, klasmanı, vb özellikleri varsa başka tablolara da ihtiyaç duyulacaktır.
Örneğin kategori tablosu hazırlayarak içeriklere bu tablodan kategori verilebilir.

Boş içerik tablosuna örnek veri doldurma

Sayfanın görüntüsünü test etmek için örnek bir içerik yüklemesi yapabiliriz.
a. Sayfadaki üye girişi ile login olup, yeni kayıt girerek içerik eklemesi yapılabilir.
b. Buna vakit yoksa, ya da büyük mikarda içerik ile test etmek isteniyorsa, bir HTML parser kütüphanesi kullanarak twitter ya da sozluk gibi bir sayfadan içerik alıp, filtreleyerek tablomuza doldurabiliriz.
Bunun için bir HMTL parser ile bir sozluk sayfasından toplu olarak entry cekip, işime yarayacak 3 alanını filtreleme yöntemiyle seçiyorum.
Bu alanları modelimdeki url, href, ve content kısımlarına yerleştirirsem içerik gayet güzel duracaktır.
Bir sql scripti ile bu entryleri tabloma atıyorum.

while(true){
    INSERT INTO ENTRY VALUES();
}