BAB IX. USER INTERFACE 9.1.Dasar GUI Program GUI (Graphical

Bahasa pemrograman 1 / SI-semester 3
2009
BAB IX. USER INTERFACE
9.1.Dasar GUI
Program GUI (Graphical User Interface) merupakan metode pendesainan program ke
dunia nyata (real world) atau visual bukan dalam bentuk console. Paket yang dapat
digunakan untuk mengembangkan program-program GUI adalah AWT dan Swing.
9.1.1. Paket AWT (Abstract Window Toolkit ) dan Swing
 AWT
= sekumpulan library yang tidak tergantung pada platform
(platform independent) dan digunakan untuk menyederhanakan
implementasi user interface.
 Swing
= bentuk implementasi yang menambahkan komponen-komponen
dalam sistem GUI tetapi masih didasarkan pada arsitekstur AWT.
9.1.2. Mekanisme Event Handling
Pada saat user melakukan input elemen melalui keyboard atau melakukan
pengisian karakter , inilah yang disebut dengan “event”. Sedangkan event handling
adalah merupakan teknik /cara untuk melakukan pekerjaan tertentu pada saat suatu event
terjadi.
Mekanisme event handling ini berdasarkan pada “delegation event model” atau
model pendelegasian event. Model ini mendefinisikan cara standart dan konsisten untuk
membangkitkan dan memproses suatu event.
Konsep dari mekanisme tersebut adalah sebagai berikut: event source (sumber /
pembangkit event)
akan membangkitkan / menghasilkan suatu event tertentu ,dan
mengirimkannya ke satu / lebih event listener (pendengar event).
 Contoh event source : Obyek-obyek/komponen-komponen yang terdapat
di dalam user interface (button, listbox, combobox).
 Contoh event listener : MouseMotionListener, ItemListener,
ActionListener.
Keuntungan mekanisme tersebut adalah terdapat pemisahan yang jelas antara kode logis
yang digunakan untuk memproes event dengan kode logis untuk keperluan user interface.
1
Bahasa pemrograman 1 / SI-semester 3
2009
Contoh: objek dari kelas ActionEvent adalah event yang dibangkitkan pda saat sebuah
button di-klik, sebuah list di-doubleklik dan menu dipilih oleh user.
Contoh program 9-1
PerdanaGUI.java
Contoh program 9-2
MyFirstGUI2.java
2
Bahasa pemrograman 1 / SI-semester 3
2009
Contoh program 9-3
MySwingApplication.java
import java.awt.*;
import java.awt.event.*;
import javax.swing.*;
class MySwingApplication extends JFrame
implements ActionListener {
public JLabel label;
public JButton button;
private int numClicks = 0;
//tambahkan public MySwingApplication
setVisible(true);
}
public void actionPerformed(ActionEvent event) {
if (event.getSource() == button) {
label.setText("Jumlah klik yang dilakukan: " +
(++numClicks));
}
}
public static void main(String[] args) {
MySwingApplication app =
new MySwingApplication("Contoh Event-Handling");
}
}
3
Bahasa pemrograman 1 / SI-semester 3
2009
Hasilnya
Analisalah program di atas.
4
Bahasa pemrograman 1 / SI-semester 3
2009
Contoh program 9-4
DemoKlik.java
import java.awt.*;
import java.awt.event.*;
import javax.swing.*;
public class DemoKlik extends JFrame
implements ActionListener {
JButton tombolKlik;
JButton tombolReset;
JButton tombolTutup;
int counter = 0;
//Tambahkan public DemoKlik
setVisible(true);
}
public static void main(String[] args) {
new DemoKlik();
}
}
// mengimplementasikan method actionPerformed()
public void actionPerformed(ActionEvent e) {
if(e.getSource() == tombolKlik) {
System.out.println("Klik ke: " + ++counter);
} else if(e.getSource() == tombolReset) {
counter = 0;
System.out.println("--- Reset Counter ---");
} else if(e.getSource() == tombolTutup) {
System.exit(0);
}
}
Ketikkan listing program di bawah untuk melengkapi listing program di atas.
5
Bahasa pemrograman 1 / SI-semester 3
2009
Setelah dilengkapi hasilnya akan tampak seperti berikut:
6
Bahasa pemrograman 1 / SI-semester 3
2009
Contoh program 9-5
Tampilan1.java
import java.awt.*;
import javax.swing.*;
import java.awt.event.*;
public class Tampilan1
{
public Tampilan1()
{
JFrame frame = new JFrame();
JLabel lblPesan =new JLabel("Pesan :");
final JTextField txtPesan = new JTextField(30);
JButton btnTampil = new JButton("Tampilkan");
JButton btnKosong = new JButton("Kosongkan");
txtPesan.setText("Halo...");
btnKosong.addActionListener(new ActionListener()
{
public void actionPerformed(ActionEvent event)
{
txtPesan.setText("");
}
});
btnTampil.addActionListener(new ActionListener()
{
public void actionPerformed(ActionEvent event)
{
JOptionPane.showMessageDialog(null,txtPesan.getText());
}
});
Container contentPane = frame.getContentPane();
contentPane.setLayout(new FlowLayout());
contentPane.add(lblPesan);
contentPane.add(txtPesan);
contentPane.add(btnTampil);
contentPane.add(btnKosong);
frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
frame.pack();
frame.show();
}
public static void main(String[] args) {
new Tampilan1();
}
}
7
Bahasa pemrograman 1 / SI-semester 3
2009
Contoh program 9-6
Tampilan2.java
import java.awt.*;
import javax.swing.*;
import java.awt.event.*;
public class Tampilan2 {
public Tampilan2() {
JFrame frame = new JFrame();
final JTextField txtInfo1 = new JTextField(20);
final JTextField txtInfo2 = new JTextField(20);
JButton btnSalin = new JButton("Salin");
JButton btnPindah = new JButton("Pindah");
txtInfo1.setText("nn");
txtInfo2.setText(" ");
Container contentPane = frame.getContentPane();
contentPane.setLayout(new FlowLayout());
contentPane.add(txtInfo1);
contentPane.add(btnSalin);
contentPane.add(btnPindah);
contentPane.add(txtInfo2);
frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
frame.pack();
frame.show();
}
public static void main(String[] args) {
new Tampilan2();
}
}
8
Bahasa pemrograman 1 / SI-semester 3
2009
Output program Tampilan1.java
apabila tombol Tampilkan di-klik maka akan tampil seperti di bawah.
Output program Tampilan2.java
TeksField1
TeksField2
Latihan
1. Modifikasilah program Tampilan2.java sehingga dapat mengaplikasikan tombol Salin
dan Pindah. Dengan ketentuan untuk tombol Salin adalah menyalin data teks yang
berasal dari TeksField1 disalin ke TeksField2 (TeksField1 dan TeksField2 berisi data
yang sama), sedangkan tombol Pindah adalah untuk memindahkan data TeksField1 ke
data TeksField2 sehingga data TeksField1 hilang.
2. Simpan File di atas dengan nama Tampilan3.java
3. Buatlah tampilan yang terdiri dari 2 teksfield dan 3 button, seperti tabel di bawah ini
9
Bahasa pemrograman 1 / SI-semester 3
Event source
TeksField1
TeksField2
Button1
Button2
Button3
1. Tampilan awal
Button1
Keterangan
Mengisikan NIM
Mengisikan Nama
Tampilkan NIM
Tampilkan Nama
Kosongkan
Button2
TeksField1
2009
Button3
TeksField2
2. Button1 (Tombol1) di-Klik
3.Button2 (Tombol2) di-klik
4.Button3 (Tombol3) di-klik
10