Modul Praktikum Pemrograman Berorientasi Objek (Chap.10)

1
LECTURE NOTE
AWT & SWING
Debby Ummul Hidayah, S.Kom., M.MSI
debbyummul@gmail.com

2
PEMROGRAMAN BERBASIS WINDOWS
A. Pendahuluan
Salah satu mekanime yang digunakan untuk membuat pemrograman yang
mendukung windows adalah menggunakan paket java.awt. Adapun cara lain yang
digunakan adalah menggunakan Swing. Dalam BAB ini kita akan membahas sedikit
mengenai pembuatan windows menggunakan paket java.awt. Adapun selanjutnya akan
dibahas mengenai Swing.
B. Sekilas Tentang AWT
Paket AWT (Abstract Window Toolkit) menggunakan sistem penjendelaan pada
komputer lokal. Jadi kita akan mendapatkan tampilan window yang berbeda. Hal ini
karena tampilan window untuk sistem operasi yang berbasis Microsoft Windows dan di
lingkungan Linux atau Mac, mengingat masing-masing SO memiliki sistem window
sendiri.
Perlu dikertahui bahwa setiap komponen dalam Java dipetakan ke komponen
yang ditangani oleh sistem window melalui peer interface, yang didefinisikan dalam
paket java.awt.peer.
Sebagai bahan latihan, silahkan tuliskan script kode Java berikut.

3
Buat subclass dengan nama belajarawt2.java. Pada program yang akan dibuat kita
definisikan kelas tesframe2 sebagai subclass dari kelas Frame.
C. Sekilas Tentang Applet
Perlu Anda ketahui bahwa applet merupakan program Java yang ditujukn secara
khusus agar bisa berjalan di lingkungan web browser. Web browser menunjukkan bahwa
program yang dibuat ditujukan untuk mengakses halaman web. Contoh perangkat lunak
tersebut yaitu Netscape Navigator dan Microsoft IE.
D. Pemrograman Java Swing
Swing merupakan alternatif lain yang digunakan untuk membuat pemrograman
berbasis window. Meskipun diimplementasikan berdasarkan kelas AWT, Swing tidak
menggunakan komponen-komponen yang terdapat pada AWT. Sehingga, tampilan
komponen-komponen dalam Swing tidak bergantung pada sistem window lokal. Dengan
demikian, tampilan grafik untuk semua sistem operasi menjadi serupa.
Perlu diketahui bahwa Swing dikemas dalam paket bernama javax.swing. Itulah
sebabnya program yang menggunakan fitur Swing menyertakan pernyataan:
import javax.swing.*;

4
E. GUI (Graphical User Interface)
Dari penjelasan singkat terkait AWT dan Swing mungkin ada yang bertanya-
tanya terkait aplikasi berbasis GUI. Pertanyaan yang timbul mungkin masih bingung
memilih AWT atau Swing? Untuk library AWT sebenarnya cukup baik untuk tampilan
yang sederhana, namun kurang cocok untuk pengembangan GUI. Sehingga alternatif
untuk membuat aplikasi GUI, kita bisa menggunakan Java Swing. Java Swing
merupakan bagian dari JFC (Java Foundation Classes) yang menyediakan API untuk
menangani hal yang berkaitan dengan GUI bagi program Java.
Kita bisa membedakan komponen Swing dengan komponen AWT, di mana
pada umumnya kelas-kelas yang berada dalam komponen Swing diawali dengan huruf J,
misal: JButton, JLabel, JTextField, JRadioButton.
1. Frame
Untuk membuat aplikasi Java berbasis GUI, kita butuh sebuah frame atau
applet untuk media eksekusi aplikasi GUI. Pada Java sebuah frame dapat diwakili
oleh sebuah kelas, yaitu JFrame. Melalui kelas JFrame kita bisa mendesain tampilan
Java GUI sesuai kebutuhan. Beberapa method yang penting dan sering dipakai yaitu:
a. setSize()  menentukan ukuran frame
b. setLocation()  menentukan lokasi frame pada bagian pojok kiri atas
c. setVisible()  menampilkan frame
d. setDefaultCloseOperation()  menentukan operasi ketika frame ditutup
e. setLocationRelativeTo()  menentukan lokasi frame relatif terhadap parameter
komponen yang diinputkan
f. Pack()  menentukan secara otomatis ukuran frame sesuai komponen yang
dimasukkan
2. Hello GUI Java
Untuk mempermudah pemahaman kita terhadap GUI, langsung kita
praktekan dengan membuat tampilan sederhana “Hello GUI Java”. Seperti biasa buat
projek baru dengan nama HelloGUI.java.
Tambahkan paket Java ke dalam kode program:
Pada program utama main(), kita buat sebuah frame lalu menampilkannya
ke desktop. Tuliskan script code berikut.

5
3. Menangani Input GUI
Pada sub bab ini kita akan belajar mengenai GUI Java dengan menerima
inputan. Di sini kita akan membuat kelas yang turunan dari kelas JFrame. Untuk
lebih memahaminya, kita buat projek baru dengan nama InputDataDemo.
Tambahkan kelas Java dengan nama MyInputForm. Dengan demikian, kelas
MyInputForm merupakan turunan dari kelas JFrame.
public class MyInputForm extends JFrame{
......
}
Tambahkan beberapa library sebagai berikut:
import java.awt.event.ActionEvent;
import java.awt.event.ActionListener;
Pada kelas MyInputForm tambahkan beberapa variabel berikut:
private static final int FRAME_WIDTH = 600;
private static final int FRAME_HEIGHT = 200;
private JLabel aLabel;
private JLabel bLabel;
private JLabel cLabel;
private JTextField aField;
private JTextField bField;

6
private JButton button;
private JPanel panel;
Buat konstruktor dengan nama MyInputForm()
public MyInputForm() {
createTextField();
createButton();
createPanel();
setSize(FRAME_WIDTH, FRAME_WIDTH);
}
Pada method createTextField(), tulis scrript berikut:
private void createTextField() {
aLabel = new JLabel("Nilai A: ");
bLabel = new JLabel("Nilai C: ");
cLabel = new JLabel("Hasil: ");
final int FIELD_WIDTH = 10;
aField = new JTextField(FIELD_WIDTH);
aField.setText("0");
bField = new JTextField(FIELD_WIDTH);
bField.setText("0");
}
Buat method createButton(), lalu ketikkan script berikut:
private void createButton() {
button = new JButton("Calculate");//untuk membuat tombol
"Calculate"
class AddInterestListener implements ActionListener {
//untuk event klik
@Override

7
public void actionPerformed(ActionEvent event) {
int a =
Integer.valueOf(aField.getText());//mengambil inputan textbox
int b = Integer.valueOf(bField.getText());
int c = a * b;
cLabel.setText("Hasil: " + c);
}
}
ActionListener listener=new AddInterestListener();
button.addActionListener(listener);
}
Buat method dengan nama createPanel(), lalu ketikkan script berikut:
private void createPanel() {
panel=new JPanel();
panel.add(aLabel);
panel.add(aField);
panel.add(bLabel);
panel.add(bField);
panel.add(button);
panel.add(cLabel);
add(panel);
}
Langkah selanjutnya, kita beralih ke program utama. Ketikkan script
berikut:
public static void main(String[] args) {
JFrame frame = new MyInputForm();
frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
frame.setVisible(true);
frame.setLocationRelativeTo(null);
}
Jika berhasil maka akan tampil output seperti pada Gambar 1. Isi nilai A
dengan angka 20, isi nilai B dengan angka 2. Kemudian tekan tombol Calculate. Jika
benar maka akan tampil hasil 40.

8
Gambar 1.Output perkalian AxB
F. Manajemen Layout
Java GUI menyediakan beberapa layout yang dapat digunakan pada program.
Pada modul ini akan dijelaskan 3 contoh GUI layout, yaitu:
1. Border layout
2. Grid layout
3. Box layout
Penjelasan:
Border Layout
Sebuah layout border dapat diilustrasikan pada Gambar 2, di mana kita dapat
meletakkan komponen GUI pada lokasi tertentu misal utara, barat, tengah, timur, dan
selatan. Untuk menentukan jenis layout yang akan digunakan, kita dapat memanggil
method setLayout() dan selanjutnya memasukkan objek Border Layout.

9
Utara
Barat Tengah Timur
Selatan
Gambar 2. Contoh border layout
Terlebih dulu buat projek baru dengan nama BorderLayoutForm.java. Seperti
biasa kita tambahkan library yang akan digunakan, yaitu:
import java.awt.BorderLayout;
import javax.swing.JButton;
import javax.swing.JFrame;
import javax.swing.JPanel;
Kemudian buat tampilan dengan meletakkan tombol pada 5 lokasi, yaitu utara,
barat, tengah, timur, dan selatan. Berikut script codenya:
public class BorderLayoutForm extends JFrame {
//membuat konstruktor BorderLayoutForm
public BorderLayoutForm() {

10
panel = new JPanel();
panel.setLayout(new BorderLayout());
panel.add(new JButton("1"), BorderLayout.NORTH);
panel.add(new JButton("2"), BorderLayout.WEST);
panel.add(new JButton("3"), BorderLayout.CENTER);
panel.add(new JButton("4"), BorderLayout.EAST);
panel.add(new JButton("5"), BorderLayout.SOUTH);
add(panel);
setSize(FRAME_WIDTH, FRAME_HEIGHT);
setTitle("Border Layout Demo");
}
Grid Layout
Kemudian buat kelas baru, beri nama GridLayoutForm.java. Seperti biasa
tambahkan library berikut:
import java.awt.GridLayout;
Di sini kita akan membuat layout. Kita membuat grid dengan ukuran 4x2.
Masing-masing bagian sel grid akan diisi dengan tombol.
public class GridLayoutForm extends JFrame {
public GridLayoutForm() {
panel.setLayout(new GridLayout(4, 2));

11
panel.add(new JButton("1"));
add(panel);
setTitle("Grid Layout Demo");
}
}
Box Layout
Di sini kita menentukan layout dengan bentuk box dengan orientasi X atau Y.
Kemudian buat kelas baru, beri nama BoxLayoutForm.java. Seperti biasa tambahkan
library berikut:
import javax.swing.BoxLayout;
Selanjutnya kita akan membuat layout dengan bentuk Box layout dan orientasi Y.
Tuliskan script berikut:
public class BoxLayoutForm extends JFrame {
public BoxLayoutForm() {

12
panel.setLayout(new BoxLayout(panel, BoxLayout.Y_AXIS));
add(panel);
setTitle("Box Layout Demo");
}
}
Eksekusi Aplikasi
Di sini kita lakukan instansiasi objek layout kita pada objek JFrame. Selanjutnya
kita atur setDefaultCloseOperation() dan setVisible(). Ketikkan script code berikut:
public class LayoutGUIDemo {
public static void main(String debby[]) {
JFrame frame = new BorderLayoutForm();
frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
frame.setVisible(true);
JFrame frame2 = new GridLayoutForm();
frame2.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
frame2.setVisible(true);
JFrame frame3 = new BoxLayoutForm();
frame3.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
frame3.setVisible(true);
}
}
Jika berhasil, maka akan dihasilkan output sebagai berikut:

14
G. Membuat GUI Melalui IDE
Sebelumnya kita telah belajar membuat tampilan window secara manual. Java
sendiri memiliki tool yang digunakan untuk membuat tampilan window lebih bagus dan
menarik menggunakan IDE. Untuk belajar membuat GUI dengan IDE mari ikuti
langkah-langkah berikut dengan saksama.
1. Jalankan Netbeans
2. Seperti biasa buat projek baru dengan klik menu File  New Project.
3. Kemudian pilih categories: Java dan pilih project: Java Application.
4. Lalu klik Next.
5. Lalu pada Project Name isi dengan nama projek yang ingin Anda buat, misal
NetbeanGUI.
6. Pilih tempat penyimpanan untuk projeknya.
7. Jika sudah, tekan tombol Finish
8. Selanjutnya kita akan menambahkan form baru. Caranya klik kanan pada package
netbeangui  pilih New  pilih JFrame Form.
9. Kemudian akan muncul tampilan seperti pada gambar berikut:

15
10. Pada class name silahkan isi dengan nama kelas misalnya MyFrame.
11. Jika sudah selesai, klik Finish.
12. Maka akan diperoleh tampilan editor seperti gambar berikut:
13. Untuk bagian form-nya, buat tampilan dengan properties sebagai berikut:
Komponen GUI

16
Tabel 1. Properties untuk form MyFrame
Nama Komponen Properties Nilai Properties
Label text FORM INPUT NAMA
Label text Masukkan Nama Anda:
Text Field CodeVariable Name txtInput
text <kosongkan nilainya>
Label text <kosongkan nilainya>
CodeVariable Name lbText
Button text Tampilkan Nama
CodeVariable Name jButton1
14. Tambahkan code berikut pada tombol “Tampilkan Nama”
15. Jika sudah langkah selanjutnya klik kanan pada project NetbeanGUI. Pilih menu
Build.
16. Kemudian untuk eksekusi aplikasinya tekan Shift+F6.
17. Berikut tampilan ketika kita menginputkan nama pada textBox isian nama. Dan
ketika klik tombol Tampilkan Nama muncul pesan: “Welcome, <nama yang
diinputkan> Selamat Belajar PBO ya ”.

17
H. Input Pilihan
Beberapa komponen yang digunakan sebagai input pilihan, yaitu:
1. Combo box banyak digunakan untuk mengisi salah satu dari pilihan yang ada.
Setelah kita meletakkan komponen combo box, kita dapat menambahkan nilai ke
dalamnya. Selain memasukkan data secara manual, kita juga dapat memasukkan data
secara program dengan memanfaatkan method addItem(). Berikut contoh
menambahkan data secara manual:
javax.swing.JComboBox cboKota = new javax.swing.JComboBox();
cboKota.addItem(“Jakarta”);
cboKota.addItem(“Bandung”);
cboKota.addItem(“Surabaya”);
cboKota.addItem(“Yogyakarta”);
Sedangkan untuk memperoleh item apa yang dipilih, kita dapat memanfaatkan
method getSelectedItem(). Kita akan mendapatkan objek sesuai dengan apa yang
dimasukkan. Hal objeknya String, kita cukup memanggil toString() untuk
mendapatkannya. Berikut contoh script untuk mengambil nilai yang dipilih.
String item = cboKota.getSelectedItem().toString();

18
Sedangkan untuk memperoleh item apa yang dipilih, kita bisa mendapatkan method
getSelectedItem().
Tambahkan potongan kode berikut pada action combo box:
2. Check box
Komponen ini memungkinkan kita memilih lebih dari satu dari pilihan yang
disediakan. Untuk mengetahui bahwa pengguna telah memilih sebuah check box, kita
dapat mengujinya dengan menggunakan method isSelected(). Jika bernilai true maka
check box ini dipilih.

19
Untuk mengetahui bahwa pengguna memilih lebih dari satu check box, kita dapat
mengujinya dengan menggunakan method isSelected(). Jika bernilai true maka check
box ini dipilih.
3. Radio button
Komponen ini juga memungkinkan kita untuk memilih lebih dari satu atau salah satu
dari pilihan yang ada. Kita dapat melakukan pilihan satu dengan cara melakukan
group dari beberapa radio button. Untuk menambahkan ini, kita tambahkan
komponen buttonGroup ke dalam tampilan kita. Kemudian masing-masing radio
button dimasukkan ke dalam group ini dengan cara memilih pada buttonGroup dari
propertiesnya.
Sedangkan untuk mendapatkan apakah radio button tersebut dipilih atau tidak, kita
dapat menggunakan method isSelected().

20
4. Demo
Kali ini kita akan membuat projek dengan memanfaatkan combo box, check box, dan
radio button. Seperti biasa buat projek baru, misalkan namanya Demo. Tambahkan
JFrame. Untuk nama kelasnya misalkan “DemoInputan”. Lalu finish.
I. MENU
Kebanyakan aplikasi berbasis GUI memiliki menu pada bagian atas. Untuk sesi ini kita
akan praktikan cara membuat menu. Seperti biasa buat projek baru dengan nama
“MenuGUI” Lalu tambahkan JFrame. Tambahkan menu bar ke tampilan.

21
Pada sub menu “Ubah Data” tambahkan event actionPerformed. Setelah itu tambahkan
script berikut:
JOptionPane.showMessageDialog(null, "Menu Ubah Data Dibuka");
Jika dijalankan, dan klik sub menu Ubah Data, maka tampilannya sebagai berikut:
J. COMMON DIALOG
Merupakan dialog di mana kira memilih sebuah file. Untuk praktiknya kita coba
membuat aplikasi sederhana untuk memanggil dialog File Chooser dan menampilkan
nama file beserta direktorinya ke sebuah textbox. Seperti biasa buat projek baru,
kemudian tambahkan JFrame. Buat tampilan seperti gambar berikut:

22
Lalu tambahkan File Chooser, caranya klik kanan pada Other Components  Add From
Pallete  Swing Windows  File Chooser.
Setelah itu tambahkan event actionPerformed, dan tuliskan script berikut:
FileChooser1 = new javax.swing.JFileChooser();
int i = FileChooser1.showOpenDialog(this);
if (i == javax.swing.JFileChooser.APPROVE_OPTION) {
File f = FileChooser1.getSelectedFile();
txtCari.setText(f.getPath());
}
Tekan Shift+F6. Coba klik tombol Browse File. Lalu pilih salah satu file, setelah itu
tekan Open.

24
DAFTAR PUSTAKA
Kurniawan, Agus. (2014). “Pemrograman Java Tingkat Lanjut”. Penerbit ANDI: Yogyakarta.

Modul Praktikum Pemrograman Berorientasi Objek (Chap.10)

More Related Content

What's hot (20)

Similar to Modul Praktikum Pemrograman Berorientasi Objek (Chap.10) (20)

More from Debby Ummul (17)

Recently uploaded (20)

Modul Praktikum Pemrograman Berorientasi Objek (Chap.10)