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:https://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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 |
<!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:ui="http://java.sun.com/jsf/facelets" xmlns:f="http://java.sun.com/jsf/core" xmlns:h="http://java.sun.com/jsf/html" xmlns:p="http://primefaces.org/ui"> <h:head> <title>DataExporter Bileşeni</title> </h:head> <h:body> <h:form> <p:dataTable id="table" value="#{parsingTheXML.currencies}" var="element" paginator="true" rows="20" paginatorTemplate="{CurrentPageReport} {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {Exporters}"> <f:facet name="{Exporters}"> <h:commandLink> <p:graphicImage library="images" name="xls.png" width="24"/> <p:dataExporter type="xls" target="table" fileName="dövizKurları" /> </h:commandLink> <h:commandLink> <p:graphicImage library="images" name="pdf.jpg" width="24"/> <p:dataExporter type="pdf" target="table" fileName="dövizKurları"/> </h:commandLink> <h:commandLink> <p:graphicImage library="images" name="csv.png" width="24"/> <p:dataExporter type="csv" target="table" fileName="dövizKurları" /> </h:commandLink> <h:commandLink> <p:graphicImage library="images" name="xml.png" width="24"/> <p:dataExporter type="xml" target="table" fileName="dövizKurları" /> </h:commandLink> </f:facet> <p:column> <f:facet name="header"> İsim </f:facet> <h:outputText value="#{element.isim}"/> </p:column> <p:column> <f:facet name="header"> Unit </f:facet> <h:outputText value="#{element.unit}"></h:outputText> </p:column> <p:column> <f:facet name="header"> ForexBuying </f:facet> <h:outputText value="#{element.forexBuying}"></h:outputText> </p:column> <p:column> <f:facet name="header"> ForexSelling </f:facet> <h:outputText value="#{element.forexSelling}"></h:outputText> </p:column> <p:column> <f:facet name="header"> BanknoteBuying </f:facet> <h:outputText value="#{element.banknoteBuying}"></h:outputText> </p:column> <p:column> <f:facet name="header"> BanknoteSelling </f:facet> <h:outputText value="#{element.banknoteSelling}"></h:outputText> </p:column> </p:dataTable> </h:form> </h:body> </html> |
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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 |
package dataExporter; import java.net.URL; import java.util.ArrayList; import java.util.List; import javax.faces.bean.ManagedBean; import javax.faces.bean.SessionScoped; import javax.xml.parsers.DocumentBuilder; import javax.xml.parsers.DocumentBuilderFactory; import org.w3c.dom.Document; import org.w3c.dom.Element; import org.w3c.dom.NodeList; @ManagedBean @SessionScoped public class ParsingTheXML { public List<CurrencyPOJO> getCurrencies() { List<CurrencyPOJO> currencyPOJOList=new ArrayList<CurrencyPOJO>(); try { DocumentBuilder builder = DocumentBuilderFactory.newInstance().newDocumentBuilder(); URL xmlUrl=new URL("http://www.tcmb.gov.tr/kurlar/today.xml"); Document document = builder.parse(xmlUrl.openStream()); NodeList nodes=document.getElementsByTagName("Currency"); for (int i = 0; i < nodes.getLength(); i++) { CurrencyPOJO currencyPOJO=new CurrencyPOJO(); Element element = (Element) nodes.item(i); currencyPOJO.setCurrencyCode(element.getAttribute("CurrencyCode")); currencyPOJO.setKod(element.getAttribute("Kod")); currencyPOJO.setUnit(Float.parseFloat(element.getElementsByTagName("Unit").item(0).getTextContent())); currencyPOJO.setIsim(element.getElementsByTagName("Isim").item(0).getTextContent()); currencyPOJO.setForexBuying(Float.parseFloat(element.getElementsByTagName("ForexBuying").item(0).getTextContent())); currencyPOJO.setForexSelling(Float.parseFloat(element.getElementsByTagName("ForexSelling").item(0).getTextContent())); currencyPOJO.setForexBuying(Float.parseFloat(element.getElementsByTagName("ForexBuying").item(0).getTextContent())); currencyPOJO.setForexBuying(Float.parseFloat(element.getElementsByTagName("BanknoteBuying").item(0).getTextContent())); currencyPOJO.setForexBuying(Float.parseFloat(element.getElementsByTagName("BanknoteSelling").item(0).getTextContent())); currencyPOJOList.add(currencyPOJO); } } catch (Exception e) { System.err.println("Hata Meydana Gelmiştir!!!\n"); } return currencyPOJOList; } } |
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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 |
package dataExporter; public class CurrencyPOJO { private static final long serialVersionUID = 1L; private String kod; private String currencyCode; private String isim; private String currencyName; private float unit; private float forexBuying; private float forexSelling; private float banknoteBuying; private float banknoteSelling; private float crossrateUSD; private float crossrateOther; private float crossrateEURO; public float getBanknoteBuying() { return banknoteBuying; } public void setBanknoteBuying(float banknoteBuying) { this.banknoteBuying = banknoteBuying; } public float getBanknoteSelling() { return banknoteSelling; } public void setBanknoteSelling(float banknoteSelling) { this.banknoteSelling = banknoteSelling; } public float getCrossrateEURO() { return crossrateEURO; } public void setCrossrateEURO(float crossrateEURO) { this.crossrateEURO = crossrateEURO; } public float getCrossrateOther() { return crossrateOther; } public void setCrossrateOther(float crossrateOther) { this.crossrateOther = crossrateOther; } public float getCrossrateUSD() { return crossrateUSD; } public void setCrossrateUSD(float crossrateUSD) { this.crossrateUSD = crossrateUSD; } public String getCurrencyCode() { return currencyCode; } public void setCurrencyCode(String currencyCode) { this.currencyCode = currencyCode; } public String getCurrencyName() { return currencyName; } public void setCurrencyName(String currencyName) { this.currencyName = currencyName; } public float getForexBuying() { return forexBuying; } public void setForexBuying(float forexBuying) { this.forexBuying = forexBuying; } public float getForexSelling() { return forexSelling; } public void setForexSelling(float forexSelling) { this.forexSelling = forexSelling; } public String getIsim() { return isim; } public void setIsim(String isim) { this.isim = isim; } public String getKod() { return kod; } public void setKod(String kod) { this.kod = kod; } public float getUnit() { return unit; } public void setUnit(float unit) { this.unit = unit; } } |
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.
PDF dosyası oluşturulup indirildi. Şimdi içine bakalım.
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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 |
package primefacesmindmap; import javax.faces.bean.ManagedBean; import javax.faces.bean.SessionScoped; import org.primefaces.event.SelectEvent; import org.primefaces.model.mindmap.DefaultMindmapNode; import org.primefaces.model.mindmap.MindmapNode; @ManagedBean @SessionScoped public class MindMapBean { private MindmapNode rootNode; private MindmapNode selectedNode; public MindMapBean() { rootNode = new DefaultMindmapNode("Web Teknolojileri","Web Teknolojileri","FFCC00",false); MindmapNode javaNode = new DefaultMindmapNode("Java Web Teknolojileri","Java Web Teknolojileri","6e9ebf",true); MindmapNode dotNetNode = new DefaultMindmapNode(".NET Teknolojileri",".NET Teknolojileri","6e9ebf",true); rootNode.addNode(javaNode); rootNode.addNode(dotNetNode); } public MindmapNode getRootNode() { return rootNode; } public MindmapNode getSelectedNode() { return selectedNode; } public void setSelectedNode(MindmapNode selectedNode) { this.selectedNode = selectedNode; } public void onNodeSelect(SelectEvent event) { MindmapNode node =(MindmapNode) event.getObject(); if(node.getChildren().isEmpty()) { Object label = node.getLabel(); if(label.equals("Java Web Teknolojileri")) { node.addNode(new DefaultMindmapNode("Servlets","Servlets","FFCC00",false)); node.addNode(new DefaultMindmapNode("JSP","Java Server Pages","FFCC00",false)); node.addNode(new DefaultMindmapNode("JSF","Java Server Faces","FFCC00",false)); node.addNode(new DefaultMindmapNode("Spring MVC","Spring Web MVC","FFCC00",false)); } else if(label.equals(".NET Teknolojileri")) { node.addNode(new DefaultMindmapNode("ASP","ASP","FFCC00",false)); node.addNode(new DefaultMindmapNode("ASP.NET","ASP.NET","FFCC00",false)); node.addNode(new DefaultMindmapNode("ASP.NET MVC","ASP.NET MVC","FFCC00",false)); } } } public void onNodeDblSelect(SelectEvent event) { this.selectedNode = (MindmapNode) event.getObject(); } } |
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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<!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://java.sun.com/jsf/html" xmlns:p="http://primefaces.org/ui"> <h:head></h:head> <h:body> <h:form> <p:mindmap value="#{mindMapBean.rootNode}" style="width: 100%;height: 600px;border: 1px solid black;"> <p:ajax event="select" listener="#{mindMapBean.onNodeSelect}" /> <p:ajax event="dblselect" listener="#{mindMapBean.onNodeDblSelect}" update="dataLabel" oncomplete="PF('dataDialog').show()"/> </p:mindmap> <p:dialog widgetVar="dataDialog" header="Düğüm Detayı" resizable="false" modal="true" hideEffect="fade" showEffect="fade"> <h:outputText id="dataLabel" value="#{mindMapBean.selectedNode.data}" /> </p:dialog> </h:form> </h:body> </html> |
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ı
Projemiz çalıştığında ana sayfamızda böyle bir çıktı görüyoruz. Şimdi Java Web Teknolojileri düğümüne tıklıyorum.
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.
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.
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
