FusionCharts ve JSF « Kamil ÖRS

Şubat

Raporlamalar, programların olmazsa olmaz bileşenlerindendir. Veri satırlarını en iyi şekilde analiz edip kullanıcılara sunduğumuzda sayılardan ve etiketlerden oluşan bir tablonun ilk bakışta algılanabilmesi gerçekten zordur. İktisatta, verilerin analizi için bazı grafikler (cizgisel, pasta vs.) üretilmiştir. Bu sayede analizciler sunum yapar iken grafikleri insanlara çok daha rahat anlatabilmektedir. Bundan yola çıkarak programlarda da veri grafikleri ile kullanıcılara rapor vermek standart bir hal almıştır diyebiliriz. Bilgisayar dilince bu tür araçlara charting library denmekte.

Java ve diğer diller için oldukça gelişmiş bir çok charting kütüphanesi bulunmakta. Bunların bir çoğu jfreechart kütüphanesi gibi ücretsiz. Raporlamalarda kullanacağımız pasta, cizgisel vs. grafikleri şık , animasyonlu ve kullanıcı ile iletişim halinde sunabilmemize olanak sağlayan FusionCharts , flash kullanılarak yapılmış. FusionCharts’ı web uygulaması geliştirilebilinen her programlama dilinde kullanabiliriz. Çünkü javascript , flash ve xml kullanılarak grafikler üretiliyor.

FusionCharts’ı, jsf ile birlikte kullanabilmek için kendimiz özel bir jsf tag library yazmamız gerekiyor. İnternette ufak bir araştırmadan sonra birilerin bu işi bizim için jsf 1.2 uyumlu olarak yapmış olduğu gördüm. Jsf 1.2 ile birlikte kısa bir test sürecinden geçirdim ve sonuç harika bir şekilde çalışıyor

FusionCharts’ı , JSF’e adapte etmek için öncelikle şuradan fusionchart için yazılmış olan jsf tag library bilgisayarınıza indirin. Daha sonra indirdiğiniz bu kütüphaneyi projenize kütüphane olarak ekleyin. Bu işlemi de tamamladıktan sonra sıra web.xml dosyamızda küçük bir tanımlama ile fusioncharts taglarını projemize tanımlıyoruz. aşağıdaki tagları <web-app></wep-app> arasına ekleyin.

    <context-param>
        <param-name>facelets.LIBRARIES</param-name>
        <param-value> /WEB-INF/lib/fusioncharts.taglib.xml </param-value>
    </context-param>

Bu kodu ekledikten sonra sayfalarımızda artık fusioncharts ile ilgili jsf taglarını kullanabiliriz.

Sayfalarımızda kullanabilmek için fusioncharts ile ilgili tablib prefix’ini sayfaya eklemeliyiz.

1	<%@taglib prefix="fc" uri="http://www.fusioncharts.com" %>

Ayrıca prefix eklediğiniz gibi FusionCharts’a ait javascript dosyasınıda projenize dahil etmelisiniz.

1	<script type="text/javascript" src="FusionChart/FusionCharts.js"></script>

Burada küçük bir ayrıntı var. FusionCharts dan indirdiğiniz swf dosyaları ve javascript dosyasını jsf sayfalarınızın bulunduğu dizinde bir klasör altına eklemelisiniz. Ben FusionChart diye bir klasör açarak gerekli dosyaları oraya attım.

Küçük bir örnek yapmak gerekirse:

jsf sayfamız:

<%@page contentType="text/html" pageEncoding="UTF-8"%>
 
<%@taglib prefix="f" uri="http://java.sun.com/jsf/core"%>
<%@taglib prefix="h" uri="http://java.sun.com/jsf/html"%>
<%@taglib prefix="fc" uri="http://www.fusioncharts.com" %>
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">
 
<%--
    This file is an entry point for JavaServer Faces application.
--%>
<f:view>
    <html>
        <head>
            <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
            <title>JSP Page</title>
            <script type="text/javascript" src="FusionChart/FusionCharts.js"></script>
        </head>
        <body>
            <h1><h:outputText value="JavaServer Faces"/></h1>
            <fc:render filename="FusionChart/Bar2D.swf" height="600" width="800" xml="#{demo.data}" chartId="mychart" debugMode="true" />
        </body>
    </html>
</f:view>

Sonrasında burada kullandığımız demo bean sınıfının data değişkeni tanımlayalım.

public class Demo {
 
    /** Creates a new instance of Demo */
    public Demo() {
    }
 
    private String data = "<chart caption='Monthly Unit Sales' xAxisName='Month' yAxisName='Units' showValues='0'"+
            " decimals='0' formatNumberScale='0' chartRightMargin='30'>"+
        "<set label='Jan' value='462' />"+
        "<set label='Feb' value='857' />"+
        "<set label='Mar' value='671' />"+
        "<set label='Apr' value='494' />"+
        "<set label='May' value='761' />"+
        "<set label='Jun' value='960' />"+
        "<set label='Jul' value='629' />"+
        "<set label='Aug' value='622' />"+
        "<set label='Sep' value='376' />"+
        "<set label='Oct' value='494' />"+
        "<set label='Nov' value='761' />"+
        "<set label='Dec' value='960' />"+
        "</chart>";
 
    public String getData() {
        return data;
    }
 
    public void setData(String data) {
        this.data = data;
    }
 
 
}

Sonuç olarak ekran görüntüsü

Sonuç olarak gerçekten şık ve kullanıcı ile iyi bir şekilde etkileşimli olan grafiksel raporlar sunabilirsiniz. FusionCharts ücretli olmasına karşın, birde ücretsiz sürümü var. Projelerinizde rahatlıkla kullanabilirsiniz.

Yazar: Kamil | 26 Şubat 2010 @ 13:38 | Genel, Java, Jsf | Yorum Yok »

Yorum yapın

Yorum yapabilmek için giriş yapmalısınız.

Programlama ve hayata dair yazılar yazdığım bloguma hoş geldiniz. Adım Kamil. 23 yaşındayım. Yazılım geliştiricisiyim. Selçuk Üni. Bilgisayar Programcılığı bölümünden mezunum. Açık Öğretim İktisat Fakultesi 3. sınıf öğrencisiyim. Profesyonel hayatımda java ve php tabanlı yazılımlar geliştirmekteyim. Antalya'da bir turizm firmasında yazılım geliştirme uzmanı olarak çalışmaktayım.

Ara

Kategoriler & Arşiv

Android

Apache

CodeIgniter

Genel

Hibernate

Java

Java 2D

JavaFx

Jboss AS

JEE