PrimeFaces

PrimeFaces – Accordion & Fieldset Bileşenleri

Merhabalar arkadaşlar. Bu yazı ile birlikte PrimeFaces’ın Panel kategorisine başlıyoruz. Panel kategorisindeki ilk yazımız Accordion ve Fieldset üzerine olacak. Başalamadan önce şunu belirteyim bu yazı ile beraber 36 PrimeFaces yazısı oldu. Tüm yazıları sıralı bir şekilde PrimeFaces’a giriş yazımda yayınlıyorum. Oradan sıralı şekilde ulaşabilirsiniz: http://www.kod5.org/jsfprimefaces-dersleri-primefacesa-giris/

Accordion bileşeni ile başlayalım.

Accordion bileşeni birkaç tabdan bir araya gelmiş istenirse aynı anda sadece bir tabın açılmasına istenirse de aynı anda tüm tabların açılabilmesine izin verilebilen bir bileşendir. Şimdi basit bir kullanımına bakalım.

accordion.xhtml

Accordion sayfamız içerisinde accordion bileşenimizi p:accordionPanel etiketimiz ile kullanıyoruz. Kod içerisinde etiketin 3 özelliğinin kullanıldığını görüyoruz. Bunlardan birincisi olan multiple özelliği aynı birden çok tabın açılabilmesini sağlıyor. Bu özelliğe true ataması yapılmazsa bileşen varsayılan olarak aynı anda sadece 1 tabın açık olmasına izin veriyor. İkinci özelliğimiz olan dynamic özelliği tabların Ajax istekleri ile yüklenmesine işaret ediyor. True ataması yapılırsa safa yüklenirken tüm tablar yüklenmiyor ve onun yerine siz tabı açma isteği yaptığınızda tab içeriği yükleniyor.  Üçüncü özelliğimiz olan Cache özelliği de Ajax isteği ile doldurulup sonra kapatılan tabı tekrar açmak istediğimizde tekrar Ajax isteiği yapılıp yapılmayacığına bakıyor. Cache özelliğine true atanırsa yeniden istek yapılmıyor ve alınan bilgiler saklanıyor.

p:accordionPanel etiketimizin p:tab etiketini kullanarak  kullanıcıya bilgileri gösterecek olan tabları yazıyoruz. p:tab’ın title özelliği ile tab’a bir başlık atamış oluyoruz. Bu tab içinde bilgileri kullanıcıya nasıl göstereceğimiz bize kalmış. Örneğimizde PanelGrid ile gösteriyoruz.

Üstteki kodun ekran çıktıları şu şekildedir:

Bir tab açılmış hali:

Screen Shot 2016-01-24 at 21.27.36

Multiple özelliği true olduğu için aynı anda birden fazla tab açabiliyorum

Screen Shot 2016-01-24 at 21.29.07

Örneğimizde gördüğünüz üzere bir managed bean kullanmadık ve içerdeki tabları kendimiz yazdık. Ancak istersek otomatik tab ürettirerek DataTable’daki kolonların otomatik dolması gibi bir işlem yapabiliriz. Şimdi onunla ilgili bir örnek yapalım.

accordion.xhtml

 

XHTML kodumuz içerisinde accordion bileşenimizi managed bean’den alınacak verilerle dolduracak Java kodumuz içerisinde oluşturduğumuz listeyi accordion’un value özelliğine atıyoruz. Liste içindeki değerleri ekrana yazdırabilmek için de var özelliğini kullanıyoruz.

AccordionBean.java

AccordionBean sınıfımız içerisinde ekrana yazdıracaklarımızı tutan bir liste tanımlıyoruz ve @PostConstruct ile işaretlenmiş metot içerisinde listeyi oluşturuyoruz ve içinde TechnologyPojo nesneleri koyuyoruz.

TechnologyPojo.java

POJO olarak kullandığımız sınıf.

Kodun ekran çıktısı şu şekildedir:

Screen Shot 2016-01-24 at 21.52.49

Fieldset Bileşeni

Fieldset bileşeni Accordion bileşenine benzer bileşendir. Yalnız onun gibi tablardan meydana gelmez. Tek bir dikdötgen kutusu içerisinde kullanıcıya bilgi vermek için tasarlanmıştır. Toggleable denilen açılma-kapanma özelliğine sahiptir.  Örnek kodumuza bakalım:

fieldset.xhtml

Fieldset bileşenini p:fielset etiketi ile kullanıyoruz.  legend özelliği bu noktada ekranda görünen Fieldset bileşeninin başlığı özelliğini temsil eder. Açılıp kapanma özelliğini kazandıran olay ise toggleable özelliğidir. Bu özelliğe true ataması yapılırsa bileşen açılıp kapanabilir.

p:fieldset etiketi içerisinde p:ajax etiketi ile bileşenin açılma kapanma olayları yakalanmakta, msgs id’li mesaj vermek için kullanılan Growl bileşeni ile durum kullanıcıya bildirilmektedir. Burada event’ın toggle olduğuna dikkat etmek gerekir. Listener özelliğine atanmış metodun FacesContext’e koyduğu mesaj Growl bileşenine aktarılmaktadır. Growl bileşeninde showDetail=”true” olmasına dikkat etmeliyiz. Aksi takdirde 3 parametreli FacesMessage yapılandırıcısını kullanırsak mesaj detayını temsil eden son parametre Growl içerisinde gösterilemeyecektir. (FacesMessage hakkında bir takım bilgilere buradaki yazımdan ulaşabilirsiniz.)

PanelGrid içerisinde de kullanıcıya gerekli bilgileri aktarıyoruz.

FieldsetBean.java

FieldsetBean kodu içerisinde tek yaptığımız işlem Fieldset bileşeninin açılma kapanma olayını yakalamaktır.  handleToggle metodu aldığı ToggleEvent parametresi sayesinde açılma kapanma durumunu öğrenmektedir. Metot içinde bizim yaptığımız verilecek mesajın Türkçe’leştirme işlemidir. Fieldset bileşeni HIDDEN ya da VISIBLE olabilir. Biz de if-else ile hangi durumda ise ona göre durum String değişkenini ayarlamaktayız ve FacesContext’e koyacağımız FacesMessage nesnesini oluştururken kullanmaktayız.

Fieldset bileşenimizin örnek kodlarının çalıştırılması sonucu ekran çıktımız şu şekildedir:

Screen Shot 2016-01-24 at 23.16.23

Mustafa Demir yazılı butona tıkladığımızda Toggleable özelliği ile Fieldset açılacak ya da kapanacaktır. Resimde kapalı halden açık hale geçme sırasında verilen mesajı görmekteyiz.

Bu yazıda da bu kadar arkadaşlar. Accordion ve Fieldset bileşenlerinin kullanımını öğrenmiş olduk. Gelecek yazıda görüşene kadar sağlıcakla kalın.