PrimeFaces Örnek Bir Proje Kurulumu Merhaba, bu yazıda size adım adım PrimeFaces içeren örnek bir proje nasıl kolayca yaratılır bunu göstermeye çalışacağım. Kurulum ve çalıştırmak için benim kullandığım araçlar Maven 2, eclipse 3.3, 3.3, tomcat 6.0.14 ve tabii ki PrimeFaces. Maven, eclipse kurulumu, JSF kurulumu gibi konuları biraz hızlı geçip asıl amacımız olan gerçek bir uygulamada PrimeFacesʼin entegrasyonunu ve çalışmasını göreceğiz. Maven 2 ile bir JSF projesinin oluşturulmasını Çağatayʼın blogunda bulabilirsiniz. Ben şimdilik bunları kısaca geçerek bize içinde PrimeFaces olan hazır bir proje yapmak için gerekli adımları yazacağım. Üzerinde çalışacağımız projeyi yaratmak için Mavenʼı kullanacağız. Terminal veya Command Lineʼdan çalıştırdığım ımız ız aşağıdaki komut ile projemizi Maven yardımıyla yaratacağız. Proje adını ben ToplantiOrganizatoru olarak seçtim siz isterseniz bunu değiştirebilirsiniz. mvn archetype:create -DgroupId=com.prime -DartifactId=ToplantiOrganizatoru -DarchetypeArtifactId=maven-archetype-webapp
Yukarıdaki komut ile ToplantiOrganizatoru adı projemizi yaratmış olduk. Bu proje içerisindeki yaratılmış olan pom.xml dosyasını a şa ğıdaki ş ekilde de ği ştirerek bağımlılıklarını belirleyelim:
Biraz uzun gibi görünse de PrimeFaces, facelets, mojarra 1.2 kullanan basit bir projenin bağımlılıkları bu kadardır. Bağımlılıklarımız da hazır olduğuna göre, artık bu projeyi eclipseʼe eklemek için aşağıdaki gerekli komutu çalıştırarak artık projeyi eclipseʼden yönetebileceğiz. mvn eclipse:eclipse -Dwtpversion=1.5
Artık projemizi eclipseʼe ekleyip, onu çalıştırabiliriz.
Projeyi eclipseʼe ekledikten sonra yukarıdaki gibi bir görüntünün olmasını bekliyoruz. Projeyi eclipseʼe ekledikten sonra artık bu projeyi çalışır hale getirmemiz için aşağıdaki şu 2 basit adımı uygulamamız yeterli olacaktır. 1) src/main/webapp/WEB-INF altına aşağıdaki sekildeki faces-config.xml dosyasını yaratmak: com.sun.facelets.FaceletViewHandler
Bazı forumlarda veya blogʼlarda JSFʼte çok fazla xml var gibi yazılar bu aralar çok moda ama buradaki xmlʼden başka JSFʼe özel başka bir xml dosyası projemizde olmayacak. 2) src/main/webapp/WEB-INF altındaki web. xml dosyamızı aşağıdaki gibi değiştiriyoruz:
Ayarlamaları bitirdikten sonra artık aşağıdaki test sayfamızı yazıp şimdiye kadar yaptıklarımızı deneyelim. Aşağıdaki örnek bir JSF test sayfası bulunmaktadır. Bu sayfayı test.xhtml olarak src/main/webapp/ altına kaydedebilirsiniz:
Test sayfamız da hazır olduktan sonra, projemizi artık tomcat üstünden çalıştırıp, test edebiliriz. Projemizi çalıştırdıktan sonra aşağıdaki linkten test sayfamız denenmeye hazır olacaktır. Burada benim projemin adının ToplantiOrganizatoru olduğunu lüten unutmayın, eğer başka bir proje adı yazdıysanız onu kullanmanız gerekir. Herhangi bir tarayıcıdan aşağıdaki adres ile test sayfamızı görebiliriz:
Aşağıdaki gibi bir çıktı görüyorsak sorun yok demektir:
Bundan sonra artık JSF - facelets kurulumunu halletiğimiz için asıl amacımız olan PrimeFacesʼi kurcalamaya başlayabiliriz. Şimdi test.xhtml dosyamızı değiştirelim ve oraya bir WYSIWYG editör koyalım. test.xhtml dosyamızı aşağıdaki gibi değiştiriyoruz:
Sayfamızı tekrar çalıştıralım ve güzel sonucu görelim:
Ama bu hiç de güzel görünmüyor. Bir yerlerde bir eksiklik olduğunu düşünüyorsanız haklısınız çünkü PrimeFacesʼtaki bileşenlerin çalışması için head içinde p:resources bileşeninin olması gerekmektedir. Bu bileşen o sayfadaki bileşenler için gerekli javascript ve imajları sayfanıza yükleyecektir. test.xhtml kodumuzu aşağıdaki şekilde değiştiriyoruz ( head içine sadece p:resources ekledik ) :
Şimdi sayfayı tekrar çalıştıralım:
Bu sefer herşey daha güzel görünüyor. Artık PrimeFaces de çalışmaya hazır olduğuna göre, basit bir kayıt sayfamızı yapalım. Bu sayfada PrimeFacesʼın hem Ajax, hem grafik,hem datatable hem de persistence desteğinden faydalanalım.
Toplantı organizatör projemiz için, gelecek olan misafirlerin bir tabloya kaydı, bu misafirlerin bir grafikte gösterilmesi ve istenildiği zaman bir excel çıktısı alınması şeklinde bir senaryo üstünden gidelim. Böyle bir senaryo için bir kaç eklenti yapmamız lazım pom.xml ve web.xml dosyamıza. pom.xml dosyasına a şağıdaki bağımlılıkları ekleyelim:
Yukarıdaki bağımlılıklar database işlemlerʼi ve excel çıktısı için gerekmekte. Yukarıdaki bağımlılıkları pom.xmlʼde dependencies altına ekledikten sonra aşağıdaki komutu çalıştırırsanız bu bağımlılıklar eclipse projenize de eklenecektir. Bu komutu çalıştırdıktan sonra eclipse projenizde refresh yapmayı unutmayalım.
Bağımlılıklarımızı halletikten sonra database işlemlerimizi halledelim. Bunun için src/main/resources altına META-INF klasörünü yaratıp içine persistence.xml dosyamızı ekliyoruz. Bu dosyanın içeriği aşağıdaki gibidir:
Yukarıdaki kod, veritabanı kısmında JPAʼya hsql kullanacağımız belirtiyor ve com.prime.toplanti.alan.Misafir diye bir sınıfımızın olduğunu bunun veritabanına kaydedilecek olduğunu belirtiyor. Projemizde bu paket altında Misafir sınıfı yaratmayı unutmamamız lazım yani. Şimdi bu paket yapısını oluşturalım. Eclipse projemizde src/main altına java/com/ prime/toplanti/alan paketi yarattıktan sonra Misafir.java sınıfımızı oluşturalım. Misafir.java sınıfımızın içeriği aşağıdaki gibi olsun : package com.prime.toplanti.alan; import import import import import
@Id @GeneratedValue(strategy = GenerationType.AUTO) private long id; @Basic private String isim; @Basic private Integer kisiSayisi; public long getId() { return id; } public void setId(long id) { this.id = id; } public String getIsim() { return isim; } public void setIsim(String isim) { this.isim = isim; } public Integer getKisiSayisi() { return kisiSayisi; } public void setKisiSayisi(Integer kisiSayisi) { this.kisiSayisi = kisiSayisi; } }
Misafir sınıfımız hazır olduğuna göre şimdi de bu misafir sınıfımızı kaydedecek, getirecek DAO sınıflarımızı yapalım. com.prime.toplanti.ambar.MisafirAmbari.java aşağıdaki gibi olsun:
package com.prime.toplanti.ambar; import java.util.List; import com.prime.toplanti.alan.Misafir; public interface MisafirAmbari { List hepsiniGetir(); void kaydet( Misafir misafir ); }
Gene aynı paketteki MisafirAmbariJPA.java ise şöyle: package com.prime.toplanti.ambar; import java.util.List; import javax.persistence.EntityManager; import org.primefaces.optimus.config.annotations.Transactional; import com.google.inject.Inject; import com.prime.toplanti.alan.Misafir; public class MisafirAmbariJPA implements MisafirAmbari { @Inject private EntityManager em; public List hepsiniGetir() { return em.createQuery("SELECT m FROM Misafir m").getResultList(); } @Transactional public void kaydet(Misafir misafir) { em.persist(misafir); } public void setEm(EntityManager em) { this.em = em; } }
Gördüğünüz gibi, çok kolay bir şekilde metotlarımızı ekledik. Burada @Inject ile gördüğünüz kısımda Google Guice kullanarak EntityManager sınıfını bu MisafirAmbariJPA sınıfına verdik. PrimeFacesʼin bunu yapması için aşağıdaki 2 eklentiye ihtiyacımız var. 1) Ambar sınıfımızın tanımlı olduğu bir configürasyon sınıfı. com/prime/toplanti/ altına kurulum diye bir paket açıp içine Konfigurasyon.java sınıfını aşağıdaki içerikle ekleyelim: package com.prime.toplanti.kurulum; import import import import import
Yukarıda sizin de anlayabileceğiz gibi konfigürasyon dosyalarımız, projemizin çalıştığı paketi ve veritabanı işlemleri için gerekli olan fiterʼı sistemimize tanıttık. Konfigürasyon işlemlerimiz bu kadar. Tam sıkılmaya ba şlamı ştık konfigurasyon dosyalarından ki artık işin eğlenceli ve kolay kısmına geçebiliriz. Artık sayfamızı tasarlamaya başlayabiliriz. Öncelikle sayfamızda kullanacağımız managed bean ʼi yaratmakla başlayabiliriz işimize. com.prime.toplanti.web altına tanımlayacağımız MisafirKayit.java dosyamızın içeriği aşağıdaki gibi olsun: package com.prime.toplanti.web; import java.util.List; import javax.faces.application.FacesMessage; import javax.faces.context.FacesContext; import org.primefaces.optimus.config.Scope; import org.primefaces.optimus.config.annotations.Controller; import com.google.inject.Inject; import com.prime.toplanti.alan.Misafir; import com.prime.toplanti.ambar.MisafirAmbari;
@Controller(name = "misafirKayit", scope = Scope.REQUEST) public class MisafirKayit { private MisafirAmbari misafirAmbari; private Misafir misafir = new Misafir(); private List misafirler;
@Inject public MisafirKayit(MisafirAmbari misafirAmbari) { this.misafirAmbari = misafirAmbari; misafirler = misafirAmbari.hepsiniGetir(); } public Misafir getMisafir() { return misafir; } public void setMisafir(Misafir misafir) { this.misafir = misafir; } public List getMisafirler() { return misafirler; } public void setMisafirler(List misafirler) { this.misafirler = misafirler; }
public String kaydet() { misafirAmbari.kaydet(misafir); FacesContext.getCurrentInstance().addMessage(null, new FacesMessage(FacesMessage.SEVERITY_INFO, "Misafir Kaydedildi","Misafir Kaydedildi")); misafir = new Misafir(); misafirler = misafirAmbari.hepsiniGetir(); return null; }
}
Gördüğünüz gibi bu sınıfta bütün misafirleri temsil eden ve kaydedilecek misafir objesini tutacak referanslarımız mevcut. Bu managed-beanʼe sayfalarımızdan ulaşmak için, bu sınıfın tanımını faces-config.xml dosyasına yazalım. Eğer az önce yukarıdaki yazıyı okurken, içinizden “faces-config.xml dosyasına başka bir bilgi yazmayacaktık” diye düşünmediyseniz, bu yazıyı en baştan okumanızı tavsiye ederim. Çünkü evet orada dediğimiz gibi, faces-config.xml dosyasına bir daha bir yazı yazmayacağız. Peki jsf sayfalarımızdan bu sınıfa nasıl ulaşacağız? Cevap çok basit: @Controller(name = "misafirKayit", scope = Scope.REQUEST)
Bir önceki sayfadaki tanım ile otomatik olarak bu sınıfımız bir Request scopeʼda çalışmak üzere misafirKayit adı ile jsf sayfalarımızdan ulaşabileceğimiz bir managed bean oldu. Ne kadar kolay değil mi? Artık misafir kaydeden ve listeleyen sayfamızı yapmaya başlayalım isterseniz. src/ main/webapp altına misafirKayit.xhtml dosyasını ekleyelim. İçeriği de şöyle olsun:
Sayfamız da hazır olduğuna göre, bu sayfayı test edelim. Tarayıcımızdan
sayfasına girdiğimiz zaman aşağıdaki gibi bir görüntü ile misafir kaydımızı yapabileceğiz.
Bu sayfayla bir süre oyalandıktan sonra, bu sayfaya Ajax ekleyelim. Bir kayıt girip Kaydet butonuna basıntığımızda Ajax ile tablomuza eklenmesi için, mevcut kaydet butonu yerine aşağıdakini ekleyelim
Evet sadece bu kadar. Artık bir Ajax butonumuz var ve artık misafirler tabloya Ajax ile ekleniyor. Ajaxʼsız versiyonda butona tıkladığımız zaman, tabloya misafir ekleniyordu ve eski değerler siliniyordu. Ama Ajax ekledikten sonra artık form temizlenmiyor değil mi? Peki bunun için ne yapmamız lazım? PrimeFacesʼin amacı basit kod yazmak olduğu için cevap çok basit olmalı. Tahmin ettiğiniz gibi, p:button içindeki update özelliğine bir eklenti yaparak sorunu çözeceğiz. Butonumuzu aşağıdaki gibi değiştiriyoruz ve artık form her kaydet denildiğinde temizleniyor
Ajax ile butonlarla oynadıktan sonra, biraz da datatable bileşenini biraz değiştirelim. Mesela sayfa şeklinde gösterim ( paging ) ve sıralama ( sorting ) ekleyelim isterseniz. Eğer tabloda çok fazla obje varsa, aynı sayfada gösterildiği zaman bu objeler, sayfa aşağıya doğru uzayıp gider ve kullanıcı için hoş bir görüntü oluşturmaz. Bunun önüne geçmek için tablomuza, sayfa şeklinde gösterilebilir hale getirelim. Bundan önce de olduğu gibi böyle bir özellik eklemek tabii ki çok kolay. Aşağıdaki p:dataTable kodu yerine
aşağıdaki kodu yazıyoruz.
Gördüğünüz gibi sadece paginator="true" rows="5" diyerek bu özelliği eklemiş olduk. Bu kod parçasını eklediğimizde aşağıdaki gibi bir ekran görüntüsü ile karşılaşıyoruz.
Paging özelliği de ekledikten sonra, isterseniz bir de sıralama ( sorting ) yapalım tablomuzdaki kolonlarda. Bu özelliği de eklemek tabii ki çok kolay. Hangi kolonda sıralama istiyorsak, o kolonun tanımına sadece sortable="true" ekliyoruz. Mesela isim kolonuna ekleyelim aşağıdaki gibi:
Artık bu kolonun üstüne tıkladığımızda sıralam işlemi gerçekleşecektir ve ekran görüntümüz aşağıdaki gibi olacaktır.
Her özellik kolay bir şekilde eklenip çıkarılabiliyor gördüğünüz gibi. En son özellik olarak da bu tabloya bir excel çıktısı ekleyelim. bunun için sayfamıza aşağıdaki buton kodunu ekliyoruz
ve herşey hazır. Bu butona tıkladığımız zaman bize aşağıdakine benzer bir excel çıktısı verecektir.
Burada fileName indirilecek dosyanın adını, type, çıktı tipini, target ise tabloʼnun idʼsini gösterir. PDF çıktısı almak için yapmamız gereken tek şey, type="xls" yerine type="pdf" yazmak. İstersek CSV ve XML çıktılarını gene aynı şekilde type özelliğini değiştirerek alabiliriz. Son olarak da bu sayfamıza bir pasta grafiği ekleyelim. Bu pasta grafiği de misafirlerin kişi sayısını belirten bir pasta grafiği olsun. Normalde eklenmesi zor olabilecek bu bileşeni, sayfamıza sadece aşağıdaki kodu ekleyerek bir pasta grafiği ekleyebiliriz:
Sadece bu kadar!. Bu kod parçacı ğını ekledikten sonra sayfamızdaki çıktı aşağıdaki gibi olacaktır:
Gördüğünüz gibi bu dökümandaki amaç, PrimeFaces ile çok kolay bir şekilde projelerinizi geliştirebiliyor olabilmemiz. Bu dökümanda bir kayıt işlemi senaryosunu göstermiş olsak da, daha bahsetmediğimiz aşağıdaki özellikler de PrimeFacesʼde mevcut • Bir çok zengin bileşen http://www.rehberharitam.com/primefaces-examples/ui/home.jsf adresinden de bu bileşenleri görebilirsiniz. Grafik, CAPTCHA, ImageCropper,Ağaç, Menü gibi bir çok zengin bileşen mevcut. • XMLʼsiz navigasyon • Sayfalarınızın o anki görüntüsünün PDF çıktısı http://www.rehberharitam.com/ primefaces-examples/optimus/playerDisplayExample.jsf • Yardımcı validatorʼler • Kod geliştirirken size hataları, mesajları, performansı gösterecek FacesTrace projesi http://www.rehberharitam.com/primefaces-examples/facestrace/createBook.jsf Son olarak PrimeFaces sayfasına ulaşmak için http://primefaces.prime.com.tr/tr/ , Projenin google codeʼdaki sayfasına ulaşmak için http://code.google.com/p/primefaces/ , Bu dökümandaki örnek uygulamaya http://primefaces.prime.com.tr/docs/ToplantiOrganizatoru.zip , Bu döküman hakkında bana ulaşmak için [email protected] adreslerini kullanabilirsiniz.
