GRAPICAL USER INTERFACE (GUI)

1. Konsep GUI
GUI (Graphical User Interface) merupakan sebuah teknologi antarmuka pengguna yang
memungkinkan seseorang untuk berinteraksi dengan program dengan berbagai cara selain
mengetik seperti halnya komputer, MP3 Player dan lain-lain yang berisikan banyak tombol
bergambar atau icon dibandingkan teks.
Awt vs. Swing
The Java Foundation Class (JFC), merupakan bagian penting dari Java SDK, yang
termasuk
dalam koleksi dari API dimana dapat mempermudah pengembangan aplikasi JAVA
GUI. JFC
termasuk diantara 5 bagian utama dari API yaitu AWT dan Swing. Tiga bagian
yang lainnya
dari API adalah Java2D, Accessibility, dan Drag dan Drop. Semua itu membantu
pengembang
dalam mendesain dan mengimplementasikan aplikasi visual yang lebih baik.
AWT dan Swing menyediakan komponen GUI yang dapat digunakan dalam
membuat aplikasi
Java dan Applet. Anda akan mempelajari applet pada bab berikutnya. Tidak seperti
beberapa komponen AWT yang menggunakan native code, keseluruhan Swing ditulis
menggunakan bahasa pemrograman Java. Swing menyediakan implementasi platform-
independent dimana aplikasi yang dikembangkan dengan platform yang berbeda dapat
memiliki tampilan yang sama. Begitu juga dengan AWT menjamin tampilan look and feel
pada aplikasi yang dijalankan pada dua mesin yang berbeda menjadi terlihat sama. Swing
API dibangun dari beberapa API yang mengimplementasikan beberapa jenis bagian dari
AWT. Kesimpulannya, komponen AWT dapat digunakan bersama komponen Swing.
Komponen dasar Swing
 Container (tempat) yaitu obyek yang dapat menampung komponen grafis dan tempat
yang lebih kecil. Contoh : frames, panels.
 Component yaitu obyek yang berfungsi untuk menampilkan data, menerima masukan
atau menunjukkan suatu kondisi. Contoh : buttons, labels dan text fields.
 Event yaitu obyek yang merepresentasikan suatu kejadian. Contoh gerakan mouse,
penekanan tombol.
 Listener yaitu suatu obyek yang ‘menunggu’ suatu kejadian khusus dan akan bereaksi
(melakukan sesuatu) jika kejadian tersebut terjadi.
 Beberapa komponen AWT bisa dilihat di netbeans di palete AWT.

1. Delegation Event Model

Delegasi event model menguraikan bagaimana program Anda dapat

merespon interaksi dari user. Untuk memahami model, pertama-tama mari kita
pelajari melalui tiga komponen utamanya.
1. Event Source
Event source mengacu pada komponen GUI yang meng-generate event. Sebagai
contoh, jika user menekan tombol, event source dalam hal ini adalah tombol.
2. Event Listener/Handler
Event listener menerima berita dari event-event dan proses-proses interaksi user.
Ketika tombol ditekan, listener akan mengendalikan dengan menampilkan sebuah
informasi yang berguna untuk user.
3. Event Object
Ketika sebuah event terjadi (misal, ketika user berinteraksi dengan komponen GUI),
sebuah object event diciptakan. Object berisi semua informasi yang perlu tentang
event yang telah terjadi. Informasi meliputi tipe dari event yang telah terjadi, seperti
ketika mouse telah di-klik. Ada beberapa class event untuk kategori yang berbeda
dari user action. Sebuah event object mempunyai tipe data mengenai salah satu dari
class ini.

Gambar 2.1. Delegation Event model

 Pada awalnya, sebuah listener seharusnya diregistrasikan dengan sebuah source sehingga
dapat menerima informasi tentang event-event yang terjadi pada source tersebut. Hanya
listener yang sudah teregistrasi yang dapat menerima pemberitahuan event-event. Ketika
telah teregistrasi, sebuah listener hanya tinggal menunggu sampai event terjadi. Ketika
sesuatu terjadi dengan event source, sebuah event object akan menguraikan event yang
diciptakan. Event kemudian ditembak oleh source pada listener yang teregistrasi. Saat
listener menerima sebuah event object (pemberitahuan) dari source, dia akan bekerja.
Menerjemahkan pemberitahuan dan memproses event yang terjadi.

2. Registrasi Listeners
Event source mendaftarkan sebuah listener melalui method add<Type>Listener.
void add<Type>Listener(<Type>Listener listenerObj)
<Type> tergantung pada tipe dari event source. Dapat berupa Key, Mouse, Focus,
Component, Action dan lainnya. Beberapa listeners dapat diregistrasi dengan satu event
source untuk menerima
pemberitahuan event. Listener yang telah teregistrasi dapat juga tidak diregistrasikan lagi
menggunakan method remove<Type>Listener.
void remove<Type>Listener(<Type>Listener listenerObj)
3. Class-class Event
Sebuah event object mempunyai sebuah class event sebagai tipe data acuannya. Akar
dari hirarki class event adalah class EventObject, yang dapat ditemukan pada paket
java.util. Immediate subclass dari class EventObject adalah class AWTEvent. Class
AWTEvent didefinisikan pada paket java.awt. Itu merupakan akar dari semua AWTbased
events. Berikut ini beberapa dari class-class AWT event.

Tabel 1. Class-class event

 Catatan, bahwa semua subclass-subclass AWTEvent mengikuti konvensi nama berikut ini:
<Type>Event
3.1 Event Listeners
Event listeners adalah class yang mengimplementasikan interfaces
<Type>Listener. Tabel di bawah menunjukkan beberapa listener interfaces yang
biasanya digunakan.

Tabel 2. Event Listeners

a. Method ActionListener

b. Method MouseListener

c. Method-Method MouseMotionListener
MouseMotionListener memiliki 2 method yang diimplementasi :
d. Method-Method WindowListener

e. Petunjuk untuk Menciptakan Aplikasi Handling GUI Events

Berikut ini langkah-langkah yang Anda butuhkan untuk mengingat ketika
ingin membuat aplikasi GUI dengan event handling :
1. Buatlah sebuah class yang menguraikan dan membuat suatu tampilan dari aplikasi
GUI Anda.
2. Buatlah sebuah class yang menerapkan interface listener yang sesuai. Class ini boleh
mengacu pada class yang sama seperti pada langkah awal.
3. Dalam menerapkan class, gunakan semua method-method dengan interface listener
yang sesuai. Uraikan masing-masing method bagaimana Anda ingin mengendalikan
event-event.
4. Anda dapat memberikan implementasi kosong untuk method yang tidak ingin Anda
gunakan.
5. Daftarkan object listener, instansiatiate dari class listener pada langkah 2, dengan
source component menggunakan method add<Type>Listener.
f. Contoh Mouse Events
MouseListener dan MouseMotionListener
MouseListener mendengarkan interaksi mouse terhadap komponen swing. MouseListener
dapat didaftarkan pada semua komponen swing. MouseListener mendengarkan event :

● mousePressed : event ini terjadi ketika user menekan salah satu tombol mouse diatas
komponen swing.
 ● mouseReleased : setelah tombol ditekan, komponen swing akan menerima pelepasan
tombol mouse. Tetapi jika tombol mouse dilepaskan pada saat pointer mouse tidak berada
diatas komponen swing, maka event ini tidak akan terjadi.
● mouseClicked : event ini muncul ketika user melakukan click tombol mouse diatas
komponen swing.
● mouseEntered : ketika mouse memasuki area diatas komponen swing, event ini akan
dipicu.
● mouseExited : muncul ketika mouse akan meninggalkan area diatas komponen swing

Ketika user menekan tombol mouse (click), event mousePressed dibuat, kemudian
mouseReleased dan akhirnya mouseClicked muncul terakhir.

MouseMotionListener juga dapat didaftarkan sebagai listener pada semua komponen

swing. MouseMotionListener dipisahkan dari MouseListener karena penanganan event
mouseMove yang lebih berat dan intensif. MouseMotionListener mendengarkan dua
envent:

● mouseMoved : terjadi ketika user menggerakkan mouse diatas komponen swing

● mouseDragged : terjadi ketika user menekan tombol mouse sekaligus menggerakkanya
diatas komponen swing

Semua method diatas menerima argumen berupa class MouseEvent. Method

getClickCount digunakan untuk menentukan jumlah click yang terjadi dalam waktu yang
berdekatan. Method getClickCount juga digunakan untuk menentukan apakah klik yang
terjadi adalah single klik atau double klik.

Method getButton digunakan untuk menentukan tombol mana yang ditekan oleh user.
Pada umumnya mouse yang tersedia di pasaran mempunyai tiga timbol yang dapat di
klik, tombol kiri, tombol tengah dan tombol kanan. Method getButton akan
mengembalikan nilai MouseEvent.BUTTON1 jika tombol kiri ditekan,
MouseEvent.BUTTON2 jika tombol tengah ditekan dan MouseEvent.BUTTON3 jika
tombol kanan ditekan.

Method getX dan getY akan mengembalikan koordinat dimana MouseEvent terjadi.
Koordinat yang digunakan adalah koordinat relatif. Koordinat (0,0) berada di pojok kiri
atas dari komponen swing, semakin kebawah nilai Y semakin besar dan semakin ke
kanan nilai X semakin besar. Nilai koordinatnya dinyatakan dalam satuan pixel.

4. Class-class adapter

Menerapkan semua method dari interface yang semuanya akan membutuhkan

banyak pekerjaan. Di satu sisi, Anda terkadang lebih sering tertarik menerapkan hanya
beberapa method dari interface saja. Untungnya, Java menyediakan untuk kita classclass
adapter yang menerapkan semua method dari masing-masing listener interface dengan
lebih dari satu method. Implementasi dari method-method semuanya adalah kosong.