SlideShare a Scribd company logo
1 of 21
Download to read offline
Edi Casnadi.(Email:ed.mobilejava@gmail.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:




         Gambar Pembuatan Project Baru

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




            Gambar Name dan Location Project

Layout pada Netbeans                                                                           Page 1
Edi Casnadi.(Email:ed.mobilejava@gmail.com)   2012



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:




Layout pada Netbeans                                                                         Page 2
Edi Casnadi.(Email:ed.mobilejava@gmail.com)   2012




      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:




Layout pada Netbeans                                                                          Page 3
Edi Casnadi.(Email:ed.mobilejava@gmail.com)   2012




       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:




Layout pada Netbeans                                                                         Page 4
Edi Casnadi.(Email:ed.mobilejava@gmail.com)   2012




        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:




Layout pada Netbeans                                                                            Page 5
Edi Casnadi.(Email:ed.mobilejava@gmail.com)   2012




                       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:


Layout pada Netbeans                                                                            Page 6
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+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:




Layout pada Netbeans                                                                             Page 7
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. 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:




Layout pada Netbeans                                                                           Page 8
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
Edi Casnadi.(Email:ed.mobilejava@gmail.com)   2012



        }




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:




Layout pada Netbeans                                                                           Page 10
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 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.




Layout pada Netbeans                                                                         Page 11
Edi Casnadi.(Email:ed.mobilejava@gmail.com)   2012




                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.

Layout pada Netbeans                                                                          Page 12
Edi Casnadi.(Email:ed.mobilejava@gmail.com)   2012



        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);
      }
Layout pada Netbeans                                                                           Page 13
Edi Casnadi.(Email:ed.mobilejava@gmail.com)   2012




     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:




Layout pada Netbeans                                                                           Page 14
Edi Casnadi.(Email:ed.mobilejava@gmail.com)   2012




     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:



Layout pada Netbeans                                                                             Page 15
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 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.




Layout pada Netbeans                                                                          Page 16
Edi Casnadi.(Email:ed.mobilejava@gmail.com)   2012




             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:




Layout pada Netbeans                                                                          Page 17
Edi Casnadi.(Email:ed.mobilejava@gmail.com)   2012




            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:




Layout pada Netbeans                                                                        Page 18
Edi Casnadi.(Email:ed.mobilejava@gmail.com)   2012




                                 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:




Layout pada Netbeans                                                                             Page 19
Edi Casnadi.(Email:ed.mobilejava@gmail.com)   2012




                       Gambar Hasil Posisi Y




Layout pada Netbeans                                                                          Page 20
Edi Casnadi.(Email:ed.mobilejava@gmail.com)   2012




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.




Layout pada Netbeans                                                                       Page 21

More Related Content

What's hot

Tugas laporan project aplikasi website
Tugas laporan project aplikasi websiteTugas laporan project aplikasi website
Tugas laporan project aplikasi websiteGilang Ramadhan
 
Materi sorting(pengurutan)-Dasar-Dasar Pemprograman
Materi sorting(pengurutan)-Dasar-Dasar PemprogramanMateri sorting(pengurutan)-Dasar-Dasar Pemprograman
Materi sorting(pengurutan)-Dasar-Dasar PemprogramanReskidtc
 
Part 1 - PENGENALAN VISUAL STUDIO 2010
Part 1 - PENGENALAN VISUAL STUDIO 2010 Part 1 - PENGENALAN VISUAL STUDIO 2010
Part 1 - PENGENALAN VISUAL STUDIO 2010 Rolly Yesputra
 
[PBO] Pertemuan 11 - GUI Java Desktop
[PBO] Pertemuan 11 - GUI Java Desktop[PBO] Pertemuan 11 - GUI Java Desktop
[PBO] Pertemuan 11 - GUI Java Desktoprizki adam kurniawan
 
Pengenalan Aplikasi Adobe Premiere
Pengenalan Aplikasi Adobe PremierePengenalan Aplikasi Adobe Premiere
Pengenalan Aplikasi Adobe PremiereErwin Rasyid
 
Proposal Proyek Aplikasi Web Percetakan
Proposal Proyek Aplikasi Web PercetakanProposal Proyek Aplikasi Web Percetakan
Proposal Proyek Aplikasi Web Percetakansubhan
 
Proposal Sistem Informasi Pemesanan Tiket Bioskop Online
Proposal Sistem Informasi Pemesanan Tiket Bioskop OnlineProposal Sistem Informasi Pemesanan Tiket Bioskop Online
Proposal Sistem Informasi Pemesanan Tiket Bioskop OnlineLucha Kamala Putri
 
Instalasi windows 10
Instalasi windows 10Instalasi windows 10
Instalasi windows 10anafatwa21
 
Membuat Quiz dengan Flash
Membuat Quiz dengan Flash Membuat Quiz dengan Flash
Membuat Quiz dengan Flash Gilang Aziz
 
Laporan Praktikum Basis Data Modul I-Membangun Database SQL Pada MYSQL
Laporan Praktikum Basis Data Modul I-Membangun Database SQL Pada MYSQLLaporan Praktikum Basis Data Modul I-Membangun Database SQL Pada MYSQL
Laporan Praktikum Basis Data Modul I-Membangun Database SQL Pada MYSQLShofura Kamal
 
Algoritma dan Struktur Data - Merge Sort
Algoritma dan Struktur Data - Merge SortAlgoritma dan Struktur Data - Merge Sort
Algoritma dan Struktur Data - Merge SortKuliahKita
 
Manual Book Aplikasi Mobile DavestPay.com
Manual Book Aplikasi Mobile DavestPay.comManual Book Aplikasi Mobile DavestPay.com
Manual Book Aplikasi Mobile DavestPay.comDavestPay.com
 
Membangun aplikasi client server dengan java
Membangun aplikasi client server dengan javaMembangun aplikasi client server dengan java
Membangun aplikasi client server dengan javaEko Kurniawan Khannedy
 
Modul Praktikum Instalasi Sistem Operasi
Modul Praktikum  Instalasi Sistem  Operasi Modul Praktikum  Instalasi Sistem  Operasi
Modul Praktikum Instalasi Sistem Operasi Dwi Ely Kurniawan
 
Pertemuan 3 activity
Pertemuan 3 activityPertemuan 3 activity
Pertemuan 3 activityheriakj
 

What's hot (20)

Tugas laporan project aplikasi website
Tugas laporan project aplikasi websiteTugas laporan project aplikasi website
Tugas laporan project aplikasi website
 
Materi sorting(pengurutan)-Dasar-Dasar Pemprograman
Materi sorting(pengurutan)-Dasar-Dasar PemprogramanMateri sorting(pengurutan)-Dasar-Dasar Pemprograman
Materi sorting(pengurutan)-Dasar-Dasar Pemprograman
 
Part 1 - PENGENALAN VISUAL STUDIO 2010
Part 1 - PENGENALAN VISUAL STUDIO 2010 Part 1 - PENGENALAN VISUAL STUDIO 2010
Part 1 - PENGENALAN VISUAL STUDIO 2010
 
[PBO] Pertemuan 11 - GUI Java Desktop
[PBO] Pertemuan 11 - GUI Java Desktop[PBO] Pertemuan 11 - GUI Java Desktop
[PBO] Pertemuan 11 - GUI Java Desktop
 
Pengenalan Aplikasi Adobe Premiere
Pengenalan Aplikasi Adobe PremierePengenalan Aplikasi Adobe Premiere
Pengenalan Aplikasi Adobe Premiere
 
Proposal Proyek Aplikasi Web Percetakan
Proposal Proyek Aplikasi Web PercetakanProposal Proyek Aplikasi Web Percetakan
Proposal Proyek Aplikasi Web Percetakan
 
Proposal Sistem Informasi Pemesanan Tiket Bioskop Online
Proposal Sistem Informasi Pemesanan Tiket Bioskop OnlineProposal Sistem Informasi Pemesanan Tiket Bioskop Online
Proposal Sistem Informasi Pemesanan Tiket Bioskop Online
 
Instalasi windows 10
Instalasi windows 10Instalasi windows 10
Instalasi windows 10
 
Contoh2+soal+imk
Contoh2+soal+imkContoh2+soal+imk
Contoh2+soal+imk
 
Desain Top Down
Desain Top DownDesain Top Down
Desain Top Down
 
Membuat Quiz dengan Flash
Membuat Quiz dengan Flash Membuat Quiz dengan Flash
Membuat Quiz dengan Flash
 
Laporan Praktikum Basis Data Modul I-Membangun Database SQL Pada MYSQL
Laporan Praktikum Basis Data Modul I-Membangun Database SQL Pada MYSQLLaporan Praktikum Basis Data Modul I-Membangun Database SQL Pada MYSQL
Laporan Praktikum Basis Data Modul I-Membangun Database SQL Pada MYSQL
 
Mengenal After Effect
Mengenal After EffectMengenal After Effect
Mengenal After Effect
 
Instalasi OpenGL – GLUT
Instalasi OpenGL – GLUTInstalasi OpenGL – GLUT
Instalasi OpenGL – GLUT
 
Algoritma dan Struktur Data - Merge Sort
Algoritma dan Struktur Data - Merge SortAlgoritma dan Struktur Data - Merge Sort
Algoritma dan Struktur Data - Merge Sort
 
Manual Book Aplikasi Mobile DavestPay.com
Manual Book Aplikasi Mobile DavestPay.comManual Book Aplikasi Mobile DavestPay.com
Manual Book Aplikasi Mobile DavestPay.com
 
Pengenalan Java Swing
Pengenalan Java SwingPengenalan Java Swing
Pengenalan Java Swing
 
Membangun aplikasi client server dengan java
Membangun aplikasi client server dengan javaMembangun aplikasi client server dengan java
Membangun aplikasi client server dengan java
 
Modul Praktikum Instalasi Sistem Operasi
Modul Praktikum  Instalasi Sistem  Operasi Modul Praktikum  Instalasi Sistem  Operasi
Modul Praktikum Instalasi Sistem Operasi
 
Pertemuan 3 activity
Pertemuan 3 activityPertemuan 3 activity
Pertemuan 3 activity
 

Similar to Membuat Layout Java dengan netbeans

Pengenalan Netbeans
Pengenalan NetbeansPengenalan Netbeans
Pengenalan Netbeansdaffa12
 
Pengenalan Jcreator
Pengenalan JcreatorPengenalan Jcreator
Pengenalan Jcreatordaffa12
 
Dasar dasar netbeans
Dasar dasar netbeansDasar dasar netbeans
Dasar dasar netbeansQhindy Yanuar
 
Materi ii dasar dasar netbeans
Materi ii dasar dasar netbeansMateri ii dasar dasar netbeans
Materi ii dasar dasar netbeansIzal Kernel
 
pembuatan-gui-dengan-matlab.pdf
pembuatan-gui-dengan-matlab.pdfpembuatan-gui-dengan-matlab.pdf
pembuatan-gui-dengan-matlab.pdfRizaJr
 
270610 arm pemrograman_java_dengan_netbean_ide
270610 arm pemrograman_java_dengan_netbean_ide270610 arm pemrograman_java_dengan_netbean_ide
270610 arm pemrograman_java_dengan_netbean_ideVera Lake
 
Gabung1 sd 6_dekstop_java
Gabung1 sd 6_dekstop_javaGabung1 sd 6_dekstop_java
Gabung1 sd 6_dekstop_javaDewa Nala
 
Praktikum 10
Praktikum 10Praktikum 10
Praktikum 10intan nf
 
Andien pramudita-PBO1.pptx
Andien pramudita-PBO1.pptxAndien pramudita-PBO1.pptx
Andien pramudita-PBO1.pptxAndienPramudita
 
Modul Pembelajaran 01
Modul Pembelajaran 01Modul Pembelajaran 01
Modul Pembelajaran 01ssuser23b17c
 
Modul Pembelajaran 01
Modul Pembelajaran 01Modul Pembelajaran 01
Modul Pembelajaran 01ssuser23b17c
 
PPT PBO-Langkah-langkah membuat JForm.pptx
PPT PBO-Langkah-langkah membuat JForm.pptxPPT PBO-Langkah-langkah membuat JForm.pptx
PPT PBO-Langkah-langkah membuat JForm.pptxghaitzajnr
 
PPT PBO-Langkah-langkah membuat JForm.pptx
PPT PBO-Langkah-langkah membuat JForm.pptxPPT PBO-Langkah-langkah membuat JForm.pptx
PPT PBO-Langkah-langkah membuat JForm.pptxghaitzajnr
 
tugas PBO Langkah-Langkah Pembuatan Program GUI JForm.pptx
tugas PBO Langkah-Langkah Pembuatan Program GUI  JForm.pptxtugas PBO Langkah-Langkah Pembuatan Program GUI  JForm.pptx
tugas PBO Langkah-Langkah Pembuatan Program GUI JForm.pptxronaldtr2
 
Modul praktikum-pbo-5-swing
Modul praktikum-pbo-5-swingModul praktikum-pbo-5-swing
Modul praktikum-pbo-5-swingAgung W
 

Similar to Membuat Layout Java dengan netbeans (20)

Pengenalan Netbeans
Pengenalan NetbeansPengenalan Netbeans
Pengenalan Netbeans
 
Pengenalan Jcreator
Pengenalan JcreatorPengenalan Jcreator
Pengenalan Jcreator
 
Dasar dasar netbeans
Dasar dasar netbeansDasar dasar netbeans
Dasar dasar netbeans
 
Tutorial connecting access netbeans
Tutorial connecting access netbeansTutorial connecting access netbeans
Tutorial connecting access netbeans
 
Materi ii dasar dasar netbeans
Materi ii dasar dasar netbeansMateri ii dasar dasar netbeans
Materi ii dasar dasar netbeans
 
pembuatan-gui-dengan-matlab.pdf
pembuatan-gui-dengan-matlab.pdfpembuatan-gui-dengan-matlab.pdf
pembuatan-gui-dengan-matlab.pdf
 
270610 arm pemrograman_java_dengan_netbean_ide
270610 arm pemrograman_java_dengan_netbean_ide270610 arm pemrograman_java_dengan_netbean_ide
270610 arm pemrograman_java_dengan_netbean_ide
 
Gabung1 sd 6_dekstop_java
Gabung1 sd 6_dekstop_javaGabung1 sd 6_dekstop_java
Gabung1 sd 6_dekstop_java
 
Praktikum 10
Praktikum 10Praktikum 10
Praktikum 10
 
Pemograman Visual Akutansi 1
Pemograman Visual Akutansi 1 Pemograman Visual Akutansi 1
Pemograman Visual Akutansi 1
 
Java desktop dasar
Java desktop dasarJava desktop dasar
Java desktop dasar
 
Andien pramudita-PBO1.pptx
Andien pramudita-PBO1.pptxAndien pramudita-PBO1.pptx
Andien pramudita-PBO1.pptx
 
Modul Pembelajaran 01
Modul Pembelajaran 01Modul Pembelajaran 01
Modul Pembelajaran 01
 
Modul Pembelajaran 01
Modul Pembelajaran 01Modul Pembelajaran 01
Modul Pembelajaran 01
 
PBO.pptx
PBO.pptxPBO.pptx
PBO.pptx
 
PPT PBO-Langkah-langkah membuat JForm.pptx
PPT PBO-Langkah-langkah membuat JForm.pptxPPT PBO-Langkah-langkah membuat JForm.pptx
PPT PBO-Langkah-langkah membuat JForm.pptx
 
PPT PBO-Langkah-langkah membuat JForm.pptx
PPT PBO-Langkah-langkah membuat JForm.pptxPPT PBO-Langkah-langkah membuat JForm.pptx
PPT PBO-Langkah-langkah membuat JForm.pptx
 
tugas PBO Langkah-Langkah Pembuatan Program GUI JForm.pptx
tugas PBO Langkah-Langkah Pembuatan Program GUI  JForm.pptxtugas PBO Langkah-Langkah Pembuatan Program GUI  JForm.pptx
tugas PBO Langkah-Langkah Pembuatan Program GUI JForm.pptx
 
Modul praktikum-pbo-5-swing
Modul praktikum-pbo-5-swingModul praktikum-pbo-5-swing
Modul praktikum-pbo-5-swing
 
Modul praktikum pbo java swing
Modul praktikum pbo java swingModul praktikum pbo java swing
Modul praktikum pbo java swing
 

More from daffa12

Dasar Algoritma ECasnadi
Dasar Algoritma ECasnadiDasar Algoritma ECasnadi
Dasar Algoritma ECasnadidaffa12
 
Struktur Algoritma
Struktur AlgoritmaStruktur Algoritma
Struktur Algoritmadaffa12
 
Pengenalan OOP
Pengenalan OOPPengenalan OOP
Pengenalan OOPdaffa12
 
Pengantar Pemrograman Java
Pengantar Pemrograman JavaPengantar Pemrograman Java
Pengantar Pemrograman Javadaffa12
 
Panduan instalasi ubuntu 10
Panduan instalasi ubuntu 10Panduan instalasi ubuntu 10
Panduan instalasi ubuntu 10daffa12
 
Dasar pembuatan web (html)
Dasar pembuatan web (html)Dasar pembuatan web (html)
Dasar pembuatan web (html)daffa12
 
Basic PHP Syntax
Basic PHP SyntaxBasic PHP Syntax
Basic PHP Syntaxdaffa12
 

More from daffa12 (7)

Dasar Algoritma ECasnadi
Dasar Algoritma ECasnadiDasar Algoritma ECasnadi
Dasar Algoritma ECasnadi
 
Struktur Algoritma
Struktur AlgoritmaStruktur Algoritma
Struktur Algoritma
 
Pengenalan OOP
Pengenalan OOPPengenalan OOP
Pengenalan OOP
 
Pengantar Pemrograman Java
Pengantar Pemrograman JavaPengantar Pemrograman Java
Pengantar Pemrograman Java
 
Panduan instalasi ubuntu 10
Panduan instalasi ubuntu 10Panduan instalasi ubuntu 10
Panduan instalasi ubuntu 10
 
Dasar pembuatan web (html)
Dasar pembuatan web (html)Dasar pembuatan web (html)
Dasar pembuatan web (html)
 
Basic PHP Syntax
Basic PHP SyntaxBasic PHP Syntax
Basic PHP Syntax
 

Membuat Layout Java dengan netbeans

  • 1. Edi Casnadi.(Email:ed.mobilejava@gmail.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: Gambar Pembuatan Project Baru Kemudian pilih tombol Next >, kemudian akan muncul gambar sebagai berikut: Gambar Name dan Location Project Layout pada Netbeans Page 1
  • 2. Edi Casnadi.(Email:ed.mobilejava@gmail.com) 2012 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: Layout pada Netbeans Page 2
  • 3. Edi Casnadi.(Email:ed.mobilejava@gmail.com) 2012 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: Layout pada Netbeans Page 3
  • 4. Edi Casnadi.(Email:ed.mobilejava@gmail.com) 2012 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: Layout pada Netbeans Page 4
  • 5. Edi Casnadi.(Email:ed.mobilejava@gmail.com) 2012 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: Layout pada Netbeans Page 5
  • 6. Edi Casnadi.(Email:ed.mobilejava@gmail.com) 2012 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: 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+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: 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. 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: 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. 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: 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 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. Layout pada Netbeans Page 11
  • 12. Edi Casnadi.(Email:ed.mobilejava@gmail.com) 2012 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. 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 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); } Layout pada Netbeans Page 13
  • 14. Edi Casnadi.(Email:ed.mobilejava@gmail.com) 2012 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: Layout pada Netbeans Page 14
  • 15. Edi Casnadi.(Email:ed.mobilejava@gmail.com) 2012 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: 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 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. Layout pada Netbeans Page 16
  • 17. Edi Casnadi.(Email:ed.mobilejava@gmail.com) 2012 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: Layout pada Netbeans Page 17
  • 18. Edi Casnadi.(Email:ed.mobilejava@gmail.com) 2012 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: Layout pada Netbeans Page 18
  • 19. Edi Casnadi.(Email:ed.mobilejava@gmail.com) 2012 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: Layout pada Netbeans Page 19
  • 20. Edi Casnadi.(Email:ed.mobilejava@gmail.com) 2012 Gambar Hasil Posisi Y Layout pada Netbeans Page 20
  • 21. Edi Casnadi.(Email:ed.mobilejava@gmail.com) 2012 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. Layout pada Netbeans Page 21