Membuat Layout Java dengan netbeans

21
Edi Casnadi.(Email:[email protected]) 2012 Layout pada Netbeans Page 1 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: Gambar Pembuatan Project Baru Kemudian pilih tombol Next >, kemudian akan muncul gambar sebagai berikut: Gambar Name dan Location Project

description

Belajar membuat layout di java dengan Netbeans

Transcript of Membuat Layout Java dengan netbeans

Page 1: Membuat Layout Java dengan netbeans

Edi Casnadi.(Email:[email protected]) 2012

Layout pada Netbeans Page 1

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:

Gambar Pembuatan Project Baru

Kemudian pilih tombol Next >, kemudian akan muncul gambar sebagai berikut:

Gambar Name dan Location Project

Page 2: Membuat Layout Java dengan netbeans

Edi Casnadi.(Email:[email protected]) 2012

Layout pada Netbeans Page 2

3. Buat Frame baru sebagai jendela utama, dengan cara klik kanan pada project BelajarLayut,

pilih New > JFrame Frame.

Gambar Class Name JFrame

Namakan JFrame di atas dengan Class Name: FrameUtama, kemudian tekan tombol

Finish, maka akan tampil gambar berikut:

Gambar 3.4 Tampilan Frame

4. Setalah Frame dibuat, tambahkan sebuah tombol, kemudian jalankan Frame ini dengan cara

menekan tombol Shift+F6, maka akan tampil gambar berikut:

Page 3: Membuat Layout Java dengan netbeans

Edi Casnadi.(Email:[email protected]) 2012

Layout pada Netbeans Page 3

Gambar Membuat Tombol pada Frame

5. Buat tombol lima buah seperti gambar berikut:

Gambar Membuat Lima Tombol Pada Frame

Dengan ketentuan sebagai berikut:

JButton1 dengan text=”Border Layout”

JButton2 dengan text=”Flow Layout”

JButton3 dengan text=”Grid Layout”

JButton4 dengan text=”Card Layout”

JButton5 dengan text=”Box Layout”

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:

Page 4: Membuat Layout Java dengan netbeans

Edi Casnadi.(Email:[email protected]) 2012

Layout pada Netbeans Page 4

Gambar Membuat Frame Border Layout

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.

Gambar 3.8 Membuat Panel

Kemudian buatlah Panel sebanyak lima buah. Berikut hasil JPanel berulang-ulang sebanyak

lima kali, yaitu:

Page 5: Membuat Layout Java dengan netbeans

Edi Casnadi.(Email:[email protected]) 2012

Layout pada Netbeans Page 5

Gambar Membuat Lima Panel

9. Kemudian buatlah posisi dari setiap Jpanel, dengan cara pada jendela Properties bagian

Direction, seperti gambar berikut:

Gambar Membuat Posisi Panel

Berikut penamaan setiap posisi Panel dari Direction pada jendela Properties yaitu:

Jpanel1 direction: Nort

Jpanel2 direction: East

Jpanel3 direction: South

Jpanel4 direction: West

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:

Page 6: Membuat Layout Java dengan netbeans

Edi Casnadi.(Email:[email protected]) 2012

Layout pada Netbeans Page 6

GambarMembuat Border Panel

11. Kemudian berilah jLabel pada setiap Panelnya, seperti gambar berikut:

Gambar Memberikan Label Pada Panel

12. Kemudian pada jLabel ubah pada bagian Text di Properties, sehingga seperti gambar

berikut:

Page 7: Membuat Layout Java dengan netbeans

Edi Casnadi.(Email:[email protected]) 2012

Layout pada Netbeans Page 7

Gambar Ubah Text Pada jLabel

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);

}

13. Cobalah dijalankan pada jFrameUtama dengan menekan tombol Shift+F6

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:

Page 8: Membuat Layout Java dengan netbeans

Edi Casnadi.(Email:[email protected]) 2012

Layout pada Netbeans Page 8

Gambar Meletakan empat jButton

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:

Gambar Menentukan Grid Layout

3. Letakkan lima buah JButton pada jFrame, seperti gambar berikut:

Page 9: Membuat Layout Java dengan netbeans

Edi Casnadi.(Email:[email protected]) 2012

Layout pada Netbeans Page 9

Gambar Menentukan jButton

Kemudian pilih GridLayout, maka akan tampil tampilan seprti sebelah kanan, seperti

gambar berikut:

Gambar Fasilitas GridLayout

Ubahlah pada Columns = 3 dan Rows=3 seperti gambar di atas

Kemudian kembali pada jFrameUtama dan pilih jButton Grid Layout, seperti koding

berikut:

private void jButton3ActionPerformed(java.awt.event.ActionEvent evt) {

new Grid().setVisible(true);

Page 10: Membuat Layout Java dengan netbeans

Edi Casnadi.(Email:[email protected]) 2012

Layout pada Netbeans Page 10

}

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:

Gambar Variable Name Pada Panel Bawah

4. Pada panel di atas letakan jLabel dan jCombobox, ubahlah jLabel dengan Jenis Kursus,

seperti gambar berikut:

Gambar Meletakan Jlabel dan Jcombobox

5. Pilih jCombobox dan ubahlah isi dari jCombobox, dengan cara pada jendela Properties dan pilih

model, kemudian ubah dan ganti seperti gambar berikut:

Page 11: Membuat Layout Java dengan netbeans

Edi Casnadi.(Email:[email protected]) 2012

Layout pada Netbeans Page 11

Gambar Mengisi jCombobox

Kemdian ganti Variable Name : cmbPilihan, dan akan muncul jCombobox seperti

gambar berikut:

Gambar Hasil isi jCombobox

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.

Page 12: Membuat Layout Java dengan netbeans

Edi Casnadi.(Email:[email protected]) 2012

Layout pada Netbeans Page 12

Gambar Card Name Layout

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:

Gambar Tampilan Icon pada jLabel

Pada Package pilih folder Gambar dan pada File pilih Java.jpg

Kemudian pilih tombol OK.

Page 13: Membuat Layout Java dengan netbeans

Edi Casnadi.(Email:[email protected]) 2012

Layout pada Netbeans Page 13

Dengan cara seperti gambar berikut

Gambar 3.23 Pemilihan Icon pada jLabel

11. Tambahkan event item change pada pilih gambar Java, caranya klik kanan pada jCombobox,

lalu pilih menu Event>Items> ItemStateChanged, seperti gambar berikut:

Gambar Tampilan Icon pada jLabel

12. Setelah terbuka editor maka tambahkan kode di cmbPilihan, sebagai berikut:

private void cmbPilihanItemStateChanged(java.awt.event.ItemEvent evt) {

CardLayout c1 = (CardLayout)(pCard.getLayout());

c1.show(pCard,String.valueOf(cmbPilihan.getSelectedIndex()));

}

13. Kemudian balik ke FrameUtama, dan tambahkan kode pada jButton Card Layout

private void jButton4ActionPerformed(java.awt.event.ActionEvent evt) {

new Card().setVisible(true);

}

Page 14: Membuat Layout Java dengan netbeans

Edi Casnadi.(Email:[email protected]) 2012

Layout pada Netbeans Page 14

Berikut hasil dari pembuatan Card Layout

Gambar Tampilan Hasil Card

3.4. GridBagLayout

GridBagLayout merupakan untuk menempatkan komponen-komponen secara horizontal dan

vertikal pada kotak-kotak yang dinamis.

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:

Page 15: Membuat Layout Java dengan netbeans

Edi Casnadi.(Email:[email protected]) 2012

Layout pada Netbeans Page 15

Gambar 3.26 Menempelkan Label, Button, Textfield

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.

Gambar 3.27 Customize GridBagLayout

7. Edit dan rubah ukuran dari jLabel dengan cara merubah Grid Size dengan (-) atau (+) seperti

gambar berikut:

Page 16: Membuat Layout Java dengan netbeans

Edi Casnadi.(Email:[email protected]) 2012

Layout pada Netbeans Page 16

Gambar 3.28 Editing jLabel dengan Grid Size

Berikut gambar hasil edit ukuran dengan GridSize

Gambar 3.29 Hasil Costumize GridBagLayout

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.

Page 17: Membuat Layout Java dengan netbeans

Edi Casnadi.(Email:[email protected]) 2012

Layout pada Netbeans Page 17

Gambar Hasil Costumize GridBagLayout

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...

Gambar Ubah Variable Name

4. Pada panel atas masukan jLabel dan jCombobox pada

5. Pada jCombobox diisi dengan Posisi X dan Posisi Y, seperti gambar berikut:

Page 18: Membuat Layout Java dengan netbeans

Edi Casnadi.(Email:[email protected]) 2012

Layout pada Netbeans Page 18

Gambar Isi jCombobox

6. Atur panel pBox (bawah) menjadi BoxLayout, kemudian masukan tiga buah label pada panel

jBox. Seperti gambar berikut:

Gambar 3.33 Label pada pBox

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:

Page 19: Membuat Layout Java dengan netbeans

Edi Casnadi.(Email:[email protected]) 2012

Layout pada Netbeans Page 19

Gambar 3.34 Label dengan Posisi X

9. Tambahkan event item change pada pilihan model box(jCombobox). Caranya kanan pada

jCombobox lalu pilih Events>Item>ItemStateChange, kemudian masukan kode berikut

private void jComboBox1ItemStateChanged(java.awt.event.ItemEvent evt) {

if (jComboBox1.getSelectedIndex()==0) jPanel1.setLayout(new javax.swing.BoxLayout(jPanel1,javax.swing.BoxLayout.X_AXIS));

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:

private void jButton5ActionPerformed(java.awt.event.ActionEvent evt) {

new Box().setVisible(true);

}

10. Jalankan program dari FrameUtama dengan cara tekan Shift+F6, dan klik tombol Box

Layout, dan pilih Posisi Y. seperti gambar berikut:

Page 20: Membuat Layout Java dengan netbeans

Edi Casnadi.(Email:[email protected]) 2012

Layout pada Netbeans Page 20

Gambar Hasil Posisi Y

Page 21: Membuat Layout Java dengan netbeans

Edi Casnadi.(Email:[email protected]) 2012

Layout pada Netbeans Page 21

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.