Download Modul PBO-6(GUI-Event Handling)

PRAKTIKUM PEMROGRAMAN OBJEK DENGAN JAVA
MODUL KE-6
GUI DAN EVENT HANDLING
LABORATORIUM PEMROGRAMAN
PROGRAM STUDI TEKNIK INFORMATIKA
FAKULTAS TEKNIK
UNIVERSITAS MUHAMMADIYAH MALANG
2011/2012
1. TUJUAN
•
•
•
•
•
•
Mahasiswa mampu memahami konsep GUI
yang ada di dalam Bahasa
Pemrograman Java
Mahasiswa mampu mengerti paket-paket yang ada di J2SE yang berisi library
untuk GUI
Mahasiswa mampu mengimplementasikan penggunaan class GUI untuk membuat
suatu tampilan
Mahasiswa mampu mengerti dan memahami konsep event handling yang ada di
dalam GUI
Mahasiswa mampu mengerti paket-paket yang digunakan untuk event Handling
Mahasiswa mampu memmahami beberapa macam Interface dan Class yang
digunakan untuk event handling
2. ALAT YANG DIGUNAKAN
•
Compiler Java (JDK), JRE
•
Editor Java (Gel, Eclipse, Jcreator, dll)
3. DASAR TEORI
1. Baca tutorial “Creating a GUI with JFC/Swing” di http://docs.oracle.com/javase/
tutorial/uiswing/
2. “A Visual Index to Swing Components”, http://java.sun.com/docs/books/tutorial/
uiswing/components/components.html
3. “Solving Common Component Problems,” http://java.sun.com/docs/books/tutorial/uiswing/
components/problems.html
4. A nice presentation of JFC/Swing and Model-View-Controller architecture, http://
www.doc.ic.ac.uk/~sjn5/java/Lecture10.pdf
5. A framework for automated testing of your GUI application: http://abbot.sourceforge.net/
6. “Representation Without Taxation: What Makes a GUI Good?” http://turing.acm.org/sigs/
sigchi/chi97/proceedings/doc/bde-rwt.htm
7. “Principles of Good GUI Design,” http://axp16.iie.org.mx/Monitor/v01n03/ar_ihc2.htm
8. “Advanced Event Driven Programming”, http://www.ecs.soton.ac.uk/~dem/
teaching/proginjava/s10.html
9. “Java Standard Events”, http://java.sun.com/docs/books/tutorial/uiswing/events/
eventsandcomponents.html
4. PROSEDUR PELAKSANAAN
•
•
•
•
•
•
Modifikasi program yang menggunakan komponen Swing dasar dan eventhandling
Gunakan nested panels dan layout managers
Tambahkan kompknen (ComboBox) ke GUI
Modifikasi program dengan multiple event object yang berasal dari satu event
source
Modifikasi program yang menggunakan multiple listener untuk satu event source
Menulis program dengan satu listener namun memiliki banyak event source
5. LAB: EKSPERIMEN DENGAN EXCEPTION HANDLING
Aktifitas 1: Memodifikasi program yang menggunakan komponen Swing dasar
dan event handling
• Untuk aktivitas ini gunakan file TempConverter.java. Program ini digunakan
untuk mengubah temperatur dari Celcius ke Fahrenheit. Hasil pengubahan
ditampilkan setelah user menekan tombol “Convert”
• Compile dan execute TempConverter
• Pelajari bagaimana kode TempConverter.java bekerja dan bagaimana
implementasi GUI-nya
• Modifikasi program TempConverter untuk mengubah nilai dari Celcius ke
Fahrenheit atau Fahrenheit ke Celcius, dengan mengikuti langkah-langkah berikut
ini:
• Langkah 1: Tambahkan textfield dan button
• Ubah ukuran GridLayout menjadi 3 baris dan 2 kolom
• Modifikasi method addWidgets:
• buat object textfield untuk fahrenheit
• buat object button untuk clear
• registrasi listener ke object button clear
• tambahkan objext textfield dan button yang baru dibuat ke panel
• compile dan execut TempConverter, pastikan hasilnya seperti
gambar berikut ini:
• Langkah 2: Tulis program untuk mengaktifkan tombol convert dan clear
(modifikasi method actionPerformed())
• Hitung temperatur dan menampilkan hasilnya. Hint: anda dapat
menggunakan kode berikut ini untuk konversi temperatur:
int calculatedTemp;
// hitung Fahrenheit
// ubah degrees Celsius ke double lalu ubah ke Fahrenheit
calculatedTemp =
(int)((Double.parseDouble(tempCelsius.getText()))* 1.8 + 32);
// hitung Celsius
// ubah degrees Fahrenheit ke double lalu ubah ke Celsius
calculatedTemp =
(int)((Double.parseDouble(tempFaren.getText()) – 32) * 0.55);
• Deteksi jenis tombol yang ditekan berdasarkan text yang ada di button.
Hint: gunakan if dan else condition beserta method di
ActionEvent.getActionPerformed()
• Jika yang ditekan tombol “Convert”, tampilkan hasil perhitungan di
setiap textfield.
• Jika yang ditekan tombol “Clear”, hapus semua teks yang ada di textfield
Aktifitas 2: Menggunakan nested panels dan layout managers
• Tulis Java GUI untuk menginputkan informasi shipping (pengiriman barang).
Beri nama program tersebut PanelDemo.java. Class ini harus meng-extends
JFrame.
• Untuk aktivitas ini anda tidak perlu menangani event, hanya buat panel, button,
label dan text field.
• Atur tampilan GUI sehingga nampak sebagaimana ditampilkan screen shot. Ikuti
model nesting dan layout manager berikut ini:
• Gunakan BorderLayout pada content pane atau frame
• Frame tersebut harus memiliki tiga JPanel: paymentPanel, addressPanel,
controlPanel
• Letakkan paymentPanel di bagian atas frame
• paymentPanel memiliki dua panel, yakni radioPanel dan detailPanel
• organisasikan radioPanel dan detailPanel menggunakan GridLayout
manager
• organisasi components di dalam radioPanel dan detailPanel
menggunakan GridLayout
• Letakkan addressPanel di bagian tengah frame, gunakan GridLayout untuk
mengorganisasi components di dalamnya
• Letakkan controlPanel di bagian bawah frame, gunakan FlowLayout untuk
mengorganisasi components di dalamnya
• Gunakan border title (judul di batas panel) sebagaimana ditampilkan di screen
shot
• Gunakan ukuran text field yang wajar
• Atur radio button di dalam button group dan lakukan pengesetan sehingga
setiap kali program dijalankan, tombol “Check” sudah terpilih
• Gunakan dimensi berikut untuk window anda:
private static final int FRAME_WIDTH = 300;
private static final int FRAME_HEIGHT = 350;
private static final int FRAME_X_ORIGIN = 150;
private static final int FRAME_Y_ORIGIN = 250;
• Tambahkan component-component sebagaimana ditunjukkan oleh screen shot.
Aktifitas 3: Menambahkan component ComboBox ke GUI
• Hasil tampilan GUI pada program di atas bisa lebih interaktif, jika di bagian
State, diubah menjadi ComboBox
• Ubah PanelDemo.java di aktivitas 2 dengan mengganti textfield untuk state
menjadi ComboBox.
• Tambahkan 4-6 state di ComboBox tersebut, misalkan: Jawa Timur, Nusa
Tenggara Timur, Kalimantan Timur dan Sulawesi Tenggara.
Aktifitas 4: Modifikasi program untuk menangani beberapa tipe event dari satu
event source
• Gunakan TEMPConverter.java. Catatan: yang digunakan adalah versi original
- jangan gunakan versi yang sudah dimodofokasi di aktivitas 1
• Modifikasi TempConverter.java untuk mengubah ukuran text field menjadi 10
• Modifikasi TempConverter.java untuk menambah MouseListener ke text field.
Listener tersebut harus mengimplementasi aturan berikut ini:
• Ketika mouse memasuki text field, tampilkan string “Ketikkan teks
disini” jika teks field tersebut kosong. Jika teks field tersebut telah terisi,
maka jangan ubah isi dari teks field tersebut.
• Ketika user menge-click mouse di text field, hapus semua isi text field
(ubah isinya menjadi “”)
• Gunakan blok try-catch, tambahkan error handling di program
TempConverter tersebut. Jika user memasukkan nilai non-numeric di text
field, hapus semua teks yang sudah diketikkan dan ubah teks di label
Fahrenheit menjadi “Nilai yang dimasukkan tidak valid”
Aktivitas 5: Modifikasi program untuk menangani beberapa listener dari satu
event source
• Modifikasi TempConverter.java dari aktivitas 4 untuk menambahkan
FocusListener di “Convert” button. Listener tersebut harus mengimplementasi
aturan berikut ini:
• Ketika button “get focus”, ubah warna foreground button menjadi biru,
kemudian print string “Got Focus” di command prompt / console
• Ketika button “lost focus”, ubah warna foreground button menjadi merah,
kemudian print string “Lost Focus” di command prompt / console
• Hint: untuk mengubah warna foreground, gunakan method “setForeground”
dan gunakan parameter Color.red, Color.blue
Aktivitas 6: Menulis program dengan satu listener dan banyak event source
• Buat aplikasi GUI sederhana untuk mengubah string dari upper case ke lower
case dan dari lower case ke upper case.
• Beri nama program anda ConvertText.java
• GUI memiliki satu text field dimana user dapat menginputkan string
sekaligus dapat melihat hasil konversinya
• GUI memiliki dua button, yakni Upper dan Lower
• Implementasikan satu listener untuk menangani dua button tersebut. Ketika
user menekan tombol “Upper”, ubah string di textfield menjadi huruf besar
semua. Jika yang ditekan tombol “Lower”, ubah string di textfield menjadi
huruf kecil semua.
6. TUGAS SETELAH SESI LABORATORIUM
Demokan hasil aktivitas 4, 5, dan 6 di minggu berikutnya
7. COBA DISKUSIKAN PERTANYAAN BERIKUT INI
10. Apa peranan layout manager? Kapan tiap jenis layout manager digunakan?
11. Apa hubungan antara event handling dan layout manager?
12. Kapan panel digunakan sebagai nested container?
13. Apa pendekatan terbaik untuk mengetes aplikasi GUI?
14. Sebutkan lima prinsip disain yang baik untuk membangun GUI?
15. Apakah mungkin untuk memiliki satu ActionListener yang menangani banyak
event source?
16. Apa keuntungan dan kerugian menggunakan satu event listener untuk banyak
event source?
17. Apa keuntungan dan kerugian menggunakan satu event listener untuk setiap
event source?
18. Kapan anda menggunakan listener-listener berikut ini: FocusListener,
MouseListener, ActionListener, WindowListener?