Swing MakeOver Part 4, Cool TextField

Akhirnya, bisa posting juga, lama banget gak posting. Pada Postingan kemaren, saya membahas tentang Buffered image, yang menjadi salah satu dasar dalam Swing Makeover. Nah sekarang saya akan memberikan salah satu contoh penggunaan Buffered image.

Ok, sebelumnya coba perhatikan textBox pencarian pada beberapa IE, or Firefox:

IE

Kalo kita perhatikan, ada sesuatu yang menarik pada textbox pencarian diatas, yup benar tektboxnya punya Background, dan Backroundnya akan ilang kalo fokuskan cursot ato kita ketikan sesuatu.

Wah keren juga ya, :).

Ya udah kita buat aja, gampang koq

Siapkan sebuah gambar (buat kita jadiin background). Klo saya pake gambar ini:

Sesuaikan ukurannya. (biasanya ukuran standard TextField memunyai tinggi kira-kira 20px) jadi gambarnya kita berikn tinggi kurang lebih 16 px. (Atau sesuaikan saja sesuai keinginan)

Trus, Buat sebuah project baru (Saya pake netbeans). Trus buat class baru. (Saya kasih nama QCoolTextField aja ya).

Kemudian ketikan kode berikut:

/**

* DILARANG MENGGUNAKAN FILE INI TANPA SEIZIN PENGEMBANG
* Lisensi ada pada : Fiqri Tech.
* Copyright : 2009 Fiqri Tech.
*
* Kerusakan, atau hal-hal yang merugikan akibat penggunaan file ini
* tanpa seizin pihak kami, maka kami tidak bertanggung jawab
*
*
* QCoolTextField.java
*
* Created on 16 Jun 09, 7:56:54
*/



package ovq.cooltextfield;


import java.awt.Graphics;
import java.awt.Graphics2D;
import java.awt.RenderingHints;
import java.awt.event.FocusAdapter;
import java.awt.event.FocusEvent;
import java.awt.image.BufferedImage;
import javax.swing.ImageIcon;
import javax.swing.JTextField;

/**
*
* @author Fiqri Tech.
*/

public class QCoolTextField extends JTextField{
private BufferedImage bg;
private boolean fokus = false;

public QCoolTextField() {
bg = QBufferedImage.loadCompatibleImage(new ImageIcon(getClass().getResource("/ovq/cooltextfield/resource/BlackOnta.png")).getImage());

addFocusListener(new FocusAdapter() {

@Override
public void focusGained(FocusEvent e) {
fokus = true;
repaint();
}

@Override
public void focusLost(FocusEvent e) {
fokus = false;
repaint();
}
});
}

@Override
protected void paintComponent(Graphics g) {
Graphics2D g2=(Graphics2D)g.create();
g2.setRenderingHint(RenderingHints.KEY_ANTIALIASING, RenderingHints.VALUE_ANTIALIAS_ON);
super.paintComponent(g);
if ( !fokus && getText().trim().equals("")){
g2.drawImage(bg, 3, 3, null);
}

g2.dispose();
}

}

Perhatikan kode yang di garis bawahi, sesuaikan dengan classpath project dimana gambar disimpan.

Trus compile, klo gak ada error berarti suksess.

Dah gitu buat sebuah JFrame. Drag class QCoolTextField yang baru kita compile. Atur atur posisi sesuai dengan keinginan.

Kurang lebih kayak ginilah:

Trus Compaild n cobain deh.

Hasilnya kira kira kayak gini:

Gampang kan,

Ok deh cobain, dan ingat ini Cuma contoh, temen temen bisa menggunakannya untuk keperluan yang lain, misalnya indicator pada Form Isian:

Ya udah klo belom jelas, Download aja SourceCodenya, trus bongkar n acak-acak deh sampe ngerti hehe pisss ah .