Graphical User Interfaces (GUI)

Tujuan : Setelah mempelajari bab ini anda diharapkan mampu : Membuat program dengan komponen Swing. Memahami hubungan antara AWT dan Swing Dapat mendesain dan membuat program berbasis GUI Menjelaskan konsep OOP digunakan dalam GUI. MATERI 1. Pengantar 2. Java GUI : dari AWT ke Swing 3. Komponen Swing 4. Java Event Model 5. Studi Kasus : mendesain dasar GUI 6. Kontainer dan Layout Manager 7. Checkboxes, Radio Buttons, dan Borders 8. Menu dan Scroll Down
1. Pengantar

Graphical User Interface (GUI) merupakan cara untuk berinteraksi dengan program, menjadikan program terlihat lebih bagus. Bab ini akan membahas komponen dasar GUI seperti tombol, text fields, label dan text area. Selain iut juga difokuskan pada desain dan pembuatan GUI agar mudah digunakan oleh user. Librari Java GUI cukup besar sehingga akan kita batasi pembahasannya pada komponen yag mudah digunakan, termasuk kontainer, check boxes, radio button, dan menu. Kita akan mencoba untuk mengidentifikasi konsep yang dapat diaplikasikan untuk mendesain interface lebih lanjut. Karena class Java GUI menyediakan contoh OO desain yang baguss, kita akan membahas beberapa prinsip dan keputusan desain yang penting yang berpengaruh pada pengembangan Java GUI class termasuk AWT dan Swing.
2. Java GUI : Dari AWT ke Swing

Sejak versi 1.2 JDK tahun 2000, Java telah memasukkan librari yang berisi komponen GUI. Abstract Windowing Toolkit (AWT) telah dimasukkan sejak versi 1.0 JDK dan Swing komponen diperkenalkan mulai versi 1.1 JDK dan telah direvisi pada JDK versi 1.2. Meskipun AWT cukup mampu untuk membuat sebuah Java Applet, namun kurang mampu untuk membuat sebuah aplikasi yang baguss. Seperti banyak program, seperti pengolah kata dan spreadsheets, membutuhkan GUI tidak hanya yang dimiliki AWT. Masalah utama dari AWT adalah ketergantungan pada sistem operasi, yang berarti program java GUI mengikuti elemen GUI yang disediakan oleh sistem operasi. Sebuah program Java GUI yang berjalan di Window memiliki ketergantungan dengan code Window untuk mengimplementasikan button dan textfield. Begitu juga yang berjalan dengan platform sistem operasi lainnya. Hal ini menjadikan AWT menjadi tidak efisien dan kurang bisa menyesuaikan diri. Berbeda dengan komponen GUI Swing yang merupakan bagian dari Java Foundation Classes (JFC), yang merupakan sekumpulan class yang tidak tergantung dengan platform yang digunakan. Librari Swing memudahkan untuk menuliskan program GUI di Java. Karena menggunakan kode program yang telah disediakan Java, menjadikan program GUI dengan Swing independen terhadap sistem operasi. Sehingga program mudah dipindahkan tidak

seperti AWT. Program yang menggunakan komponen Swing akan terlihat lebih bagus seperti Mac, Windows atau platform Unix. Gambar 1 dan gambar 2 menunjukkan hubungan antara AWT dan Swing. Top-level dari class Swing terdiri dari Japplet, Jdialog, Jframe dan Jwindow yang secara langsung memiliki subclass dengan AWT.
Gambar 1. Class Swing classes : hubungan antara AWT dengan Swing.

Gambar 2. Class Swing : Komponen class dari GUI Swing GUI.

3. Swing Component Set

Komponen Java Swing didefisinikan sebagai kumpulan paket dengan nama javax.swing.*, yang akan diimport ke dalam program yang menggunakannya. Sebagai contoh :
javax.swing.event.* javax.swing.text.* javax.swing.plaf.*

Package javax.swing.event mendefinisikan beberapa event Swing dan listenernya, seperti MenuEvent dan MenuListener.

13.5. The Java Event Model Contoh aplikasi GUI sederhana untuk menangani event action pada Jbutton :
import javax.swing.*; import java.awt.event.*; public class MyGUI extends Jframe implements ActionListener { private JButton clickme = new JButton("ClickMe"); public MyGUI() { // Add clickme to the GUI and assign it a listener getContentPane().add(clickme); clickme.addActionListener(this); setSize(200,200); setVisible(true); } // init() public void actionPerformed(ActionEvent e) { if (e.getSource() == clickme) { clickme.setText(clickme.getText()+"*"); } } // actionPerformed() public static void main(String args[]) { MyGUI gui = new MyGUI(); } } // MyGUI class

13.5.1. Event Classes

Meskipun model event sama antara AWT dan Swing, paket Swing menambahkan event tambahan. Tabel berikut berisi Event yang dimiliki oleh AWT dan Swing.
Table 13.1. Java's AWTEvents for each Component type

Component
Button, JButton CheckBox, JCheckBox CheckboxMenuItem, JCheckboxMenuItem Choice, JPopupMenu Component, JComponent

Event
ActionEvent ItemEvent ItemEvent ItemEvent ComponentEvent

Description User clicked button User toggled a checkbox User toggled a checkbox User selected a choice Component was moved or resized Component acquired or lost

FocusEvent

Table 13.1. Java's AWTEvents for each Component type

Component

Event

Description focus

KeyEvent MouseEvent Container, JContainer ContainerEvent

User typed a key User manipulated the mouse Component added/removed from container User double-clicked a list item User clicked a list item User selected menu item User moved scrollbar User edited text User typed Enter key User manipulated window

List, JList

ActionEvent ItemEvent

Menu, JMenu Scrollbar, JScrollbar TextComponent, JTextComponent TextField, JTextField Window, JWindow

ActionEvent AdjustmentEvent TextEvent ActionEvent WindowEvent

Original source: David Flanagan, Java in a Nutshell, 2d ed., O'Reilly Associates, 1997. Modified for Swing components.
13.6. Case Study: Mendesain GUI

Apa yang melandasi user interface? Sebagai acuan gunakan beberapa hal berikut : Sebagai cara untuk menyiapkan bantuan/guidance kepada user Sebagai cara untuk memasukkan informasi Sebagai cara untuk menampilkan informasi Sebagai cata untuk mengontrol interaksi antara user dengan peralaran Pikirkan tentant interface dari mesin makanan. Teks yang tercetak dari mesin akan member tahu kita apa yang kita pilih, dan dimana menempatkan uang, dan peringatan apa yang salah dengan kita. Slot koin digunakan untuk menempatkan uang. Disitu tertera informasi berapa uang yang harus dimasukkan. Dan tersedia tombol untuk mengontrol interaksi dengan mesin. Sama halnya dengan elemen dalam interaksi computer. Desain GUI lebih ditekankan pada proses untuk memilih komponen agar dapat lebih efektif menyajikan input, output, control dan panduan kepada user. Sebagai contoh lihat pembahasan berikut dengan menggunakan komponen Swing : JLabel, JTextField, JTextArea dan JButton.
13.6.1. Program Konversi Jarak

Aplikasi berikut digunakan untuk melakukan konversi jarak dari mil ke kilometer. Program akan menerima input dari user jarak dalam mil dan akan menampilkan persamaan jarak dalam kilometer. Dimana untuk menghitung konversi jarak : 1 Kilometer = 0,62 mil. Sebagai tahap awal pertama definisikan sebuah class dengan nama MetricConverter seperti berikut :
public class MetricConverter { public static double milesToKm(double miles) { return miles / 0.62;

} }

Pemilihan Komponen

Pertama pilih komponen Swing untuk menangani input, output, control dan panduan. Komponen yang dibutuhkan adalah : JLabel digunakan untuk menampilkan teks, image atu keduanya. Dalam AWT digunakan istilah Label, tetapi tidak bias menampilkan image. Sebuah JLabel tidak bias menerima input, hanya digunakan untuk menampilkan teks yang statis saja sehingga dapat dijadikan sebagai alat untuk menampilkan panduan program. JTextField merupakan komponen yang mengijinkan user untuk mengedit teks satu baris saja. Identik dengan TextField di dalam AWT. JTextArea merupakan komponen untuk input atau output yang berisi beberapa baris teks. JButton akan mengontol dari interface program. Dengan mengimplementasikan ActionListener interface akan dapat menangani aksi dari sebuah event.
Designing a Layout

Gambar berikut merupakan desain dari layout program konversi yang akan dibuat.

Gambar berikut menjelaskan desain dari class Converter, yang merupakan turunan dari class JFrame dan mengimplementasikan interface ActionListener. Sebagai subclass dari JFrame, maka dapat menggunakan komponen dari GUI. Sebagai bentuk implementasi dari interface ActionListener, maka akan dapat menangani aksi dari event dengan menggunakan method actionPerformed().

Berikut ini adalah class Converter yang dibuat :

import javax.swing.*; import java.awt.*; import java.awt.event.*; public class Converter extends JFrame implements ActionListener{ private JLabel prompt = new JLabel("Distance in miles: "); private JTextField input = new JTextField(6); private JTextArea display = new JTextArea(10,20); private JButton convert = new JButton("Convert!"); public Converter() { getContentPane().setLayout(new FlowLayout()); getContentPane().add(prompt); getContentPane().add(input); getContentPane().add(convert); getContentPane().add(display); display.setLineWrap(true); display.setEditable(false); convert.addActionListener(this); } // Converter() public void actionPerformed( ActionEvent e ) { double miles = Double.valueOf(input.getText()).doubleValue(); double km = MetricConverter.milesToKm(miles); display.append(miles + " miles equals " + km + " kilometers\n"); } // actionPerformed() public static void main(String args[]) { Converter f = new Converter(); f.setSize(400, 300); f.setVisible(true); f.addWindowListener(new WindowAdapter() { public void windowClosing(WindowEvent e) { System.exit(0); // Quit the application } });

} // main() } // Converter class

Kita akan menuliskan pengaturan komponen di dalam constructor. Pertama set layout dari JFrame dengan FlowLayout. Sebuah layout manager digunakan untuk mengatur komponen agar tampil lebih baik. Selanjutnya perintah yang digunakan untuk mengatur layout dan menambah komponen secara langsung ke dalam JFrame. Untuk menambahkan komponen secara langsung ke dalam JFrame, kita harus menambahkannya ke dalam content pane dengan perintah :
getContentPane().add(input);

Sebuah content pane merupakan sebuah JPanel yang menyediakan area dari JFrame, terdiri dari semua komponen frame. Akhirnya, atur seemua intanisari, visibilitas, dan even untuk keluar di method main() seperti berikut :
public static void main(String args[]) { Converter f = new Converter(); f.setSize(400, 300); f.setVisible(true); f.addWindowListener(new WindowAdapter() { public void windowClosing(WindowEvent e) { System.exit(0); // Quit the application } }); } // main()

13.6.2. Inner Class dan Adapter Class

Di bagian ini akan dikenalkan dua fitur bahasa, inner class dan adapter class, yang digunakan dalam method main() seperti yang ditujukan untuk menutup jendela aplikasi Converter seperti berikut :
f.addWindowListener(new WindowAdapter() { public void windowClosing(WindowEvent e) { System.exit(0); } });

Potongan kode di atas menyediakan sebuah listener untuk menutup window/jendela/frame. Pada saat event terjadi, aplikasi akan ditutup dengan memanggil perintah : System.exit().
Inner classes

Inner class adalah calss yang didefinisikan di dalam class lain. Sintak dapat dituliskan di dalam subclass dari WindowAdapter dan membuat sebuah instance untuk melayani sebagai listener untuk menutup window. Anonymous inner class menyediakan cara yang bagus untuk membuat class dan obyek untuk menangani listener. Adapter class merupakan class yang membungkus implementasi abstrak method untuk menangani beberapa interface. Contohnya adalah WindowAdapter class

mengimplementasikan method interface WindowListener. Pada saat mengimplementasikan sebuah interface, seperti ActionListener, maka harus juga mengimplementasikan semua method abstrak yang didefinisikan dalam interface. Untuk ActionListerner hanya memiliki satu method saja yaitu actionPerformed().

13.6.3. Modifikasi Program Converter dengan : Button Array Buat terlebih dahulu
public abstract interface KeyPadClient{ public void keypressCallback(String s); }

Untuk membatasi input agar tidak bias diinput dengan selain angka, maka akan dibuat tampilan dari program dimodifikasi seperti pada gambar di bawah. Dari gambar terlibat bahwa tampilan program ditambah dengan 12 tombol untuk menangani input.

Untuk menangani keypad, maka dibuatkan sebuah class Keypad seperti berikut :
import java.awt.*; import java.awt.event.*; import javax.swing.*; public class KeyPad extends JPanel implements ActionListener{ private private private private final static int NBUTTONS = 12; KeyPadClient kpc; // Pemilik KeyPad JButton buttons[]; String labels[] = // array untuk label button { "1","2","3", "4","5","6", "7","8","9", "C","0","." };

public KeyPad(KeyPadClient kpc) { this.kpc = kpc; buttons = new JButton[NBUTTONS]; // buat array for(int k = 0; k < buttons.length; k++) { // untuk tiap button buttons[k] = new JButton(labels[k]); // Buat sebuah button

buttons[k].addActionListener(this); // dan listener add(buttons[k]); // dan tambhakan ke panel } // for } // KeyPad() public void actionPerformed(ActionEvent e) { String keylabel = ((JButton)e.getSource()).getText(); kpc.keypressCallback(keylabel); } // actionPerformed() } // KeyPad class

Setelah itu ubah class Converter agar mengimplementasikan interface KeyPadClient, dimana class akan menggunakan method keypressCallback() untuk menambahkan angka-angka input lebih keypad, bentuk dari method keypressCallback() di dalam class Converter adalah :
public void keypressCallback(String s) { if (s.equals("C")) input.setText(""); else input.setText(input.getText() + s); }

Perubahan class Converter menjadi sebagai berikut :

import javax.swing.*; import java.awt.*; import java.awt.event.* ; public class Converter extends JFrame implements ActionListener, KeyPadClient { private private private private private JLabel prompt = new JLabel("Distance in miles: "); JTextField input = new JTextField(6); JTextArea display = new JTextArea(10,20); JButton convert = new JButton("Convert!"); KeyPad keypad = new KeyPad(this);

public Converter () { getContentPane().setLayout(new FlowLayout()); getContentPane().add(prompt); getContentPane().add(input); getContentPane().add(convert); getContentPane().add(display); getContentPane().add(keypad); display.setLineWrap(true); display.setEditable(false); convert.addActionListener(this); input.addActionListener(this); } // Converter() public void actionPerformed(ActionEvent e) { double miles = Double.valueOf(input.getText()).doubleValue(); double km = MetricConverter.milesToKm(miles); display.append(miles + " miles equals " + km + " kilometers\n");

input.setText(""); } // actionPerformed() public void keypressCallback(String s) { if (s.equals("C")) input.setText(""); else input.setText(input.getText() + s); } // keypressCallback() public static void main(String args[]) { Converter f = new Converter(); f.setSize(400, 300); f.setVisible(true); f.addWindowListener(new WindowAdapter() { public void windowClosing(WindowEvent e) { System.exit(0); // Quit the application } }); } // main() } // Converter class

Silahkan Coba Beberapa latihan berikut : 1. Click Me

Dan pada saat diclik akan tampil :

2. Modifikasi dari Click Me menjadi :

Dan diklik tampil :

3. Simple Login dengan tampilan sebagai berikut :

4. Look and Feel dengan tampilan yang dapat berubah-ubah :