GUI & Event Handling Viska Mutiawani, M.Sc
1
Viska Mutiawani - Informatika FMIPA Unsyiah
GUI pada Java GUI (Graphical User Interface) pada Java umumnya menggunakan kelas dari package javax.swing dan java.awt. AWT dan Swing dapat dipergunakan untuk membuat aplikasi berbasis desktop GUI dan Applet.
2
Viska Mutiawani - Informatika FMIPA Unsyiah
AWT vs Swing Swing memiliki lebih banyak komponen GUI Komponen pada AWT memiliki look and feel sesuai dengan environment tempat ia dijalankan
Contoh: button yg ditampilkan akan berbeda mengikut OS
Komponen pada Swing akan selalu sama, di OS manapun ia dijalankan Penamaan pada Swing ada tambahan prefix J, contoh Button vs JButton
3
Viska Mutiawani - Informatika FMIPA Unsyiah
GUI Secara umum komponen GUI terdiri dari 3 klasifikasi:
4
Komponen Control Komponen yang menjadi perantara interaksi antara pengguna dan program. Ex: Button Container Komponen ruang yang dapat menampung komponen control. Ex: Panel, Window, ScrollPane Layout Manager Gaya untuk menyusun semua komponen pada interface. Ex: BorderLayout, FlowLayout
Viska Mutiawani - Informatika FMIPA Unsyiah
Langkah2 Membuat Aplikasi GUI Menentukan Container. Menentukan komponen control. Kita perlu terlebih dahulu menentukan komponen kontrol apa yang ingin digunakan. Contohnya jika ingin menggunakan tombol, maka kita memilih JButton. Jika ingin menggunakan medan input teks dari pengguna, kita bisa memakai JtextField atau JTextArea bergantung ukuran kata yg diperlukan. Menentukan layout. Tentukan layout manager sesuai yang kita inginkan. Menentukan input pengguna dan respon apa yang dilakukan terhadapnya. Tentukan apa yang perlu diinput oleh pengguna dan respon terhadap input tersebut. Hal ini melibatkan event listener.
5
Viska Mutiawani - Informatika FMIPA Unsyiah
6
Viska Mutiawani - Informatika FMIPA Unsyiah
7
Viska Mutiawani - Informatika FMIPA Unsyiah
Komponen Control
JLabel adalah komponen yang digunakan untuk membuat tulisan atau gambar pada frame sebagai suatu informasi untuk pengguna program. Untuk menggunakan jLabel, sebagai suatu class maka sebelumnya perlu dibuat suatu obyek menggunakan class JLabel.
JTextField adalah komponen yang digunakan untuk memasukkan sebaris string yang selanjutnya dapat digunakan sebagai input bagi proses selanjutnya. Pembuatan JTextfield dilakukan dengan membuat obyek berdasarkan class JtextField.
JButton adalah komponen berbentuk tombol. Komponen ini banyak digunakan sebagai eksekusi terhadap tindakan yang diinginkan. Pada aplikasi komputer, biasanya dibutuhkan tombol untuk mengeksekusi sebuah perintah. 8
Viska Mutiawani - Informatika FMIPA Unsyiah
Komponen Control
JRadioButton adalah komponen yang digunakan ketika pengguna perlu memilih satu diantara beberapa pilihan.
JComboBox juga merupakan komponen yang digunakan untukmemilih satu diantara sekian banyak pilihan yang berbentuk semacam TextField dan ada panah ke bawah.
JTextArea merupakan komponen yang mirip dengan JtextField tetapi dapat menampung lebih dari satu baris.
JCheckBox adalah komponen yang digunakan ketika penggunamemerlukan komponen untuk melakukan satu atau banyak pilhan sekaligus 9
Viska Mutiawani - Informatika FMIPA Unsyiah
Komponen Control
JList digunakan untuk menampilkan satu seri item. JTable digunakan untuk menampilkan data dalam bentuk tabel, suatu bentuk yang banyak digunakan dalam pemrograman database. JMenu adalah komponen yang digunakan untuk membuat menu. Menu membuat program kita menjadi lebih sederhana dan mudah digunakan. JColorChooser JProgressBar JSlider
10
Viska Mutiawani - Informatika FMIPA Unsyiah
Container
JFrame adalah komponen dasar dalam pemrograman visual dengan java. Dalam inilah komponen lain diletakkan. JScrollPane adalah komponen yang digunakan untuk menggerakkan obyek ke atas, ke bawah atau ke samping agar semua sebuah obyek terlihat di layar. JInternalFrame menyebabkan sebuah frame hanya dapat berada dalam frame lain. Kondisi ini akan membantu tampilan menjadi lebih rapi dan teratur. JPanel digunakan untuk menyusun komponen agar lebih rapi. 11
Viska Mutiawani - Informatika FMIPA Unsyiah
Layout Manager
Pengaturan layout digunakan untuk mengatur posisi dari komponen visual penyusun program sesuai dengan desain user interface.
12
Viska Mutiawani - Informatika FMIPA Unsyiah
13
Viska Mutiawani - Informatika FMIPA Unsyiah
Layout Manager
FlowLayout adalah jenis pengaturan layout yang paling sederhana, dimana semua komponen akan tersusun dari kiri ke kanan sepanjang frame, dan akan pindah ke bawah bila telah sampai batas kanan frame. Default pada java.awt
14
Viska Mutiawani - Informatika FMIPA Unsyiah
Layout Manager
BorderLayout merupakan jenis layout yang bekerja dengan membagi frame menjadi lima bagian yaitu NORTH, EAST, SOUTH, WEST dan CENTER. Komponen visual dapat diletakkan pada bagian-bagian tersebut.
15
Viska Mutiawani - Informatika FMIPA Unsyiah
Layout Manager
GridLayout adalah jenis layout yang bekerja berdasar baris dan kolom. Dengan layout ini kita dapat memberikan argumen banyaknya baris dan kolom sesuai dengan kebutuhan.
16
Viska Mutiawani - Informatika FMIPA Unsyiah
Layout Manager
NoneLayout merupakan jenis layout yang dapat menghasilkan tampilan yang rapi karena kita dapat mengatur posisi komponen secara detil berdasar koordinatnya. Konsekuensinya dengan layout ini waktu yang diperlukan relatif lebih banyak dibanding layout yang lain karena kita perlu menentukan posisi koordinat tiap komponen.
17
Viska Mutiawani - Informatika FMIPA Unsyiah
Layout Manager
GridBagLayout: ukuran grid bisa berubah, lebih dari satu komponen bisa masuk pada satu grid CardLayout: komponen ditimpa seperti kartu, hanya satu komponen yg nampak pada satu waktu BoxLayout: Komponen disusun kiri-kanan atau atasbawah
18
Viska Mutiawani - Informatika FMIPA Unsyiah
Aplikasi AWT/Swing sederhana
Aplikasi AWT/Swing sederhana memerlukan Frame. Ada 2 cara untuk mencipta Frame:
Extend class Frame (inheritance) Mencipta objek class Frame (association)
Pada Swing, caranya juga sama, hanya bedanya Swing menggunakan JFrame. Semua komponen juga berawalan dengan J. Dan jangan lupa import javax.swing.*
19
Viska Mutiawani - Informatika FMIPA Unsyiah
Contoh cara pertama import java.awt.*; class First extends Frame{ First(){ Button b=new Button("click me"); b.setBounds(30,100,80,30);// setting button position add(b);//adding button into frame setSize(300,300);//frame size 300 width and 300 height setLayout(null);//no layout manager setVisible(true);//now frame will be visible, by default not visible } public static void main(String args[]){ First f=new First(); }} 20
Viska Mutiawani - Informatika FMIPA Unsyiah
Contoh cara kedua import java.awt.*; class First2{ First2(){ Frame f=new Frame(); Button b=new Button("click me"); b.setBounds(30,50,80,30); f.add(b); f.setSize(300,300); f.setLayout(null); f.setVisible(true); } public static void main(String args[]){ First2 f=new First2(); }} 21
Viska Mutiawani - Informatika FMIPA Unsyiah
Latihan
Buat interface seperti berikut:
22
Viska Mutiawani - Informatika FMIPA Unsyiah
Latihan
Buat interface seperti berikut:
23
Viska Mutiawani - Informatika FMIPA Unsyiah
Event
Java menggunakan delegation event model untuk mengendalikan peristiwa (event). Pada model ini terdapat:
24
Event source (sumber peristiwa) Event listener/event handler (pendengar peristiwa) Event object
Viska Mutiawani - Informatika FMIPA Unsyiah
Event Source
Event source mengacu pada komponen GUI yg menghasilkan event. Contoh: jika user menekan button, maka event source nya adalah button
25
Viska Mutiawani - Informatika FMIPA Unsyiah
Event Listener/ handler
Event listener: objek yang mendengar peristiwa dan melakukan tindakan terhadap peristiwa tersebut. Contoh: ketika button ditekan, listener akan mengendalikan dengan handler yang sesuai
26
Viska Mutiawani - Informatika FMIPA Unsyiah
Event Object
Ketika sebuah event terjadi, sebuah objek event diciptakan. Objek berisi semua informasi yg perlu tentang event yg telah terjadi.
27
Viska Mutiawani - Informatika FMIPA Unsyiah
28
Viska Mutiawani - Informatika FMIPA Unsyiah
Cara 1: implement listener pada class
Menyediakan program sebagai event listener.
Mendaftarkan komponen pd event listener
import java.awt.event.*; public class MyClass implements ActionListener { someComponent.addActionListener(instanceOfMyClass);
Melakukan tindakan terhadap event dari pengguna
29
public void actionPerformed)ActionEvent e) { … //kode yang mengakomodasi aksi dari user }
Viska Mutiawani - Informatika FMIPA Unsyiah
Cara 2 : Menggunakan Inner Class
Implementasi program dengan inner class, sbb : addMouseMotionListener(new MyMouseMotionListener()); class MyMouseMotionListener extends MouseAdapter { public void mouseDragged(MouseEvent e) { } }
Implementasi program dengan anonymous inner class, sbb : addMouseMotionListener(new MouseMotionAdapter(){ public void mouseDragged(MouseEvent e) { ... } }); // tutup dengan titik koma
30
Viska Mutiawani - Informatika FMIPA Unsyiah
Kategori Name Interface
Method
Action
ActionListener
actionPerformed(ActionEvent)
Item
ItemListener
itemStateChanged(ItemEvent)
Mouse
MouseListener
mousePressed(MouseEvent) mouseReleased(MouseEvenr) mouseEntered(MouseEvent) mouseExited(MouseEvent) mouseClicked(MouseEvent)
31
Viska Mutiawani - Informatika FMIPA Unsyiah
32
Viska Mutiawani - Informatika FMIPA Unsyiah
33
Viska Mutiawani - Informatika FMIPA Unsyiah
Method registration method untuk masingmasing komponen
Button
MenuItem
public void addItemListener(ItemListener a){}
Choice
public void addTextListener(TextListener a){}
Checkbox
public void addActionListener(ActionListener a){} public void addTextListener(TextListener a){}
TextArea
public void addActionListener(ActionListener a){}
TextField
public void addActionListener(ActionListener a){}
public void addItemListener(ItemListener a){}
List
34
public void addActionListener(ActionListener a){} public void addItemListener(ItemListener a){} Viska Mutiawani - Informatika FMIPA Unsyiah
Latihan
Jika ditekan button -- maka nilai akan berkurang 1 Jika ditekan button ++ maka nilai akan bertambah1
35
Viska Mutiawani - Informatika FMIPA Unsyiah