05 Pemrograman Visual

5/13/2018 05 Pemrograman Visual - slidepdf.com

http://slidepdf.com/reader/full/05-pemrograman-visual 1/15

GUI (Graphical User Interface) pada Java umumnya menggunakan kelas daripackage javax.swing.Swing terdiri dari 3 klasifikasi:

• Komponen ControlKomponen 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 melakukanlangkah-langkah berikut:

• Menentukan Container.

• Menentukan komponen control.Kita perlu terlebih dahulu menentukan komponen kontrol apa yang ingindigunakan. Contohnya jika ingin menggunakan tombol, maka kita memilih

JButton. Jika ingin menggunakan medan input teks dari pengguna, kita bisamemakai 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 inputtersebut. 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 (jikalebih 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 danCenter.

• GridLayout, menyusun komponen dalam grid yang berukuran sama.



• GridBagLayout, menyusun komponen dalam grid yang boleh berubahukurannya.

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 1Buatlah Interface seperti ini:

Yang melibatkan: JFrame, JPanel, 2 buah JButton, dan JLabel.

Selanjutnya kita akan memprogram tombol - - untuk mengurangkan nilai padaJLabel 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 2Buatlah interface seperti ini:

Yang melibatkan Jframe, Jpanel, 4 buah JLabel dan 4 buah JtextField danJButton.

Selanjutnya kita akan memprogram untuk menambah kesemua nilai yang diinputpada 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());

elsenilai1 = 0;

if(jTextField2.getText().isEmpty() == false)

nilai2 = Integer.parseInt(jTextField2.getText());elsenilai2 = 0;

if(jTextField3.getText().isEmpty() == false)nilai3 = Integer.parseInt(jTextField3.getText());

elsenilai3 = 0;



jumlah = nilai1 + nilai2 + nilai3;jTextField4.setText(Integer.toString(jumlah));

5. Save dan run program.




Interface Jframe yang anda buat terdiri dari 1 buah Jbutton, 1 buah Jlabel dan 1buah JscrollPane. Masukkan Jlabel yang anda buat ke dalam JscrollPane (bisadengan drag-drop), hal ini agar memungkinkan image yang akan tampil padaJlabel dapat digulung menggunakan scroll.

Selanjutnya kita akan membuat program agar aplikasi yang dibuat berhasil untukmemilih 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 yangdiinginkan, maka kita akan tambahkan kelas JfileChooser dan File sesudahpublic class… seperti gambar di bawah:

3. Berikutnya tambahkan event mouseclicked pada button yang anda buat. Klikkanan 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() + "notfound\n");

}else {

jLabel1.setText("Open command cancelledby user.\n");

}}

4. Simpan dan jalankan program anda.




Jframe pada interface di atas terdiri dari objek kontrol: 4 buah JcheckBox, 3 buahJtoggleButton, 3 buah JradioButton.

Pada aplikasi ini kita akan bereksperimen dengan checkbox, toggle button danradiobutton, serta bagaimana cara untuk mengelompokkannya ke dalamJbuttonGroup.Langkah:

1. Disini kita akan mengelompokkan JtoggleButton ke dalam group 1 danJradioButton 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, padabagian buttonGroup, pilih buttonGroup1. Sama juga halnya denganRadioButton, pilih ketiga-tiganya, klik kanan dan pilih Properties, pada bagianbuttonGroup, pilih buttonGroup2.

3. Pada program ini kita akan bermain dengan warna, maka tambahkan paketColor, 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 eventitemstatechanged. 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 dengannama checkboxnya.



5. Untuk setiap radio button, tambahkan events itemStateChanged, kemudiantambahkan program berikut:jLabel1.setText(jRadioButton1.getText());

Buat hal yang sama pada kedua radio button yang lain, sesuaikan dengannamanya masing-masing.

6. Toggle button bertujuan untuk merubah warna dari text. Tambahkan eventsmouseclicked pada toggle button tersebut. Kemudian tambahkan programberikut: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.




Jframe pada interface aplikasi di atas terdiri dari: 1 buah jList (secara otomatisnetbeans akan memasukkannya ke dalam jScrollPane), 1 buah jTextField, 2buah jButton. Pada contoh ini, jList saya beri nama list, jTextField menjadi entrydan masing-masing button menjadi tambah dan hapus.

Aplikasi ini bertujuan untuk menampilkan suatu daftar / list, data dapat ditambahke 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 eventsmouseclicked 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 yangingin 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.getText())){

model.removeElementAt(i);list.setModel(model);break;

}}

}

4. Simpan dan jalankan aplikasi.




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 warnabackground jPanel menjadi putih.

Pada aplikasi ini kita akan bereksperimen dengan warna yang dapat diubahsesuai 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.




Aplikasi ini akan menampilkan semua data yang diinput pada bagian identitaspada 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().getElementAt(list[i]).

toString()+ ",");}

}

3. Kemudian buat events mouseclicked pada button Cetak, dengan kodeprogram seperti berikut:

try{areaT.print();

}catch(PrinterException pe){

System.err.println(pe);}

4. Simpan dan jalankan aplikasi.

05 Pemrograman Visual

Documents

Transcript of 05 Pemrograman Visual