Modul 6 Java GUI [PDF]

Citation preview

1



TIM PENYUSUN NIM



Nama



Kode Asisten



1202162042



Anisa Agustina



ANS



1202160214



Achmad Indra Fauzan



ZLN



1202164312



Ahmad Ghifari Akbar



GFR



1202164072



Ayu Fitriani



AAR



1202164224



Chaerunnisa Vithaloka R.



VTH



1202164157



Defny Yutama Alfinda Lewenussa



DYL



1202164245



Engla Raafi



ERF



1202164032



Faathir Muhammad



FAT



1202160202



Fadel Achmed Ganesha



GAG



1202164273



Fiko Redha Febiansyah



RED



1202164213



Fikri Miftah Maulana



FMM



1202164150



Haidar Alvinanda Sulistyo



HAI



1202164136



Isye S Adhiwinaya



SYE



1202160205



Made Adidharma Torutama



TOR



1202164204



Mohamad Azka Julda Suparman



AZK



1202160372



Mohammad Aufar



MAF



1202164305



Nadya Maulidina Rusdi



NDE



1202160253



Retna Taqiyyah Adiba



RTA



1202162274



Revandika Pratama S.



RVD



1202160185



Sang Putu Santika Wiranatha



WIR



1202164012



Syasya Sahira



SYA



DAFTAR ISI TIM PENYUSUN.......................................................................................................................... 2 Tujuan Praktikum ....................................................................................................................... 4 1.



Landasan Teori ................................................................................................................... 4 1.1.



2.



3.



Form ............................................................................................................................. 5



Komponen ........................................................................................................................... 6 2.1.



JLabel........................................................................................................................... 6



2.2.



JTextField, JPasswordField dan JTextArea ............................................................... 7



2.3.



JButton ........................................................................................................................ 8



2.4.



JCheckbox ................................................................................................................... 8



2.5.



JradioButton .............................................................................................................. 10



2.6.



JComboBox ............................................................................................................... 12



2.7.



JMenuBar................................................................................................................... 13



Layout Manager ................................................................................................................ 14 3.1.



Flow Layout ............................................................................................................... 14



3.2.



Border Layout ............................................................................................................ 16



3.3.



Grid Layout................................................................................................................. 18



4. Events ................................................................................................................................... 19 5. Latihan Dan Contoh Soal ..................................................................................................... 21 DAFTAR PUSTAKA ................................................................................................................... 30



3



MODUL 6 Java Swing (GUI) Tujuan Praktikum 1. Praktikan mampu memahami konsep GUI 2. Praktikan mampu memahami komponen-komponen pada library Swing 3. Praktikan mampu membuat aplikasi GUI menggunakan library Swing 4. Praktikan mampu memahami konsep dan menerapkan Action Listener 5. Praktikan mampu mengimplementasikan GUI serta Event Action yang ada pada Java



1. Landasan Teori Graphical User Interface (GUI) merupakan tampilan interface grafis pada suatu aplikasi yang berfungsi sebagai jembatan atau perantara antara pengguna dengan aplikasi. Pada pemograman Java terdapat komponen untuk membangun GUI. Salah satu komponen yang dapat digunakan adalah komponen Swing. Komponen tersebut didefinisikan dalam package paket javax.swing pada java yang merupakan komponen GUI yang diturunkan dari Abstract Windowing Toolkit (AWT) dalam paket java.awt. Perhatikan Gambar Berikut:



Gambar Hirarki Class pada Swing



4



1.1.



Form



Form adalah tempat berisi (component) java GUI. JFrame adalah sebuah fungsi yang sering digunakan dalam pemakaian GUI. Size (width-height) pada JFrame dapat diatur sesuai kebutuhan. Contoh penggunaan JFrame:



Gambar 1.1 Code Form



Gambar 1.2 Hasil Code Form



5



2. Komponen Komponen adalah isi yang ada di dalam Form, contoh komponen seperti JTextField, JPasswordField dan JTextArea, JLabel, JButton, JCheckBox, JRadioButtno, JComboBox, dan JMenuBar



2.1. JLabel Fungsi dari Label adalah untuk menampilkan suatu teks di GUI. Teks pada umumnya bersifat read-only. Kelas untuk menampilkan label di GUI bernama JLabel. Contoh penggunaan JLabel:



Gambar 2.1 Code Jlabel



Gambar 2.2 Hasil Code Jlabel



6



2.2. JTextField, JPasswordField dan JTextArea JTextField dan JPasswordField adalah fungsi area yang digunakan untuk menampilkan, mengedit, atau menuliskan teks. Perbedaan antara JTextField dengan JPasswordField yaitu penampilan teks dengan format asterisk (*) pada JPasswordField. Contoh Penggunaan:



Gambar 2.3 Code dan hasil JTextField, JPasswordField dan JTextArea



7



2.3. JButton JButton merupakan komponen untuk menampilkan tombol yang terdiri dari beberapa tipe, yaitu command button, toggle button, check boxes, dan radio button. Command button mengaktifkan ActionEvent ketika diklik. Command button diturunkan dari kelas AbstractButton dan dibuat bersama dengan kelas JButton. Contoh Penggunaan:



Gambar 2.4 Code JButton



Gambar 2.5 Hasil Code JButton



2.4. JCheckbox JCheckBox merupakan komponen grafis yang hanya mempunyai dua macam keadaan (state) atau nilai (value) yaitu on/off atau true/false. Selain JCheckBox, komponen lain yang juga mempunyai dua macam keadaan atau nilai adalah JToggleButton dan JRadioButton. Anda dapat berpindah (toggle) dari satu keadaan 8



(nilai) ke keadaan (nilai) yang lain dengan cara mengklik untuk memberi tanda centang (selected) atau menghilangkan tanda centang (deselected) di check box. Pada kelas JCheckBox mengubah nilai ItemEvent. Pengubahan nilai ItemEvent ini ditangani oleh interface ItemListener yang mendefinisikan method itemStateChanged. Method getStateChange pada kelas ItemEvent mengembalikan nilai integer ItemEvent.Selected atau ItemEvent.Deselected. JRadioButtons memiliki dua status yaitu selected dan deselected. Contoh JCheckBox:



9



Gambar 2.6 Code JCheckBox



Gambar 2.7 Hasil Code JCheckBox



2.5. JradioButton JRadioButton merupakan komponen turunan dari JtoggleButton. Komponen ini memiliki nilai 1/0 atau true/false. Pengubahan nilai ItemEvent ini ditangani oleh interface ItemListener yang mendefinisikan method itemStateChanged. Method getStateChange pada kelas ItemEvent mengembalikan nilai integer ItemEvent.Selected atau ItemEvent.Deselected. JRadioButtons memiliki dua status yaitu selected dan deselected. Pada umumnya radio button ditampilkan dalam sebuah group yaitu ButtonGroup. Hanya satu radio button di dalam suatu group yang dapat dipilih pada satu waktu. Pemilihan satu button menyebabkan button lain berstatus off. Contoh Penggunaan JRadioButton



10



Gambar 2.8 Code JRadioButton



Gambar 2.9 Hasil Code JRadioButton 11



2.6. JComboBox JComboBox merupakan komponen GUI (Graphical User Interface) yang berfungsi untuk menampilkan daftar suatu item. Penggunaan konstruktor dari JComboBox adalah sebagai berikut: JcomboBox(arrayOfNames); Setiap item di JComboBox diberi indeks numerik. Elemen pertama diberi indeks 0 dan elemen tersebut dimunculkan sebagai item yang dipilih pada saat instance JComboBox tampil untuk pertama kalinya. Method penting JComboBox adalah sebagai berikut: 1. getSelectedIndex() mengembalikan indeks dari item yang sedang dipilih 2. setMaximumRowCount(n)



menentukan



jumlah



maksimum



elemen



yang



ditampilkan ketika pengguna mengklik instance JComboBox. ScrollBar secara otomatis dihasilkan. Contoh Penggunaan:



Gambar 2.10 Code JComboBox



12



Gambar 2.11 Hasil Code JComboBox



2.7. JMenuBar Menu merupakan salah satu bagian yang penting dalam GUI (Graphical User Interface). Objek menu dipasang pada objek kelas yang memiliki method setJMenuBar. Menu juga memiliki ActionEvent sehingga dapat dioperasikan. Gambar berikut menunjukan tampilan JMenuBar Contoh Penggunan :



Gambar 2.12 Code JMenuBar 13



Gambar 2.13 Hasil Code JMenuBar



3. Layout Manager Layout Manager menyusun komponen GUI di atas container. Penggunaan layout memberikan kemudahan dibandinkan dengan menentukan ukuran dan posisi setiap komponen, sehingga para programmer akan lebih berkonsentrasi terhadap look and feel saja. Pada layout manager, komponen diletakan dari kiri ke kanan dan lalu ke baris berikutnya. Komponen dapat diletakan dengan cara rata kiri, di tengah, ataupun rata kanan. Nilai defaultnya adalah di tengah. Tipe-tipe layout dapat berupa FlowLayout, BorderLayout, GridLayout.



3.1. Flow Layout FlowLayout adalah layout yang menyusun komponen dari kiri ke kanan, selanjutnya ke baris berikutnya. Jika ukuran window diperbesar ukuran komponen pada FlowLayout tidak berubah. Method-method penting dari FlowLayout adalah sebagai berikut: setAlignment(position): method untuk menentukan posisi layout. Nilai positition



dapat



berupa



FlowLayout.LEFT,



FlowLayout.CENTER,



atau



FlowLayout.RIGHT, yang masing-masing mengatur posisi rata kiri, rata tengah, atau rata kanan. layoutContainer(container): method untuk melakukan update container.



14



Cara Penggunaan :



Gambar 3.1 Code Flow Layout



Gambar 3.2 Hasil Code Flow Layout



15



3.2. Border Layout BorderLayout merupakan default manager untuk ContentPane. Layout ini menyusun komponen ke dalam 5 region, yaitu north, south, east, west, dan center. Komponenkomponen dapat diletakan pada: North/South. Komponen di region ini dapat diperluas secara vertical East/West. Komponen di region ini dapat diperluas secara horizontal Center. Komponen di region ini dapat diperluas secara vertikal dan horizontal Methodmethod penting yang dapat digunakan pada BorderLayout adalah sebagai berikut: o



Konstruktor BorderLayout(hGap, vGap). Argumen hGap adalah ukuran gap horisontal antar region. Argumen vGap adalah ukuran gap vertikan antar region. Nilai defaultnya adalah 0 baik untuk vertikal maupun horizontal.



o



myContainer.add(component, position) menambahkan komponen ke layout. Argaumen component menunjukan komponen yang ditambahkan ke layout, sedangkan argumen position menunjukan posisi peletakan komponen, sebagai contoh BorderLayout.NORTH, BorderLayout.South, BorderLayout.EAST, BorderLayout.WEST, ataupun BorderLayout. CENTER.



Gambar 3.3 North, South, East, West



16



Contoh Penggunaan:



Gambar 3.4 Code Border Layout



Gambar 3.5 Hasil Code Border Layout 17



3.3. Grid Layout Grid layout membagi setiap komponen pada container menjadi baris dan kolom. Dengan adanya Grid Layout maka secara otomatis akan mengatur ukuran setiap komponen menjadi sama. Komponen yang ditambahkan ke layout dimulai dari bagian kiri lalu ke kanan. Kemudian jika satu baris telah terpenuhi maka akan menambahkan baris baru dibawahnya dengan mekanisme yang sama. Dengan menggunakan Grid Layout kita bisa menentukan berapa jumlah kolom dan baris yang diperlukan dan jarak horizontal dan vertikal antara setiap baris dan kolom tersebut



Contoh penggunaan : Gambar 3.6 Code Grid layout



Gambar 3.7 Contoh Output Kode GridLayout 18



4. Event Event adalah sebuah respon yang memicu sebuah komponen untuk melakukan sebuah method yang telah ditentukan sebelumnya, Banyak hal yang bisa dilakukan dengan menggunakan Events. Contohnya, jika kita ingin membuat sebuah button untuk memunculkan komponen lain maka kita bisa melakukannya dengan menggunakan event



. Gambar 4.1 Kode Event



. Gambar 4.2 Contoh Output Kode Event.



19



4.1. Handling Mouse Event Mouse Event berguna untuk memicu sesuai dengan method yang telah ditentukan dengan adanya respon yang dikendalikan melalui perangkat mouse. Contohnya, kita dapat menggunakan MouseListener untuk men-Trigger event dengan menekan tombol pada mouse. MouseMotionListener dapat digunakan untuk memicu event dari pergerakan mouse. Dan yang terakhir ada MouseWheelListener yang digunakan untuk memicu event dari pergerakan scroll pada mouse. 4.2. JOptionPane JOptionPane merupakan sebuah kelas yang dapat memunculkan jendela dialog. Banyak hal yang tentunya bisa dilakukan dengan JOptionPane seperti menampilkan informasi, menampilkan pesan error, menampilan jendela dialog konfirmasi dan lain-lain. Pada JOptionPane terdapat empat fungsi yang sering kali digunakan yaitu :



showConfirmDialog()



Berfungsi untuk menampilkan dialog konfirmasi. Berfungsi untuk menampilkan dialog input. Berfungsi untuk menampilkan dialog pesan/informasi. Berfungsi untuk menampilkan dialog pilihan.



showInputDialog() showMessageDialog() showOptionDialog()



Gambar 4.3 Kode JOptionPane



20



Gambar 4.4 Menampilkan Input Dialog.



Gambar 4.5 Menampilkan Message Dialog.



5. Latihan Dan Contoh Soal 5.1. Latihan 1. Dibutuhkan sebuah program sederhana untuk sebuah klinik. Program tersebut harus bisa menghitung berat badan ideal seseorang dengan memasukan tinggi badan dan berat badan saat ini. Dan hasilnya akan ditapilkan di program tersebut



21



22



23



24



Gambar 5.1 Output Latihan 2. Buatlah Program untuk menghitung suhu/ converter suhu dari Celsius ke reamur, farhrenheit, dan kelvin Class InputSuhu.Java



25



26



Gambar 5.2 Class InputSuhu Code



27



KonversiSuhu.java



Gambar 5.3 Class KonversiSuhu Code



TampilanSuhu.java



28



Gambar 5.4 Class TampilanSuhu Code



Gambar 5.5 Display Output Converter Suhu



5.2. Contoh Soal 1. Buat formulir pendaftaran untuk mahasiswa baru di Universitas Telkom. Formulir tersebut harus berisi nama, tanggal lahir, besar, dan tahun-nya masuk Universitas Telkom. dan tampilkanlah hasilnya.



29



DAFTAR PUSTAKA 1. Abstract Class and Abstract Method. Retrieved from Book (An Introduction to ObjectOriented Programming with Java, 5th Edition). 2. Labwork Handbook OOP Modul 5 Java Swing (GUI) 2017 3. https://www.homeandlearn.co.uk/java/java_radio_buttons.html tanggal 11 Agustus 2018



30



diakses



pada