Gui

Membuat Program menggunakan GUI (Graphical User Interface)

Membuat seperti gambar di bawah ini secara manual:

Source Code :

import java.awt.*;import java.awt.event.*;import javax.swing.*;

class WisataKuliner{public static void main (String arg[]){

TampilanGrid frame = new TampilanGrid();frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);frame.setVisible(true);

}}

class TampilanGrid extends JFrame{private JPanel panel;

public TampilanGrid(){setTitle("Wisata Kuliner");setSize(300,300);

panel = new JPanel();panel.setLayout(new GridLayout(8,1));

JCheckBox cbSoto = new JCheckBox("soto");JCheckBox cbRawon = new JCheckBox("rawon");JCheckBox cbSop = new JCheckBox("sop buntut");JCheckBox cbRujak = new JCheckBox("rujak");

/*ButtonGroup wisataKuliner = new ButtonGroup();

JRadioButton cbBakso = new JRadioButton("bakso");JRadioButton cbKupang = new JRadioButton("kupang");JRadioButton cbTahu = new JRadioButton("tahu tek");JRadioButton cbRujakM = new JRadioButton("rujak manis");

Graphical User Interface Page 1

wisataKuliner.add(cbBakso);wisataKuliner.add(cbKupang);wisataKuliner.add(cbTahu);wisataKuliner.add(cbRujakM);*/

CheckboxGroup wisataKuliner = new CheckboxGroup();

Checkbox cbBakso = new Checkbox("bakso", wisataKuliner, false);Checkbox cbKupang = new Checkbox("kupang", wisataKuliner, false);Checkbox cbTahu = new Checkbox("tahu tek", wisataKuliner, false);Checkbox cbRujakM = new Checkbox("rujak manis", wisataKuliner, false);

panel.add(cbSoto);panel.add(cbRawon);panel.add(cbSop);panel.add(cbRujak);panel.add(cbBakso);panel.add(cbKupang);panel.add(cbTahu);panel.add(cbRujakM);

add(panel);}

}

Dicompile dan di-running, hasilnya :


Dapat pula dibuat dengan drag and drop menggunakan program NetBeans IDE. Versinya terserah Anda, namun saya menggunakan versi 6.5.

Di sini saya mencontohkan membuat Program buku tamu menggunakan NetBeans IDE 6.5.

1. Klik tab File > New File atau dapat pula tekan ctrl + N.

2. Pada Choose Type File, pilih GUIFromExamples pada Project, pilih Swing GUI Forms pada Categories, dan pilih JFrame From pada File Types. Setelah itu, klik Next.

3. Pada Class Name, tuliskan nama file yang akan Anda buat. Contoh : BukuTamu.java. Setelah itu, klik Finish.

4. Akan muncul kotak jendela seperti ini :

5. Tambahkan 2 buah Label dengan cara klik dan drag Label pada Palette yang berada di sebelah kanan layar. Kolom Palette dapat pula membuat Check Box, Button, Radio Button, List, dsb. Edit kedua label tersebut.

6. Tambahkan Text Field dari Palette, dan Label-label yang lain. Edit semuanya.


7. Terakhir, tambahkan Button dari Palette, hingga akhirnya menjadi seperti ini :

8. Untuk melihat source programnya, dapat dilihat dengan cara meng-klik Source pada tab di bawah nama file. Dari program yang telah kita buat, kurang lebih source programnya seperti ini :

public class BukuTamu extends javax.swing.JFrame {

public BukuTamu() { initComponents(); }

@SuppressWarnings("unchecked") // <editor-fold defaultstate="collapsed" desc="Generated Code"> private void initComponents() {

jLabel1 = new javax.swing.JLabel(); jLabel2 = new javax.swing.JLabel(); jTextField1 = new javax.swing.JTextField(); jTextField2 = new javax.swing.JTextField(); jTextField3 = new javax.swing.JTextField(); jLabel3 = new javax.swing.JLabel(); jLabel4 = new javax.swing.JLabel(); jLabel5 = new javax.swing.JLabel(); jButton1 = new javax.swing.JButton();

setDefaultCloseOperation(javax.swing.WindowConstants.EXIT_ON_CLOSE);

jLabel1.setFont(new java.awt.Font("Tahoma", 0, 24)); // NOI18N jLabel1.setText("BUKU TAMU");


jLabel2.setText("TK Tunas Indonesia");

jTextField1.addActionListener(new java.awt.event.ActionListener() { public void actionPerformed(java.awt.event.ActionEvent evt) { jTextField1ActionPerformed(evt); } });

jTextField2.addActionListener(new java.awt.event.ActionListener() { public void actionPerformed(java.awt.event.ActionEvent evt) { jTextField2ActionPerformed(evt); } });

jLabel3.setText("Nama");

jLabel4.setText("e-mail");

jLabel5.setText("Komentar");

jButton1.setText("Isi Buku Tamu"); jButton1.addActionListener(new java.awt.event.ActionListener() { public void actionPerformed(java.awt.event.ActionEvent evt) { jButton1ActionPerformed(evt); } });

javax.swing.GroupLayout layout = new javax.swing.GroupLayout(getContentPane()); getContentPane().setLayout(layout); layout.setHorizontalGroup( layout.createParallelGroup(javax.swing.GroupLayout.Alignment.LEADING) .addGroup(layout.createSequentialGroup() .addGroup(layout.createParallelGroup(javax.swing.GroupLayout.Alignment.LEADING) .addGroup(layout.createSequentialGroup() .addGap(140, 140, 140) .addGroup(layout.createParallelGroup(javax.swing.GroupLayout.Alignment.LEADING) .addGroup(layout.createSequentialGroup() .addGap(10, 10, 10) .addComponent(jLabel2)) .addComponent(jLabel1))) .addGroup(layout.createSequentialGroup() .addGap(30, 30, 30) .addGroup(layout.createParallelGroup(javax.swing.GroupLayout.Alignment.LEADING) .addComponent(jLabel4) .addComponent(jLabel3)


.addComponent(jLabel5)) .addGap(26, 26, 26) .addGroup(layout.createParallelGroup(javax.swing.GroupLayout.Alignment.LEADING, false) .addComponent(jTextField2) .addComponent(jTextField3) .addComponent(jTextField1, javax.swing.GroupLayout.PREFERRED_SIZE, 216, javax.swing.GroupLayout.PREFERRED_SIZE))) .addGroup(layout.createSequentialGroup() .addGap(144, 144, 144) .addComponent(jButton1))) .addContainerGap(82, Short.MAX_VALUE)) ); layout.setVerticalGroup( layout.createParallelGroup(javax.swing.GroupLayout.Alignment.LEADING) .addGroup(layout.createSequentialGroup() .addContainerGap() .addComponent(jLabel1) .addPreferredGap(javax.swing.LayoutStyle.ComponentPlacement.UNRELATED) .addComponent(jLabel2) .addGap(29, 29, 29) .addGroup(layout.createParallelGroup(javax.swing.GroupLayout.Alignment.LEADING) .addGroup(layout.createSequentialGroup() .addComponent(jTextField1, javax.swing.GroupLayout.PREFERRED_SIZE, javax.swing.GroupLayout.DEFAULT_SIZE, javax.swing.GroupLayout.PREFERRED_SIZE) .addPreferredGap(javax.swing.LayoutStyle.ComponentPlacement.UNRELATED) .addComponent(jTextField2, javax.swing.GroupLayout.PREFERRED_SIZE, javax.swing.GroupLayout.DEFAULT_SIZE, javax.swing.GroupLayout.PREFERRED_SIZE)) .addGroup(layout.createSequentialGroup() .addComponent(jLabel3) .addGap(18, 18, 18) .addComponent(jLabel4))) .addPreferredGap(javax.swing.LayoutStyle.ComponentPlacement.RELATED) .addGroup(layout.createParallelGroup(javax.swing.GroupLayout.Alignment.BASELINE) .addComponent(jTextField3, javax.swing.GroupLayout.PREFERRED_SIZE, javax.swing.GroupLayout.DEFAULT_SIZE, javax.swing.GroupLayout.PREFERRED_SIZE) .addComponent(jLabel5)) .addGap(18, 18, 18)


.addComponent(jButton1) .addContainerGap(88, Short.MAX_VALUE)) );

pack(); }// </editor-fold>

private void jTextField1ActionPerformed(java.awt.event.ActionEvent evt) { // TODO add your handling code here:}

private void jTextField2ActionPerformed(java.awt.event.ActionEvent evt) { // TODO add your handling code here: }

private void jButton1ActionPerformed(java.awt.event.ActionEvent evt) { // TODO add your handling code here:}

public static void main(String args[]) { java.awt.EventQueue.invokeLater(new Runnable() { public void run() { new BukuTamu().setVisible(true); } }); }

// Variables declaration - do not modify private javax.swing.JButton jButton1; private javax.swing.JLabel jLabel1; private javax.swing.JLabel jLabel2; private javax.swing.JLabel jLabel3; private javax.swing.JLabel jLabel4; private javax.swing.JLabel jLabel5; private javax.swing.JTextField jTextField1; private javax.swing.JTextField jTextField2; private javax.swing.JTextField jTextField3; // End of variables declaration

}

9. Setelah dicompile dan di-run, hasilnya :


Sekarang, kita mencoba membuat Program wisata kota. Prosesnya sama seperti pembuatan Program buku tamu, hanya dengan sedikit variasi saja.

1. Buat program baru sama seperti Tahap 1-4 pembuatan program buku tamu.

2. Tambahkan Label dengan cara klik dan drag Label pada Palette yang berada di sebelah kanan layar. Kolom Palette dapat pula membuat Check Box, Button, Radio Button, List, dsb. Edit kedua label tersebut.

3. Tambahkan Radio Button dari Palette, dan Label yang lain. Edit semuanya.

4. Tambahkan Button Group sehingga Radio Button tersebut hanya dapat dipilih salah satu saja.

5. Edit masing-masing button dan masukkan ke buttonGroup1. Caranya, pilih button yang akan dimasukkan, klik kanan, pilih Properties. Pilih buttonGroup1 pada pilihan buttonGroup, lalu close.


6. Terakhir, tambahkan Check Box dari Palette dan satu buah label, edit hingga akhirnya menjadi seperti ini :


public class WisataKota extends javax.swing.JFrame {

public WisataKota() { initComponents(); }


buttonGroup1 = new javax.swing.ButtonGroup(); jLabel1 = new javax.swing.JLabel(); jLabel2 = new javax.swing.JLabel(); jLabel3 = new javax.swing.JLabel(); jRadioButton1 = new javax.swing.JRadioButton(); jRadioButton2 = new javax.swing.JRadioButton(); jRadioButton3 = new javax.swing.JRadioButton();


jCheckBox1 = new javax.swing.JCheckBox(); jCheckBox2 = new javax.swing.JCheckBox(); jCheckBox3 = new javax.swing.JCheckBox(); jRadioButton4 = new javax.swing.JRadioButton();


jLabel1.setFont(new java.awt.Font("Tahoma", 0, 24)); jLabel1.setHorizontalAlignment(javax.swing.SwingConstants.CENTER); jLabel1.setText("WISATA KOTA SOLO");

jLabel2.setText("Wisata Kuliner");

jLabel3.setText("Wisata Kota");

buttonGroup1.add(jRadioButton1); jRadioButton1.setText("Soto");

buttonGroup1.add(jRadioButton2); jRadioButton2.setText("Nasi Liwet");

buttonGroup1.add(jRadioButton3); jRadioButton3.setText("Nasi Pecel");

jCheckBox1.setText("Keraton Mangkunegaran"); jCheckBox1.addActionListener(new java.awt.event.ActionListener() { public void actionPerformed(java.awt.event.ActionEvent evt) { jCheckBox1ActionPerformed(evt); } });

jCheckBox2.setText("Keraton Surakarta");

jCheckBox3.setText("Batik Laweyan");

buttonGroup1.add(jRadioButton4); jRadioButton4.setText("Nasi Kucing");

javax.swing.GroupLayout layout = new javax.swing.GroupLayout(getContentPane()); getContentPane().setLayout(layout); layout.setHorizontalGroup( layout.createParallelGroup(javax.swing.GroupLayout.Alignment.LEADING) .addGroup(javax.swing.GroupLayout.Alignment.TRAILING, layout.createSequentialGroup() .addContainerGap(96, Short.MAX_VALUE) .addComponent(jLabel1) .addGap(84, 84, 84)) .addGroup(layout.createSequentialGroup() .addGap(34, 34, 34)


.addGroup(layout.createParallelGroup(javax.swing.GroupLayout.Alignment.LEADING) .addComponent(jCheckBox3) .addComponent(jCheckBox2) .addComponent(jCheckBox1)) .addContainerGap(223, Short.MAX_VALUE)) .addGroup(layout.createSequentialGroup() .addGap(23, 23, 23) .addGroup(layout.createParallelGroup(javax.swing.GroupLayout.Alignment.LEADING) .addComponent(jLabel3) .addComponent(jLabel2) .addGroup(layout.createSequentialGroup() .addGap(10, 10, 10) .addGroup(layout.createParallelGroup(javax.swing.GroupLayout.Alignment.LEADING) .addComponent(jRadioButton3) .addComponent(jRadioButton2) .addComponent(jRadioButton1) .addComponent(jRadioButton4)))) .addContainerGap(288, Short.MAX_VALUE)) ); layout.setVerticalGroup( layout.createParallelGroup(javax.swing.GroupLayout.Alignment.LEADING) .addGroup(layout.createSequentialGroup() .addContainerGap() .addComponent(jLabel1) .addGap(18, 18, 18) .addComponent(jLabel2) .addPreferredGap(javax.swing.LayoutStyle.ComponentPlacement.UNRELATED) .addComponent(jRadioButton1, javax.swing.GroupLayout.PREFERRED_SIZE, 23, javax.swing.GroupLayout.PREFERRED_SIZE) .addPreferredGap(javax.swing.LayoutStyle.ComponentPlacement.RELATED) .addComponent(jRadioButton2) .addPreferredGap(javax.swing.LayoutStyle.ComponentPlacement.RELATED) .addComponent(jRadioButton3) .addPreferredGap(javax.swing.LayoutStyle.ComponentPlacement.RELATED) .addComponent(jRadioButton4) .addPreferredGap(javax.swing.LayoutStyle.ComponentPlacement.RELATED, 13, Short.MAX_VALUE) .addComponent(jLabel3) .addPreferredGap(javax.swing.LayoutStyle.ComponentPlacement.UNRELATED) .addComponent(jCheckBox1) .addPreferredGap(javax.swing.LayoutStyle.ComponentPlacement.RELATE


D) .addComponent(jCheckBox2) .addPreferredGap(javax.swing.LayoutStyle.ComponentPlacement.RELATED) .addComponent(jCheckBox3) .addGap(26, 26, 26)) );


private void jCheckBox1ActionPerformed(java.awt.event.ActionEvent evt) { // TODO add your handling code here:}

public static void main(String args[]) { java.awt.EventQueue.invokeLater(new Runnable() { public void run() { new WisataKota().setVisible(true); } }); }

// Variables declaration - do not modify private javax.swing.ButtonGroup buttonGroup1; private javax.swing.JCheckBox jCheckBox1; private javax.swing.JCheckBox jCheckBox2; private javax.swing.JCheckBox jCheckBox3; private javax.swing.JLabel jLabel1; private javax.swing.JLabel jLabel2; private javax.swing.JLabel jLabel3; private javax.swing.JRadioButton jRadioButton1; private javax.swing.JRadioButton jRadioButton2; private javax.swing.JRadioButton jRadioButton3; private javax.swing.JRadioButton jRadioButton4; // End of variables declaration

}



Terakhir, kita mencoba membuat Program pemesanan tiket. Prosesnya sama seperti pembuatan Program buku tamu, hanya dengan sedikit variasi saja.

1. Buat program baru sama seperti Tahap 1-4 pembuatan program buku tamu.

2. Tambahkan Label dengan cara klik dan drag Label pada Palette yang berada di sebelah kanan layar. Kolom Palette dapat pula membuat Check Box, Button, Radio Button, List, dsb. Edit kedua label tersebut.

3. Tambahkan Scroll Pane dan Combo Box dari Palette, dan Label yang lain. Edit semuanya. Cara mengedit Combo Box, klik kanan Combo Box yang akan di edit, pilih properties. Lalu pada model, dapat di klik titik-titiknya. Ada tulisan Item 1, dst. Hapus dan ganti nama Item 1 dst dengan nama Item yang diinginkan. Klik OK dan close.


4. Tambahkan List Box dan Label ke frame. Edit semuanya. Cara mengedit List Box, klik kanan List Box yang akan di edit, pilih properties. Lalu pada model, dapat di klik titik-titiknya. Ada tulisan Item 1, dst. Hapus dan ganti nama Item 1 dst dengan nama Item yang diinginkan. Klik OK dan close.


5. Terakhir, tambahkan Button dari Palette, edit hingga akhirnya menjadi seperti ini :


public class PesenTiket extends javax.swing.JFrame {

public PesenTiket() { initComponents(); }


jLabel1 = new javax.swing.JLabel(); jScrollPane1 = new javax.swing.JScrollPane();


jComboBox1 = new javax.swing.JComboBox(); jScrollPane2 = new javax.swing.JScrollPane(); jList1 = new javax.swing.JList(); jLabel2 = new javax.swing.JLabel(); jLabel3 = new javax.swing.JLabel(); jButton1 = new javax.swing.JButton(); jComboBox2 = new javax.swing.JComboBox(); jLabel4 = new javax.swing.JLabel();


jLabel1.setFont(new java.awt.Font("Tahoma", 0, 24)); // NOI18N jLabel1.setHorizontalAlignment(javax.swing.SwingConstants.CENTER); jLabel1.setText("Pemesanan Tiket Penerbangan Indonesia");

jComboBox1.setModel(new javax.swing.DefaultComboBoxModel(new String[] { "Garuda Indonesia", "Air Asia", "Sriwijaya Air", "Citilink", "Merpati" })); jComboBox1.addActionListener(new java.awt.event.ActionListener() { public void actionPerformed(java.awt.event.ActionEvent evt) { jComboBox1ActionPerformed(evt); } }); jScrollPane1.setViewportView(jComboBox1);

jList1.setModel(new javax.swing.AbstractListModel() { String[] strings = { "Pukul 07.00", "Pukul 09.30", "Pukul 12.00", "Pukul 14.00", "Pukul 16.30" }; public int getSize() { return strings.length; } public Object getElementAt(int i) { return strings[i]; } }); jScrollPane2.setViewportView(jList1);

jLabel2.setText("Pilih Maskapai Penerbangan");

jLabel3.setText("Pilih waktu keberangkatan");

jButton1.setText("OK");

jComboBox2.setModel(new javax.swing.DefaultComboBoxModel(new String[] { "Solo - Jakarta", "Solo - Palembang", "Solo - Makasar", "Solo - Surabaya", "Solo - Balikpapan", "Solo - Pontianak", "Solo - Jayapura" }));

jLabel4.setText("Pilih rute penerbangan");

javax.swing.GroupLayout layout = new javax.swing.GroupLayout(getContentPane()); getContentPane().setLayout(layout); layout.setHorizontalGroup( layout.createParallelGroup(javax.swing.GroupLayout.Alignment.LEADING) .addGroup(layout.createSequentialGroup()


.addGap(74, 74, 74) .addComponent(jLabel1) .addContainerGap(51, Short.MAX_VALUE)) .addGroup(layout.createSequentialGroup() .addGap(43, 43, 43) .addGroup(layout.createParallelGroup(javax.swing.GroupLayout.Alignment.LEADING) .addComponent(jScrollPane2, javax.swing.GroupLayout.PREFERRED_SIZE, javax.swing.GroupLayout.DEFAULT_SIZE, javax.swing.GroupLayout.PREFERRED_SIZE) .addComponent(jLabel3) .addComponent(jLabel2) .addComponent(jScrollPane1, javax.swing.GroupLayout.PREFERRED_SIZE, javax.swing.GroupLayout.DEFAULT_SIZE, javax.swing.GroupLayout.PREFERRED_SIZE)) .addPreferredGap(javax.swing.LayoutStyle.ComponentPlacement.RELATED, 140, Short.MAX_VALUE) .addGroup(layout.createParallelGroup(javax.swing.GroupLayout.Alignment.LEADING) .addGroup(layout.createSequentialGroup() .addComponent(jLabel4) .addContainerGap(142, Short.MAX_VALUE)) .addGroup(layout.createSequentialGroup() .addGroup(layout.createParallelGroup(javax.swing.GroupLayout.Alignment.TRAILING, false) .addComponent(jButton1, javax.swing.GroupLayout.Alignment.LEADING, javax.swing.GroupLayout.DEFAULT_SIZE, javax.swing.GroupLayout.DEFAULT_SIZE, Short.MAX_VALUE) .addComponent(jComboBox2, javax.swing.GroupLayout.Alignment.LEADING, 0, javax.swing.GroupLayout.DEFAULT_SIZE, Short.MAX_VALUE)) .addContainerGap()))) ); layout.setVerticalGroup( layout.createParallelGroup(javax.swing.GroupLayout.Alignment.LEADING) .addGroup(layout.createSequentialGroup() .addContainerGap() .addComponent(jLabel1) .addGap(18, 18, 18) .addGroup(layout.createParallelGroup(javax.swing.GroupLayout.Alignment.BASELINE) .addComponent(jLabel2, javax.swing.GroupLayout.PREFERRED_SIZE, 26, javax.swing.GroupLayout.PREFERRED_SIZE) .addComponent(jLabel4)) .addPreferredGap(javax.swing.LayoutStyle.ComponentPlacement.RELATED, javax.swing.GroupLayout.DEFAULT_SIZE, Short.MAX_VALUE) .addGroup(layout.createParallelGroup(javax.swing.GroupLayout.Alignmen


t.LEADING, false) .addComponent(jComboBox2, javax.swing.GroupLayout.Alignment.TRAILING) .addComponent(jScrollPane1, javax.swing.GroupLayout.Alignment.TRAILING, javax.swing.GroupLayout.DEFAULT_SIZE, 30, Short.MAX_VALUE)) .addGroup(layout.createParallelGroup(javax.swing.GroupLayout.Alignment.LEADING) .addGroup(layout.createSequentialGroup() .addGap(31, 31, 31) .addComponent(jLabel3) .addPreferredGap(javax.swing.LayoutStyle.ComponentPlacement.RELATED) .addComponent(jScrollPane2, javax.swing.GroupLayout.PREFERRED_SIZE, javax.swing.GroupLayout.DEFAULT_SIZE, javax.swing.GroupLayout.PREFERRED_SIZE)) .addGroup(layout.createSequentialGroup() .addGap(77, 77, 77) .addComponent(jButton1, javax.swing.GroupLayout.PREFERRED_SIZE, 33, javax.swing.GroupLayout.PREFERRED_SIZE))) .addGap(25, 25, 25)) );


private void jComboBox1ActionPerformed(java.awt.event.ActionEvent evt) { // TODO add your handling code here: }

public static void main(String args[]) { java.awt.EventQueue.invokeLater(new Runnable() { public void run() { new PesenTiket().setVisible(true); } }); }

// Variables declaration - do not modify private javax.swing.JButton jButton1; private javax.swing.JComboBox jComboBox1; private javax.swing.JComboBox jComboBox2; private javax.swing.JLabel jLabel1; private javax.swing.JLabel jLabel2; private javax.swing.JLabel jLabel3; private javax.swing.JLabel jLabel4; private javax.swing.JList jList1; private javax.swing.JScrollPane jScrollPane1;


private javax.swing.JScrollPane jScrollPane2; // End of variables declaration

}



Documents

Gui