Menampilkan Barchart dalam ZK

Hal yang paling dibutuhkan pada sebuah framework ajax adalah kemampuannya untuk menampilkan chart. Dalam ZK Framework hal ini dimungkinkan dengan menggunakan JFreechart. Pada contoh berikut saya mencoba membuat Barchart yang dihasilkan oleh JFreechart dan ditampilkan pada sebuah component Image dalam ZK.
Pada halaman .zul pastikan terdapat component Image sebagai tempat kita meletakan output chartnya.

<!--others component here-->
<img id="chartImg" alt="" />
<!--others component here-->

Selanjutnya kita gunakan JFreechart untuk menghasilkan barchart sesuai dataset yang kita inginkan

//others code..
 CategoryDataset dataset = CreateDateset.create();
 ChartFactory.setChartTheme(StandardChartTheme.createLegacyTheme());
            BarRenderer.setDefaultBarPainter(new StandardBarPainter());

            if (cmbProgdi.getSelectedItem().getValue() == null) {
                chart = ChartFactory.createBarChart(
                        "Jumlah Mahasiswa", // chart title
                        "Program Studi", // domain axis label
                        "Jumlah Mahasiswa", // range axis label
                        dataset, // data
                        PlotOrientation.HORIZONTAL,
                        true, // include legend
                        true,
                        false);
            } else {
                chart = ChartFactory.createBarChart(
                        "Jumlah Mahasiswa", // chart title
                        "Program Studi", // domain axis label
                        "Jumlah Mahasiswa", // range axis label
                        dataset, // data
                        PlotOrientation.VERTICAL,
                        true, // include legend
                        true,
                        false);
            }

            chart.setBackgroundPaint(new Color(0xCC, 0xFF, 0xCC));

            final CategoryPlot plot = chart.getCategoryPlot();
            plot.setDomainAxisLocation(AxisLocation.BOTTOM_OR_LEFT);
            plot.setRangeAxisLocation(AxisLocation.TOP_OR_LEFT);
            plot.getRangeAxis().setStandardTickUnits(NumberAxis.createIntegerTickUnits());

            //ngatur warna barchart
            final CategoryItemRenderer renderer1 = plot.getRenderer();
            for (int x = 0; x <= 34; x++) {
                renderer1.setSeriesPaint(x, new WarnaBarChart().getColor(x));
            }

            BarRenderer br = (BarRenderer) renderer1;
            br.setShadowVisible(false);

            BufferedImage bi = chart.createBufferedImage(900, 500, BufferedImage.TRANSLUCENT, null);
            if (cmbProgdi.getSelectedItem().getValue() == null) {
                bi = chart.createBufferedImage(900, 2000, BufferedImage.TRANSLUCENT, null);
            }

            byte[] bytes = EncoderUtil.encode(bi, ImageFormat.PNG, true);

            AImage image = new AImage("Bar Chart", bytes);
            chartImg.setContent(image);
//other code..

Pada baris terakhir code di atas kita mengirimkan output dalam bentuk image yang dihasilkan oleh Jfreechart ke dalam component Image yang ada pada halaman ZK.

 

Video Tutorial Java

Konfigurasi FCKEditor untuk ZK 3.6.2

Siapa yang gak tau FCKEditor? FCKEditor merupakan WYUSIWYG Editor untuk aplikasi web yang paling populer. FCKEditor juga mudah diintegrasikan dengan bahasa pemrograman web apa saja, mulai asp, jsp, php, .net dan lainnya. Secara khusus untuk ZK framework FCKEditor sudah terintegrasi dengan cukup apik 🙂

Walaupun demikian masih dibutuhkan konfigurasi tambahan agar fitur upload di FCKEditor dapat berjalan mulus dengan ZK Framework.

Berikut adalah langkah-langkah untuk konfigurasi fitur upload di ZK Framework 3.6.2

• Copy file distribusi FCKEditor pada root web aplikasi kita
• Tambahkan baris berikut ini pada web.xml

<servlet>
        <servlet-name>Connector</servlet-name>
        <servlet-class>
            org.zkforge.fckez.connector.ConnectorServlet
        </servlet-class>
        <init-param>
            <param-name>baseDir</param-name>
            <param-value>/UserFiles/</param-value>
        </init-param>
        <init-param>
            <param-name>debug</param-name>
            <param-value>false</param-value>
        </init-param>
        <load-on-startup>2</load-on-startup>
    </servlet>

    <servlet>
        <servlet-name>SimpleUploader</servlet-name>
        <servlet-class>
            org.zkforge.fckez.uploader.SimpleUploaderServlet
        </servlet-class>
        <init-param>
            <param-name>baseDir</param-name>
            <param-value>/UserFiles/</param-value>
        </init-param>
        <init-param>
            <param-name>debug</param-name>
            <param-value>false</param-value>
        </init-param>
        <init-param>
            <param-name>enabled</param-name>
            <param-value>true</param-value>
        </init-param>
        <init-param>
            <param-name>AllowedExtensionsFile</param-name>
            <param-value></param-value>
        </init-param>
        <init-param>
            <param-name>DeniedExtensionsFile</param-name>
            <param-value>
                php|php3|php5|phtml|asp|aspx|ascx|jsp|cfm|cfc|pl|bat|exe|dll|reg|cgi
            </param-value>
        </init-param>
        <init-param>
            <param-name>AllowedExtensionsImage</param-name>
            <param-value>jpg|gif|jpeg|png|bmp</param-value>
        </init-param>
        <init-param>
            <param-name>DeniedExtensionsImage</param-name>
            <param-value></param-value>
        </init-param>
        <init-param>
            <param-name>AllowedExtensionsFlash</param-name>
            <param-value>swf|fla</param-value>
        </init-param>
        <init-param>
            <param-name>DeniedExtensionsFlash</param-name>
            <param-value></param-value>
        </init-param>
        <load-on-startup>1</load-on-startup>
    </servlet>

    <servlet-mapping>
        <servlet-name>Connector</servlet-name>
        <url-pattern>/zkau/web/js/ext/FCKeditor/editor/filemanager/connectors/*</url-pattern>
    </servlet-mapping>
    <servlet-mapping>
        <servlet-name>SimpleUploader</servlet-name>
        <url-pattern>/zkau/web/js/ext/FCKeditor/editor/filemanager/upload/simpleuploader</url-pattern>
    </servlet-mapping>

• Tambahkan baris berikut pada file fckconfig.js

FCKConfig.LinkUploadURL = FCKConfig.BasePath + 'filemanager/upload/simpleuploader?Type=File';
FCKConfig.ImageUploadURL = FCKConfig.BasePath + 'filemanager/upload/simpleuploader?Type=Image';
FCKConfig.FlashUploadURL = FCKConfig.BasePath + 'filemanager/upload/simpleuploader?Type=Flash';

• Buatlah forlder UserFiles/File, UserFiles/Image dan UserFiles/Flash pada root direktori web aplikasi. Folder ini merupakan tempat menyimpan file-file yang diupload user.

Jika semua konfigurasi di atas benar, maka sekarang FCKEditor sudah dapat berjalan dengan sempurna lengkap dengan fitur upload gambar/flash atau file.

Semoga membantu 🙂