Praktikum 05 – ColorMatcher
Pemrograman Berorientasi Objek
ColorMatcher Goal Praktikum ini bertujuan untuk mempelajari dan mempraktekkan prinsip composition (has_a), inheritance (is_a), event driven programming, polimorphism, dan abstract class.
Preparation Jalankan BlueJ dan buatlah sebuah project baru dengan nama ColorMatcher.
The Task & the Game Pada praktikum ini, anda akan membuat sebuah program permainan sederhana yang berfungsi untuk mencocokan sebuah warna. Tujuan utama dari permainan ini adalah mencoba untuk mencocokan warna yang digenerate secara random. Cara mencocokan warna tersebut adalah dengan menggunakan 3 buah slider R, G, dan B. Permainan yang lengkap akan menyediakan sebuah tombol “Play Again” untuk mengenerate warna random, 3 buah slider “R, G, dan B” untuk men-set warna RGB, 2 tombol untuk mengubah target (spot atau cross), dan tombol “show me” yang akan memberi jawaban warna yang cocok.
Level 1 Mulailah dengan membuat versi sederhana dari program ini. Pada level ini, program hanya berisikan objek target yang diberi warna. QuickTime™ and a TIFF (LZW) decompressor are needed to see this picture.
Ikutilah panduan berikut dengan teliti: 1. Buatlah sebuah service class dengan SpottedBlock yang meng-extends ARectangle.
nama
2. Definisikan constructor dari kelas SpottedBlock tersebut sedemikian rupa sehingga constructor tsb mengambil 3 buah parameter yang sama dengan ARectangle. Constructor ini akan mem-passing ketiga parameter tersebut ke constructor super classnya (gunakan keyword super). Lalu, di dalam constructor SpottedBlock ini, buatlah sebuah AOval yang berlokasi di tengah block tersebut. Perhatikan bahwa tinggi dan lebar AOval tersebut adalah setengah dari tinggi block tsb. 3. Override (tulis ulang) method setSize dari ARectangle sedemikian rupa sehingga selain memanggil method setSize yang dimiliki oleh super class, method ini juga akan meng-adjust size dan location dari
Jurusan Sistem Informasi – FIT UKM
Page 1 of 5
Pemrograman Berorientasi Objek
Praktikum 05 – ColorMatcher
spot. Tujuannya adalah agar spot tersebut tetap berukuran setengah dari block dan posisinya tetap di tengah-tengah block tersebut. 4. Tambahkan dua accessor methods setSpotColor dan getSpotColor yang berfungsi untuk men-set dan meng-get color dari spot tersebut. 5. Untuk dapat menjalankan program ini, buatlah sebuah director class dengan nama ColorMatcher. Di dalam constructor ColorMatcher ini, anda harus membuat sebuah object baru dari kelas SpottedBlock dengan lebar 250 pixels dan tinggi 250 pixels juga. Posisikan sedemikian rupa sehingga objek tersebut berada tepat di tengah sebuah window berukuran 500 x 350. Set initial color dari block tersebut dengan warna red dan set initial color dari spot dengan warna black. Checkpoint: Tunjukan dan jelaskan hasil kerja Anda kepada asisten.
Level 2 Modifikasilah program pada level 1 dengan cara menambahkan sebuah tombol yang berfungsi untuk men-set warna block secara acak. Untuk menyelesaikan level ini, anda perlu mengerti pola/prinsip Director-as-Handler, Action Object dan Callback yang dibahas di kuliah. Pada dasarnya, anda akan memerlukan sebuah subclass dari kelas Abutton (untuk mendefinisikan action object-nya), dan juga akan membutuhkan sebuah handler method pada kelas director (untuk mendefinisikan response yang diinginkan) Langkah Pengerjaan: Bacalah langkah pengerjaan ini dengan teliti! Baca materi kuliah apabila ada istilah-istilah baru yang belum anda pahami! Langkah 1: Mulailah dengan menambahkan sebuah handler method dengan nama Play pada kelas director (ColorMatcher). Method Play ini harus men-set warna spot dengan warna yang di-generate secara acak. Anda dapat membuat sebuah objek baru dari kelas Color dengan menggunakan constructor Color(int, int, int), di mana ketiga parameter integer tersebut akan menentukan jumlah red, green, dan blue dalam range 0 s/d 255. Untuk men-generate warna acak, gunakan teknik Random Number yang bertujuan men-generate ketiga nilai RGB secara acak berdasarkan range tadi. Langkah 2: Selanjutnya, buatlah sebuah action class dengan nama PlayButton yang meng-extends AButton. Kelas ini harus mengimplementasikan prinsip Callback, di mana kelas ColorMatcher berfungsi sebagai handler-nya, dan method Play berfungsi sebagai method callback-nya. Selain memiliki semua parameter dari AButton, consructor dari PlayButton ini juga harus memiliki parameter object handler (yaitu objek ColorMatcher). Jurusan Sistem Informasi – FIT UKM
Page 2 of 5
Praktikum 05 – ColorMatcher
Pemrograman Berorientasi Objek
Pada kelas ini, anda perlu juga mendefinisikan method actionPerformed yang berisikan objek handler memanggil method Play. Langkah 3: Modifikasilah constructor dari kelas director (ColorMatcher) dengan cara membuat sebuah instance dari PlayButton. Parameter dari constructor PlayButton adalah sebuah objek handler yaitu objek ColorMatcher, sebuah text “Play Again”, serta posisi dan ukuran dari button tersebut. Note: Karena kita belum men-generate objek ColorMatcher, anda harus menggunakan keyword “this” untuk mem-passing objek ColorMatcher yang belum digenerate tsb. Checkpoint: Show a demonstrator your working program and source code.
Level 3 Modifikasilah program pada level 2 dengan cara menambahkan 3 buah sliders yang berfungsi untuk meng-adjust warna spot. Untuk menyelesaikan level ini, anda akan memerlukan method handler tambahan (updateColor) di dalam director. Selain itu, anda akan memerlukan action class tambahan yaitu ColorSlider yang merupakan subclass dari Ascrollbar yang akan digunakan untuk membuat ketiga objek slider. Ketiga slider tersebut akan berfungsi untuk men-set warna merah, hijau dan biru (RGB).
QuickTime™ and a TIFF (LZW) decompressor are needed to see this picture.
Langkah Pengerjaan: Langkah 1: Mulailah dengan menambahkan 3 buah variable baru pada director untuk 3 objek slider. Kemudian, definisikanlah method handler bernama updateColor yang di dalamnya akan memanggil method getValue dari Ascrollbar untuk mencari tahu current value dari sliders. Buatlah sebuah objek Color baru berdasarkan nilai red, green, dan blue yang sudah didapatkan dari sliders tadi. Setelah itu, panggilah method setSpotColor untuk meng-update warna dari spot. Jangan lupa untuk memanggil repaint untuk me-refresh window. Langkah 2: Buatlah kelas ColorSlider yang meng-extend Ascrollbar dan gunakan teknik Callback untuk memanggil method updateColor. Kelas ini pada prinsipnya mirip dengan kelas PlayButton, walaupun memiliki perbedaan pada parameter constructor dan nama method callback-nya. Anda perlu mendefinisikan method adjustmentValueChanged yang berisikan objek handler memanggil method updateColor. Karena anda menggunakan kelas yang sama dalam membuat ketiga slider, maka apabila anda menggeser slider yang manapun akan memanggil updateColor dan tentu saja mengubah warna spot. Langkah 3:
Jurusan Sistem Informasi – FIT UKM
Page 3 of 5
Pemrograman Berorientasi Objek
Praktikum 05 – ColorMatcher
Modifikasilah constructor dari director untuk meng-create 3 instances dari ColorSlider. Tempatkanlah ketiga slider tersebut di sisi kanan window dengan urutan red slider, green slider, dan blue slider. Anda perlu memanggil method setMinMaxVal dari semua slider tersebut untuk men-set nilai minimum, maximum, dan initial. Ingat bahwa pemanggilan setMinMaxVal harus terjadi setelah semua objek/instance slider dibuat. Jika tidak, anda akan mendapatkan pesan eror pada saat run time yaitu pada saat callback mencoba memanggil objek yang belum dibuat. Checkpoint: Show a demonstrator your working program and source code.
Level 4 Modifikasilah program pada level 3 dengan cara menambahkan tombol “Show me!”. Tombol ini berfungsi untuk men-set ketiga slider dengan nilai yang benar untuk “menyelesaikan” permainan mencocokan warna. Ide dasar dari permainan ini adalah, pada saat anda menggeser slider untuk mencocokan warna, anda dapat menggunakan tombol tersebut untuk melihat seberapa dekat tingkat keberhasilan anda! Level ini mirip dengan proses pembuatan PlayButton. Untuk mengimplementasikan tombol “Show Me!” ini, anda memerlukan method handler tambahan pada kelas director (method Solve) dan kelas tambahan SolveButton yang merupakan subclass dari AButton. Method solve harus menggunakan ketiga accessor method yang dimiliki oleh objek Color, yaitu method getRed, getGreen, dan getBlue untuk mencaritahu current RGB value dari warna block, kemudian panggilah method setValue pada slider untuk meng-adjust slider tersebut dengan nilai yang sudah didapat tadi. Jangan lupa untuk memanggil repaint. Tambahkan juga objek ALabel pada program untuk memberi label pada semua component interface. Label harus dibuat untuk control area, juga untuk ketiga slider R, G, dan B. Perhatikan contoh pada gambar di atas. Checkpoint: Show a demonstrator your working program and source code.
Jurusan Sistem Informasi – FIT UKM
Page 4 of 5
Pemrograman Berorientasi Objek
Praktikum 05 – ColorMatcher
Level 5 Level ini akan menghasilkan program yang lengkap yaitu dengan menambahkan pilihan untuk memilih antara target “spot” atau “cross”. Cara yang terbaik adalah dengan mengimplementasikan dua jenis target yang mungkin (SpottedBlock dan CrossedBlock) sebagai subclass dari sebuah kelas abstract yang lebih umum (DecoratedBlock), di mana kelas abstract ini juga merupakan subclass dari ARectangle. Dengan cara ini, anda dapat menggunakan sebuah variabel yang bersifat polimorphic untuk objek target, yang artinya target bisa berupa SpottedBlock maupun CrossedBlock. Langkah 1: Buatlah sebuah kelas abstract DecoratedBlock yang meng-extends ARectangle. definisikanlah dua method abstract setDecorationColor dan getDecorationColor.
Pada kelas ini,
Langkah 2: Ubahlah kelas SpottedBlock sedemikian rupa sehingga sekarang kelas ini meng-ekstends DecoratedBlock. Anda hanya perlu membuat perubahan pada kelas ini sedikit saja. Ubah juga accessor methods-nya menjadi setDecorationColor dan getDecorationColor. Setelah itu, buatlah subclass baru yaitu CrossedBlock yang mirip dengan SpottedBlock. Perbedaannya adalah pada kelas ini anda harus membuat objek berbentuk cross. Langkah 3: Anda perlu menambahkan 2 buah tombol baru CrossButton dan SpotButton yang berfungsi untuk memanggil method handler yang sesuai (changeToCross dan changeToSpot) untuk mengubah jenis target dari spot ke cross dan juga sebaliknya. Karena variabel instance dari target bersifat polymorphic, method handlers hanya perlu menghapus objek lama dan membuat objek yang baru berdasarkan subclass (jenis objek) yang diinginkan. Jangan lupa untuk mengubah nama method setSpotColor menjadi setDecorationColor.
Checkpoint: Show a demonstrator your working program and source code. ^..^ Selamat Mengerjakan ^..^ (c) Niko Ibrahim, MIT Jurusan Sistem Informasi – FIT UKM
Page 5 of 5
