05 Pemrograman Visual
05 Pemrograman Visual
Swing terdiri dari 3 klasifikasi: Komponen Control Komponen yang menjadi perantara interaksi antara pengguna dan program. Container Komponen ruang yang dapat menampung komponen control. Layout Manager Gaya untuk menyusun semua komponen pada interface. Secara umum, untuk membuat suatu program GUI, kita perlu melakukan langkah-langkah berikut: Menentukan Container. Menentukan komponen control. Kita perlu terlebih dahulu menentukan komponen kontrol apa yang ingin digunakan. Contohnya jika ingin menggunakan tombol, maka kita memilih JButton. Jika ingin menggunakan medan input teks dari pengguna, kita bisa memakai JtextField atau JTextArea. Menentukan layout. Tentukan layout manager sesuai yang kita inginkan. Menentukan input pengguna dan respon apa yang dilakukan terhadapnya. Tentukan apa yang perlu diinput oleh pengguna dan respon terhadap input tersebut. Hal ini melibatkan event listener. Contoh Container pada Swing: Jpanel terletak pada javax.swing.Jpanel JTabbedPane terletak pada javax.swing.JtabbedPane JScrollPane terletak pada javax.swing.JScrollPane Contoh komponen Control pada Swing: Tombol menggunakan JButton yang terletak pada javax.swing. Label menggunakan JLabel yang terletak pada javax.swing.JLabel. Medan teks menggunakan JTextField (untuk 1 baris) atau JtextArea (jika lebih dari 1 baris). Medan password menggunakan JPasswordField. Kotak pilihan menggunakan JCheckBox. Tombol bulat menggunakan JRadioButton. Daftar menggunakan JList. Contoh Layout Manager pada Swing: FlowLayout, menyusun komponen secara berurutan, per baris, kiri ke kanan. BorderLayout, membagi kepada 5 bagian, North, South, East, West dan Center. GridLayout, menyusun komponen dalam grid yang berukuran sama.
Java menggunakan delegation event model untuk mengendalikan peristiwa (event). Pada model ini terdapat 2 hal penting yaitu sumber peristiwa (event source) dan pendengar peristiwa (event listener).
Latihan 1
Buatlah Interface seperti ini:
Yang melibatkan: JFrame, JPanel, 2 buah JButton, dan JLabel. Selanjutnya kita akan memprogram tombol - - untuk mengurangkan nilai pada JLabel dan tombol ++ untuk menambahkan nilai pada JLabel. Langkah: 1. Klik kanan pada tombol - -. Pilih Events Mouse MouseClicked. 2. Netbeans akan otomatis memasukkan kode untuk mouseClicked. Sekarang anda menambahkan kode program di bawah. int bil; bil = Integer.parseInt(jLabel1.getText()); bil--; jLabel1.setText(Integer.toString(bil)); 3. Kemudian klik kanan pada tombol ++. Pilih Events Mouse MouseClicked. 4. Netbeans akan otomatis memasukkan kode untuk mouseClicked. Sekarang anda menambahkan kode program di bawah. int bil; bil = Integer.parseInt(jLabel1.getText()); bil++; jLabel1.setText(Integer.toString(bil)); 5. Save dan run program anda.
Latihan 2
Buatlah interface seperti ini:
Yang melibatkan Jframe, Jpanel, 4 buah JLabel dan 4 buah JtextField dan JButton. Selanjutnya kita akan memprogram untuk menambah kesemua nilai yang diinput pada 3 buah JtextField, kemudian ditampilkan pada JtextField ke-4. Langkah: 1. Klik kanan pada tombol Tambah, pilih Events Mouse mouseClicked. 2. Netbeans akan otomatis memasukkan kode untuk mouseClicked. Sekarang anda menambahkan kode program di bawah. int nilai1, nilai2, nilai3, jumlah; nilai1 = Integer.parseInt(jTextField1.getText()); nilai2 = Integer.parseInt(jTextField2.getText()); nilai3 = Integer.parseInt(jTextField3.getText()); jumlah = nilai1 + nilai2 + nilai3; jTextField4.setText(Integer.toString(jumlah)); 3. Save dan run program. 4. Untuk menghindari keadaan nilai textfield kosong, kita coba ubah program di atas menjadi: int nilai1, nilai2, nilai3, jumlah; if(jTextField1.getText().isEmpty() == false) nilai1 = Integer.parseInt(jTextField1.getText()); else nilai1 = 0; if(jTextField2.getText().isEmpty() == false) nilai2 = Integer.parseInt(jTextField2.getText()); else nilai2 = 0; if(jTextField3.getText().isEmpty() == false) nilai3 = Integer.parseInt(jTextField3.getText()); else nilai3 = 0;
Latihan 3
Buatlah interface seperti ini:
Interface Jframe yang anda buat terdiri dari 1 buah Jbutton, 1 buah Jlabel dan 1 buah JscrollPane. Masukkan Jlabel yang anda buat ke dalam JscrollPane (bisa dengan drag-drop), hal ini agar memungkinkan image yang akan tampil pada Jlabel dapat digulung menggunakan scroll. Selanjutnya kita akan membuat program agar aplikasi yang dibuat berhasil untuk memilih gambar/image kemudian menampilkannya pada Jlabel. Langkah: 1. Pada source code dari kelas Jframe, tambahkan paket swing dan io seperti ini: import javax.swing.*; import java.io.*; 2. Agar pengguna aplikasi ini mudah untuk memilih file gambar/image yang diinginkan, maka kita akan tambahkan kelas JfileChooser dan File sesudah public class seperti gambar di bawah:
3. Berikutnya tambahkan event mouseclicked pada button yang anda buat. Klik kanan pada tombol Pilih Gambar, pilih Events Mouse mouseClicked. Kemudian tambahkan program seperti di bawah: fc = new JFileChooser();
//Handle open button action. if (evt.getSource() == jButton1) { int returnVal = fc.showOpenDialog(bukaImage.this); if (returnVal == JFileChooser.APPROVE_OPTION) { file = fc.getSelectedFile(); //This is where a real application would open the file. ImageIcon img = null; img = new ImageIcon(file.getAbsolutePath()); if(img != null) jLabel1.setIcon(img); else jLabel1.setText(file.getName() + "not found\n"); } else { jLabel1.setText("Open command cancelled by user.\n"); } } 4. Simpan dan jalankan program anda.
Latihan 4
Buatlah interface seperti ini:
Jframe pada interface di atas terdiri dari objek kontrol: 4 buah JcheckBox, 3 buah JtoggleButton, 3 buah JradioButton. Pada aplikasi ini kita akan bereksperimen dengan checkbox, toggle button dan radiobutton, serta bagaimana cara untuk mengelompokkannya ke dalam JbuttonGroup. Langkah: 1. Disini kita akan mengelompokkan JtoggleButton ke dalam group 1 dan JradioButton ke dalam group 2. Tujuan kita mengelompokkan ini adalah agar hanya ada satu objek kontrol saja yang aktif dalam grup tersebut. Pada jendela Navigator klik kanan pada Other Components - Add From Palette Swing Controls - Button Group. Buat 2 buah button group. 2. Berikutnya pilih ketiga-tiga toggle button, klik kanan dan pilih Properties, pada bagian buttonGroup, pilih buttonGroup1. Sama juga halnya dengan RadioButton, pilih ketiga-tiganya, klik kanan dan pilih Properties, pada bagian buttonGroup, pilih buttonGroup2. 3. Pada program ini kita akan bermain dengan warna, maka tambahkan paket Color, dengan cara: import java.awt.Color; 4. Kita akan memprogram JcheckBox sehingga ketika kita pilih, maka akan muncul tulisan pada jLabel. Disini kita akan menggunakan event itemstatechanged. Klik kanan pada checkbox +, pilih Events Item itemStateChanged. Tambahkan program berikut: jLabel1.setText(jCheckBox1.getText()); Buat hal yang sama pada ketiga checkbox yang lain, sesuaikan dengan nama checkboxnya.
5. Untuk setiap radio button, tambahkan events itemStateChanged, kemudian tambahkan program berikut: jLabel1.setText(jRadioButton1.getText()); Buat hal yang sama pada kedua radio button yang lain, sesuaikan dengan namanya masing-masing. 6. Toggle button bertujuan untuk merubah warna dari text. Tambahkan events mouseclicked pada toggle button tersebut. Kemudian tambahkan program berikut: jLabel1.setForeground(Color.red); Untuk toggle button yang green kita buat: jLabel1.setForeground(Color.green); Dan untuk toggle button default kita buat: jLabel1.setForeground(Color.black); 7. Simpan dan jalankan program anda.
Latihan 5
Buatlah interface seperti ini:
Jframe pada interface aplikasi di atas terdiri dari: 1 buah jList (secara otomatis netbeans akan memasukkannya ke dalam jScrollPane), 1 buah jTextField, 2 buah jButton. Pada contoh ini, jList saya beri nama list, jTextField menjadi entry dan masing-masing button menjadi tambah dan hapus. Aplikasi ini bertujuan untuk menampilkan suatu daftar / list, data dapat ditambah ke dalam daftar dan data juga dapat dihapus dari daftar. Langkah: 1. Tambahkan program untuk menginisialisasi data dalam list, seperti yang ditunjukkan pada gambar di bawah:
2. Jika pengguna menekan tombol tambah, maka data yang ada pada jTextField akan ditambah ke dalam jList. Jadi tambahkan events mouseclicked pada button tambah, berikut program di dalamnya: if(entry.getText().isEmpty() == false){ DefaultListModel model = (DefaultListModel) list.getModel();
model.addElement(entry.getText()); list.setModel(model); } 3. Sebelum pengguna menekan tombol kurang, ia akan mengisi data apa yang ingin dihapus. Tambahkan events mouseclicked pada button hapus, dengan program di dalamnya sebagai berikut: DefaultListModel model = (DefaultListModel) list.getModel(); if(entry.getText().isEmpty() == false){ for(int i=0; i<model.getSize(); i++){ if(model.elementAt(i).equals(entry.getTex t())){ model.removeElementAt(i); list.setModel(model); break; } } } 4. Simpan dan jalankan aplikasi.
Latihan 6
Buatlah interface seperti ini:
Jframe pada interface di atas terdiri dari 3 buah jLabel (untuk tulisan Merah, Hijau dan Biru), 3 buah jSpinner, 1 buah jPanel dan 1 buah jButton. Ubah warna background jPanel menjadi putih. Pada aplikasi ini kita akan bereksperimen dengan warna yang dapat diubah sesuai dengan nilai RGB pada jSpinner. Langkah: 1. Tambahkan paket awt: import java.awt.*; 2. Tambahkan program seperti berikut:
3. Untuk setiap jSpinner, tambahkan events change stateChanged. Tambahkan program seperti berikut:
Hal yang sama juga berlaku untuk jSpinner yang lain. 4. Simpan dan jalankan aplikasi.
Latihan 7
Buatlah interface seperti ini:
Aplikasi ini akan menampilkan semua data yang diinput pada bagian identitas pada bagian Tampilan. Jika ingin dicetak, maka tinggal menekan button Cetak. Langkah: 1. Tambahkan paket print: import java.awt.print.*; 2. Pada button Tampil, buatlah events mouseclicked, kemudian isikan program berikut di dalamnya: //catatan: areaT merupakan nama dari jTextArea. areaT.setText(""); if(nama.getText().isEmpty()){ jOptionPane1.showMessageDialog(jPanel1, "Bagian nama harus diisi", "Warning", jOptionPane1.WARNING_MESSAGE); } else{ areaT.setText(nama.getText()+ " lahir tanggal "+ tgl.getModel().getSelectedItem()+ " bulan "+ bulan.getModel().getSelectedItem()+ " tahun "+ tahun.getModel().getSelectedItem()+ "\n");
areaT.append(nama.getText()+ " berjenis kelamin "); if(laki.isSelected()) areaT.append(laki.getText()+ "\n"); else areaT.append(perempuan.getText()+ "\n"); areaT.append(nama.getText()+ " bekerja sebagai "+ pekerjaan.getModel(). getSelectedItem()+ "\n"); areaT.append(nama.getText()+ " mempunyai hobby "); int list[] = hobby.getSelectedIndices(); for(int i=0; i<list.length; i++) areaT.append(hobby.getModel().getElementA t(list[i]). toString()+ ","); } } 3. Kemudian buat events mouseclicked pada button Cetak, dengan kode program seperti berikut: try{ areaT.print(); } catch(PrinterException pe){ System.err.println(pe); } 4. Simpan dan jalankan aplikasi.