primeface ve jsf

1. 1- JAVA SERVER FACES(JSF)
JSF (JavaServer FacesJEE uygulamalarında kullanılan Java servlet, java server pages
( JSP) , Struts, Apache Wicket gibi, JSF te web uygulamalarının arayüzünü inşa etmek için
oluşturulan, yeni nesil web uygulama çatısı,Javanın standart web frameworküdür.JEE
uygulamalarında web arayüzleri oluşturmak için Java servlet, java server pages(JSP) , Struts,
Apache Wicket gibi çok sayıda framework bulunur(Tabi web uygulamalarında çığır açan java
appletlerini de unutmamak lazım). JSF de bunlardan bir tanesidir. JSF ,JSP ve Servlet‟ların
üzerine kurulmuştur.Bu var olan teknolojilerle MVC yaklaşımını birleştirir.
Şekill – 3 : Jsf Mimarisi-1
Temel olarak; uygulama mimarisi, standart kullanici arayüzü(UI) seti ve uygulama altyapısı
olmak üzere 3 katmandan oluşmaktadır.
JSF‟nin bileşen altyapısı, kullanıcı arayüzü bileşenleri oluşturmak için ortak bir yol tanımlar.
Bu mimari standart JSF I bileşenleri(hyperlink, button, secme kutulari, text alanlari gibi)
yaninda, üçüncü parti bileşenleri için de bir ortam oluşturur.
Bileşenler olay tabanlıdır, dolayısıyla JSF istemci tarafında oluşan olayların (örnegin text-
box‟in degerinin degiştirilmesi ya da butona tıklanmasi gibi) işlenmesini sağlar.

2. Şekill – 2 : JSF MİMARİSİ-2
Web uygulamalarinin masaüstü olanlardan farkli olarak genellikle birçok istemciye destek
vermesi gerektiğinden, JSF‟ in de kullanıcı arayüzü bileşenlerini değisik yollarla göstermek
için güçlü bir mimarisi bulunmaktadır. Kullanıcı girişinin “validate” edilmesi, nesneleri
göstermek icin nesnelerin string‟e dönüştürülmesi veya string‟den nesne oluşturulması gibi
özelliklere sahiptir. Java Server Faces ya da diğer adıyla “Faces”, otomatik olarak UI
bileşenleri ile giriş değerlerini tutan ve cevap üreten Java nesnelerini senkron halde tutabilir.
Bu nesnelere “backing beans” adı verilir. Ayrıca güçlü bir navigasyon sistemi ve çoklu dil
desteği bulunur. Her yeni sistem için gerekli temel yapıtaşlari olan bu özellikler JSF‟nin
uygulama altyapisini olusturur.JavaServer Faces tool destegi icin altyapiyi tanimlarken
ozellestirilmis tool‟larin gelistirilmesi, Java‟da oldugu gibi yazilim firmalarina birakilmistir.
Fakat Faces uygulamaları tasarım araçları olmadan da geliştirilebilmektedir.
Jsf Diğer java web teknolojilerinden Struts ile beraber kullanılabilir.Biz projemizde Struts ın
File Download ve File Upload özelliklerini kullanmaya çalıştık ama daha sonra nedenini
bilmediğimiz bir sorun nedeniyle Struts ile Jsf ibirlikte kullanma fikrinden vazgeçtik.
Struts ve Jsf birlikte kullanılabilir.Struts ın farkı UI bileşen modeli içermiyor, UI bileşen
modeli içinolay modeli içermiyor,UI bileşenleri için durum yönetimi içermiyor ve birden çok
renderer desteği içermiyor.Struts html ile biraz daha birbirine yakın ve iç içedirler.
JSF MVC mimarisini de destekler.Hatta JSF‟nin ortaya çıkmasındaki en büyük etkende
JSP‟nin MVC‟yi kendi içerisinde destekleme konusundaki sıkıntılarıdır.MVC(Model-View-
Controller) basitçe iş ve sunum mantığının birbirinden ayrılması olarak düşünülebilir. MVC ;
adını Model - View - Controller 'in baş harflerinden alan tasarım desenidir.Sunduğu katmanlı
mimari sayesinde, uygulamanın kullanıcı arayüzü ve mantık kısmını birbirinden ayırır.

3. Model: İş mantığı (Business Logic) bölümüdür. Tek katmandan oluşabileceği gibi, birden
fazla katmanı da içinde barındırabilir. Tek katmandan oluştuğunda genelde veritabanına kayıt
ekleme, kayıt çekme, kayıt silme vb. veritabanı işlemleri için kullanılır. Controller'den gelen
değerleri işler ve geriye döndürür. Model katmanında herhangi bir output işlemi yapılmaz.
View: Uygulamanın kullanıcıya gösterilen arayüzünün bulunduğu katmandır. Html,
Css,Javascript vb. bu katmanda bulunur. Bu bölümde minumum php kodunun yazılması
hedeflenmektedir. for, foreach, while vb. döngüler ile birlikte, dinamik değerleri ekrana
yazdırmak için output komutları sıklıkla kullanılır.
Controller:Uygulamanın karar mekanizmasıdır. Model ile View arasında köprü görevi görür.
View katmanından gelen istekleri(request) model'e gönderir ve Model
katmanındanaldığı verileri view e aktarır.
Şekill – 3 : JSF ve MVC
Jsf in ,uygulamaların altsistemlerine (Enterprise Javabeans servisleri yada veritabanı gibi)
entegre olabilir.
JSF ek olarak daha az efor sarfederek daha güçlü web uygulamaları hazırlamak için birçok
servis sunmaktadır.Java ServerFaces‟in esas amaci web gelişimini hızlandırmaktır.Uygulama
geliştiricilerin istekler(requestler), cevaplar ve markup dili yerine bileşen, olay, “backing
bean” ve bunların ilişkileri şeklinde düşünmelerini sağlar.
Baska bir deyişle web uygulama geliştirmedeki birçok karmaşıklığı maskeleyerek, sadece
maskeleyerek, sadece uygulama geliştirmeye odaklanılmasını sağlar.JSF her şeyden önce bir
Java standardıdır.Bunun yanında sektördeki IBM, Oracle gibi önemli firmalar JSF‟i
desteklemektedir.Farklı JSF implementasyonları-bulunduğundan projenin gereklerine göre
geliştirme için seçim yapabilme özürlüğü sağlamaktadır.JSF„in component olarak
bazı eksikleri vardır. Bu eksikleride diğer (richfaces vs..) componentler kullanılarak
doldurmak mümkündür.Zaten JSF deki amaç bütün ihityaçları karşılama değil güzel bir
altyapı hazırlamaktır. O yüzden eksikler konusunda çok fazla endişelenmeyin , herşeyin bir
karşılığı vardır ve rahatça iç içe kullanarak işlemlerinizi yapabilirsiniz.
Jsf‟in çok sayıda 3.parti bileşen kütüphanesi vardır.bunlara örnek olarak Richfaces, Icefaces,
Primefaces,Trinidat ve Tomahawk gösterilebilr.Bu 3. Parti bileşenlerinin temel amacı Ajax

4. tabanlı zengin bileşen kütüphenesi yaratmak ve çeşitli JSF eklentileri yardımıyla uygulama
geliştirmeyi kolaylaştırmaktır.Biz projemizde bu bileşenlerden PRİMEFACES i
kullandık.Primefaces bişr türk olan Çağatay ÇİVİCİ tarafından geliştirilmiş olup kendi
klasmanında lider konumdadır.
2-PRİMEFACES
PrimeFaces.Nedir?
İlk önce PrimeFaces'in ne olduğu açıklamak daha doğru olur diye düşünüyorum. PrimeFaces
JSF 2.0 için bir çok ajax bileşeni barındıran açık kaynak bir bileşen paketidir(Component
Suite).Türlü türlü işlevlere sahip çeşitlibileşenlere sahip olmasının yanısıra, standart JSF2.0
Ajax API‟sine dayanan Ajax desteği vardır.Ayrıca TouchFaces modülü ile akıllı telefonlardan
kullanılabilecek web uygulamaları kolaylıkla geliştirilebilir.İlk olarak 2009 haziran ayında
0.9.0 sürümü ile yayımlanmış olan Primefaces‟ın , şu anki son sürümü 2010 kasım ayında 2.2
RC‟ sürümüdür şimdilerde ise Primefaces‟ 3.0 deneme aşamasındadır fakat tam sürüm henüz
çıkmamıştır.Şu an en son sürüm içinde barınan bir çok kullanışlı ve estetik özellik
bulunmaktadır. Bunlar; otomatik tamamlayıcılar, dosya upload, video-müzik
oynatıcıları,menüler, takvim, galeri, input filtreleri ve daha bir çok bileşen. PrimeFaces'ı diğer
ajax bileşen paketlerinden üstün kılan özellikleri düşünecek olursak; estetik ve esnek tasarım
imkanı sağlaması, çok sayıda bileşen içermesi, mobil arayüz desteği, döküman desteğinin
diğerlerinden daha iyi olması olarak sayabiliriz.
JSF PRİMEFACES CONFİGURASYONU
Primefaces‟ii kullanabilmek için http://www.primefaces.org/downloads.html adresinden
PrimeFaces‟in son sürümünü indirip projemizin WebContent/WEB-INF/lib dizinine atıyoruz.
Şu anda son sürüm primefaces-3.0.jar ama biz 2.2.1 sürümü dosyasını lib dizinine
yerleştirdim. PrimeFaces‟ın JDK 5+ runtime ve JSF 1.2+ gerçekleştirimi dışında herhangi bir
bağımlılığı bulunmuyor. Yalnızca, bazı özelliklerini kullanabilmek için ek kütüphanelere
ihtiyaç duyabiliyor.
Netbeans‟teki projemizin Libraries kısmına sağ tıklayıp
LİBRARİES->Add JAR /Folder seçeneğinden daha önce indirdiğimiz
* primefaces-2.2.1.jar
*jsf-api.jar
*jsf-impl.jar
dosyalarını projemize eklersek primeface eklentilerini rahat bir şekilde projemizde
kullanabiliriz.

5. Şekill –4:Prifaces 2.2.1 Ekleme
Biz projemizde PrimeFaces 2.2.1 i kullandık. PrimeFaces'ı sayfalarımızda kullanmak için "p"
isim uzayını(namespace) kullanıyoruz. Sayfamızın en üstünde bulunan isim uzaylarının
yazıldığı html tagına aşağıdaki isim uzayımızı ekleyelim.
xmlns:p="http://primefaces.prime.com.tr/ui"
Şekill – 5 :HTML sayfası eklentisi
PrimeFaces‟i çalıştırmadan önce birkaç küçük ayarlama yapmamız gerekiyor. JSF 2.0‟da
göre PrimeFaces 2.x‟in ayarlama işlemlerini de halledip ilk PrimeFaces denememize
geçmeye az kaldı. İlk olarak Resource Servlet için gerekli ayarlamayı web.xml dosyamıza
aşağıdaki kod parçasını ekleyerek halledmemiz gerekiyor .

6. Şekill – 6 :Web.xml Dosyası ayarı
PrimeFaces‟i Servlet 3.0 ortamında kullanıyorsanız, bu ayarlamayı yapmanız gerekmiyor. Biz
Primeface 2.2.1 kullandığımız için Mojarra 2.x için bir ayarlama daha yapıyoruz. web.xml‟e
aşağıdaki girdiyi eklememiz gerekiyor
Şekill – 7 :Web.xml Dosyası ayarı-2
Primefaces özelliğini kullanabilmek için HTML taglarının başına p: yazmamız gerekiyor.
Kullandığımız bazı Primefaces özelliklerinden bahsedecek olursak
PRİMEFACES ÖRNEKLERİ
Primefaces EDİTÖR
Projede Primefaces Editör‟ü birçok yerde kullandık ben sadece ARAŞTIRMALARIM
sayfasına veri eklerken açıklma bölümü için kullandığımız Primefaces editöründen
bahsedeceğim.Editör normal bir text şeklinde açıklama girmek için yukarıda yazı sitili vs gibi
bir çok özellik ve seceneği bulunan bir Primefaces özelliğidir.Buradan alınan veriler Mysql

7. veritabanına kayıt edilir ve daha sonra buradan tekrar çekilerek istediğimiz html sayfasında
gösterilmesi sağlanır.
Şekill – 8 :Primeface Editör
Yukarıdaki kod parçasında gösterildiği gibi <p:editör diye yani “P” tagın başına yazarak
Primefaces‟i etkinleştiriyoruz ve sayfamızda kullanabiliyoruz.Primeface bize hem kolaylık
sağlıyor hemde sayfamızın daha afili durmasını sağlıyor.
Primefaces EDİTÖR‟ü kullanırken bazı problemlerle karşılaştık bunlardan bir tanesi editöre
girdiğimiz veriler veritabanına <div> / <br> gibi html taglarınıda içeriyordu ve aynı şekilde
kullanıcı sayfasında gösterirken de aynı şekilde html taglarını da gösteriyordu.

8. Şekill – 6 :HTML tag ” escape=false”
Bu problemi <h:outputText />“ e escape=”false” özelliğini ekleyerek veritabanıdan çekilen
bilgilerdeki <div> vb.. tagları temizleyip kullanıcı ara yüzündeki sayfaya o şekilde basmayı
sağladık.
PRİMEFACES CALENDAR
Primafaces uı eklentilerinden bir tanesi de calendar extender‟dir yani takvim
Şekill – 9 :Primeface CALENDAR
Takvim klasik bir özellik ama sitede bulunsun diye projemize ekledik asp.net ve php de bu
özellikler zaten frameworkta bulunduğu için bu gibi özellikleri eklemek çok kolay .
JSF‟ te ise bunu yapmak ancak Primefaces gibi 3.parti bileşen kütüphaneleri yardımıyla kolay
bir hak alıyor. Calendar extenderinde projeye eklenmesi diğer Primefaces bileşenlerindeki
gibi önce Primefaces ın bize sağladığı kod parçasına projemize uyarlamak ve bir java class‟ı
içerisine yerleştirmek ve daha sonrada bunu xhtml sayfası içerisinden çağırmak.
Yukarıdaki şekilde görüldüğü gibi <p:calendar …. /> yazıp içeridede bazı özelliklerini
istediğimiz gibi ayarlayabileceğimiz bir eklenti.
PRİMEFACES FileUpload

9. JSF in özel bir file upload özelliği olmadığı için ya projeye STRUTS ekleyip struts ile yada
3.parti bileşen kütüphaneleri(Richfaces,Primefaces gibi) yardımıyla dosya(pdf,exel,text vb)
ekleyebiliriz.Biz bunu JSF in Primeface 3.parti bileşen kütüphanesiyle yaptık.
Kısaca anlatacak olursak;
http://www.primefaces.org/showcase/ui/fileUploadAuto.jsf adresinden file upload ile alakalı kodları
inceleyip projemize uyarlarsak yani bir java class’ı içerisine bu kodları ekleyip parametrelerini
kendimiz ayarlarsak;
WEB:XML dosyasınının alt kısmına aşağıdaki kod parçasını eklersek.
Şekil–10 :Primefaces FileUpload XML Konfigurasyon
Daha sonra FileUpload kodlarını java class‟ının içine uygun bir şekilde yerleştiriyoruz.
DersİcerikEkle.java class‟ı mızın içine adında bir metod tanımladık ve
“Fileupload event” parametresiyle ve event.getFile().getFileName(); yükleyeceğimiz
doayanın adını alıp veritabanına dosya yolunu kaydetmek için kullanıyoruz.
Burada dosya adını aldığımızdan bahsettik dosya adını almak için bu adın bir yerden
gönderilmesi gerekir.bu class‟a dosya adı Admin_DersNotu_Ekle.xhtml sayfasından
Primefaces‟in Fileupload özelliği sayesinde gönderiliyor.

10. Şekil–12
:Primefaces FileUpload XHTML Konfigurasyon
Yukarıdaki kod parçasında görüldüğü gibi
<p:fileUpload fileUploadListener=”#{dersİçerik.handleFileUpload}” koduyla Primefaces
fileUpload özelliği java class‟ına parametre gönderiyor yani yüklenecek dosya adını
gönderiyor ve dosya yükleme işlemi bu şekilde gerçekleştiriliyor.
PRİMEFACES FİLEUPLOAD
Projemize daha önce eklemiş olduğumuz dökümanları indirebilmek için FileDownload a
ihtiyacımız vardır.bunu yine STRUTS ile projemize dahil edebiliriz ama biz yine jsf 3.parti
bileşen lerinden olan PRİMEFACES‟in FileDownload özelliği ile yaptık ve projemize dahil
ettik.
Önce http://www.primefaces.org/showcase/ui/fileDownload.jsf sitesine girip FileDownload
İçin Primefaces‟in yaptığu uygulamaya göz atarsak önce xhtml kısmı ve java class‟ı içinAyrı
ayrı ne yapılması gerektiini anlatıyor.Biz buradaki kodları projemize uyarladık.

11. Önce KullaniciDersİcerik.xhtml sayfasına aşağıdaki gibi
<p:fileDownload value”#{derslerSecme.Mahmut(‘Odev’,3,3)”}/>
Primeface FileDownload ile dosya indirme özelliğini kullanarak Java class‟ı olan
derslerSecme.java‟ya xhtml‟den üç tane parametre gönderiyoruz.Gönderdiğimiz bu
parametreler yardımıyla veritabanından gerekli sorgulamalar yapıldıktan sonra indirmek
isteğimiz dosyaya ulaşıyoruz ve dosyayı bilgisayarımıza indiriyoruz.
Java classı içerisinde oluşturduğumuz indir() metodu önce MySQL veritabanı bağlantısı
açıyor daha sonra içerik tür parametresine veritabanında ki yollara bakıp aynı olan dosyayı
sunucudan bilgisayara indirilmesini sağlıyor.

12. Burada kullandığımız dizi ise dersler,sınavlar vs gibi menü seçeneklerine uygun olanların
listelenmesi sağlanıyor.