Jumat, 15 Juli 2011

Menggambar Grafis di Java [pakai Netbeans]

Mumpung lagi bosen mengetik skripsi.. mending ngetik blog saja, haha lumayan lah dari pada males2an.
Baiklah tidak usah lama2 langsung saja kita mulai belajar menggambar seperti layaknya anak TK.. hahah.

Yak.. tool yang digunakan untuk membuat program java disini aku pakai Netbeans, jadi mudah2an kamu sudah pernah pakai Netbean2... kalau belum install dulu, caranya lihat post sebelumnya di sini dan juga mudah2an kamu sudah pernah belajar Object Oriented Programming.. opo kui?? mbuh :p..

Silakan bisa buat project baru File -> New Project, pilih kategory Java->Java Application.





Di Java kalau kita mau menggambar grafis bisasanya menggunakan Canvas yang merupakan elemen lightweight (elemen gui yg ringan).
Canvas ini terletak di java.awt.Canvas. Canvas merupakan suatu komponen jadi kita tidak bisa langsung menampilkan penampakan Canvas ini.
Biasanya untuk menampilkan komponen digunakan Container, misal kita pakai JFrame aja yang mudah, JFrame terletak di javax.swing.JFrame, swing merupakan elemen heavyweight.

Jadi sudah ketahuan kita pakai 2 kelas tersebut, Canvas dan JFrame untuk membuat aplikasi dalam tutorial ini. Namun penggunaannya tidak secara langsung kita pakai 2 kelas tersebut,
namun kita buat kelas sendiri dari turunan 2 kelas tersebut. Disini aku membuat kelas CanvasGambar turunan (extends) Canvas dan FormCanvas extend JFrame dan keduanya aku masukkan dalam package main. Lihat susunannya dalam gambar.

Langkah pertama buat package baru bernama "main" tanpa petik, lalu didalam package main buat class baru (java class) dengan nama CanvasGambar.
Mudah2an anda sudah tahu caranya.. kalau belum, coba browsing google dulu aja, hehe. Klik kanan pada nama projectmu maka akan muncul menunya.




Langsung saja tulis CanvasGambar seperti code di bawah dan baca sendiri komentarnya:

package main;

//import class2 bawaan dalam package awt
import java.awt.*;

/**
 *
 * @author ffred
 */
public class CanvasGambar extends Canvas {
    private int w;
    private int h;

    public CanvasGambar(int w, int h){
        this.w = w;
        this.h = h;
        this.setSize(w, h);
    }
    public void paint(Graphics g){
        //cast Graphics ke Graphics2D yg lebih lengkap
        Graphics2D g2d = (Graphics2D)g;

        //set warna putih
        g2d.setColor(Color.white);
        //warnai canvas dari titik (0,0) sampai lebar w dan tinggi h
        g2d.fillRect(0, 0, w, h);

        //set warna hitam
        g2d.setColor(Color.black);
        g2d.drawString("Belajar menggambar dengan canvas", 10, 20);

        //set warna biru
        g2d.setColor(Color.blue);
        g2d.drawLine(10, 25, w-10, 25);
        
        g2d.setColor(Color.green);      //set warna hijau
        g2d.fillRect(10, 40, 100, 50);  //kotak penuh pada (10,40) pxl=100x50

        g2d.setStroke(new BasicStroke(3));  //ketebalan stroke(garis) diset 3pixel
        g2d.setColor(Color.black);
        g2d.drawRoundRect(120, 40, 100, 100, 10, 10);   //gambar garis kotak tumpul

        g2d.setStroke(new BasicStroke(2));
        g2d.setColor(Color.orange);
        g2d.fillOval(230, 40, 50, 50);  //lingkaran penuh
        g2d.setColor(Color.gray);
        g2d.drawOval(230, 40, 50, 50);  //lingkaran garis
    }
}

Itu method2 buat gambar di Graphics2D kalau kamu pakai Netbeans tinggal diakhir nama variable g2d pencet titik (.) pasti keluar sendiri daftar method yang ada (kalo tidak keluar, pencet Ctrl+Spasi).
Nah dari daftar method yang ada silakan bisa dibaca sendiri, kalau mudeng bahasa inggris pasti paham sendiri.

Selanjutnya silakan buat lagi file FormCanvas di package yang sama (package main), liaht contoh kodenya di bawah

package main;

//import semua class bawaan di dalam package swing
import javax.swing.*;


/**
 *
 * @author ffred
 */
public class FormCanvas extends JFrame {
    public FormCanvas(){
        //membuat form baru dari konstruktor parent JFrame
        super("Ini Form Canvas Saya");

        //menambahkan CanvasGambar ukuran 500x500 yg tadi dibuat
        this.add(new CanvasGambar(300,200));

        //agar ukuran form menyesuaikan Canvas
        this.pack();

        //agar form muncul di tengah layar
        this.setLocationRelativeTo(null);

        //agar form bisa diclose
        this.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);

        //agar form bisa terlihat
        this.setVisible(true);
    }

    //method main untuk menjalankan form, sintaks sudah bawaan java
    public static void main(String arg[]){
        //agar aman dalam menampilkan form gunakan sintaks ini
        java.awt.EventQueue.invokeLater(new Runnable(){
            public void run(){
                new FormCanvas();
            }
        });

    }
}

Kalau sudah selesai dan tidak ada muncul error merah2nya.. silakan bisa di run untuk mencoba menjalakan langsung, maupun di build untuk membuat file jar yang bisa dieksekusi.
Jika berhasil, lihat hasilnya:




Oke deh sekian dulu ya... aku mau ngetik2 buat skripsi lagi. ^v^

Jumat, 01 Juli 2011

Memulai jQuey UI dengan Membuat PesanDialog

Oke posting kali ini mungkin kalau rada susah dicerna karna memang
untuk yang sudah agak mahir/advance, paling tidak agak mengerti html, css, javascript dan jquery. Step by step slow..

Kalau kamu-kamu pingin peralatan buat website dengan tampilan yang bagus dan menarik,
misal dialog pesan (Dialog), kalender, Panel Tabulasi, Slider, Progress Bar yang oke punya (beda dari bisanya), kamu bisa mencoba menggunakan framework jQuery UI ini. JQuery UI berjalan di atas library jQuery jadi kalau mau memakai framework ini
harus di-load/diikut sertakan dahulu library jQuery-nya.

Contoh implementasi jQuery UI


Oke mulai saja mencoba sendiri framework ini, sebelumnya download dulu bundel framework ini di jqueryui.com, yg terbaru versi 1.8.14, cari tombol 'Build Custom Download' biar cepet, hehe.. pilih Theme, terserah.. (di sini saya pakai yg UI lightness), kalau sudah dapat filenya diesktrack dulu, nanti akan dapat susunan folder sebagai berikut:


Sementara abaikan dulu folder yang lain (nanti dibaca2 sendiri foldernya), yang terpenting yang diambil untuk implementasi jquery ui adalah
1. folder js --> 'jquery-1.5.1.min.js' dan 'jquery-ui-1.8.14.custom.min.js'
2. folder css --> ada folder 'ui-lightness' (tergantung tema yang didownload) didalam ada css 'jquery-ui-1.8.14.custom.css' dan folder 'images'
copy dua folder tersebut beserta isinya tempatkan sejajar (sebenarnya terserah) dengan file html/php-mu, contoh yang saya lakukan :


Oke langsung saja load jQuery UI pada file html kamu, contoh :

<html>
<head>
 <title>Ngetes jquery ui</title>
 <script type="text/javascript" src="js/jquery-1.5.1.min.js"></script>
 <script type="text/javascript" src="js/jquery-ui-1.8.14.custom.min.js"></script>
 
 <link rel="stylesheet" href="ui-lightness/jquery-ui-1.8.14.custom.css" />
 

Oke pertama kita coba buat button dan dialog, langkahnya adalah buat dahulu sintaks html button/input untuk button dan div untuk dialog, lalu buat script javascriptnya
Di bawah ini script menampilkan button dengan tampilan jquey ui dan memunculkan dialog ketika diklik

<html>
<head>
 <title>Ngetes jquery ui</title>
 <script type="text/javascript" src="js/jquery-1.5.1.min.js"></script>
 <script type="text/javascript" src="js/jquery-ui-1.8.14.custom.min.js"></script>
 
 <link rel="stylesheet" href="ui-lightness/jquery-ui-1.8.14.custom.css" />
 
 <!-- Style halaman setting agar font tidak terlalu besar -->
 <style type="text/css">
 body, table{
  font-size:11px; 
 }
 </style>
 <!-- -->
</head>
<body>
 <script>
 $(function(){ //cara lain selain pakai $(document).ready()
  //untuk mengubah bentuk button semua tag button
  $("button").button();
  
  $("button").click(function(){
   //memunculkan dialog yang berasal dari elemen dengan id 'dialog-tersembunyi' 
   $( "#dialog-tersembunyi" ).dialog(); //end dialog
   
  }); //end button click
  
 });
 </script>
 <button>Munculkan Dialog</button>

 <!-- Element yg akan ditampilkan sebagai dialog -->
 <div id="dialog-tersembunyi" title="Peringatan" style="display:none;">
  Dialog ini akan muncul jika memencet tombol!!
 </div>

</body>
</html>
dibaca sendiri ya keterangan di script-nya

Kalau sudah, bisa dicoba tampilkan dibrowser


Untuk yang dialog kamu bisa variasi dengan menambah parameter tertentu, misal

Menambahkan button Ok untuk menutup dialog
$( "#dialog-tersembunyi" ).dialog({
    buttons:{
     Ok: function(){
      $(this).dialog("close");
     }
    }
   }); //end dialog


Dialog dengan button OK dan menjadi Modal Dialog (fokus pada dialog dan memburamkan halaman belakang)
$( "#dialog-tersembunyi" ).dialog({
    modal:true,  //modal --> true, false
    buttons:{
     Ok: function(){
      $(this).dialog("close");
     }
    }
   }); //end dialog


Dialog modal muncul dengan animasi
$( "#dialog-tersembunyi" ).dialog({
    show:"bounce",
    hide:"scale",
    modal:true,  //modal --> true, false
    buttons:{
     Ok: function(){
      $(this).dialog("close");
     }
    }
   }); //end dialog

Gambar *lihat sendiri ya.. ^^

Contoh modal.. dapat dilihat di sini

Oke sekian dulu, besok lanjut yang lain yang lebih menarik..