Your SlideShare is downloading. ×

Layout Java dengan netbeans

6,524

Published on

Membuat Layout dengan Netbeans

Membuat Layout dengan Netbeans

Published in: Technology, Education
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
6,524
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
573
Comments
0
Likes
1
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Edi Casnadi.(Email:ed.mobilejava@gmail.com) 2012 LAYOUT MANAGERBorder LayoutBorder Layout digunakan untuk menyusun komponen-komponen sebuah kontainer dalamwilayah yang biasanya dinamai North, South, East, West dan Center. Berikut langkah-langkahuntuk 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 ProjectLayout pada Netbeans Page 1
  • 2. Edi Casnadi.(Email:ed.mobilejava@gmail.com) 20123. 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 Frame4. Setalah Frame dibuat, tambahkan sebuah tombol, kemudian jalankan Frame ini dengan cara menekan tombol Shift+F6, maka akan tampil gambar berikut:Layout pada Netbeans Page 2
  • 3. Edi Casnadi.(Email:ed.mobilejava@gmail.com) 2012 Gambar Membuat Tombol pada Frame5. 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:Layout pada Netbeans Page 3
  • 4. Edi Casnadi.(Email:ed.mobilejava@gmail.com) 2012 Gambar Membuat Frame Border Layout8. 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:Layout pada Netbeans Page 4
  • 5. Edi Casnadi.(Email:ed.mobilejava@gmail.com) 2012 Gambar Membuat Lima Panel9. 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: West10. 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:Layout pada Netbeans Page 5
  • 6. Edi Casnadi.(Email:ed.mobilejava@gmail.com) 2012 GambarMembuat Border Panel11. Kemudian berilah jLabel pada setiap Panelnya, seperti gambar berikut: Gambar Memberikan Label Pada Panel12. Kemudian pada jLabel ubah pada bagian Text di Properties, sehingga seperti gambar berikut:Layout pada Netbeans Page 6
  • 7. Edi Casnadi.(Email:ed.mobilejava@gmail.com) 2012 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+F63.1. FlowLayoutFlowLayout 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: Flow2. Kemudian letakan empat buah jButton, seperti gambar berikut:Layout pada Netbeans Page 7
  • 8. Edi Casnadi.(Email:ed.mobilejava@gmail.com) 2012 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. GridLayoutGridLayout 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: Grid2. Kemudian pilih jFrame pada jendela Inspector, kemudian klik kanan pada jFrame>SetLayout>Grid Layout, seperti gambar berikut: Gambar Menentukan Grid Layout3. Letakkan lima buah JButton pada jFrame, seperti gambar berikut:Layout pada Netbeans Page 8
  • 9. Edi Casnadi.(Email:ed.mobilejava@gmail.com) 2012 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);Layout pada Netbeans Page 9
  • 10. Edi Casnadi.(Email:ed.mobilejava@gmail.com) 2012 }3.3. CardLayoutUntuk menempatkan komponen-komponen (biasanya panel) satu di atas yang lainnya sepertitumpukan 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 Borderlayout3. 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 Bawah4. Pada panel di atas letakan jLabel dan jCombobox, ubahlah jLabel dengan Jenis Kursus, seperti gambar berikut: Gambar Meletakan Jlabel dan Jcombobox5. Pilih jCombobox dan ubahlah isi dari jCombobox, dengan cara pada jendela Properties dan pilih model, kemudian ubah dan ganti seperti gambar berikut:Layout pada Netbeans Page 10
  • 11. Edi Casnadi.(Email:ed.mobilejava@gmail.com) 2012 Gambar Mengisi jCombobox Kemdian ganti Variable Name : cmbPilihan, dan akan muncul jCombobox seperti gambar berikut: Gambar Hasil isi jCombobox6. 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.Layout pada Netbeans Page 11
  • 12. Edi Casnadi.(Email:ed.mobilejava@gmail.com) 2012 Gambar Card Name Layout8. 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.Layout pada Netbeans Page 12
  • 13. Edi Casnadi.(Email:ed.mobilejava@gmail.com) 2012  Dengan cara seperti gambar berikut Gambar 3.23 Pemilihan Icon pada jLabel11. 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 jLabel12. 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); }Layout pada Netbeans Page 13
  • 14. Edi Casnadi.(Email:ed.mobilejava@gmail.com) 2012 Berikut hasil dari pembuatan Card Layout Gambar Tampilan Hasil Card3.4. GridBagLayoutGridBagLayout merupakan untuk menempatkan komponen-komponen secara horizontal danvertikal 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 normal3. Letakan sebuah panel dengan posisi di tengah, kemudian letakan jLabel, jCombobox dan jButton, seperti gambar berikut:Layout pada Netbeans Page 14
  • 15. Edi Casnadi.(Email:ed.mobilejava@gmail.com) 2012 Gambar 3.26 Menempelkan Label, Button, Textfield4. Ubahlah jLabel4 paling atas, hapus properties text, ubahlah Icon dan pilihlah gambar yang ditentukan.5. Klik kanan panel, lalu pilih SetLayout > GridBagLayout6. Pilihlah Inspector, perhatikan menu GridBagLayout yang muncul di bawah jPanel1. Kemudian klik kanan, pilih Customize, sehingg muncul jendela Customize. Gambar 3.27 Customize GridBagLayout7. Edit dan rubah ukuran dari jLabel dengan cara merubah Grid Size dengan (-) atau (+) seperti gambar berikut:Layout pada Netbeans Page 15
  • 16. Edi Casnadi.(Email:ed.mobilejava@gmail.com) 2012 Gambar 3.28 Editing jLabel dengan Grid Size Berikut gambar hasil edit ukuran dengan GridSize Gambar 3.29 Hasil Costumize GridBagLayout8. 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.Layout pada Netbeans Page 16
  • 17. Edi Casnadi.(Email:ed.mobilejava@gmail.com) 2012 Gambar Hasil Costumize GridBagLayout3.5. BoxLayOutLayout ini untuk mengizinkan banyak komponen untuk diletakan secara vertikal maupunhorizontal. 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 Name4. Pada panel atas masukan jLabel dan jCombobox pada5. Pada jCombobox diisi dengan Posisi X dan Posisi Y, seperti gambar berikut:Layout pada Netbeans Page 17
  • 18. Edi Casnadi.(Email:ed.mobilejava@gmail.com) 2012 Gambar Isi jCombobox6. Atur panel pBox (bawah) menjadi BoxLayout, kemudian masukan tiga buah label pada panel jBox. Seperti gambar berikut: Gambar 3.33 Label pada pBox7. 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:Layout pada Netbeans Page 18
  • 19. Edi Casnadi.(Email:ed.mobilejava@gmail.com) 2012 Gambar 3.34 Label dengan Posisi X9. 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:Layout pada Netbeans Page 19
  • 20. Edi Casnadi.(Email:ed.mobilejava@gmail.com) 2012 Gambar Hasil Posisi YLayout pada Netbeans Page 20
  • 21. Edi Casnadi.(Email:ed.mobilejava@gmail.com) 2012Latihan 31. 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.Layout pada Netbeans Page 21

×