PrimeFaces

PrimeFaces-Carousel Kullanımı

Merhabalar arkadaşlar. Bu yazımıda PrimeFaces’ın bir başka kategorisi olan Data kategorisindeki bileşenleri öğrenmeye başlayacağız.  İlk öğreneceğimiz bileşen de Carousel bileşeni.

Dersimize başlamadan önce söylemek istediğim bir şey var arkadaşlar. PrimeFaces yazılarını giriş yazısında sıralı bir liste haline getirdim. O yazıya buradan ulaşabilirsiniz. Tüm yazılara oradan ulaşabilirsiniz. Şimdi konumuza geçelim.

Carousel kullanıcıya vermek istediğimiz bilgileri bir slayt şeklinde vermemiz sağlayan bir bileşen arkadaşlar. Responsive , Custom ve Tab şeklinde 3 kullanım türü mevcut.  Fakat Responsive için primefaces.org’da örnek olmasına rağmen  şu anda indirilebilir durumdaki Jar içindeki Carousel’de responsive yapısı yok. Bu yüzden biz Custom ve Tab kullanımlarını göreceğiz. Şimdi örnek kodumuz üstünde nasıl kullanıldığını inceleyelim.

index.xhtml Kodu

index kodumuz içinde 3 kısım var arkadaşlar. 2 adet carousel ve bir dialog bileşeni kullandık. Adım adım kullandığımız özellikleri açıklıyayım:

  • headerText ile carousel’in başlığını tanımlıyoruz.
  • value ile bean içinde doldurulmuş listeyi view tarafına geçiriyoruz. Yani ekranda carousel’in içinde nelerin görünmeisni istediğimzi tanımlıyoruz.
  • var ile gelen liste içindeki her bir öğeyi tutabiliyoruz.
  • numVisible ile listeden gelen öğelerin bir slayt halinde gösteriyoruz. numVisible özelliğine bunu yapmak için 1 atamamız gerekiyor.
  • easing özelliği öğeler arasında geçiş yaparken efekt kullanmak için tasarlanmış.
  • circular özelliği de liste bittiğinde başa dönebilmek için kullanılıyor.
  • İlk carousel’in footer kısmında bir detaylı görüntüleme butonu mevut. Bu buton her bir öğe için Ajax altyapısını kullanarak tıklandığında açılacak pencereyi güncelliyor. Butonun Update özelliğini güncellemek istediğimiz bileşenin id’si ile kullanıyoruz. Tıklandığında yeni pencere açılması için oncomplete özelliğini kullanıyorız ve dialog bileşininin widgetwar özelliğine atadığımız stringi veriyoruz. Bu sırada f:setPropertyActionListener etiketini kullarak bean içindeki değişkene değeri direk gönderiyor.
  • İkinci carousel’de fark öğeleri listeden almamamız ve tab yardımı ile elle oluşturmamız.
  • Dialog bileşenini de p:dialog etiketi ile kullanıyoruz ve içine ekranda görünecek bileşen ve ifadeleri yazıyoruz. Bu bileşen aynı zamanda her bir öğe için güncellenecek bileşendir.

CarouselBean.java Kodu

Managed Bean sınıfımız içinde temel Java bilgilerinizle anlayabilceğiniz ifadeler mevcuttur.  @PostConstruct notasyonunu da daha önce değinmiştik.

Ekran Çıktıları

Alttaki resimde Custom isimli carousel’imizin ekran çıktısını görüyorsunuz. Sağ üstteki numaralı liste ya da sağ-sol okları ile gezinebilirsiniz.

 

Öğeler arasında geçişi sağ-sol okları ile yapmanız durumunda sayı otomatik güncellenir.

 

Sol attaki detay butonuna tıkladığımda öğe hakkında daha detaylı bilgi edinebileceğim pencere açılıyor.

 

Tab kullanımında da benzer bir çıktı elde ederiz.

 

Bu yazıda da bu kadar arkadaşlar. Gelecek yazıda görüşmek üzere sağlıcakla kalın.