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 🙂

Monitoring: My Second Project Implementing ZK

Monitoring adalah aplikasi web base sederhana yang digunakan oleh pemerintah daerah untuk mendata perusahaan-perusahaan yang ada di daerahnya. Aplikasi ini dibuat dengan ajax framework ZK sehigga walaupun berupa aplikasi web tetapi pengalaman user akan terasa seperti mengakses aplikasi Desktop..

Integrasi ZK dengan Jasperreport juga sangat baik, pada gambar 2 terlihat bgm ditampilkan output (pdf) dari reporting yang dihasilkan oleh Jasperreport.

jQuery4j

Udah biasa pake jQuery kan?? nah kalo jQuery khusus untuk java udah pada coba blom?? ini nih layak di coba!! cekitdot!!

Sebulan review GWT

smartgwtSudah hampir sebulan memperdalam GWT, udah ada beberapa library GWT yang aku riview dan semuanya cukup menarik dan sudah memenuhi kebutuhan. Teringat dulu padahal awalnya aku kurang tertarik dengan GWT waktu itu lebih suka main JSF hehehehe…

GWT adalah framework untuk Ajax base on Java. Bagi mereka yang udah terbiasa dengan pemrograman Swing dijamin belajar GWT logikanya gak jauh-jauh.. kita coding seperti membuat aplikasi swing trus nanti kita compile pake compiler GWT untuk menghasilkan Ajaxnya.

Baru-baru ini jalan-jalan ke http://www.theserverside.com dan aku menemukan library GWT yang lain namanya SmartGWT. Kalo diliat dari fitur yang ditawarkan cukup menarik khususnya integrasinya dengan Hibernate. Sebenarnya masih banyak kemampuannya yang lain tapi belum sempat dicoba hehehhee..

Yang pengen liat demonya bisa di http://www.smartclient.com/smartgwtee/showcase

Pengenalan Swing Framework dan Beans Binding bag.2

Akhirnya tulisan ini bisa dilanjutin lagi.. sory karena baru ada waktu lowong. Pada tulisan sebelumnya kita sudah sampai pada pembuatan class-class DAO yang dibutuhkan aplikasi. Nah sekarang kita buatkan user interfacenya.

Buatlah sebuah class baru dalam hal ini JDialog Form beri nama ProductDialog dengan package productsrecord, dan desainlah tampilannya seperti gambar berikut.

Perhatikan dalam form(JDialog) kita menggunakan tabpane untuk Daftar Kategori dan Daftar Barang. Pada gambar di atas adalah tampilan tab untuk Daftar Kategori dan Gambar berikut adalah tampilan untuk tab daftar barang.

form2

Berilah nama masing-masing component swing tersebut sesusai keinginan anda. Misalnya tabel untuk Category saya beri nama categoryTable dan tabel untuk product saya beri nama productTable. Demikian juga untuk textfield-textfield yang ada. Kecuali untuk tombol nanti kita beri nama kemudian.

Baik selanjutnya kita akan membuat sebuah class tambahan/pembantu yang berfungsi sebagai perantara antara user interface dengan class-class DAO sebelumnya. Buatlah sebua class dengan nama Service dan simpan dengan package productsrecord. Berikut isi dari class Service tersebut:


public class Service {
private EntityManager em;
private ProductDAO pDao;
private CategoryDAO cDao;
public Service(EntityManager em){
setEm(em);
}
private void setEm(EntityManager em) {
this.em = em;
this.pDao = new ProductDAO(this.em);
this.cDao = new CategoryDAO(this.em);
}
public void refresh(Object ebj){
this.em.getTransaction().begin();
this.em.refresh(ebj);
this.em.getTransaction().commit();
}
public void save(Product product){
this.em.getTransaction().begin();
pDao.save(product);
this.em.getTransaction().commit();
}
public void save(Category cat){
this.em.getTransaction().begin();
cDao.save(cat);
this.em.getTransaction().commit();
}
public void delete(Product product){
this.em.getTransaction().begin();
pDao.delete(product);
this.em.getTransaction().commit();
}
public void delete(Category cat){
this.em.getTransaction().begin();
cDao.delete(cat);
this.em.getTransaction().commit();
}
public Product getProduct(long id){
return pDao.getProduct(id);
}
public Category getCategory(long id){
return cDao.getCategory(id);
}
public List&amp;amp;amp;amp;amp;amp;amp;amp;lt;Product&amp;amp;amp;amp;amp;amp;amp;amp;gt; getProducts(){
return pDao.getProducts();
}
public List&amp;amp;amp;amp;amp;amp;amp;amp;lt;Category&amp;amp;amp;amp;amp;amp;amp;amp;gt; getCategories(){
return cDao.getCategories();
}
}

Selanjutnya bukalah class ProductRecordApp dan tambahkan 2 property berikut ini


public class ProdukApp extends SingleFrameApplication {

private static Service service;
private static EntityManager em;

//..... code yang lain

}

Kemudian masih di class ProductRecordApp, ubahlah method startup menjadi


@Override protected void startup() {
em = Persistence.createEntityManagerFactory("ProductsRecordPU").createEntityManager();
service = new Service(em);
show(new ProdukView(this));
}

Berikutnya buatkan method seter untuk menakses property service tersebut


public static Service getService() {
return service;
}

Ok selanjutnya kita akan melakukan binding data ke form yang sudah kita buat sebelumnya. Buatlah QueryResult seperti gambar dibawah ini

list1maka akan tercipta list1 pada bagian Other Components. Klik kanan pada list1 dan pilih Properties, maka akan ditampilkan window properties untuk list1. Selanjutnya lakukan langkah-langkah berikut:

Aktifkan centangan pada observable

Pindah ke tab Code, dan ubah Variable Name menjadi categoryList dan Type Parametersnya menjadi <Category>

Masih di tab Code, pada Custome Creation Code tambahkan code berikut


ObservableCollections.observableList(ProductRecordApp.getService().getCategories())

Dan pada Pre-Creation Code tambahkan code berikut


categoryList = new ArrayList&amp;amp;amp;amp;amp;amp;amp;amp;lt;Category&amp;amp;amp;amp;amp;amp;amp;amp;gt;();

Selanjutnya kita akan mem-bind tabel Category ke categoryList yang baru dibuat. Pada form Klik kanan categoryTable dan pilih Bind>elements

bind1Selanjutnya akan ditampilkan Bind Properties Window. Lakukan perubahan sesuai yang ditampilkan pada gambar berikut, kemudian tekan tombol OK

bindprop1

Selanjutnya kita akan melakukan binding juga untuk textfield Nama dan Keterangan pada Category. Klik kanan pada textfield Nama dan pilih Bind>text. Maka akan ditampilkan bind properties window. Lakukan perubahan seperti pada gambar berikut:

bindtxtnama

Lakukan hal yang sama untuk textfield Keterangan. Yang berbeda hanyalah binding Expressionnya menjadi ${selectedElement.description}

Pindah pada mode Source dan tambahkan method berikut ini


public class ProductDialog extends javax.swing.JDialog {

//code program lainnya

private boolean isNew;
private boolean isNewProduct;
private void updateCategories(){
List&amp;amp;amp;amp;amp;amp;lt;Category&amp;amp;amp;amp;amp;amp;gt; data = ProductsRecordApp.getService().getCategories();
for (Object object : data) {
ProductsRecordApp.getService().refresh(object);
}
categoryList.clear();
categoryList.addAll(data);
}

//code program lainnya

Selanjutnya kembali lagi ke mode Design dan klik kanan pada jButton1 kemudian pilih Set Action.. maka akan ditampilkan Window Set Action dan lakukan perubahan sesuai dengan gambar berikut.

binddelete1

Setelah kita menekan tombol OK maka secara otomatis Netbeans akan menciptakan sebuah action method sesuai dengan nama yang kita berikan. Ubahlah method deleteCategory sesuai kode berikut ini

&amp;amp;amp;amp;amp;lt;/p&amp;amp;amp;amp;amp;gt;

&amp;amp;amp;amp;amp;lt;p style="text-align: left;"&amp;amp;amp;amp;amp;gt;@Action
public void deleteCategory() {
if(!isNew){
int[] selected = categoryTable.getSelectedRows();
List&amp;amp;amp;amp;amp;amp;lt;Category&amp;amp;amp;amp;amp;amp;gt; toRemove = new ArrayList&amp;amp;amp;amp;amp;amp;lt;Category&amp;amp;amp;amp;amp;amp;gt;(selected.length);
for (int x = 0; x &amp;amp;amp;amp;amp;amp;lt; selected.length; x++) {
Category cat = categoryList.get(categoryTable.convertRowIndexToModel(selected[x]));
toRemove.add(cat);
ProductsRecordApp.getService().delete(cat);
}
categoryList.removeAll(toRemove);
}else{
Category cat = categoryList.get(categoryTable.convertRowIndexToModel(categoryList.size()-1));
categoryList.remove(cat);
ProductsRecordApp.getService().delete(cat);
}
categoryTable.getSelectionModel().clearSelection();
txtCategoryName.setText("");
txtCategoryDesc.setText("");
refreshCategoryButton.setEnabled(true);
insertCategoryButton.setEnabled(true);
isNew = false;
}
&amp;amp;amp;amp;amp;lt;p style="text-align: left;"&amp;amp;amp;amp;amp;gt;

Selanjutnya ganti nama masing-masing jButton1 menjadi deleteCategoryButton, dan jButton2 menjadi saveCategoryButton, jButton3 menjadi  insertCategoryButton dan jButton4 menjadi refreshCategoryButton.

Selanjutnya kita tambahkan action untuk saveCategoryButton. Klik kanan pada saveCategoryButton, pilih Set Action dan sesuaikan seperti gambar berikut.

bindsave1

Kemudian ubahlah method saveCategory seperti berikut ini

&amp;amp;amp;amp;amp;lt;/p&amp;amp;amp;amp;amp;gt;

&amp;amp;amp;amp;amp;lt;p style="text-align: left;"&amp;amp;amp;amp;amp;gt;@Action
public void saveCategory() {
Integer selectedRow = categoryTable.getSelectedRow();
if (selectedRow &amp;amp;amp;amp;amp;amp;gt;= 0) {
Category cat = categoryList.get(selectedRow);
cat.setName(txtCategoryName.getText());
cat.setDescription(txtCategoryDesc.getText());
ProductsRecordApp.getService().save(cat);
updateCategories();
categoryTable.getSelectionModel().clearSelection();
txtCategoryName.setText("");
txtCategoryDesc.setText("");
if(isNew){
if(JOptionPane.showConfirmDialog(this, "Data Tersimpan\nTambah data lagi?","Konfirmation",JOptionPane.YES_NO_OPTION)==0){
insertCategory();
}else{
isNew = false;
refreshCategoryButton.setEnabled(true);
insertCategoryButton.setEnabled(true);
}
}
}
}
&amp;amp;amp;amp;amp;lt;p style="text-align: left;"&amp;amp;amp;amp;amp;gt;

Berikutnya kita tambakan Action untuk tombol insertCategoryButton. Klik kanan pada tombol insertCategoryButton, pilih Set Action.. dan ubahlah propertinya seperti pada gambar berikut

bindinsert1

Kemudian ubahlah method insertCategory menjadi seperti berikut

&amp;amp;amp;amp;amp;lt;/p&amp;amp;amp;amp;amp;gt;

&amp;amp;amp;amp;amp;lt;p style="text-align: left;"&amp;amp;amp;amp;amp;gt;@Action
public void insertCategory() {
isNew = true;
Category newCategory = new Category();
newCategory.setName("");
newCategory.setDescription("");
ProductsRecordApp.getService().save(newCategory);
updateCategories();
int selectedRow = categoryList.size()-1;
categoryTable.getSelectionModel().setSelectionInterval(selectedRow, selectedRow);
refreshCategoryButton.setEnabled(false);
insertCategoryButton.setEnabled(false);
txtCategoryName.requestFocus();
}
&amp;amp;amp;amp;amp;lt;p style="text-align: left;"&amp;amp;amp;amp;amp;gt;

Dan yang berikutnya kita akan menambahkan Action untuk tombol refreshCategoryButton. Klik kanan pada tombol tersebut, pilih Set Action dan ubahlah sesuai gambar berikut

bindrefresh1

Selanjutnya ubahlah method refreshCategory menjadi sebagai berikut

&amp;amp;amp;amp;amp;lt;/p&amp;amp;amp;amp;amp;gt;

&amp;amp;amp;amp;amp;lt;p style="text-align: left;"&amp;amp;amp;amp;amp;gt;@Action
public void refreshCategory() {
updateCategories();
categoryTable.getSelectionModel().clearSelection();
txtCategoryName.setText("");
txtCategoryDesc.setText("");
}
&amp;amp;amp;amp;amp;lt;p style="text-align: left;"&amp;amp;amp;amp;amp;gt;

Ok sampai disini kita sudah menyelesaikan semua fungsi untuk Category. Agar bisa dijalankan, kita harus membuat menu pada frame utama yang akan memanggil frame ProductDialog. Bukalah class ProductRecordView. Pada mode design, tambahkan menu untuk File seperti pada gambar berikut

addmenu

Ubahlah text untuk menu tersebut menjadi Products kemudian klik kanan pada menu Products tersebut dan pilih Set Action.. dan ubahlah sesuai gambar berikut ini

menuaction

Ubahlah method showProductsDialog menjadi sebagai berikut

&amp;amp;amp;amp;amp;lt;/p&amp;amp;amp;amp;amp;gt;

&amp;amp;amp;amp;amp;lt;p style="text-align: left;"&amp;amp;amp;amp;amp;gt;private JDialog productDialog;
@Action
public void showProductsDialog() {
if (productDialog == null) {
JFrame mainFrame = ProductsRecordApp.getApplication().getMainFrame();
productDialog = new ProductDialog(mainFrame, false);
productDialog.setLocationRelativeTo(mainFrame);
}
ProductsRecordApp.getApplication().show(productDialog);
}
&amp;amp;amp;amp;amp;lt;p style="text-align: left;"&amp;amp;amp;amp;amp;gt;

Ok sekarang aplikasi bisa dicoba untuk dijalankan. Silahkan dicoba untuk tambah, ubah dan hapus Category. Untuk bagian product saya lanjutkan pada tulisan berikutnya.. [to be continue]

NB: Untuk source codenya bisa dichecout dari  https:////hendrosteven.googlecode.com/svn/trunk/ProductRecord

Contoh Aplikasi Swing dengan Hibernate

Ini adalah contoh aplikasi Swing yang menggunakan Hibernate sebagai persistece frameworknya. Sebenarnya aplikasi ini udah lama dibuat tapi baru ketemua tadi jadi langsung aja di Post diblog siapa tau ada manfaatnya bagi pembaca sekalian.

Aplikasinya bernama jAdwal, sesuai namanya aplikasi ini berfungsi seperti organizer atau tempat mencatat kegiatan kita sehari-hari. Databasenya menggunakan mysql tapi tentunya bisa disesuaikan untuk database yang lain. Pada aplikasi ini juga menggunakan komponen untuk datepicker dari SwingX. Berikut beberapa screenshot dari aplikasi tersebut

newj1

Gambar di atas menunjukan bagaimana saat kita menambahkan sebuah jadwal baru.  Biar bisa dicoba sendiri silahkan download source codenya (Netbeans Project) di SINI atau bisa juga checkout dengan subversion di https://hendrosteven.googlecode.com/svn/trunk/jAdwal