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. Form ............................................................................................................................. 5
2. 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
3. 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. Komponen-
komponen 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 Method-
method 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.
showInputDialog() Berfungsi untuk menampilkan
dialog input.
showMessageDialog() Berfungsi untuk menampilkan
dialog pesan/informasi.
showOptionDialog() Berfungsi untuk menampilkan
dialog pilihan.

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 Object-
Oriented 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 diakses pada
tanggal 11 Agustus 2018

30