Primeface
- 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.