PBO Lanjut
Lecture 02 – Komponen Swing Dasar
NIKO IBRAHIM, MIT
UNIVERSITAS KRISTEN MARANATHA
Review Materi Minggu Lalu
Apa perbedaan antara AWT dengan SWING?
Apa fungsi container class?
Sebutkan contoh-contoh component Swing yang
merupakan turunan dari container class!
Tujuan Kuliah Hari Ini
Mahasiswa memahami komponen-komponen yang
ada pada library Java Swing
Mahasiswa membuat beberapa program aplikasi
berbasis GUI yang terdiri dari objek-objek Swing
Materi Perkuliahan
Komponen-komponen Swing Bagian 1
Button & Label
Checkbox & Radiobutton
List & Combo box
Spinner
Border
Komponen-komponen Swing Bagian 2
Menu
Pop-up Menu
JScrollPane
JSplitPane
JTabbedPane
Scrollbar & Slider
Dialog
JDesktop/JInternalFrame
JLabel
Label biasa digunakan untuk:
Menampilkan judul (caption) dari komponen lagin seperti textfield
atau combo box
Menampilkan pesan/informasi
Menampilkan hasil penghitungan atau pencarian basis data
Menampilkan gambar
Kita dapat menentukan jenis huruf, ukuran, style (bold,
italic, underline) dan warna dari label tersebut.
Contoh membuat label:
JLabel judul = new JLabel();
judul.setText("Hello, World!");
atau
JLabel judul = new JLabel("Hello, World!");
JButton
Button merupakan komponen yang dapat di-klik
untuk melakukan konfirmasi sesuatu.
Contoh membuat button:
JButton tombolOK = new JButton();
tombolOK.setText("Click me!");
atau
JButton tombolOK = new JButton("Click me!");
Memberikan Gambar
pada Button & Label
Kita dapat menambahkan sebuah gambar kepada
JLabel dan JButton dengan cara membuat dan men-
set objek ImageIcon pada label dan button tsb.
Contoh membuat label bergambar:
ImageIcon gambarUang = new ImageIcon("uang.png");
JLabel labelJudul = new JLabel(gambarUang);
labelJudul.setText("Sistem Administrasi Keuangan");
Contoh membuat button bergambar:
JButton okButton = new JButton("OK DECH");
okButton.setIcon(new ImageIcon("ok.png"));
Memberikan Teks HTML
pada Label & Button
Salah satu feature Swing adalah dapat menginterpretasi
teks HTML di dalam JLabel dan JButton
Contoh:
JButton htmlButton = new JButton(
"<html>S<font size=-2>MALL<font size=+0> "
+"C<font size=-2>APITALS");
String htmlTable= "<html><table border=1>"
+"<tr><td>One</td><td>Two</td></tr>"
+"<tr><td>Three</td><td>Four</td></tr>"
+"</table>";
JButton htmlButton2 = new JButton(htmlTable);
JFrame
JFrame merupakan komponen top-level bagi
aplikasi desktop. Frame berfungsi sebagai
penampung komponen-komponen lainnya.
Contoh:
JFrame frameUtama = new JFrame();
frameUtama.setTitle("Menu Utama");
Kita dapat membuat sebuah class baru yang
memiliki sifat-sifat JFrame dengan cara
melakukan proses inheritance (extends).
Latihan 1: HelloFrame.java
Buatlah file HelloFrame.java
JPanel
Panel adalah suatu container yang dirancang untuk menampung sekumpulan
komponen sedemikian rupa sehingga kumpulan tersebut dapat ditampilkan
bersama-sama di dalam sebuah frame.
Cara yang lazim dilakukan dalam menampilkan sekumpulan komponen
kontrol seperti text field, label, dan button adalah dengan menambahkan
komponen-komponen tersebut ke dalam sebuah panel, kemudian panel
tersebut ditambahkan ke dalam sebuah frame.
Contoh membuat panel:
class HelloPanel extends JPanel{
public HelloPanel(){
// buat dan tambahkan beberapa komponen:
JTextField input = new JTextField();
JButton tombol = new JButton();
this.add(input);
this.add(tombol);
}
}
Kemudian, di dalam constructor class frame, kita buat objek panel tersebut
dan tambahkan ke dalam frame tersebut:
this.add(new HelloPanel());
JFrame & JPanel
Teknik Umum:
Buatlah sebuah JFrame untuk antarmuka aplikasi utama
Lalu, buatlah JPanel
Tempatkan semua komponen Swing di dalam JPanel tersebut
Tempatkan JPanel ke dalam Jframe
Buat objek Jframe di main method
Latihan 2: HelloFrame2.java
import javax.swing.*;
public class HelloFrame extends JFrame {
/** Creates a new instance of HelloFrame */
public HelloFrame() {
this.setSize(200,100);
this.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
this.setTitle("Hello World!");
HelloPanel panel1 = new HelloPanel();
this.add(panel1);
this.setVisible(true);
this.setLocationRelativeTo(null); // set location to the center
}
class HelloPanel extends JPanel{
public HelloPanel(){
// code to add components to the panel goes here
JLabel label1 = new JLabel("Hello, this is label!");
this.add(label1);
JButton button1 = new JButton("Click me!");
this.add(button1);
}
}
public static void main(String[] args) {
new HelloFrame(); // buat objek JFrame
}
}
Modifikasi Program HelloFrame.java
Modifikasi program HelloFrame.java tersebut
sedemikian rupa sehingga Label dan Button
memiliki Image seperti ditunjukkan gambar berikut:
Latihan 3: JButton & HTML
Buatlah sebuah JFrame yang mengandung 2 buah
objek JButton yang berisi teks HTML sbb:
JCheckbox
Checkbox adalah toggle switch yang diberi label.
Setiap kali kita menekan checkbox, maka statusnya
akan berganti antara checked dan unchecked. Swing
mengimplementasikan checkbox sebagai jenis
khusus dari button.
Contoh membuat checkbox:
JCheckBox cbox1 = new JCheckBox("Sambal");
JCheckBox cbox2 = new JCheckBox("Saus Tomat");
JCheckBox cbox3 = new JCheckBox("Salad");
JRadioButton
Radiobutton hampir menyerupai checkbox, tetapi
penggunaannya haruslah secara berkompok. Apabila
kita menekan salah satu radio button di dalam suatu
kelompok, maka secara otomatis akan menonaktifkan
radio button yang lain.
Radio button dapat dikelompokkan bersama dengan
menggunakan objek dari class ButtonGroup.
Contoh membuat dan mengelompokkan radio button:
JRadioButton rb1 = new JRadioButton("Sapi");
JRadioButton rb2 = new JRadioButton("Ayam");
JRadioButton rb3 = new JRadioButton("Sayuran", true);
ButtonGroup makananGroup = new ButtonGroup( );
makananGroup.add(rb1);
makananGroup.add(rb2);
makananGroup.add(rb3);
Latihan 4: PesanMakanan.java
Buatlah sebuah program yang memiliki 3 buah JPanel.
JPanel1: berisi 3 buah JCheckbox
JPanel2: berisi 3 buah JRadioButton (kelompokkan ke dalam 1
ButtonGroup)
JPanel3: berisi sebuah Jbutton
Ukuran Frame: 300x200
Beri layout sbb: frame.setLayout(new FlowLayout());
Untuk menggunakan layout, lakukan: import java.awt.*;
(Layout akan banyak dibahas minggu depan)
Tempatkan ketiga JPanel tersebut ke dalam sebuah JFrame, sbb:
JList
Dengan menggunakan List kita dapat memilih dari
sekumpulan pilihan.
List dapat dikonfigurasi sedemikian rupa sehingga kita
hanya dapat memilih satu pilihan atau dapat memilih
beberapa pilihan sekaligus.
Untuk memilih item di dalam List, kita dapat
menggunakan kombinasi tombol mouse dengan
tombol Control atau Shift pada keyboard.
Contoh membuat List:
String[ ] days = { "Sunday", "Monday", "Tuesday",
"Wednesday", "Thursday", "Friday", "Saturday" };
JList list = new JList(days);
JComboBox
Combo box merupakan campuran antara text field dengan list.
Combo box hanya menampilkan satu baris teks yang disertai
tombol bertanda panah.
Apabila kita menekan tombol panah tersebut, combo box akan
membuka dan menampilkan daftar pilihan. Kita dapat memilih
satu pilihan dengan cara menekan pilihan yang diinginkan.
Setelah pilihan dibuat, combo box akan kembali menutup, daftar
pilihan akan menghilang, dan pilihan yang baru akan ditampilkan
di dalam text field.
List dan Combo box memiliki kemiripan yaitu memiliki data model
yang sama. Keduanya dapat menampung data model berupa
sebuah array.
Contoh membuat Combo box:
String[ ] days = { "Sunday", "Monday", "Tuesday", "Wednesday",
"Thursday", "Friday", "Saturday" };
JComboBox jcb = new JComboBox(days);
Contoh Penggunaan
JComboBox & JList
Combo box
List
Review: Array di Java
Array adalah variabel yang yang dikelompokkan bersama dalam suatu
nama.
Sama seperti variabel, array pun dibuat dengan cara menyebutkan tipe
data dan nama array-nya. Perbedaannya adalah adanya penambahan
tanda bracket [ dan ].
Array memiliki panjang yang fixed. Sekali didefinisikan, panjangnya
akan tetap sama. Namun, suatu variabel array dapat di-reassign
sedemikian rupa sehingga ia mengacu pada array baru yang memiliki
panjang yg berbeda.
Ada 4 tahap manipulasi array:
Array declaration
Array creation
Array initialization
Array processing
Array Declaration: [ ]
We can declare arrays for any type of information that can be stored as
a variable.
Examples of declaring arrays:
String[] students; // An array of String variables
int[] values; // An array of integer variables
boolean[] truthTable; // An array of boolean variables
char[] grades; // An array of character variables
We can also put the bracket after the variable name instead of the
variable type, although it is a less common style, for example:
String students[];
So,
String[] students === String students[]
Array Creation: new
To create an array, we need to use the new keyword and specify the
length of the array as following:
String[] names;
names = new String[10];
or we can combine the declaration and the creation into one statement:
String[] names = new String[10];
Array Initialization: {…}
One way to initialize the values in an array is to simply assign them one by
one:
String[] days = new String[7];
days[0] = "Sunday";
days[1] = "Monday";
days[2] = "Tuesday";
days[3] = "Wednesday";
days[4] = "Thursday";
days[5] = "Friday";
days[6] = "Saturday";
Java has a shorthand way to create an array and initialize it with constant
values:
String[] days = { "Sunday", "Monday", "Tuesday",
"Wednesday", "Thursday", "Friday", "Saturday" };
Here’s an example of an array initializer for an int array:
int[] primes = { 2, 3, 5, 7, 11, 13, 17 };
An alternative way to code an initializer is like this:
int[] primes = new int[] { 2, 3, 5, 7, 11, 13, 17 };
Pemrosesan Array: for loop
One of the most common ways to process an array is with a for loop.
An array has a length that we can use as a value in the termination
expression of a for loop.
For example, here’s a for loop that prints the content of the arrays of
days:
Example: Days.java
public class Days{
public static void main(String[] args){
String[] days = { "Sunday", "Monday",
"Tuesday", "Wednesday",
"Thursday","Friday",
"Saturday" };
for (int i = 0; i < days.length; i++){
System.out.println(days[i]);
}
}
}
Enhanced for loop (foreach)
In addition to the standard for loop, Java 5.0 provides an enhanced
for loop that’s designed specifically for working with arrays and
collections.
It is sometimes called a foreach loop because it’s used to process each
element in an array.
Syntax:
for (type variableName : arrayName){
// statements
}
Example (a variation of Days.java):
for (String day: days){
System.out.println(day);
}
Short quiz: Try to change Days.java using foreach loop.
Latihan 5: JList & JComboBox
Buatlah sebuah program bernama DaysLister yang berisikan
sebuah JComboBox, JList, dan JButton, sbb:
Buat sebuah JFrame berukuran 200x200
Buat sebuah array sebagai model:
String[] days = { "Sunday", "Monday", "Tuesday", "Wednesday",
"Thursday", "Friday", "Saturday" };
Buatlah sebuah objek JPanel dan tambahkan semua komponen
JComboBox, JList, dan Jbutton kepada panel tsb:
Buat objek JComboBox dan masukkan model data “days”, set sebagai
editable:
JComboBox jcb = new JComboBox(days);
jcb.setEditable(true);
Buat objek JList dan masukkan model data “days:
JList list = new JList(days);
Buat sebuah JButton:
JButton okButton = new JButton("OK");
Hasil DaysLister.java
Spinner
Spinner sangat berguna untuk menampilkan sebuah nilai
sequence (urutan) seperti angka atau tanggal. Spinner
memiliki kemiripan dengan Combo box karena menampilan
sebuah nilai dalam suatu text field.
Namun, spinner tidak menampilkan daftar pilihan
melainkan memberikan sepasang tombol panah (atas-
bawah) untuk mengubah nilai yang tertera di dalam text
field.
Sama seperti combo box, spinner juga dapat dibuat menjadi
editable, sehingga kita dapat secara langsung mengetikan
nilai di dalam field-nya.
Swing menyediakan 3 tipe dasar spinner, yang
direpresentasikan melalui data model yang berbeda:
SpinnerListModel,
SpinnerNumberModel, and
SpinnerDateModel.
Latihan 6: Menggunakan SpinnerListModel
SpinnerList.java
Buatlah sebuah JFrame baru
Buatlah sebuah Spinner yang menggunakan
SpinnerListModel berdasarkan sbb:
String[] options = { "small","medium","large","huge" };
SpinnerListModel model = new SpinnerListModel( options );
JSpinner spinner = new JSpinner( model );
Agar ukuran frame mengikuti ukuran spinner, ketikkan
kode berikut:
frame.pack();
Latihan 7: Menggunakan SpinnerNumberModel
SpinnerNumber.java
Buatlah sebuah program baru yang mirip dengan
latihan sebelumnya, tetapi kali ini kita akan
menggunakan SpinnerNumberModel sbb:
// siapkan beberapa numbers:
double initial=5.0, min=0.0, max=10.0, increment=0.1;
// buat model:
SpinnerNumberModel model =
new SpinnerNumberModel( initial, min, max, increment );
// buat objek spinner berdasarkan model tsb:
JSpinner spinner = new JSpinner(model);
Borders
Semua komponen Swing dapat memiliki dekorasi border. Untuk
memberikan dekorasi, kita cukup menggunakan method
setBorder( ).
Kita perlu memberikan implementasi dari interface Border sesuai
dengan kebutuhan kita.
Swing menyediakan banyak sekali implementasi Border di dalam
package javax.swing.border.
Untuk membuat Border, kita dapat melakukan 2 cara:
menggunakan class BorderFactory
membuat objek berdasarkan class border
Contoh men-set border sebuah label menggunakan BorderFactory:
JLabel labelTwo = new JLabel("I have an etched border.");
labelTwo.setBorder(BorderFactory.createEtchedBorder( ));
Borders (cont.)
Using Border’s Constructor (new)
BorderFactory sangat mudah digunakan, tetapi tidak
menawarkan setiap option dari border yang digunakan.
Misalnya, apabila kita ingin membuat sebuah raised
EtchedBorder (default-nya adalah lowered), maka kita
harus menggunakan constructor EtchedBorder.
Contoh membuat objek EtchedBorder dengan option
RAISED:
JLabel labelTwo = new JLabel("I have a raised etched border.");
labelTwo.setBorder( new EtchedBorder(EtchedBorder.RAISED) );
Jenis-jenis Border
BevelBorder
SoftBevelBorder
EmptyBorder
EtchedBorder
LineBorder
MatteBorder
TitledBorder
CompoundBorder
Latihan 8: BorderTest.java
Buatlah: BordersTest.java
STOP: Pastikan Anda sudah membuat program Latihan
berikut
1. HelloFrame
2. HelloFrame2
3. JButton + HTML
4. JCheckbox & JRadioButton: PesanMakanan
5. JComboBox: DayLister
6. SpinnerList
7. SpinnerNumber
8. Borders
Congratulations!
You’ve learnt…
Swing Components:
ImageIcon pada JButton dan JLabel
Check Box
Radio Button
Combo Box
List
Spinner
Borders
Review: PenggunaanArray
Next… More Swing
Components
MENU
POP UP MENU
JSCROLLPANE
JSPLITPANE
JTABBEDPANE
SCROLLBAR / SLIDER
DIALOG
DESKTOP PANE / INTERNAL FRAME
JMenuBar
JMenu
JMenu
JMenuItem
JMenu adalah sebuah menu standar yang bersifat pull-
down.
Menu dapat berisi menu lain yang disimpan sebagai
submenu item. Hal ini memungkinkan kita membuat
suatu struktur menu yang kompleks.
Kita dapat menyimpan berbagai komponen di dalam
menu (seperti checkbox, radiobutton, dll)
Untuk menyimpan menu dalam bentuk horizontal bar,
kita gunakan JMenuBar. Kita dapat meletakan
JMenuBar di mana saja: top, bottom, atau middle.
Keyboard Access ( Alt & Ctrl)
Kita dapat menggunakan keyboard untuk mengakses
menu. Ada 2 cara:
1. Mnemonics
Berupa satu karakter di dalam nama menu
Untuk mengaksesnya, kita menekan tombol “Alt + karakter“
mnemonic-nya
Menu items juga dapat memiliki mnemonics.
2. Accelerator
Accelerator merupakan kombinasi keyboard untuk memilih
menu item tanpa perlu ditunjukkan isi menu yang
bersangkutan.
Contoh: Ctrl-C biasa digunakan sebagai shortcut untuk menu
Copy item di dalam menu Edit.
Latihan 9: DinnerMenu.java
Buatlah program DinnerMenu yang memiliki
tampilan sbb:
JPopupMenu
Pop up menu biasa disebut juga sebagai “context
menu” merupakan menu yang dapat muncul di
mana saja tergantung posisi mouse. (Untuk
windows, biasa diaktifkan menggunakan klik kanan)
Cara pembuatannya mirip dengan JMenu biasa,
tetapi kita tidak menempelkannya pada JMenuBar.
Latihan 10: ContextMenu.java
Buatlah sebuah aplikasi yang mendemonstrasikan
penggunaan Pop Up Menu sbb:
JScrollPane
JScrollPane merupakan suatu container yang dapat
menampung satu komponen. Dengan kata lain,
JScrollPane berfungsi untuk membungkus suatu
komponen lain.
Secara default, apabila komponen yang dibungkusnya lebih
besar dari JScrollPane itu sendiri, maka JScrollPane akan
menyediakan scrollbars.
Pada saat membuat JScrollPane, kita dapat menentukan
kondisi untuk tampilan scrollbars-nya. Hal ini dikenal
dengan nama “scrollbar display policy” yang berlaku untuk
scrollbar horizontal maupun vertical.
Constants to specify the policy of scrollbars
Constants (options) Description
HORIZONTAL_SCROLLBAR_AS_NEED Displays a scrollbar only if the wrapped
ED component doesn't fit.
VERTICAL_SCROLLBAR_AS_NEEDED
HORIZONTAL_SCROLLBAR_ALWAYS Always shows a scrollbar, regardless of
VERTICAL_SCROLLBAR_ALWAYS the contained component's size.
HORIZONTAL_SCROLLBAR_NEVER Never shows a scrollbar, even if the
VERTICAL_SCROLLBAR_NEVER contained component won't fit. If you
use this policy, you should provide
some other way to manipulate the
JScrollPane.
Latihan 11: ScrollPaneFrame.java
Buatlah sebuah frame yang memiliki JScrollPane di
dalamnya dan menampilkan sebuah gambar sbb:
JSplitPane
JSplitPane merupakan container khusus yang dapat
menampung dua komponen.
Masing-masing komponen disimpan di dalam sub-pane
tersendiri.
Terdapat sebuah splliter bar yang berfungsi untuk
mengubah ukuran kedua subpane tersebut.
Latihan 12: SplitPaneFrame.java
Buatlah sebuah frame yang memiliki JSplitPane.
Masing-masing subpane diberikan gambar sbb:
JTabbedPane
JTabbedPane merupakan container yang memiliki tab
berlabel.
Setiap tab memiliki sebuah nama. Untuk menambahkan
sebuah tab ke dalam JTabbedPane, kita tinggal gunakan
method addTab().
Hati-hati: walaupun JTabbedPane hanya menunjukkan
satu set komponen sekali waktu, tetap harus diketahui
bahwa semua komponen di tab lainnya tetap “hidup” dan
berada di memori.
Latihan 13: TabbedPaneFrame.java
Buatlah sebuah frame yang memiliki JTabbedPane.
Lalu tambahkan 2 buah tab “Control” dan “Picture”
sbb:
JSlider & JScrollBar
JSlider dan JScrollBar merupakan komponen Swing yang
mirip cara kerjanya.
Kita dapat menentukan orientasinya: HORIZONTAL atau
VERTICAL
Kita dapat menentukan juga nilai minimum, maximum,
dan initial.
JSlider memiliki tick mark, yaitu garis yang menunjukan
suatu nilai tertentu sepanjang slider.
Ada 2 jenis tick mark: major dan minor, contoh:
slider.setMajorTickSpacing(48);
slider.setMinorTickSpacing(16);
slider.setPaintTicks(true);
Latihan 14: Slippery.java
Buatlah sebuah frame yang memiliki sebuah
JScrollBar dan JSlider sbb:
Dialog
Dialog biasanya digunakan untuk menampilkan informasi kepada user
atau menanyakan sesuatu.
Dialog dapat diakses dengan menggunakan static methods yang
terdapat pada class JOptionPane.
Terdapat beberapa variasi yang bisa dibuat yaitu:
Jenis Dialog Fungsi
Message Menampilkan suatu pesan kepada user, biasanya
dialog disertai dengan sebuah tombol OK
Confirmation Menanyakan sebuah pertanyaan dan menampilkan
dialog tombol jawaban: Yes, No, dan Cancel
Input dialog Meminta user untuk memasukkan suatu String
Option Tipe yang paling umum. Kita dapat menyimpan
dialogs berbagai komponen di dalamnya.
Latihan15: ExerciseOptions.java
Pada latihan ini kita akan menggunakan semua
variasi dari JOptionPane:
JOptionPane.showMessageDialog
JOptionPane.showConfirmDialog
JOptionPane.showInputDialog
JOptionPane.showOptionDialog
Run: ExerciseOptions.java
showMessageDialog
showConfirmDialog
showInputDialog
showOptionDialog
Desktop
Apabila kita menginginkan aplikasi windows di dalam
windows, kita dapat menggunakan JDesktopPane dan
JInternalFrame.
Internal frame ini dapat dipindahkan lokasinya (drag),
di-resize, dijadikan icon, serta di-maximize.
Internal frame ini sebenarnya merupakan suatu
container seperti biasanya. Artinya kita dapat
menyimpan berbagai komponen dan data di dalamnya.
Latihan 16: Desktop.java
Pada latihan ini, Anda diminta membuat sebuah
JDesktopPane.
Kemudian, Anda membuat 5 buah JInternalFrame
sehingga menghasilkan antarmuka sbb:
Well Done!, You’ve learnt:
JMenu & JMenuBar
JPopupMenu
JScrollPane
JSplitPane
JTabbedPane
JScrollBar & JSlider
JOptionPane
JDesktopPane & JInternalFrame
STOP: pastikan Anda menyelesaikan latihan berikut:
1. JMenu: DinnerMenu.java
2. JPopUpMenu: ContextMenu.java
3. JScrollPane: ScrollPaneFrame.java
4. JSplitPane: SplitPaneFrame.java
5. JTabbedPane: TabbedPaneFrame.java
6. JSlider /JScrollbar: Slippery.java
7. JOptionPane: ExcerciseOptions.java
8. JDesktop/JInternalFrame: Desktop.java
What on Next Week?
LayoutManager:
FlowLayout
GridLayout
BorderLayout
BoxLayout
GridBagLayout
