GRAPHICAL USER INTERFACE (GUI) Pokok Bahasan 1. komponen dasar swing 2. JButton,JCheckBox, dan JRadioButton 3. JLabel, JTextField dan JPassword Field 4. JTextArea, JComboBox, JList 5. Memahami tentang event/kejadian 6. Memahami tentang cara menangani event/kejadian Tujuan Belajar Dengan praktikum ini mahasiswa diharapkan dapat: 1. Memahami komponen dasar swing 2. Memahami implementasi swing dalam program 3. Mengimplementasikan button,check box, dan radio button dalam program 4. Mengimplementasikan label,text Field dan Password Field dalam program 5. Mengimplementasikan TextArea,ComboBox, ListBox dalam program 6. Mengimplementasikan Menu dan File chooser dalam program 7. Memahami tentang event/kejadian 8. Membuat program GUI yang dilengkapi dengan event/kejadian Dasar Teori Komponen Dasar Swing Secara umum terdapat 5 bagian swing yang akan sering digunakan yaitu: A. Top-level Container, merupakan container dasar dimana komponen lainnya akan diletakkan. Contoh container seperti ini, yaitu Frame, Dialog, dan Applet yang diimplementasikan berupa class Jframe, Jdialog, dan Japplet. B. Intermediate Container, merupakan container perantara dimana komponen lainnya akan diletakkan, salah satu contohnya pane yang diimplementasikan berupa class Jpanel. C. Atomic Component, merupakan komponen yang memiliki fungsi yang spesifik, dimana umumnya user langsung berinteraksi dengan komponen jenis ini. Contoh Jbutton, Jlabel,JtextField, dan JtextArea 1
D. Layout Manager, berfungsi untuk mengatur bagaimana tata letak atau posisi komponen yang akan diletakkan, satu sama lain di dalam suatu container. Contoh BorderLayout, BoxLayout,FlowLayout, GridBagLayout, dan GridLayout. E. Event Handling, untuk menangani event yang dilakukan oleh user seperti menekan tombol, memperbesar atau memperkecil ukuran frame dll What is event? Yang dimaksud dengan event adalah: 1. Ketika user melakukan aksi terhadap sebuah user interface (misalnya meng-klik mouse atau menekan sebuah tombol), maka tindakan ini akan memunculkan sebuah event. 2. Event adalah OBJEK yang mendeskripsikan sebuah kejadian (peristiwa yang terjadi) 3. Event Source adalah pembangkit sebuah event, misalnya mouse click pada sebuah button akan membangkitkan sebuah ActionEvent dgn button sbg Event Source-nya. 4. Event Handler adalah sebuah method yang menerima sebuah objek event, menterjemahkan, dan kemudian memproses interaksi user. Event Listener 1. Swing menghandle event dengan sekumpulan interface yang disebut dengan Event Listeners 2. Setiap kategori event, terdapat sebuah interface listener yang bersesuaian. 3. Listener tsb harus diimplementasikan oleh class dari objek yang akan menerima event tersebut. 4. Listener ini akan menetapkan method mana yang harus didefinisikan dalam sebuah class yang sesuai untuk menerima tipe event tersebut. 5. Method-method ini akan dipanggil ketika event ybs terjadi. 2
Kategori Event, Interface & Methodnya Kategori Nama Interface Method Action ActionListener actionperformed(actionevent) Item ItemListener itemstatechanged(itemevent) Mouse MouseListener mousepressed(mouseevent) mousereleased (MouseEvent) mouseentered (MouseEvent) mouseexited (MouseEvent) mouseclicked (MouseEvent) Mouse Motion MouseMotionListener mousedragged (MouseEvent) mousemoved (MouseEvent) Key KeyListener keypressed(keyevent) keyreleased (KeyEvent) keytyped (KeyEvent) Focus FocusListener focusgained(focusevent) focuslost (FocusEvent) Tahapan membuat aplikasi GUI : 1. Membuat Project baru 2. Menambahkan JFrame Form (top level container) 3. Diatas JFrame diletakkan JPanel (intermediate container) 4. Tempelkan atomic (GUI) component 5. Edit text dari tiap component 6. Edit nama variable dari tiap component (untuk mempermudah coding) 3
7. Rapikan tampilan dengan mengedit JFrame, JPanel dan mengubah Layout 8. Pilih component yang akan mengelola event dan pilih jenis event sesuai dengan kebutuhan 9. Tambahkan kode di method event yang disediakan Latihan 1 : Membuat program yang menghitung konversi suhu dari Celcius ke Fahrenheit. Langkah-langkah yang dilakukan : 1. Buat project dengan nama CelciusToFahrenheit, uncheck create Main Class 2. Menambahkan JFrame Form pada project. Nama frame : CelciusToFahrenheitGUI dan package : GUI 3. Menenmpatkan GUI Component ke Design (Frame) 4
4. Mengubah text dari Component (Edit Text) JTextField1: Kosongi JLabel1: Celcius JLabel2: Fahrenheit JButton1: Convert 5
5. Mengubah nama variable dari setiap GUI Component (change variable name) JTextField1: celciustextfield JLabel1: celciuslabel JLabel2: fahrenheitlabel JButton1: convertbutton 6
6. Rapikan tampilan frame program yang telah dibuat (potong yang tidak perlu) 7
7. Buat event untuk convert button dengan cara Klik Kanan Pada Convert Button, Pilih Event Action ActionPerfomed, atau Pilih Event Mouse MouseClick 8. Buat code untuk event handling di convert button double fahrenheit = Double.parseDouble(celciusTextField.getText()) * 1.8 + 32; fahrenheitlabel.settext(fahrenheit + " Fahrenheit"); 9. Jalankan program dan akan tampil hasilnya 8
10. Menggunakan variable properties Latihan 2 : Buatlah program untuk pertambahan dua angka seperti dalam tampilan berikut ini! Latihan 3 : Buatlah program untuk operasi dua angka seperti dalam tampilan berikut ini! 9