PrimeFaces

PrimeFaces – Tree&TreeTable&HorizontalTree

prime

Merhabalar arkadaşlar. Bu yazıda sizlere PrimeFaces’ın Data kategorisindeki son bileşenimiz olan Tree ve onunla ilgili TreeTable ile HorizontalTree’yi öğrenerek Data kategorisini tamamlayacağız inşaAllah.

Tree bileşeni bazen işletim sistemi içindeki klasör yapılanmasında bazen bir takım web sitelerinde karşılaştığımız bir ağaç yapısı arkadaşlar. PrimeFaces geliştiricileri de bunu bileşen halinde bize sunmuşlar. Şimdi 3 bileşenin beraber yer aldığı XHTML dosyamızı inceleyerek dersimize başlayalım.

index.xhtml

Tree bileşenimizi p:tree etiketi ile kullanıyoruz. Bu etiketin value özelliğine Java kodu içinde tanımlanmış TreeNode tipinde olan bir değişken atanıyor. Bu değişken aynı zamanda kök düğüm olma özelliğini de taşıyor.  DataTable’dan tanıdık geleceği üzere burada da var özelliğimiz mevcut. Çünkü düğüm birden fazla özelliği muhteva edecek şekilde oluşturulmuş olabilir.  Onun örneğini de az sonra TreeTable içinde göreceğiz. Bileşenimizin bir diğer özelliği dynamic özelliğidir. Bu özelliğe true ataması yapılırsa bileşen muhteva ettiği bilgileri tek seferde yüklemek yerine her tıklanışta ajax isteği ile yüklüyor sayfaya. Düğümleri ekrana yazdırmak için de p:tree etiketi içinde p:treeNode etiketini kullanıyoruz arkadaşlar. Bu etiket de tıpkı DataTable’daki column gibi düğümleri otomatik olarak sayfaya dolduruyor.

İkinci bileşenimiz olan TreeTable da ise benim anladığım kadarı ile DataTable baz alınmış. Burada p:tree yerine p:treeTable etiketini kullanıyoruz ve aynı şekilde TreeNode tipindeki değişkeni value özelliğine atayıp var özelliğini kullanıyoruz. Etiket içinde ise p:treeNode yerine yine DataTable’a benzer şekilde kolonlar açıyoruz. Kolonlar düğümlerin muhteva ettiği birden fazla özelliği sütunlara bölmek için gerekli. Her bir kolon içinde düğümün ilgili özelliğini outputText ile yazdırıyoruz. Burada bir düğüm oluşturulurken tecnologyName ve technologyBirthDate özelliklerden olmakta. Az sonra Java kodumuzda inceleyeceğiz.

Son bileşenimiz de yatay tree bileşeni arkadaşlar. Yatay tree bileşeni elde etmek için tek yapmamız gereken p:tree’nin orientation özelliğine horizontal ataması yapmaktır.  Onun dışında componenet p:tree ile aynıdır.

TreeBean.java

p:tree ve horizontal tree’de kullandığımız TreeBean sınıfımız içinde öncelikle TreeNode tipinde bir rootNode değişkeni tanımlıyoruz. Akabinde @PostConstruct ile işaretlenmiş init metodu içinde rootNode değişkenini oluşturuyoruz. Oluşturma işlemi sırasında rootNode referans değişkeninin türü TreeNode olsa da oluşturulan objenin türü DefultTreeNode olur. DefaultTreeNode sınıfının yapılandırıcısı iki parametre alır. Birisi düğümün ekranda görünecek ismi diğeri üst düğümdür. rootNode kök düğüm olduğu için üst düğümü yoktur, bu nedenle ikinci parametreyi null veriyoruz. Öte yandan rootNode altında barınacak olan javaNode,dotNetNode ve pythonNode objelerini oluştururken de rootNode’u üst düğüm olarak veriyoruz.

Bu şekilde yeni düğümler oluşturarak ve üst düğümlerini belirterek kök düğümü hazır hale getiriyoruz.

TechnologyPojo.java

TreeTable için kullanacağımız POJO sınıfımız. TreeTable’daki kolonlara isim ve çıkış tarihini yazdıracağız.

TreeTableBean.java

TreeTableBean sınıfı içerisinde yine aynı şekilde rootNode’umuzu oluşturuyoruz ancak birinci parametreyi bu kez String olarak değil TechnologyPojo sınıfından bir nesne olarak veriyoruz. Kök düğümün adı Yazılım Teknolojileri olacak ve çıkış tarihi olmayacak.  Kök düğümün altında yer alacak olacak olan javaNode ise ekranda Java ismi ile görülecek ve çıkış tarihi 1995 olacak.

Bu mantık ile düğümleri oluşturuyoruz ve kök düğümü hazır edip XHTML tarafına bağlıyoruz.

Ekran Çıktıları

Proje çalıştığında bizi şöyle bir ekran görüntüsü karşılıyor.

Screen Shot 2016-01-23 at 18.00.02

Tree bileşeninin Java ve alt düğümü olan Java Web ile .NET düğümünün açılmış hali.

Screen Shot 2016-01-23 at 18.01.16

TreeTable bileşeninin Java ve Java Web için açılmış hali.

Screen Shot 2016-01-23 at 18.03.03

HorizontalTree’nin açılmış hali.

Screen Shot 2016-01-23 at 18.04.18

Bu yazımızda da bu kadar arkadaşlar. PrimeFaces’ın 3 bileşenini daha bu yazı ile öğrenmiş olduk. Böylece Data kategorisi altındaki bileşenleri bitirdik. Gelecek yazıda Panel kategorisine başlayacağız. Görüşene kadar sağlıcakla kalın.

Selam ve Sevgilerimle