BAB VIII
BEKERJA DENGAN KONTROL JTABBEDPANE
A. CAPAIAN PEMBELAJARAN
1. Mahasiswa dapat mengerti dan dapat menggunakan
JTABPANE
2. Mahasiswa dapat menganalisa kapan menggunakan
JTABPANE
3. Mahasiswa dapat membuat program menggunakan
JTABPANE
B. MATERI
1. JTABPANE
Gambar 8. 1 Kontrol JtabbedPane
Kontrol JtabbedPane menyediakan cara mudah
untuk menampilkan beberapa panel informasi dalam
satu frame - mirip dengan memiliki aplikasi multi-frame.
Pemrograman Berorientasi Obyek 2 (Java 2) 128
Jtabbed pane adalah antarmuka yang terlihat di
banyak aplikasi GUI komersial. Kontrol panel tab
menyediakan sekelompok tab, yang masing-masing
dapat menampung komponen tunggal (hampir selalu
merupakan panel kontrol). Hanya satu tab yang bisa
aktif di sebuah waktu. Navigasi dari satu tab ke tab
berikutnya sederhana: cukup klik pada tab yang sesuai.
Menggunakan kontrol ini sangat lah mudah. Untuk
membangun setiap komponen tab sebagai panel
terpisahseperti menambahkan kontrol, setting properti,
dan menulis kode seperti yang kita lakukan sebelumnya.
Kemudian untuk menambahkan tab dengan
menyisipkan panel ke JTabbedPane.
a. Properti pada Tabbed Pane :
font : Font digunakan untuk jenis font
judul pada tab yang ditampilkan.
selectedIndex : Index tab yang sedang aktif.
tabLayoutPolicy : Mengontrol bagaimana tab
ditampilkan ketika ada banyak
tab.
b. Metode pada Tabbed Pane
setFont : Digunakan untuk mengatur
properti font.
setSelectedIndex : Digunakan untuk mengubah tab
yang ditampilkan secara
terprogram.
Pemrograman Berorientasi Obyek 2 (Java 2) 129
getSelectedIndex : Digunakan untuk
menentukan tab “aktif”.
addTab : Menambahkan
tab dan komponen terkait
untuk dikontrol.
setTabLayoutPolicy : Digunakan untuk
membuat tata letak tab
(JTabbedPane.SCROLL_
TAB_LAYOUT ,
JTabbedPane.WRAP_TA
B_LAYOUT )
c. Event pada Jtabbed Pane
StateChanged Event (ChangeEvent) dipicu
saat perubahan tab yang dipilih. Ditambah dengan
ChangeEventListener (memerlukan impor dari file
javax.swing.event.*).
2. Contoh Program menggunakan Tabbed Pane
Buat proyek baru pada NetBeans, selanjutnya
buat Frame nya. Beri nama Frame ShoppingCart. Kita
akan membangun Tabbed pane aplikasi sistem
perdagangan 'on-line' sederhana.
Kira akan membuat setiap panel tab secara
terpisah. Terlihat seperti gambar dibawah, dimana 1
Frame akan menampung satu kontrol Tabbed Pane
Pemrograman Berorientasi Obyek 2 (Java 2) 130
(shoppingPane) . Panel tab akan menampung tiga panel
(orderPanel, cartPanel dan AddressPanel). desain
setiap panel nya secara terpisah. Contoh desain nya :
Gambar 8. 2 Desain JtabbedPane
a. Setting propertiesnya :
1) OrderPane(Panel)
text : Order Form
a) orderLabel(Label) :
text : Order Address:
insets : (10, 10, 0, 0)
b) orderTextArea(TextArea) :
columns : 30
rows :6
Pemrograman Berorientasi Obyek 2 (Java 2) 131
insets : (10, 10, 10, 10)
c) orderSpinner(Spinner)
model : SpinnerListModel
isi dari list model :
Tricycle
Skateboard
In-LineSkates
Magic Set
Video Game
Helmet
Building Kit
Artist Set
Doll Baby
Bicycle
preferredSize : (150, 25)
d) addButton(Button)
text : Add to Order
insets : (5, 0, 5, 0)
e) numberTextField
setText : Items Ordered: 0
columns : 20
editable : false
Pemrograman Berorientasi Obyek 2 (Java 2) 132
background : WHITE
horizontalAlignment : CENTER
insets : (5, 0, 5, 0)
f) newButton:
text : New Order
insets : (5, 0, 5, 0)
g) exitButton:
text : Exit
insets : (5, 0, 5, 0)
2) cartPanel (Panel)
text : Shopping Cart
a) cartPane:
preferredSize (250, 150)
b) viewportView cartTextArea (JTextArea
control)
insets (10, 10, 10, 10)
c) costTextField:
text : Total Cost:
columns : 20
editable false
background : WHITE
insets (5, 0, 5, 0)
Pemrograman Berorientasi Obyek 2 (Java 2) 133
3) AddressPane (Panel)
text : Mailing Label
a) preferredSize : (250, 150)
b) viewportView : addressTextArea (JTextArea
control)
insets (10, 10, 10, 10)
b. Tampilan Jendela Navigator setelah setting
properties
Gambar 8. 3 Navigator JtabbedPane
3. Tahapan Coding
Setelah proses desain selesai kita akan meng kodekan
atau membuat program nya :
Pemrograman Berorientasi Obyek 2 (Java 2) 134
a. Deklarasi 2 variabel yang dapat dikenali ke semua
frame
Dibawah FrameJTabbedPane contoh :
public class FrameJTabPane extends
javax.swing.JFrame {
int itemsOrdered;
String S1="";
b. Berikan kode program pada tombol AddButton (Add
To Order) dimana pada saat di klik akan mengambil
nilai item dari OrderSpinner, lalu menambahkan
jumlah item order numberTextField :
private void
addButtonActionPerformed(java.awt.event.ActionEv
ent evt) {
cartTextArea.setText("");
itemsOrdered++;
S1=S1+"
"+orderSpinner.getValue().toString()+'\n';
numberTextField.setText("Items Ordered: " +
itemsOrdered);
}
c. Berikan kode program pada tombo lNewButton (New
Order), untuk membuat order baru dan
membersihkan semua komponen yang telah di isi,
Kode Programnya :
private void
newButtonActionPerformed(java.awt.event.ActionEv
ent evt) {
Pemrograman Berorientasi Obyek 2 (Java 2) 135
// TODO add your handling code here:
OrderTextArea.setText("");
itemsOrdered = 0;
numberTextField.setText("Items Ordered: 0");
cartTextArea.setText(null);
cartTextField.setText("");
AddressTextArea.setText("");
S1="";
}
d. Berikan Kode Program untuk Tombol Exit hasilnya
akan menampilkan dialog konformasi, jika tekan OK
akan keluar dari program, jika tekan Cancel frame
akan tetap running tampilan yang di inginkan seperti
gambar dibawah ini :
Gambar 8. 4 Tampilan pesan TabbedPane
Kode program :
private void
exitButtonActionPerformed(java.awt.event.ActionEve
nt evt) {
// TODO add your handling code here:
Pemrograman Berorientasi Obyek 2 (Java 2) 136
int ex=JOptionPane.showConfirmDialog(null,
"Are You Sure ? ",
"Konfirmasi",JOptionPane.OK_CANCEL_OPTION,J
OptionPane.QUESTION_MESSAGE);
if (ex==0) {
System.exit(0);
}
e. Berikan Kode Program saat berpindah Tab dari Tab
OrderPanel, CartPanel, Mailing Label
private void
shoppingPaneStateChanged(javax.swing.event.Cha
ngeEvent evt) {
// TODO add your handling code here:
switch(shoppingPane.getSelectedIndex()){
case 0:
break;
case 1:
if (itemsOrdered == 0)
{JOptionPane.showConfirmDialog(null, "No
items have been ordered.", "Error",
JOptionPane.DEFAULT_OPTION,
JOptionPane.ERROR_MESSAGE);
shoppingPane.setSelectedIndex(0);
}
else
{
Pemrograman Berorientasi Obyek 2 (Java 2) 137
cartTextArea.setText(S1);
cartTextField.setText(""+numberTextField.getText());
}
break;
case 2:
// establish address and show label form
if (OrderTextArea.getText().equals(""))
{
JOptionPane.showConfirmDialog(null,
"Address is blank.", "Error",
JOptionPane.DEFAULT_OPTION,
JOptionPane.ERROR_MESSAGE);
shoppingPane.setSelectedIndex(0);
}
else
{
//form label
AddressTextArea.setText("My Company\n"
+ "My Address\n" + "My City, State, Zip\n\n\n" +
OrderTextArea.getText()); }
break;
}
}
f. Uji coba program jalankan/Run program (Shift+F6)
kemudian posisi tab aktif pada Order Form
Pemrograman Berorientasi Obyek 2 (Java 2) 138
Gambar 8. 5 Hasil Run Order Form TabbedPane
a. Isikan text order area :
- Agustav, Jl merpati , Tangerang Selatan
b. Aktifkan spinner untuk memilih item order contoh
;
- Skateboard , Magic Set . Helmet
- Setiap order lakukan klik tombol order
c. Aktifkan Tab Shopping Cart lihat perhatikan
cart Text area apakah ter isi sesuai pada
addOrder yang dilakukan jika tampilan seperti
dibawah ini maka order benar :
Pemrograman Berorientasi Obyek 2 (Java 2) 139
Gambar 8. 6 TabbedPane Shopping Cart
d. Aktifkan Tab Mailing Label, jika Adress text area
sama dengan order address pada tab Order form
maka mailing label benar :
Gambar 8. 7 Tabbed Pane Mailing Label
Pemrograman Berorientasi Obyek 2 (Java 2) 140
C. LATIHAN
1. Modifikasi Frame Shopping cart diatas, tambahkan cost
masing masing item order, dan akan ditampilkan pada
costtextfield Tab Order Form.
Acuan nya :
Tabel 8. 1 Tabel Order Form
Item Order Cost ($)
50
Tricycle
60
Skateboard
100
In-LineSkates
15
Magic Set
25
Video Game
40
Helmet
120
Building Kit
18
Artist Set
19
Doll Baby
20
Bicycle
Tampilan modifikasi setelah penambahan cost pada Tab
Order Form
Pemrograman Berorientasi Obyek 2 (Java 2) 141
Gambar 8. 8 Tampilan Modifikasi Order Form
2. Tambahkan total cost textfield pada tab carPanel, total
cost adalajh jumlah cost yang di order
Tampilan Modifikasi setelah penambahan Total cost
pada Tab Shopping cart
Gambar 8. 9 Hasil Run Modifikasi TabbedPane
Pemrograman Berorientasi Obyek 2 (Java 2) 142
D. REFERENSI
Philip Conrod & Lou Tylee. Learn Java™ GUI Applications A
JFC Swing NetBeans Tutorial 8th Edition , Kidware
Software, LLC, 2015
Danny Poo Derek Kiong Swarnalatha Ashok, Object-
Oriented Second edition Programming and Java ,
Springer 2008
https://www.javatpoint.com/java-bufferedreader-class,
diakses pada tanggal 23 Desember 2021.
https://www.homeandlearn.co.uk/java/java_check_boxes.ht
ml, diakses pada diakses pada tanggal 23 Juni
2022.
Romi satrio Wahono, Java Gui, 2016
Pemrograman Berorientasi Obyek 2 (Java 2) 143
