com) 2012
LAYOUT MANAGER
Border Layout
Border Layout digunakan untuk menyusun komponen-komponen sebuah kontainer dalam
wilayah yang biasanya dinamai North, South, East, West dan Center. Berikut langkah-langkah
untuk membuatnya.
1. Buat proyek baru. Dengan cara klik pada menu File > New Project.
2. Dari Jendela New Project, pilih Java pada kotak Categories, pilih Java Application pada
kotak Projects. Seperti gambar berikut:
Kemudian pilih tombol Next >, kemudian akan muncul gambar sebagai berikut:
3. Buat Frame baru sebagai jendela utama, dengan cara klik kanan pada project BelajarLayut,
pilih New > JFrame Frame.
Namakan JFrame di atas dengan Class Name: FrameUtama, kemudian tekan tombol
Finish, maka akan tampil gambar berikut:
4. Setalah Frame dibuat, tambahkan sebuah tombol, kemudian jalankan Frame ini dengan cara
menekan tombol Shift+F6, maka akan tampil gambar berikut:
6. Buat Frame baru lagi untuk membuat contoh pembuatan BorderLayout. Dengan caranya klik
kanan pada proyek BelajarLayOut, pilih New > JFrame Form, berikan Name Class :
Border, tekan tombol Finish.
7. Ubahlah Frame tersebut menjadi BoderLayout. Dengan cara menuju jendela Inspector, lalu
klik kanan pada JFrame > Setlayout > BorderLayout. Seperti gambar berikut:
8. Tambahkan sebuah JPanel ke dalam Frame. Caranya dari jendela Inspector , klik kanan
pada JFrame > Add Form Palette > Swing Containers > Panel. Lakukan berulang sampai
ada lima buah panel di dalamnya.
Kemudian buatlah Panel sebanyak lima buah. Berikut hasil JPanel berulang-ulang sebanyak
lima kali, yaitu:
9. Kemudian buatlah posisi dari setiap Jpanel, dengan cara pada jendela Properties bagian
Direction, seperti gambar berikut:
10. Setelah memberikan posisi pada Panel, langkah selanjutnya memberikan garis tepi setiap
panel, dengan cara pilih pada Jpanel1 dan jendela Properties pilih border kemudian
seleksi/memilih LineBorder seperti gambar berikut:
11. Kemudian berilah jLabel pada setiap Panelnya, seperti gambar berikut:
12. Kemudian pada jLabel ubah pada bagian Text di Properties, sehingga seperti gambar
berikut:
Setelah semua selesai kita balik lagi pada FrameUtama, klik ganda pada jButton1 atau
tombol Border Layout, kemudian lengkapi kodingnya sebagai berikut:
private void jButton1ActionPerformed(java.awt.event.ActionEvent evt) {
new Border().setVisible(true);
}
3.1. FlowLayout
FlowLayout digunakan untuk menyusun tombol-tombol pada panel. Berikut cara pembuatannya:
1. Buatlah file baru dalam proyek BelajarLayOut sebelumnya. Buat Frame baru lagi dengan
cara, pilih New > JFrame Form. Berikan Class Name: Flow
2. Kemudian letakan empat buah jButton, seperti gambar berikut:
Kemudian kembali lagi pada jFrameUtama dan pilih tombol Flow Layout, kemudian
tambahkan koding berikut:
private void jButton2ActionPerformed(java.awt.event.ActionEvent evt) {
new Flow().setVisible(true);
}
3.2. GridLayout
GridLayout merupakan untuk menentukan ke dalam kotak-kotak sel dalam baris dan kolom.
1. Buatlah file baru dalam proyek BelajarLayOut sebelumnya. Buat Frame baru lagi dengan
cara, pilih New > JFrame Form. Berikan Class Name: Grid
2. Kemudian pilih jFrame pada jendela Inspector, kemudian klik kanan pada
jFrame>SetLayout>Grid Layout, seperti gambar berikut:
Kemudian pilih GridLayout, maka akan tampil tampilan seprti sebelah kanan, seperti
gambar berikut:
Kemudian kembali pada jFrameUtama dan pilih jButton Grid Layout, seperti koding
berikut:
3.3. CardLayout
Untuk menempatkan komponen-komponen (biasanya panel) satu di atas yang lainnya seperti
tumpukan kartu. Dengan cara sebagai berikut:
1. Buatlah file baru dalam proyek BelajarLayOut sebelumnya. Buat Frame baru lagi dengan
cara, pilih New > JFrame Form. Berikan Class Name: Card, tekan tombol Finish.
2. Set Layout dari jFramenya menjadi Borderlayout
3. Tambahkan dua buah panel dengan posisi atas(first) dan panel bawah dengan posisi (center).
Kemudian ubahlah Variable Name pada panel bawah dengan nama : pCard, seperti gambar
berikut:
4. Pada panel di atas letakan jLabel dan jCombobox, ubahlah jLabel dengan Jenis Kursus,
seperti gambar berikut:
5. Pilih jCombobox dan ubahlah isi dari jCombobox, dengan cara pada jendela Properties dan pilih
model, kemudian ubah dan ganti seperti gambar berikut:
Kemdian ganti Variable Name : cmbPilihan, dan akan muncul jCombobox seperti
gambar berikut:
6. Set panel pCard(bawah) menjadi Cardlayout, kemudian masukan tiga buah panel. Caranya,
klik kanan dan pilih Add From Palette > Swing containers > Panel. Lakukan sampai ada tiga
buah panel.
7. Ubah nama-nama kartu dalam Cardlayout tersebut. Caranya, dari jendela Inspector, pilih
salah satu dari tiga panel Cardlayout tersebut. Berikan nama urut dari panel atas sampai
bawah, dimulai dari angka 0,1, dan 2.
8. Buatlah gambar 3 buah/dari copi folder gambar yang telah disediakan ke folder Src pada
project BelajarLayOut.
9. Tambahkan jLabel pada masing-masing Panel yang berada dalam panel pCard tersebut.
10. Cara memasukan gambar pada jlabel baru yaitu
Klik pada JLabel pada palette.
Letakan pada salah satu panel pCard yang aktif
Ubahlah Icon pada jLabel tersebut(klik tombol ) sehingga akan tampil dialog gambar
sebagai berikut:
Pada Package pilih folder Gambar dan pada File pilih Java.jpg
Kemudian pilih tombol OK.
11. Tambahkan event item change pada pilih gambar Java, caranya klik kanan pada jCombobox,
lalu pilih menu Event>Items> ItemStateChanged, seperti gambar berikut:
12. Setelah terbuka editor maka tambahkan kode di cmbPilihan, sebagai berikut:
13. Kemudian balik ke FrameUtama, dan tambahkan kode pada jButton Card Layout
private void jButton4ActionPerformed(java.awt.event.ActionEvent evt) {
new Card().setVisible(true);
}
Layout pada Netbeans Page 13
Edi Casnadi.(Email:ed.mobilejava@gmail.com) 2012
3.4. GridBagLayout
1. Buatlah file baru dalam proyek BelajarLayOut sebelumnya. Buat Frame baru lagi dengan
cara, pilih New > JFrame Form. Berikan Class Name: GridBag, tekan tombol Finish.
2. Biarkan layout jFrame dalam keadaan tetap normal
3. Letakan sebuah panel dengan posisi di tengah, kemudian letakan jLabel, jCombobox dan
jButton, seperti gambar berikut:
4. Ubahlah jLabel4 paling atas, hapus properties text, ubahlah Icon dan pilihlah gambar yang
ditentukan.
5. Klik kanan panel, lalu pilih SetLayout > GridBagLayout
6. Pilihlah Inspector, perhatikan menu GridBagLayout yang muncul di bawah jPanel1.
Kemudian klik kanan, pilih Customize, sehingg muncul jendela Customize.
7. Edit dan rubah ukuran dari jLabel dengan cara merubah Grid Size dengan (-) atau (+) seperti
gambar berikut:
8. Kembali lagi ke FrameUtama lagi, dan pilih jButton GridBagLayout, berikut kodenya:
private void jButton6ActionPerformed(java.awt.event.ActionEvent evt) {
new GridBag().setVisible(true);
}
9. Berikut hasil akhir GridBagLayout setelah di jalankan dengan cara tekan Shift+F6.
3.5. BoxLayOut
Layout ini untuk mengizinkan banyak komponen untuk diletakan secara vertikal maupun
horizontal. Berikut cara pembuatannya.
1. Buatlah file baru dalam proyek BelajarLayOut sebelumnya. Dengan cara, pilih New >
JFrame Form. Berikan Class Name: Box, pilih tombol Finish.
2. Setlayout dari jFramenya menjadi BorderLayout.
3. Tambahkan dua panel dengan posisi atas (First) dan bawah (center). Ubah nama variabel
panel yang bawah menjadi pBox. Caranya klik kanan panel, pilih Change Variable Name...
6. Atur panel pBox (bawah) menjadi BoxLayout, kemudian masukan tiga buah label pada panel
jBox. Seperti gambar berikut:
7. Masukan gambar Java pada ketiga label dalam panel pBox tersebut. Caranya ubah Properties
Icon, masukan paket Gambar dalam isian Package, kemudian pilih file gambarnya.
8. Hapus semua text pada masing-masing label tersebut, sehingga hanya gambar yang terlihat
seperti gambar berikut:
9. Tambahkan event item change pada pilihan model box(jCombobox). Caranya kanan pada
jCombobox lalu pilih Events>Item>ItemStateChange, kemudian masukan kode berikut
else if (jComboBox1.getSelectedIndex()==1)
jPanel1.setLayout(new javax.swing.BoxLayout(jPanel1,javax.swing.BoxLayout.Y_AXIS));
this.pack();
}
Kemdian kembali pada FrameUtama dan pilih tombol Box Layout dan tulis koding berikut:
10. Jalankan program dari FrameUtama dengan cara tekan Shift+F6, dan klik tombol Box
Layout, dan pilih Posisi Y. seperti gambar berikut:
Latihan 3
1. Buat untuk menentukan program perhitungan dengan menggunakan jCombobox dan pada
jCombobox diisi dengan
Penjumlahan
Perkalian
Dengan ketentuan sebagai berikut:
Ketika pilih Penjumlahan pada jCombobox maka hasil akan melakukan penjumlahan, tetapi
ketika pilih Perkalian pada jCombobox maka menghasilkan perkalian.