Algoritma, Struktur Data, dan Pemrograman: Bab 13. Java Teori dan Implementasi

Monday, December 19, 2016

Bab 13. Java Teori dan Implementasi

Bab. 13 Dasar - Dasar GUI

13.1 Introduksi

Perancangan API untuk pemrograman GUI dalam JAVA adalah salah satu contoh terbaik tentang bagaimana pripsip pemrograman berorientasi objek diterapkan. Bab ini mengandung dua tujuan. Pertama, untuk mengenalkan dasar-dasar pemrograman GUI dalam JAVA. Kedua, untuk mengenalkan kerangka kerja GUI API dalam JAVA dan mendiskusikan komponen-komponen GUI dan relasinya, kontainer, layout manager, warna, jenis huruf, ikon citra, dan tool tips.

13.2 Swing versus AWT

Beberapa contoh GUI sederhana telah disajikan untuk mendemonstrasikan OOP. Komponen-komponen GUI, seperti JBUtton, JLabel, JTextField, JRadioButton, dan JComboBox. Mengapa kelas-kelas komponen GUI memiliki prefiks J? Daripada menggunakan JButton, mengapa tidak menggunakan Button saja? Alasannya adalah karena suatu kelas bernama Button telah ada dalam paket java.awt.

Ketika JAVA dikenalkan, kelas-kelas GUI digabungkan dalam suatu pustaka yang dikenal dengan Abstract Windows Toolkit (AWT). AWT sudah cukup bila digunakan untuk mengembangkan GUI sederhana, tetapi bukan untuk mengembangkan GUI yang komprehensif. Di samping itu AWT, memiliki cukup masalah bila dijalankan pada platform yang berbeda-beda. Komponen-komponen antarmuka-pengguna AWT diganti oleh pustaka yang lebih handal, fleksibel, dan lengkap yang dikenal dengan komponen-komponen Swing.

Untuk membedakan antara kelas-kelas komponen Swing yang baru dengan kelas-kelas komponen AWT, kelas-kelas komponen Swing diberi prefiks J. Meskipun komponen-komponen AWT masih didukung JAVA, namun lebih baik untuk belajar bagaimana memprogram menggunakan komponen-komponen Swing. Buku ini menggunakan komponen-komponen Swing secara eksklusif.

13.3 GUI API dalam JAVA

GUI API memuat kelas-kelas yang dapat diklasifikasikan dalam tiga kelompok: kelas komponen, kelas kontainer, dan kelas helper. Relasi secara hirarki ditunjukkan pada Gambar 13.1.

Gambar 13.1 Pemrograman GUI JAVA mengutilisasi kelas-kelas dalam diagram hirarki ini

Kelas komponen, seperti JButton, JLabel, dan JTextField, diciptakan untuk antarmuka-pengguna. Kelas kontainer, seperti JFrame, JPanel, dan JApplet digunakan untuk memuat komponen-komponen lain. Kelas helper, seperti Graphics, Color, Font, FontMetrics, dan Dimension, digunakan untuk mendukung komponen-komponen GUI.

13.3.1 Kelas Komponen

Suatu instans dari Component dapat ditampilkan pada layar. Kelas Component merupakan akar kelas dari semua kelas-kelas antarmuka-pengguna termasuk kelas-kelas kontainer, dan JComponent adalah akar kelas dari semua komponen-komponen Swing. Kedua Component maupun JComponent adalah kelas abstrak, yang akan didiskusikan pada Bab. 14. Untuk sekarang, apa yang perlu Anda ketahui adalah bahwa kelas abstrak sama seperti kelas biasa kecuali bahwa Anda tidak bisa menciptakan instansnya menggunakan operator new. Sebagai contoh, Anda tidak bisa menggunakan new JComponent() untuk menciptakan instans dari JComponent. Akan tetapi, Anda bisa menggunakan konstruktor-konstruktor dari sub-subkelas konkrit JComponent untuk menciptakan instans dari JComponent. Adalah hal yang penting untuk menjadi familiar dengan hirarki pewarisan kelas. Sebagai contoh, statemen-statemen berikut ini semuanya menampilkan true:

JButton jbtOK = new JButton("OK");

System.out.println(jbtOK instanceof JButton);

System.out.println(jbtOK instanceof JComponent);

System.out.println(jbtOK instanceof Container);

System.out.println(jbtOK instanceof Component);

System.out.println(jbtOK instanceof Object);

13.3.2 Kelas Kontainer

Suatu instans Container dapat memuat instans-instans Component. Kelas kontainer adalah komponen-komponen GUI yang digunakan untuk memuat komponen-komponen GUI yang lain. Window, Panel, Applet, Frame, dan Dialog merupakan kelas-kelas kontainer untuk komponen-komponen AWT. Untuk dapat bekerja dengan komponen-komponen Swing, digunakan Container, JFrame, JDialog, JApplet, dan JPanel, seperti terdeskripsi pada Tabel 13.1.

Tabel 13.1 Kelas-kelas kontainer GUI

Kelas Kontainer

Deskripsi

java.awt.Container

javax.swing.JFrame

javax.swing.JPanel

javax.swing.JApplet

javax.swing.JDialog

Digunakan untuk mengelompokkan komponen-komponen. Frame, panel, dan applet merupakan sub-subkelasnya.

Adalah suatu jendela yang tidak dimuat di dalam jendela lain. Digunakan untuk memuat komponen-komponen antarmuka-pengguna Swing yang lain dalam aplikasi-aplikasi GUI JAVA.

Adalah kontainer yang tidak kelihatan yang memuat komponen-komponen antarmuka-pengguna. Panel bisa dibuat bersarang. Anda bisa menempatkan panel-panel di dalam suatu kontainer yang memuat suatu panel. JPanel juga sering digunakan sebagai suatu kanvas untuk menggambar grafik.

Adalah suatu subkelas dari Applet. Anda harus mewarisi JApplet untuk menciptakan suatu applet JAVA berbasis Swing.

Adalah suatu jendela pop-up atau kotak pesan yang umum digunakan sebagai jendela sementara untuk menerima informasi tambahan dari pengguna atau untuk menyediakan notifikasi bahwa suatu event telah terjadi.

13.3.3 Kelas Helper

Kelas-kelas helper, seperti Graphics, Color, Font, FontMetrics, Dimension, dan LayoutManager, bukanlah sub-subkelas dari Component. Kelas helper ini digunakan untuk mendeskripsikan properti komponen-komponen GUI, seperti grafik, warna, huruf, dan dimensi, seperti terdeskripsi pada Tabel 13.2.

Tabel 13.2 Kelas Helper GUI

Kelas Helper

Deskripsi

java.awt.Graphics

java.awt.Color

java.awt.Font

java.awt.FontMetrics

java.awt.Dimension

java.awt.LayoutManager

Merupakan suatu kelas abstrak yang menyediakan metode-metode untuk menggambarkan string, garis, dan bangun-bangun sederhana.

Berkaitan dengan warna komponen-komponen GUI. Sebagai contoh, Anda bisa menentukan warna latar belakang maupun warna latar depan dalam komponen seperti JFrame dan JPanel, atau Anda bisa menentukan warna garis, bangun, dan string dalam gambar.

Untuk menentukan font teks dan gambar dalam komponen-komponen GUI. Sebagai contoh, Anda bisa menentukan jenis font (misalnya, SanSerif), gaya (misalnya, bold), dan ukuran (misalnya, 25) untuk teks pada suatu tombol.

Adalah suatu kelas abstrak yang digunakan untuk mendapatkan properti font.

Mengenkapsulasi lebar dan tinggi suatu komponen (dalam presisi integer) dalam suatu objek tunggal.

Menentukan bagaimana komponen-komponen ditata dalam suatu kontainer.

13.4 Frame

Untuk menciptakan suatu antarmuka-pengguna, Anda perlu menciptakan salah satu, frame atau applet, untuk memuat komponen-komponen antarmuka-pengguna.

13.4.1 Menciptakan Frame

Untuk menciptakan suatu frame, digunakan kelas JFrame, seperti ditampilkan pada Gambar 13.2. Program pada kode13.1 menciptakan suatu frame:

Kode13.1 FrameKu.java

import javax.swing.JFrame;

public class FrameKu {

public static void main(String[] args) {

JFrame frame = new JFrame("FrameKu"); // Menciptakan suatu frame

frame.setSize(400, 300); // Menetapkan ukutan frame

frame.setLocationRelativeTo(null); // Pusat suatu frame

frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);

frame.setVisible(true); // Menampilkan frame

}

Gambar 13.2 JFrame merupakan kontainer level-atas untuk memuat komponen-komponen GUI

Frame tidak akan ditampilkan sampai metode frame.setVisible(true) dipanggil. Metode frame.setSize(400, 300) menentukan bahwa frame berukuran 400 piksel lebar dan 300 piksel tinggi. Jika metode setSize tidak digunakan, maka frame akan disesuaikan sehingga hanya menampilkan judul saja. Karena metode setSize dan setVisible keduanya didefinisikan dalam kelas Component, maka keduanya diwariskan oleh kelas JFrame.

Ketika Anda menjalankan program FrameKu, suatu jendela akan tertampil pada layar (Gambar 13.3a).

Gambar 13.3 (a) Program menciptakan dan menampilkan suatu frame dengan judul FrameKu. (b) Suatu tombol OK ditambahkan pada frame.

Pemanggilan metode setLocationRelativeTo(null) (baris 7) menetapkan frame di pusat layar. Pemanggilan metode setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE) (baris 8) memberitahukan program untuk berhenti pada saat frame ditutup. Jika statemen ini tidak digunakan, maka program tidak berhenti meski frame telah ditutup. Pada kasus itu, Anda harus menghentikan program dengan menekan Ctrl+C pada prompt DOS dalam Windows.

13.4.2 Menambahkan Komponen Pada Frame

Frame yang ditampilkan pada Gambar 13.2a adalah kosong. Dengan menggunakan metode add, Anda bisa menambahkan komponen-komponen ke dalam frame, seperti terlampir pada kode13.2.

Kode13.2 FrameKuDenganKomponen.java

import javax.swing.*;

public class FrameKuDenganKomponen {

public static void main(String[] args) {

JFrame frame = new JFrame("FrameKuDenganKomponen");

// Menambahkan suatu tombol dalam frame

JButton jbtOK = new JButton("OK");

frame.add(jbtOK);

frame.setSize(400, 300); // Menetapkan ukutan frame

frame.setLocationRelativeTo(null); // Pusat suatu frame

frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);

frame.setVisible(true); // Menampilkan frame

}

Setiap JFrame memuat suatu content pane. Suatu content pane merupakan instans dari java.awt.Container. Komponen-komponen GUI, seperti tombol, ditempatkan pada content pane di dalam frame. Pada versi JAVA terdahulu, Anda harus menggunakan metode getContentPane dalam kelas JFrame untuk menjadikan content pane suatu frame sebagai nilai balik, kemudian memanggil metode add untuk menambahkan suatu komponen di dalam content pane, sebagai berikut:

java.awt.Container kontainer = frame.getContentPane();

kontainer.add(jbtOK);

Hal ini cukup melelahkan. Versi sejak JAVA 5 mengijinkan Anda untuk menempatkan komponen-komponen ke dalam content pane dengan memanggil metode add, sebagai berikut:

frame.add(jbtOK);

Suatu objek JButton diciptakan menggunakan new JButton(“OK”) , dan objek ini ditambahkan ke dalam content pane dalam frame (baris 9).

Metode add(Component comp) yang didefinisikan di dalam kelas Container menambahkan suatu instans Component ke dalam kontainer. Karena JButton merupakan subkelas dari Component, maka instans JButton juga merupakan instans Component. Untuk menghilangkan suatu komponen dari kontainer, digunakan metode remove. Statemen berikut ini menghapus tombol dari kontainer:

kontainer.remove(jbtOK);

Ketika Anda menjalankan program FrameKuDenganKomponen, jendela ditampilkan seperti pada Gambar 13.2b. Tombol selalu berada di pusat frame dan menempati keseluruhan frame meskipun Anda telah mengatur-ulang ukurannya. Hal ini karena komponen-komponen ditempatkan di dalam frame oleh layout manager, dan layout manager default untuk content pane menempatkan tombol di pusat frame. Pada bagian selanjutnya, Anda akan melihat beberapa layout manager yang berbeda dalam menempatkan komponen-komponen pada lokasi yang diinginkan.

13.5 Layout Manager

Dalam banyak sistem jendela yang lain, komponen-komponen antarmuka-pengguna ditata menggunakan pengukuran piksel terkode. Sebagai contoh, menempatkan suatu tombol pada piksel (10, 10) dalam jendela. Bila menggunakan pengukuran piksel terkode, maka antarmuka-pengguna akan dapat bekerja dengan baik pada satu sistem, namun menjadi tidak berguna pada sistem yang lain. Layout manager dalam JAVA menyediakan suatu level abstraksi yang secara otomatis memetakan antarmuka-pengguna Anda pada semua sistem jendela.

Komponen-komponen GUI JAVA ditempatkan dalam kontainer, dimana komponen-komponen tersebut ditata oleh layout manager. Pada program terdahulu, Anda tidak menentukan dimana menempatkan tombol OK pada frame, tetapi JAVA mengetahui dimana untuk menempatkannya, karena layout manager bekerja di balik layar untuk menempatkan komponen-komponen GUI pada lokasi-lokasi yang tepat. Suatu layout manager diciptakan menggunakan kelas layout manager.

Layout manager ditetapkan di dalam kontainer menggunakan metode setLayout(aLayoutMaganer). Sebagai contoh, Anda dapat menggunakan statemen-statemen berikut ini untuk menciptakan suatu instans XLayout dan menetapkannya di dalam kontainer:

LayoutManager layoutManager = new XLayout();

kontainer.setLayout(layoutManager);

Bagian ini akan mengenalkan tiga dasar layout manager: FlowLayout, GridLayout, dan BorderLayout.

13.5.1 FlowLayout

FlowLayout adalah layout manager yang paling sederhana. Komponen-komponen ditata di dalam kontainer dari kiri ke kanan secara berurutan. Ketika suatu baris terisi, maka baris lain dimulai. Anda bisa menentukan cara komponen disejajarkan menggunakan salah satu dari tiga konstanta: FlowLayout.RIGHT, FlowLayout.CENTER, dan FlowLayout.LEFT. Anda juga bisa menentukan jarak antar komponen dalam piksel. Diagram kelas untuk FlowLayout ditampilkan pada Gambar 13.4.

Gambar 13.4 FlowLayout mengatur tata letak komponen baris demi baris

Kode13.3 menyajikan suatu program yang mendemonstrasikan flow layout. Program menambahkan tiga label dan bidang teks ke dalam frame dengan suatu FlowLayout manager, seperti ditampilkan pada Gambar 13.5.

Kode13.3 TampilLayout.java

import javax.swing.JLabel;

import javax.swing.JTextField;

import javax.swing.JFrame;

import java.awt.FlowLayout;

public class TampilFlowLayout extends JFrame {

public TampilFlowLayout() {

// Menetapkan FlowLayout, disejajarkan ke kiri rentang horisontal 10

// dan rentang vertikal 20 antar komponen

setLayout(new FlowLayout(FlowLayout.LEFT, 10, 20));

// Menambahkan label dan bidang teks ke dalam frame

add(new JLabel("Nama Pertama"));

add(new JTextField(8));

add(new JLabel("Inisal Nama Tengah"));

add(new JTextField(1));

add(new JLabel("Nama Akhir"));

add(new JTextField(8));

}

/** Metode main */

public static void main(String[] args) {

TampilFlowLayout frame = new TampilFlowLayout();

frame.setTitle("TampilFlowLayout");

frame.setSize(200, 200);

frame.setLocationRelativeTo(null); // Pusat frame

frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);

frame.setVisible(true);

}

Gambar 13.5 Komponen-komponen ditambahkan oleh FlowLayout manager untuk mengisi kontainer baris demi baris

Contoh ini menciptakan suatu program menggunakan suatu gaya yang berbeda dari program-program pada bagian terdahulu, dimana frame diciptakan menggunakan kelas JFrame. Contoh ini menciptakan suatu kelas bernama TampilFlowLayout yang mewarisi kelas JFrame (baris 6). Metode main dalam program ini menciptakan suatu instans TampilFlowLayout (baris 23). Konstruktor TampilFlowLayout menciptakan dan menempatkan komponen-komponen di dalam frame. Berikut adalah tiga alasan mengapa ini merupakan gaya yang lebih disenangi dalam menciptakan aplikasi-aplikasi GUI:

· Menciptakan suatu aplikasi GUI berarti menciptakan suatu frame, jadi sangat masuk akal bila mendefinisikan suatu frame yang mewarisi JFrame.

· Frame selanjutnya dikembangkan untuk menambahkan komponen-komponen dan fungsi-fungsi baru.

· Kelas dapat dengan mudah didaur-ulang atau digunakan kembali. Sebagai contoh, Anda dapat menciptakan beberapa frame dengan menciptakan beberapa instans dari kelas.

Penggunaan satu gaya secara konsisten memudahkan pembacaan program. Mulai sekarang ini, kebanyaka kelas utama GUI akan mewarisi kelas JFrame. Metode main menciptakan suatu instans kelas utama dan kemudian menampilkan frame.

Pada contoh ini, FlowLayout manager digunakan untuk menempatkan komponen-komponen di dalam suatu frame. Jika Anda mengubah ukuran frame, komponen-komponen akan secara otomatis ditata sedemikian rupa sehingga sesuai dengan ukuran frame yang baru. Pada Gambar 13.5a, baris pertama memiliki empat komponen, sedangkan pada Gambar 13.5b, enam komponen ditempatkan di dalam satu baris.

Jika Anda menggantikan statemen setLayout (baris 10) dengan setLayout(new FlowLayout(FlowLayout.RIGHT, 0, 0)), maka semua baris tombol akan disejajarkan ke kanan tanpa ada jarak antar komponen.

Suatu objek FlowLayout tak-bernama diciptakan pada baris 10:

setLayout(new FlowLayout(FlowLayout.LEFT, 10, 20));

yang ekivalen dengan

FlowLayout layout = new FlowLayout(FlowLayout.LEFT, 10, 20);

setLayout(layout);

Kode ini menciptakan suatu referensi eksplisit kepada objek layout dari kelas FlowLayout. Referensi eksplisit tersebut tidak perlu, karena objek tidak direferensi secara langsung dalam kelas TampilFlowLayout.

13.5.2 GridLayout

GridLayout manager menata komponen-komponen di dalam suatu formasi grid (matriks). Komponen-komponen ditempatkan di dalam grid dari kiri ke kanan, dimulai dari baris pertama, kemudian baris kedua, dan seterusnya, secara berurutan. Diagram kelas GridLayout ditampilkan pada Gambar 13.6.

Gambar 13.6 GridLayout menata letak komponen dalam sel-sel berukuran sama pada suatu grid

Anda bisa menentukan jumlah baris dan kolom di dalam grid. Aturan dasarnya adalah sebagai berikut:

· Jumlah baris atau jumlah kolom bisa nol, tetapi tidak keduanya nol. Jika salah satu bernilai nol, dan lainnya bernilai tak-nol, maka dimensi tak-nol menjadi tetap, sementara dimensi nol ditentukan secara dinamis oleh layout manager. Sebagai contoh, jika Anda menentukan jumlah baris nol dan jumlah kolom tiga dalam suatu grid yang memiliki sepuluh komponen, maka GridLayout menciptakan tiga kolom dengan masing-masing empat baris, dengan baris terakhir memuat satu komponen. Jika Anda menentukan tiga baris dan nol kolom dalam suatu grid yang memiliki sepuluh komponen, maka GridLayout menciptakan tiga baris dengan masing-masing empat kolom, dengan baris terakhir memuat dua komponen.

· Jika jumlah baris dan jumlah kolom keduanya tak-nol, maka jumlah baris akan mendominasi parameter; yaitu, jumlah baris menjadi tetap (tidak berubah), dan layout manager secara dinamis menghitung jumlah kolom. Sebagai contoh, jika Anda menentukan tiga baris dan tiga kolom dalam suatu grid yang memiliki sepuluh komponen, maka GridLayout akan menciptakan tiga baris dengan empat kolom, dengan baris terakhir memuat dua komponen.

Kode13.4 menyajikan suatu program yang mendemonstrasikan grid layout. Program ini sama dengan kode13.3, yang menambahkan tiga label dan tiga bidang teks ke dalam frame GridLayout, menggantikan FlowLayout, seperti ditunjukkan pada Gambar 13.7.

Kode13.4 TampilGridLayout.java

import javax.swing.JLabel;

import javax.swing.JTextField;

import javax.swing.JFrame;

import java.awt.GridLayout;

public class TampilGridLayout extends JFrame {

public TampilGridLayout() {

// Menetapkan GridLayout, 3 baris, 2 kolom dengan rentang horisontal 5

// dan rentang vertikal 5 antar komponen

setLayout(new GridLayout(3,2,5,5));

// Menambahkan label dan bidang teks ke dalam frame

add(new JLabel("Nama Pertama"));

add(new JTextField(8));

add(new JLabel("Inisal Nama Tengah"));

add(new JTextField(1));

add(new JLabel("Nama Akhir"));

add(new JTextField(8));

}

/** Metode main */

public static void main(String[] args) {

TampilGridLayout frame = new TampilGridLayout();

frame.setTitle("TampilGridLayout");

frame.setSize(200, 150);

frame.setLocationRelativeTo(null); // Pusat frame

frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);

frame.setVisible(true);

}

Gambar 13.7 GridLayout manager membagi kontainer menjadi grid-grid; kemudian komponen-komponen ditambahkan untuk mengisi sel-sel baris demi baris

Jika Anda mengubah ukuran frame, maka tata-letak tombol tetap tidak berubah (yaitu, jumlah baris dan jumlah kolom tidak berubah, dan rentang antar komponen juga tidak berubah).

Mengganti statemen setLayout (baris 10) dengan setLayout(new GridLayout(3, 10)) akan tetap menghasilkan tiga baris dan dua kolom. Parameter kolom diabaikan karena parameter baris tak-nol. Jumlah kolom aktual dihitung oleh layout manager.

Apa yang terjadi bila statemen setLayout (baris 10) diganti dengan setLayout(new GridLayout(4, 2)) atau dengan setLayout(new GridLayout(2, 2))? Anda bisa mencobanya sendiri.

13.5.3 BorderLayout

BorderLayout manager membagi suatu kontainer menjadi empat area: Timur, Selatan, Barat, Utara, dan Tengah. Komponen-komponen ditambahkan kepada BorderLayout menggunakan add(Component, indeks), dimana indeks merupakan BorderLayout.EAST, BorderLayout.SOUTH, BorderLayout.WEST, BorderLayout.NORTH, atau BorderLayout.CENTER. Diagram kelas BorderLayout ditampilkan pada Gambar 13.8.

Gambar 13.8 BorderLayout menata letak lima area

Komponen-komponen ditata sesuai dengan ukuran dan penempatan yang diinginkan. Komponen Utara dan Selatan dapat diregangkan secara horisontal; komponen-komponen Barat dan Timur dapat diregangkan secara vertikal. Komponen tengah dapat diregangkan baik secara horisontal maupun secara vertikal.

Kode 13.5 menyajikan suatu program yang mendemonstrasikan border layout. Program menambahkan lima tombol dengan label Timur, Selatan, Barat, Utara, dan Tengah ke dalam suatu frame dengan suatu BorderLayout manager, seperti tertampil pada Gambar 13.9.

Gambar 13.9 BorderLayout manager membagi suatu kontainer menjadi empat area, yang masing-masing memuat satu komponen

Kode13.5 TampilBorderLayout.java

import javax.swing.JButton;

import javax.swing.JFrame;

import java.awt.BorderLayout;

public class TampilBorderLayout extends JFrame {

public TampilBorderLayout() {

// Menetapkan BorderLayout dengan rentang horisontal 5 dan rentang vertikal 10

setLayout(new BorderLayout(5, 10));

// Menambahkan tommbol-tombol ke dalam frame

add(new JButton("Timur"), BorderLayout.EAST);

add(new JButton("Selatan"), BorderLayout.SOUTH);

add(new JButton("Barat"), BorderLayout.WEST);

add(new JButton("Utara"), BorderLayout.NORTH);

add(new JButton("Tengah"), BorderLayout.CENTER);

}

/** Metode utama */

public static void main(String[] args) {

TampilBorderLayout frame = new TampilBorderLayout();

frame.setTitle("TampilBorderLayout");

frame.setSize(300, 200);

frame.setLocationRelativeTo(null); // Pusat frame

frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);

frame.setVisible(true);

}

Tombol-tombol ditambahkan ke dalam frame pada baris 11-15. Perhatikan bahwa metode add untuk BorderLayout berbeda dari yang dipakai untuk GridLayout dan FlowLayout. Dengan BorderLayout, Anda bisa menentukan dimana untuk menempatkan komponen-komponen.

13.6 Menggunakan Panel Sebagai Subkontainer

Dimisalkan bahwa Anda ingin menempatkan sepuluh tombol dan suatu bidang teks di dalam suatu frame. Tombol-tombol tersebut ditempatkan dengan formasi grid, dan bidang teks ditempatkan pada suatu baris yang terpisah. Hal ini sangat susah untuk menempatkan semua komponen di dalam suatu kontainer. Dengan pemrograman GUI JAVA, Anda bisa membagi suatu jendela menjadi panel-panel. Panel berperan sebagai subkontainer untuk mengelompokkan komponen-komponen antarmuka-pengguna. Anda bisa menambahkan tombol-tombol dalam suatu panel, dan menambahkan panel tersebut ke dalam frame.

Panel versi Swing adalah JPanel. Anda bisa menggunakan new JPanel() untuk menciptakan suatu panel dengan suatu FlowLayout manager default atau new JPanel(LayoutManager) untuk menciptakan suatu panel dengan layout manager tertentu. Metode add(Component) digunakan untuk menambahkan suatu komponen kepada panel. Sebagai contoh, kode berikut ini menciptakan suatu panel dan menambahkan suatu tombol kepadanya:

JPanel p = new JPanel();

p.add(new JButton("OK"));

Panel dapat ditempatkan di dalam suatu frame atau di dalam suatu panel lain. Statemen berikut ini menempatkan panel p ke dalam frame f:

f.add(p);

Kode13.6 memberikan suatu contoh yang mendemonstrasikan menggunakan panel sebagai subkontainer. Program menciptakan suatu antarmuka-pengguna untuk suatu oven microwave, seperti ditampilkan pada Gambar 13.10.

Gambar 13.10 Program menggunakan panel-panel untuk mengorganisir komponen-komponen

Kode13.6 UjiPanel.java

import java.awt.*;

import javax.swing.*;

public class UjiPanel extends JFrame {

public UjiPanel() {

// Menciptakan panel p1 untuk tombol dan menetapkan GridLayout

JPanel p1 = new JPanel();

p1.setLayout(new GridLayout(4, 3));

// Menambahkan tombol kepada panel

for (int i = 1; i <= 9; i++) {

p1.add(new JButton("" + i));

}

p1.add(new JButton("" + 0));

p1.add(new JButton("Mulai"));

p1.add(new JButton("Berhenti"));

// Menciptakan panel p2 untuk memuat suatu bidang teks dan p1

JPanel p2 = new JPanel(new BorderLayout());

p2.add(new JTextField("Waktu ditampilkan di sini"),

BorderLayout.NORTH);

p2.add(p1, BorderLayout.CENTER);

// Menambahkan konten ke dalam frame

add(p2, BorderLayout.EAST);

add(new JButton("Makanan ditempatkan di sini"),

BorderLayout.CENTER);

}

/** Metode utama */

public static void main(String[] args) {

UjiPanel frame = new UjiPanel();

frame.setTitle("Tampak Depan Oven Microwave");

frame.setSize(400, 250);

frame.setLocationRelativeTo(null); // Pusat frame

frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);

frame.setVisible(true);

}

Metode setLayout di definisikan di dalam java.awt.Container. Karena JPanel adalah suatu subkelas dari Container, maka Anda bisa menggunakan setLayout untuk menetapkan suatu layout manager yang baru di dalam panel (baris 8). Baris 7-8 dapat digantikan oleh JPanel p1 = new JPanel (new GridLayout (4, 3)).

Untuk menghasilkan tata letak yang diinginkan, program menggunakan panel p1 dari GridLayout untuk mengelompokkan tombol-tombol angka, tombol Berhenti, dan tombol Mulai, dan panel p2 dari BorderLayout untuk menampung suatu bidang teks di utara dan dan p1 di tengah. Tombol yang merepresentasikan makanan ditempatkan di tengah frame, dan p2 ditempatkan di sisi timur frame.

Statemen pada baris 21-22:

p2.add(new JTextField("Waktu ditampilkan di sini "),

BorderLayout.NORTH);

menciptakan suatu instans JTextField dan menambahkannya pada p2. JTextField adalah suatu komponen GUI yang dapat digunakan untuk masukan pengguna dan untuk menampilkan nilai-nilai.

13.7 Kelas Color

Anda bisa menetapkan warna komponen GUI menggunakan kelas java.awt.Color. Warna-warna tersebut dikonstruksi dari komponen merah, hijau, dan biru. Masing-masing warna merepresentasikan suatu nilai int yang mendeskripsikan intensitas, dari 0 (bayangan tergelap) sampai 255 (bayangan terterang). Hal ini dikenal dengan model RGB.

Anda dapat menciptakan suatu warna menggunakan konstruktor berikut ini:

public Color(int r, int g, int b);

dimana r, g, dan b menentukan suatu warna dari komponen merah, hijau, dan biru. Sebagai contoh,

Color warna = new Color(128, 100, 100);

Anda bisa menggunakan metode setBackground(Color c) dan metode setForeground(Color c) yang didefinisikan di dalam kelas java.awt.Component untuk menentukan warna latar belakang dan latar depan suatu komponen. Berikut merupakan suatu contoh dalam menetapkan warna latar belakang dan latar depan suatu tombol:

JButton jbtOK = new JButton("OK");

jbtOK.setBackground(warna);

jbtOK.setForeground(new Color(100, 1, 1));

Dengan cara lain, Anda bisa menggunakan salah satu dari 13 warna standar (BLACK, BLUE, CYAN, DARK_GRAY, GRAY, GREEN, LIGHT_GRAY, MAGENTA, ORANGE, PINK, RED, WHITE, dan YELLOW) yang didefinisikan sebagai konstanta-konstanta dalam java.awt.Color. Kode berikut ini, misalnya, menetapkan warna latar depan dari suatu tombol menjadi merah:

jbtOK.setForeground(Color.RED);

13.8 Kelas Font

Anda bisa menciptakan suatu font (jenis huruf) menggunakan kelas java.awt.Font dan menetapkan jenis huruf untuk komponen-komponen menggunakan metode setFont di dalam kelas Component:

Konstruktor kelas Font adalah

public Font(String nama, int gaya, int ukuran);

Anda dapat memilih suatu nama font dari SanSerif, Serif, Monospaced, Dialog, atau DialogInput, memilih gaya dari Font.PLAIN(0), Font.BOLD(1), Font.ITALIC(2), dan Font.BOLD+Font.ITALIC(3), dan menentukan ukuran font dengan sembarang integer positif. Sebagai contoh, statemen-statemen berikut ini menciptakan dua font dan menetapkan satu font pada suatu tombol:

Font font1 = new Font("SansSerif", Font.BOLD, 16);

Font font2 = new Font("Serif", Font.BOLD + Font.ITALIC, 12);

JButton jbtOK = new JButton("OK");

jbtOK.setFont(font1);

13.9 Fitur-Fitur Komponen GUI Swing

Pada bab ini, Anda telah menggunakan beberapa komponen GUI (JFrame, Container, JPanel, JButton, JLabel, dan JTextField). Adalah hal penting untuk memahami fitu-fitur umum komponen GUI Swing. Kelas Component merupakan akar dari semua kontainer dan komponen GUI. Semua komponen GUI (kecuali JFrame, JApplet, dan JDialog) adalah subkelas dari JComponent, seperti yang ditampilkan pada Gambar 13.1. Gambar 13.11 mencantumkan beberapa metode yang sering dipakai dalam Component, Container, dan JComponent untuk memanipulasi properti-properti jenis huruf, warna, ukuran, teks tool tip dan border.

Suatu tool tip merupakan teks yang tertampil pada suatu komponen ketika Anda menggerakkan mouse pada komponen tersebut. Seringkali digunakan untuk menjelaskan fungsi suatu komponen.

Anda bisa menetapkan border atau tepi sembarang objek kelas JComponent. Swing memiliki beberapa tipe tepi. Untuk menciptakan suatu tepi berjudul, digunakan new TitleBorder(String judul). Untuk menciptakan tepi bergaris, digunakan new LineBorder(Color warna, int lebar), dimana lebar menentukan ketebalan garis.

Kode13.7 adalah suatu contoh yang mendemonstrasikan fitur-fitur umum Swing. Contoh tersebut menciptakan suatu panel p1 untuk memuat tiga tombol (baris 8) dan suatu panel p2 untuk memuat dua label (baris 25), seperti ditampilkan pada Gambar 13.12. Latar belakang tombol jbtLeft ditetapkan menjadi putih (baris 12) dan Latar depan tombol jbtCenter ditetapkan menjadi hijau (baris 13). Tool tip tombol jbtRight ditetapkan pada baris 14. Tetpi berjudul ditetapkan pada panel p1 dan p2 (baris 18, 36) dan tepi garis ditetapkan pada label (baris 32, 33).

Gambar 13.11 Semua komponen GUI Swing mewarisi metode-metode dari Component, Container, dan JComponent

Kode13.7 TestFiturUmumSwing.java

import java.awt.*;

import javax.swing.*;

import javax.swing.border.*;

public class TestFiturUmumSwing extends JFrame {

public TestFiturUmumSwing() {

// Menciptakan suatu panel untuk mengelompokkan tiga tombol

JPanel p1 = new JPanel(new FlowLayout(FlowLayout.LEFT, 2, 2));

JButton jbtLeft = new JButton("Kiri");

JButton jbtCenter = new JButton("Tengah");

JButton jbtRight = new JButton("Kanan");

jbtLeft.setBackground(Color.WHITE);

jbtCenter.setForeground(Color.GREEN);

jbtRight.setToolTipText("Ini adalah Tombol Kanan");

p1.add(jbtLeft);

p1.add(jbtCenter);

p1.add(jbtRight);

p1.setBorder(new TitledBorder("Tiga Tombol"));

// Menciptakan suatu font dan suatu tepi bergaris

Font largeFont = new Font("TimesRoman", Font.BOLD, 20);

Border lineBorder = new LineBorder(Color.BLACK, 2);

// Menciptakan suatu panel untuk mengelompokkan dua label

JPanel p2 = new JPanel(new GridLayout(1, 2, 5, 5));

JLabel jlblRed = new JLabel("Merah");

JLabel jlblOrange = new JLabel("Oranye");

jlblRed.setForeground(Color.RED);

jlblOrange.setForeground(Color.ORANGE);

jlblRed.setFont(largeFont);

jlblOrange.setFont(largeFont);

jlblRed.setBorder(lineBorder);

jlblOrange.setBorder(lineBorder);

p2.add(jlblRed);

p2.add(jlblOrange);

p2.setBorder(new TitledBorder("Dua Label"));

// Menambahkan dua panel ke dalam frame

setLayout(new GridLayout(2, 1, 5, 5));

add(p1);

add(p2);

}

public static void main(String[] args) {

// Menciptakan suatu frame dan menetapkan propertinya

JFrame frame = new TestFiturUmumSwing();

frame.setTitle("TestFiturUmumSwing");

frame.setSize(300, 150);

frame.setLocationRelativeTo(null); // Pusat frame

frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);

frame.setVisible(true);

}

Gambar 13.12 Font, warna, tepi, dan teks tool tip ditetapkan dalam panel pesan

13.10 Ikon Citra

Suatu ikon adalah citra berukuran tetap; umumnya berukuran kecil dan digunakan untuk mendekorasi komponen. Citra umumnya disimpan dalam file. JAVA saat ini mendukung tiga format citra: GIF (Graphics Interchange Format), JPEG (Joint Photographic Experts Group), dan PNG (Portable Network Graphics). Nama file ketiga format citra tersebut diakhiri dengan .gif, .jpg, dan .png.

Untuk menampilkan suatu ikon citra, pertama diciptakan suatu objek ImageIcon menggunakan new javax.swing.ImageIcon(namafile). Sebagai contoh, statemen berikut ini menciptakan ikon dari suatu file citra Opera.gif dalam direktori Gambar:

ImageIcon ikon = new ImageIcon("Gambar/Opera.gif");

“Gambar/Opera.gif” ditempatkan pada “E:\Gambar\Opera.gif”. Dalam JAVA, tanda / menandakan direktori relatif (misalnya, “Gambar/Opera.gif” pada contoh ini).

Ikon citra ditampilkan di dalam suatu label atau suatu tombol menggunakan new JLabel(ikonCitra). Kode12.8 mendemonstrasikan penampilan ikon citra di dalam label dan tombol. Contoh tersebut menciptakan dua label dan dua tombol dengan ikon, seperti ditampilkan pada Gambar 13.13.

Gambar 13.13 Citra-citra ikon ditampilkan dalam dua label dan dua tombol

Kode12.1 HasilBagi.java

import javax.swing.*;

import java.awt.*;

public class UjiIkonCitra extends JFrame {

private ImageIcon ikonOpera = new ImageIcon("Gambar/opera.gif");

private ImageIcon ikonFirefox = new ImageIcon("Gambar/firefox.gif");

private ImageIcon ikonLogo = new ImageIcon("Gambar/Logo.gif");

private ImageIcon ikonAlert = new ImageIcon("Gambar/alert.gif");

public UjiIkonCitra() {

setLayout(new GridLayout(1, 4, 5, 5));

add(new JLabel(ikonOpera));

add(new JLabel(ikonFirefox));

add(new JButton(ikonLogo));

add(new JButton(ikonAlert));

}

/** Metode utama */

public static void main(String[] args) {

UjiIkonCitra frame = new UjiIkonCitra();

frame.setTitle("UjiIkonCitra");

frame.setSize(200, 200);

frame.setLocationRelativeTo(null); // Pusat frame

frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);

frame.setVisible(true);

}

1 comment:

LOVELYZ TRILOGYSeptember 6, 2019 at 11:27 PM
siap min
solder uap
ReplyDelete
Replies

Add comment

Menu

Monday, December 19, 2016

Bab 13. Java Teori dan Implementasi

1 comment: