GRAPICAL USER INTERFACE (GUI)

GRAPICAL USER INTERFACE (GUI)

1.      Konsep GUI

GUI (Graphical User Interface) merupakan sebuah teknologi antar muka 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 bias 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 berinteraksidengankomponen 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 listener Obj)

3.      Class-class Event

Sebuah event object mempunyai sebuah class event sebagai tipe data acuannya. Akar dari hirarki class event adalah class Event Object, yang dapat ditemukan pada paket java.util. Immediate subclass dari class Event Object adalah class AWT Event. Class AWT Event didefinisikan pada paket java.awt. Itu merupakan akar dari semua AWT based events. Berikut ini beberapa dari class-class AWT event.

Tabel 1. Class-class event

Catatan, bahwa semua sub class-sub class AWT Event  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 Action Listener

b.      Method Mouse Listener

c.       Method-Method Mouse Motion Listener

Mouse Motion Listener memiliki 2 method yang diimplementasi :

d.      Method-Method Window Listener

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

Mouse Listener dan Mouse Motion Listener

Mouse Listene rmendengarkan interaksi mouse terhadap komponen swing. Mouse Listener dapat didaftarkan pada semua komponen swing. Mouse Listener mendengarkan event :

● mouse Pressed : event ini terjadi ketika user menekan salah satu tombol mouse diatas komponenswing.
● mouse Released : 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.
● mouse Clicked : event ini muncul ketika user melakukan click tombol mouse diatas komponen swing.
● mouse Entered : ketika mouse memasuki area diatas komponen swing, event ini akan dipicu.
● mouse Exited : muncul ketika mouse akan meninggalkan area diatas komponen swing

Ketika user menekan tombol mouse (click), event mouse Pressed dibuat, kemudian mouse Released dan akhirnya mouse Clicked muncul terakhir.

Mouse Motion Listener juga dapat didaftarkan sebagai listener pada semua komponen swing. Mouse Motion Listener dipisahkan dari Mouse Listener karena penanganan event mouse Move yang lebih berat dan intensif. Mouse Motion Listene rmendengarkan dua envent:

● mouse Moved :terjadi ketika user menggerakkan mouse diatas komponen swing
● mouse Dragged : terjadi ketika user menekan tombol mouse sekaligus menggerakkanya diatas komponen swing
 

Semua method diatas menerima argument berupa class Mouse Event. Method get Click Count digunakan untuk menentukan jumlah click yang terjadi dalamwaktu yang berdekatan. Method get Click Count juga digunakan untuk menentukan apakah klik yang terjadi adalah single klik atau double klik.

Method get Button digunakan untuk menentukan tombol mana yang ditekan oleh user. Pada umumnya mouse yang tersedia di pasaran mempunyai tiga tombol yang dapat di klik, tombol kiri, tombol tengah dan tombol kanan. Method get Button akan mengembalikan nilai Mouse Event.BUTTON 1 jika tombol kiri ditekan, Mouse Event.BUTTON 2 jika tombol tengah ditekan dan MouseEvent.BUTTON 3 jika tombol kanan ditekan.

Method get X dan get Y akan mengembalikan koordinat dimana Mouse Event 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 kekanan 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 class class adapter yang menerapkan semua method dari masing-masing listener interface dengan lebih dari satu method. Implementasi dari method-method semuanya adalah kosong.