BAB X
GRAPHICAL USER
INTERFACE (GUI)
A.
Tujuan
1.
Konsep GUI di Java, komponen dasar Swing
2.
Penanganan Kejadian (Event Handling)
3.
Membuat GUI dengan Netbeans
B.
Java GUI
1.
AWT (Abstract Window Toolkit)
Library
dan komponen GUI (java.awt) yang pertama kali diperkenalkan oleh Java, Sun
Microsystem
tidak merekomendasikan lagi penggunaan komponen GUI dari AWT.
2.
Swing / JFC (Java Foundation Class)
Library
dan komponen GUI (javax.swing) terbaru dari Java yang direkomendasikan Sun
Microsystem
untuk pemrograman GUI. Komponen GUI sebagian besar adalah turuan AWT
dan
lebih lengkap dari AWT.
C.
Komponen Dasar Swing
1.
Top-Level Container : container dasar dimana komponen lainnya diletakan(JFrame,
JDialog
&
Applet)
2. Intermediate Container : container perantara
dimana komponen lainnya diletakan/dikelompokan (JPanel, JScrollPane, JTabbedPane,J
Toolbar, JSplitPane)
3. Atomic Component : Komponen yang memilki fungsi
spesifik & menerima interaksi langsung dari user (Jbutton, JLabel,
JTextArea)
4. LayoutManager : mengatur tata letak dan posisi
komponen dalam container (BorderLayout, BoxLayout, FlowLayout, GridbagLayout,
GridLayout)
5. Event Handling : menangani event yang dilakukan
user (klik mouse, ketik keyboard, perbesar frame)
D.
Penggunaan Tope Level Container
1.
Komponen GUI akan ditampilkan sebagai bagian dari containment hierarchy.
- Aplikasi GUi berbasis Swing paling tidak memilki
satu containment hierarchy dengan JFrame sebagai rootnya.
- Jika sebuah aplikasi memilki satu window utama dan
dua dialog artinya aplikasi tersebut memilki tiga containment hierarchy dan
juga tiga top level container
- Satu containment hierarchy memilki JFrame sebagai
root, dan dua yang lain memilki JDialog sebagai root.
2.
Setiap komponen GUI hanya dapat dimuat pada satu top level container.
3.
Dapat menambahkan menubar pada top level container
|
File Name :
FrameBeraksi.java
|
|
import
javax.swing.*;
public
class FrameBeraksi {
public
static void main (String[] args) {
JFrame
frame = new JFrame("Frame Beraksi");
frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
JLabel
emptyLabel = new JLabel("Frame Beraksi");
frame.getContentPane().add(emptyLabel);
frame.setSize(400,200);
frame.setVisible(true);
}
}
|
E. Membuat GUI dengan NetBeans
Berikut
latihan untuk membuat project baru menggunakan NetBeans :
1.
Pilih menu File > New Project
2. Kemudian pada jendela New Project,
pilih Java pada kolom Categories. Pada kolom Categories. Pada kolom Project
pilih Java Application untuk form tunggal, lalu klik tombol Next.
3. Kemudian akan tampil seperti gambar
dibawah ini. Pada Name and Location, masukan nama proyeknya, misalnya myframe
dan tentukan juga paket (lokasi) serta folder-nya, lalu klik finish.
4. Kemudian akan tampil seperti gambar
dibawah ini. Pada jendela project pilih paket myframe, kemudian klik kanan
pilih New > JFrame Form…
5. Kemudian akan tampil seperti gambar
dibawah ini. Pada bagian name and Location, masukan nama form yang akan menjadi
nama kelasnya, misalnya FormUtama.
6. Sampai pada tahap ini anda sudah
memilki satu form, dan bisa dijalankan untuk melihat hasilnya. Caranya dengan
melakukan compile dan buid seperti gambar dibawah ini.
7. Untuk menjalankan program, pilih menu
Run > Run Main Project. Ternyata form baru tadi tidak muncul, bahkan program
langsung selesai dieksekusi. Untuk bisa menampilkan form tersebut, tambahkan pemanggilan
form pada kelas utamanya. Sehingga kelas Main.java menjadi seperti berikut ini.
|
package myframe;
public class Main {
public static void main(String[] args) {
FormPertama fp = new FormPertama();
fp.setVisible(true);
}
}
|
8.
Compile dan jalankan ulang.
9. Menambahkan komponen dalam form.
Komponen tersedia dalam jendel pallete sebelah kanan atas, mulai dari pallete Swing
sampai Borders. Untuk meletakan komponen ke dalam form lakukan klik
& drag.
- Masukan tiga komponen JLabel,
ubah property text-nya melalui jendela properties, menjadi Login, UserID
dan Password.
-
Tambahkan JTextField dan hapus property text-nya.
-
Tambahkan JPasswordField dan hapus property text-nya
- Tambahkan JButton dan ubah
property text-nya menjadi OK. Ubah nama nya dengan cara klik kanan, Change
Variabel Name..
- Untuk menambahkan event, klik kanan pada
tombol Login, pilih menu Events >Actions > actionPerformed,
lalu ketikan source code berikut.
|
private void
BtLogInActionPerformed(java.awt.event.ActionEvent evt) {
// TODO add your handling code here:
JOptionPane.showMessageDialog(this,"Selamat
Datang " +
jTextField1.getText(),"",JOptionPane.INFORMATION_MESSAGE);
}
|
Latihan
1. Buat
project baru dengan satu form untuk melakukan pertambahan, pengurangan,
perkalian dan pembagian, input dari 2 JTextField , contoh sepeti gambar dibawah
ini
2. Buat
project baru dengan satu form untuk melakukan perhitungan nilai. Input nilagi
berupa
angka,
output berupa nilai huruf, dengan ketentuan :
0
– 50 : “E”
51
– 60 : “D”
61
– 70 : “C”
71
– 80 : “B”
81
– 100 : “A”
JAWBAN
Soal
1
1. Pertama
kita open project lalu siapkan destinasi folder yang akan kita tampatkan
project aplikasi java kita
2. Lalu
kita collapse file java aplikasi kita dan kita klik kanan pada source package
nya > Klik new > pilih JFrame from dan selanjutnya akan terbuka open box
dialogue untuk penawaan dan destinasi dari badan tubuh dari aplikasi kita.
3. Setelah
itu maka akan terbuka jendela Design dimana akan terlihat form aplikasi yang akan
kita gunakan sebagai tempat pallette kita taruh atau bisa disebut juga dengan
sematkan di Form aplikasi kita
4. Maka
selanjutnya kita taruh semua palette yang kita butuhkan untuk pembuatan program
aplikasi KABATAKU, seperti gambar dibawah ini
5. Bila
sudah maka selanjutnya kita double klik pada button tambah untuk membuka dan
membentuk procedure pada jendela source secara otomatis. Lalu kita masukkan
syntax yang akan kita gunakan seperti ini
6. Setelah
itu maka kita run file yaitu dengan Shift+F6, lalu coba masukkan angka di
textfield angka1 dan angka2 yang akan diolah oleh procedure tambah dan akan
dioutputkan pada textfield hasil.
7. Bila
sudah maka selanjutnya adalah melakukan repeat coding yang sama pada button
kurang, kali dan bagi dengan meng-copy pastekan saja syntax dari tambah namun
dalam tubuh procedure saja tanpa harus mengcopy semua badan tubuh procedure
tambahnya.dan bila sudah maka akan menghasilkan proceure running program
seperti ini.
Soal
2
1.
Sama halnya dengan soal pertama di
soal kedua pun kita harus menyiapkan dulu file project terlebih dahulu
2.
Setelah semua sudah disiapkan maka
langkah selanjutnya adalah melakukan syntax pada button HASIL, klik dua kali
pada button HASIL, lalu masukkan syntax berikut.
3.
Jadi syntax diatas dapat di jelaskan,
bila user memasukkan angka pada textfield angka maka akan di scan sebagai nilai
integer pada ang1, dan ang1 akan dijadikan sebagai nilai dari “nilai” untuk
dijadikan patokan dasar dari nilai mutu yang telah di nyatakan pada if else
agar dapat dijadikanoutput nilai String pada textfield “hasil”.
