PrimeFaces – Tree&TreeTable&HorizontalTree

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

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://xmlns.jcp.org/jsf/html"
      xmlns:p="http://primefaces.org/ui">
<h:head>
   <title>Tree,TreeTable,HorizontalTree</title>
</h:head>
<h:body>
   <h:form>
      <h2>Tree Bileşeninin Uygulaması</h2>
      <p:tree value="#{treeBean.rootNode}" var="node" dynamic="true">
         <p:treeNode>
            <h:outputText value="#{node}"/>
         </p:treeNode>
      </p:tree>

      <h2>TreeTable Bileşeninin Uygulaması</h2>
      <p:treeTable value="#{treeTableBean.rootNode}" var="node">
         <p:column headerText="Teknoloji Adı">
            <h:outputText value="#{node.technologyName}"/>
         </p:column>
         <p:column headerText="Doğum Tarihi">
            <h:outputText value="#{node.technologyBirthDate}"/>
         </p:column>
      </p:treeTable>

      <h2>HorizontalTree Bileşeninin Kullanımı</h2>
      <p:tree value="#{treeBean.rootNode}" var="node" dynamic="true" orientation="horizontal">
         <p:treeNode>
            <h:outputText value="#{node}"/>
         </p:treeNode>
      </p:tree>
   </h:form>
</h:body>
</html>

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

package tree;

import org.primefaces.model.DefaultTreeNode;
import org.primefaces.model.TreeNode;

import javax.annotation.PostConstruct;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;

@ManagedBean
@SessionScoped
public class TreeBean {
    private TreeNode rootNode;

    @PostConstruct
    public void init()
    {
        rootNode = new DefaultTreeNode("Programlama Dilleri",null);

        TreeNode javaNode = new DefaultTreeNode("Java",rootNode);
        TreeNode dotNetNode = new DefaultTreeNode(".NET",rootNode);
        TreeNode pythonNode = new DefaultTreeNode("Python",rootNode);

        TreeNode javaWebNode = new DefaultTreeNode("Java Web",javaNode);
        TreeNode javaGuiNode = new DefaultTreeNode("Java Gui",javaNode);

        TreeNode servletNode = new DefaultTreeNode("Servlet",javaWebNode);
        TreeNode jspNode = new DefaultTreeNode("JSP",javaWebNode);
        TreeNode jsfNode = new DefaultTreeNode("JSF",javaWebNode);

        TreeNode swingNode = new DefaultTreeNode("Swing",javaGuiNode);
        TreeNode javaFXNode = new DefaultTreeNode("Java FX",javaGuiNode);

        TreeNode charpNode = new DefaultTreeNode("C#",dotNetNode);
        TreeNode aspDotNetNode = new DefaultTreeNode("ASP.NET",dotNetNode);
        TreeNode aspDotNetMVCNode = new DefaultTreeNode("ASP.NET MVC",dotNetNode);
    }

    public TreeNode getRootNode() {
        return rootNode;
    }
}

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

package treeTable;

public class TechnologyPojo {
    public TechnologyPojo(String technologyName, String technologyBirthDate)
    {
        this.technologyName = technologyName;
        this.technologyBirthDate = technologyBirthDate;
    }
    String technologyName;
    String technologyBirthDate;

    public String getTechnologyBirthDate() {
        return technologyBirthDate;
    }

    public void setTechnologyBirthDate(String technologyBirthDate) {
        this.technologyBirthDate = technologyBirthDate;
    }

    public String getTechnologyName() {
        return technologyName;
    }

    public void setTechnologyName(String technologyName) {
        this.technologyName = technologyName;
    }
}

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

TreeTableBean.java

package treeTable;

import org.primefaces.model.DefaultTreeNode;
import org.primefaces.model.TreeNode;

import javax.annotation.PostConstruct;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;

@ManagedBean
@SessionScoped
public class TreeTableBean {
    private TreeNode rootNode;

    @PostConstruct
    public void init()
    {
        rootNode = new DefaultTreeNode(new TechnologyPojo("Yazılım Teknolojileri",""),null);

        TreeNode javaNode = new DefaultTreeNode(new TechnologyPojo("Java","1995"),rootNode);
        TreeNode dotNetNode = new DefaultTreeNode(new TechnologyPojo(".NET","2002"),rootNode);
        TreeNode pythonNode = new DefaultTreeNode(new TechnologyPojo("Python","1991"),rootNode);

        TreeNode javaWebNode = new DefaultTreeNode(new TechnologyPojo("Java Web","1999"),javaNode);
        TreeNode javaGuiNode = new DefaultTreeNode(new TechnologyPojo("Java GUI","1996"),javaNode);

        TreeNode servletNode = new DefaultTreeNode(new TechnologyPojo("Servlet","1997"),javaWebNode);
        TreeNode jspNode = new DefaultTreeNode(new TechnologyPojo("JSP","2000"),javaWebNode);
        TreeNode jsfNode = new DefaultTreeNode(new TechnologyPojo("JSF","2006"),javaWebNode);

        TreeNode swingNode = new DefaultTreeNode(new TechnologyPojo("Swing","1996"),javaGuiNode);
        TreeNode javaFXNode = new DefaultTreeNode(new TechnologyPojo("Java FX","2008"),javaGuiNode);

        TreeNode charpNode = new DefaultTreeNode(new TechnologyPojo("C#","2000"),dotNetNode);
        TreeNode aspDotNetNode = new DefaultTreeNode(new TechnologyPojo("ASP:NET","2002"),dotNetNode);
        TreeNode aspDotNetMVCNode = new DefaultTreeNode(new TechnologyPojo("ASP.NET MVC","2009"),dotNetNode);

    }

    public TreeNode getRootNode() {
        return rootNode;
    }
}

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.

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

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

HorizontalTree’nin açılmış hali.

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

Benzer Yazılar

Yorum Yap X