PEMBAHASAN 5
Antarmuka atau User Interface (UI)
Kompetensi
Dasar :
3.15. Merancang antarmuka atau User
Interface (UI)
4.15.
Membuat kode program untuk antar muka atau User Interface (UI)
Materi
Pembelajaran:
Antarmuka atau User Interface (UI)
A.
Konsep GUI (Graphical User Interface)
GUI (Graphical User Interface) merupakan antarmuka pada sistem
operasi atau komputer yang menggunakan menu dan tampilan grafis
agar mempermudah para penggunanya untuk berinteraksi dengan komputer atau
sistem operasi untuk melakukan pekerjaan interaktif.
GUI
digunakan dalam pembuatan program aplikasi dengan mempertimbangkan dua aspek
yaitu keindahan tampilan dan kemudahan penggunaan program.
B.
Sejarah Singkat GUI
GUI
(Graphical User Interface) software dikembangkan oleh para peneliti di Xerox
Palo Alto Research Center (PARC) di tahun 70-an.
Lahirnya
GUI didasari akan keterbatasan pengguna komputer yang hanya dijalankan dengan
menggunakan perintah yang diketik pada layar monitor menggunakan keyboard.
Kemudian
lahirlah yang disebut GUI yang seperangkat aplikasinya menampilkan semua menu,
ikon dan alat penunjuk lain yang menggantikan perintah ketik di shell.
GUI
pertama kali digunakan pada komputer yang diproduksi oleh APPLE yaitu Machintos
dengan steve Jobs sebagai penggagasnya.
C.
Keuntungan dan Kekurangan GUI
1.
Keuntungan dalam penggunaan
GUI
a.
Menarik Minat
Pengguna dengan menggunakan ikon grafik serta mengurangi kebosanan pengguna
pada waktu menggunakan komputer
dan desain aplikasi.
b.
Memudahkan
pengguna tentang apa yang dipaparkan tanpa perlu banyak membaca dan menjelaskan.
c.
Memahirkan
Pengguna Dengan Cepat.
d.
Resolusi
Gambar yang Tinggi karena dapat menggunakan gambar atau tulisan yang bisa
menghasilkan sampai dengan 256 warna
2.
Kekurangan dalam penggunaan
GUI
a.
Memakan memori
atau kapasitas penyimpanan yang sangat besar
b.
Bergantung
pada perangkat keras dalam hal desain dan output
c.
Membutuhkan
banyak tempat pada layar komputer
d.
Tidak
fleksibel pada semua perangkat karena adanya ketergantungan pada file tertentu.
D. Perancangan GUI
Dalam merancangan GUI yang baik perlu
memperhatikan beberapa hal, diantaranya :
·
Desain dapat diterjemahkan sebagai seni terapan, dan
berbagai pencapaian kreatif.
·
Arti Desain sebagai kata kerja : “desain” memiliki
arti “proses untuk membuat dan menciptakan objek baru
·
Arti Desain sebagai kata benda : “desain” digunakan
untuk menyebut hasil akhir dari sebuah proses kreatif, baik itu berwujud sebuah
rencana, proposal, atau berbentuk objek nyata.
Prinsip Desain yang Baik
1.
Metafora (Proses Perancangan bentuk)
maksudnya
menampilkan dan menggambarkan elemen-elemen (titik, garis, warna, ruang dan
tekstur) yang relefan dan dikenali. Bisa menggunakan dekstop yang berhubungan
dengan perancangan interface (adobe Photoshop, Corel Draw, Macromedia Flash,
dll)
2.
Kejelasan
setiap
elemen yang digunakan pada interface harus beralasan dalam penggunanya.
Memperjelas pesan yang diberikan. Memberikan relax pada mata dalam menatap
elemen-elemen saat beraktifitas. Menawarkan kesedrahanaan, enak dilihat,
berkelas dan jelas
3.
Konsisten
Konsisten
dalam layout, warna, gambar (image), icon, tipografi, teks, dll
Konsisten
pada layar, perpindahan antar layar satu ke layar lain
4.
Konsisten pada desain interface yang dirancang
Bidang kerja
(platform) mempunyai petunjuk tuntunan
E.
KOMPONEN DASAR GUI
GUI memiliki komponen-komponen
tersendiri dalam java,
diantaranya:
1.
JLabel, berfungsi sebagai penunjuk tulisan/angka pada
GUI.
Contoh: lbl
= new JLabel (“Hello World”);
2.
JButton, berfungsi sebagai tombol pada GUI, komponen
ini paling sering digunakan karena dibutuhkan user untuk menklik tombol
tersebut
Contoh:
button = new JButton (“OK”);
3.
JRadioButton, berfungsi sebagai selection, komponen
ini juga paling sering digunakan.
4.
JCheckBox, berfungsi sebagai tanda centang, komponen
ini juga paling sering digunakan. Biasanya digunakan pada saat user melakukan
setting options.
5.
JTextField, berfungsi sebagai kolom tempat untuk
menulis.
Serta banyak
komponen lainnya yang berada dalam tempat penangganan menu atau grafis yang
disebut dengan Pallete.
F.
API (Application Programming Interface)
Bagian-bagian utama dari API
- AWT
- Swing
- Java2D
- Accessibility
- Drag and Drop
AWT dan SWING
• AWT dan
SWING termasuk dalam The Java Foundation Class (JFC)
yaitu bagian penting dari Java SDK, yang berfungsi
untuk mempermudah pengembangan aplikasi JAVA GUI.
• Dalam
penggunaanyanya beberapa komponen AWT menggunakan native code, sementara
keseluruhan Swing ditulis menggunakan bahasa
pemrograman Java.
• Swing menyediakan implementasi platform-independent yang dapat dikembangkan dengan platform yang berbeda dan 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. Sehingga dapat disimpulkan komponen AWT dapat digunakan bersama komponen Swing.
Komponen SWING
|
Class Swing |
Deskripsi |
|
Container (tempat) |
obyek yang dapat menampung
komponen grafis dan tempat yang lebih kecil. Contoh : frames, panels |
|
Component
|
obyek yang berfungsi untuk
menampilkan data, menerima masukan atau menunjukkan suatu kondisi. Contoh :
buttons, labels dan text fields
|
|
Event
|
obyek yang
merepresentasikan suatu kejadian. Contoh gerakan mouse, penekanan tombol |
|
Listener
|
suatu obyek yang
‘menunggu’ suatu kejadian khusus dan akan bereaksi (melakukan sesuatu) jika
kejadian tersebut terjadi |
Komponen AWT
Sama halnya SWING dan AWT, beberapa komponen dapat dilihat di masing-masing Pallete.
Class AWT dan SWING
1.
Delegation Event Model
Tiga Komponen
Utama dalam Delegation Event Model.
a. Event Source yaitu komponen GUI yang meng-generate event. Sebagai contoh, jika user menekan tombol, event source dalam hal ini adalah
tombol.
b. Event Listener/Handler yaitu komponen
yang menerima berita dari event-event dan proses-proses
interaksi user.
Ketika tombol ditekan, listener akan mengendalikan
dengan menampilkan sebuah
informasi yang berguna untuk user.
c. Event Object yaitu berisi semua informasi yang perlu tentang event yang telah terjadi.
Informasi meliputi tipe dari event yang telah terjadi, seperti ketika mouse
telah di-klik. Sebuah event object mempunyai tipe data mengenai salah
satu dari class.
Gambar. Delegation Event model
2.
Registrasi Listeners
Event source mendaftarkan sebuah listener melalui method add<Type>Listener.
• void
add<Type>Listener(<Type>Listener listenerObj)
Listener yang telah teregistrasi dapat juga tidak diregistrasikan lagi
menggunakan method remove<Type>Listener.
• void
remove<Type>Listener(<Type>Listener listenerObj)
Ket : <Type> tergantung pada tipe dari event source. Dapat berupa Key,
Mouse, Focus, Component, Action dan lainnya.
3.
Class-class Event
Akar dari hirarki class event adalah class
EventObject, yang dapat ditemukan pada paket java.util
Immediate subclass dari class EventObject
adalah class AWTEvent, didefinisikan pada paket java.awt
class-class AWT
event
Event Listeners
Event
listeners adalah class yang mengimplemen- tasikan interfaces <Type>Listener.
Tabel di bawah menunjukkan beberapa listener interfaces yang biasanya
digunakan.
a.
Method
ActionListener
b. Method MouseListener
c.
Method
MouseMotionListener
MouseMotionListener memiliki 2 method yang diimplementasi :
d.
Method
WindowListener
Contoh
Mouse Events
MouseListener dan MouseMotionListener
a. MouseListener mendengarkan interaksi mouse terhadap komponen swing. MouseListener dapat didaftarkan pada semua komponen swing. MouseListener
mendengarkan/merespon beberapa event, diantaranya :
·
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.
Prinsip kerjanya ketika user menekan tombol mouse (click),event
mousePressed dibuat, kemudian mouseReleased dan akhirnya mouseClicked muncul
terakhir.
b. 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
Method-method lainnya
• 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. 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. Nilai koordinatnya
dinyatakan dalam satuan pixel.
4.
Class Adapter
Kelas-kelas
adapter adalah kelas yang juga mengimplementasikan interface yang bersesuaian
dengan menyediakan implementasi standar untuk semua metoda interface berupa
blok kosong tanpa pernyataan.
|
Kelas-Kelas Adapter Di Java |
|
|
Kelas-Kelas
Adapter |
Interfes Yang
Diimplementasi |
|
MouseAdapter
|
MouseListener |
|
MouseMotionAdapter
|
MouseMotionListener
|
|
FocusAdapter
|
FocusListener |
|
ContainerAdapter
|
ContainerListener
|
|
KeyAdapter
|
KeyListener |
|
WindowAdapter
|
WindowListener
|
|
ComponentAdapter
|
ComponentListener
|
Percobaan 1 : Membuat Frame
Percobaan 2 : Membuat
Frame
Percobaan 3 : Membuat
Panel
Percobaan 4 : Membuat Tombol dan Box
Untuk materi 1 silahkan buka draf materi yang ada disamping kanan, atau klik link berikut : http://smk1sintoga.blogspot.com/2020/07/materi-1-string-dan-pelbagai-propertinya.html
Untuk materi 4 silahkan buka draf materi yang ada disamping kanan, atau klik link berikut :
https://smk1sintoga.blogspot.com/2020/08/materi-4-file-dan-inputoutput-io.html
Untuk materi 4 silahkan buka draf materi yang ada disamping kanan, atau klik link berikut :