kategori : Javascript -Jquery | yazar : Muhammed KOŞAN | tarih : 2010-12-29 | okunma : 714

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). Ş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.


Nasıl Kullanırım?

İlk olarak gerekli kütüphaneyi buradan indirin. Eğer Maven kullanarak proje geliştiriyorsanız gerekli link üzerinden maven koduna ulaşabilirsiniz. Biz şu an PrimeFaces 2.2. RC2 sürümünü indirip kullanacağız (primefaces-2.2.RC2.jar). Kullandığınız IDE'ye göre jar dosyamızı projemize kütüphane olarak ekliyoruz.

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"

Artık sayfamızda "p:" ile başlayan bir çok bileşeni kullanabiliriz :). İlk olarak bir panel oluşturalım. "p:panel" şeklinde çağırabilirsiniz. Tüm bileşenlere buradan ulaşabilirsiniz. "h:body" tagları arasına aşağıdaki kodumuzu yazıyoruz

Merhabalar Dünya :). Bu bizim yeni panelimiz :).

Artık bir panelimiz var :). Fakat görünümü basit ve sade.


Peki PrimeFaces'ın temaları varmı varsa nasıl kullanabiliriz?

Elbette bir çok teması mevcut. Temalara buradan ulaşabilirsiniz. Tema dosyaları içerisinde "Sam" adlı tema default olarak PrimeFaces üzerinde gelmektedir. Bu sayfadaki temalardan birini seçip indirip nasıl kullanabileceğimize bakalım şimdi. Ben Redmond'u seçtim :). İndirme işlemi tamamlandıktan sonra sıkıştırılmış dosyayı açıp projenizde WebPages içinde istediğiniz bir konuma kopyalayın. Sonra sayfanızda "h:head" tagları arasına:

kodunu yazın. Burada indirdiğim tema dosyası redmond olduğu ve bunu direkt olarak WebPages içine yerleştirdiğim için bu şekilde path'i belirttim. Ek olarak default olarak atanan "sam" tema ayarlarını iptal etmek için web.xml sayfasına aşağıdaki kodu yazabilirsiniz.

 primefaces.skin
 none

Bunun dışında en sevdiğim yanı kendinize özgü tema hazırlayabilmeniz. jQueryUI sayfasında ThemeRoller aracı ile istediğiniz görünümde PrimeFaces temaları oluşturabilirsiniz. Tüm ayarlamalarınızı yaptıktan sonra "Download Theme" buttonu ile temanızı indirip yukarıda anlattığımız gibi temanızı yüklemeniz yeterli olacaktır.


Bol ajaxlı günler :).