PrimeFaces

PrimeFaces-DataExporter Ve MindMap Bileşenleri

Merhabalar arkadaşlar. Bu yazımızda PrimeFaces’ın XLS,CVS,PDF ve XML türünde döküman elde etmemizi sağlayan DataExporter bileşeninin ve Türkçe’ye Zihin Haritası olarak çevirebileceğimiz animasyonlar ile kullanılabilen MindMap bileşeninin kullanımını öğreneceğiz.

DataExporter Bileşeni

PrimeFaces geliştiricileri bir DataTable üzerinde yer alan verileri dökümana dökmek üzere kullanılabilen bir bileşen hazırlamışlar ve bunu da bazı ekstra bağımlılıklar sayesinde sağlamışlar. Yani bu konuyu işlerken inceleyeceğimiz örnek sadece kodu yaz çalıştır şeklinde olmayacak ve bazı ekstra kütüphaneler kullanacağız.

PDF çıktısı elde etmek için projenize iText’in .jar dosyasını eklemeniz lazım. Buradan indirebilirsiniz. Verdiğim linkteki sürüm 2.1.7 sürümüdür ve iText’in güncel sürümü 5’dir fakat güncel sürümler bizim işimize yaramamaktadır. Bazı lisans sorunları nedeni ile PrimeFaces 2.1.7 sonrası sürümleri kütüphanesi ile uyumlu yapmamış.

Excel çıktısı elde etmek için ise Apache Poi kütüphaneleri projenize eklemeniz gerekiyor. Apache Poi Microsoft’un Office uygulamaları ile Java’nın birlikte kullanılmasını sağlayan bir kütüphanedir. Daha önce bir yazımda Apache Poi ile Word dosyası okumayı anlatmıştım. Aynı kütüphaneleri eklemeniz bu yazı içinde yeterli. O yazı şuradadır:http://kod5.org/java-docdocx-dosyasinin-icerigini-okuma/

Ayrıca aynı konu ile ilgili çektiğim bir video da şuradadır:https://youtu.be/gx9vUJc-dEw

Şimdi örnek uygulama üzerinden konumuza bakalım.

Xhtml kodumuz içerisinde bu döküman oluşturucuları f:facet etiketi’nin içinde tanımlıyoruz arkadaşlar. f:facet name=”{Exporters}” dediğimizde nasıl ki f:facet name=”header” dediğimizde kolon başlığı atıldığını anlıyordu burada da döküman oluşturucuların geldiğini anlıyor. Akabinde h:commandLink etiketinin içinde bir graphicImage etiketi ile ilgili tipteki dökümanın resmini koyuyoruz. Daha sonra bu yazımızın asıl konusu olan döküman oluşturma işlemini yapan p:dataExporter etiketini tanımlıyoruz. Bu etiketin type özelliği hangi tipte veri almak istediğimizi belirtiyor. Örneğin PDF dosyası almak için type=”pdf” dememiz lazım. target özelliği ise dökümana çevirelecek DataTable’ın id bilgisini verdiğimiz yer. Bu yazıyı yazarken öğrendiğim kadarı ile bu DataExport işlemi DataTable dışında kullanılamıyor. (Eğer bir yanlışlık ya da değişim olursa bu yazıyı güncelleyeceğim) fileName özelliği ile de dökümanın dışarıya hangi isimle aktarılacağını söylüyoruz.

Kodun geri kalanı daha önce öğrendiğimiz şeyler.

ParsingTheXML.java

Bu Java kodumuz içinde Merkez Bankası Döviz Kurları’nın bize kullanmak üzere sunduğu web servis’ten faydalanıyoruz ve XML Parsing yaparak bilgileri işliyoruz. Bu yazı içerisinde kodun anlatımını yapmayacağım yazının uzamaması için. Onun yerine XML Parsing konusunda bilgisi olmayanların şu videoyu izlemesini rica ederim: “link gelecek!!!”

CurrencyPOJO.java

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

Ekran Çıktısı

Kodu çalıştırdığımızda böyle bir görüntü alıyoruz. Örneğin ben şimdi PDF butonuna tıklayacağım.

Kodu çalıştırdığımızda böyle bir görüntü alıyoruz. Örneğin ben şimdi PDF butonuna tıklayacağım.

PDF dosyası oluşturulup indirildi. Şimdi içine bakalım.

PDF dosyası oluşturulup indirildi. Şimdi içine bakalım.

Gördüğünüz gibi DataTable'daki bilgiler PDF dosyasına yazılmış.

Gördüğünüz gibi DataTable’daki bilgiler PDF dosyasına yazılmış.

MindMap Bileşeni

MindMap’i Türkçeleştirmek istediğimizde onu bir not alma şekli olarak düşünebiliriz. Ana konu yani herşeyi kapsayan konu ortada olmak sureti alt dalları ana konuya bağlantılı şekilde etrafına dizilir.

Şimdi örnek uygulama ile MindMap’in kullanımına bakalım.

MindMapBean.java

MindMapBean kodumuza adım adım bakalım şimdi:

  • Sınıfımız içinde ana konuyu tutacak olan bir rootNode ve kullanıcının seçtiği konuyu tutacak olan bir selectedNode tanımlıyoruz.
  • Yapılandırıcı (constructor) içinde rootNode nesnesini oluşturuyoruz. rootNode’u oluştururkenDefaultMindmapNode sınıfının yapılandırıcısına 4 parametre geçiriyoruz. Birinci parametre ekranda gözükecek yazı. İkinci parametre ilgili node’un datası. Üçüncü parametre node’un arka plan rengi. Dördüncü parametre ise ilgili node’a tıklanma özelliği ile ilgili.  Akabinde javaNode ve dotNetNode adında iki node oluşturuyoruz. addNode metodu ile de oluşturduğumuz bu node’ları kök düğüm olan rootNode’a ekliyoruz.
  • onNodeSelect metodu ile üzerine tıklanabilme özelliği verilmiş node’un alt node’larını açabilme fonksiyonelliği ekliyoruz.  onNodeSelect metodu SelectEvent tipinde aldığı parametre sayesinde seçili node’u tespit etmeyi sağlıyor. Daha sonra seçili node’un alt node’larının olup olmadığını kontrol ediyoruz. Burada benim anladığım kadarı projeyi çalıştırıp sayfayı açtığımızda ilk düğümler boş geliyor. Bu nedenle bizim doldurmamız lazım. Boş gelen düğümün yazı kontrolünü yapıyoruz. Burada yazıdan kasıt node oluşturuken DefaultMindmapNode sınıfına verilen birinci parametre kastediliyor. Yazı eğer Java Web Teknolojileri olursa onla ilgili düğüm eklemeleri, .NET Teknolojileri olursa onla ilgili düğümler ekliyoruz.
  • Son olarak bir de double click ile seçme işlemi için bir metot yazıyoruz. Bu metot ile yine SelectEvent parametresi ile seçilen düğümü selectedNode değişkenine alıyoruz ve JSF sayfasında dialog penceresinde gösteriyoruz.

index.xhtml

Index sayfamız içerisinde p:mindmap etiketi ile MindMap bileşenimizi kullanıyoruz. Bu etiketin value özelliğine Java sınıfında oluşturduğumuz ana konuyu tutacak olan rootNode değişkenini aktarıyoruz.

MindMap bileşenimizin içinde 2 adet p:ajax tanımlaması görüyoruz. Birinci Ajax tetiklemesinde seçilme olayını gerçekleştiriyoruz. Bunun için event özelliğine select ataması ve listener özelliğine select işlemini yapacak metodu atamamız yeterli. İkinci Ajax tetiklemesinde double click olayını gerçekleştiriyoruz. Üzerine çift tıklanmış olan düğümün data bilgisi (ikinci parametre) oncomplete özelliğine atanmış olan dialog içinde gösterilecek. Burada Ajax tetiklemesi yaptığımız için her tetiklemede dialog içindeki outputText’in de güncellenmesi gerekir. Bu nedenle update özelliğine outputText’in id’si olan dataLabel’ı atıyoruz.

Ekran Çıktısı

Screen Shot 2016-01-18 at 20.38.31

Projemiz çalıştığında ana sayfamızda böyle bir çıktı görüyoruz. Şimdi Java Web Teknolojileri düğümüne tıklıyorum.

Screen Shot 2016-01-18 at 20.40.24

Java Web Teknolojilerine tıkladığımda ona ait alt düğümler ona bağlantılı olarak gösteriliyor. Ayrıca onun üst düğümü olan Web Teknolojileri de ona bağlı olarak sol üst köşede yerini alıyor. Tekrar Web Teknolojilerine tıklayarak ilk duruma dönebiliriz. İlk duruma dönüp .NET Teknolojilerine tıklıyayım.

Screen Shot 2016-01-18 at 20.43.59

O da başarılı bir şekilde çalıştı. Şimdi tekrar ilk duruma dönelim ve üzerine tıklama özelliği verdiğimiz bir düğüme çift tıklayalım.

Screen Shot 2016-01-18 at 20.45.21

O da başarılı bir şekilde çalışıyor.

Bu yazıda anlatacaklarım bu kadar arkadaşlar. PrimeFaces’ın DataExporter bileşeni ile DataTable’da yer alan bilgilerimizi bir dosyaya çıktı almayı ve MindMap bileşenimizin kullanımı öğrenmiş olduk. Gelecek yazıda görüşmek üzere sağlıcakla kalın.

Selam ve Sevgilerimle