Tutorial A Menggambar Bendera Merah Putih Pada Frame Batas pengumpulan
: 17.30 WIB waktu Scele
Submit ke
: Slot Submission di Scele
Nama berkas pengumpulan
: Kedua kode sumber di kompres dalam zip dengan nama NPM.zip (Cth: 1106018888.zip)
Dalam bahasa pemrograman Java terdapat kelas-kelas yang sudah disediakan bagi kita untuk membuat komponen-komponen yang selanjutnya disebut graphical user interface (GUI).
Beberapa contoh komponen adalah bentuk persegi, lingkaran, elips, tombol, tabel, frame dsb. Pada tutorial kali ini kita akan mencoba menggunakan komponen-komponen seperti Rectangle, Color, Graphics2D, JComponent dan JFrame untuk menggambar bendera negara kita.
Membuat Objek Rectangle
Untuk menggambar bendera, kita membutuhkan objek dari kelas Rectangle yang mewakili bentuk persegi panjang dari bendera tersebut. Sebuah objek Rectangle akan membentuk area dalam ruang koordinat dimulai dari titik kiri teratas (x, y) dengan lebar dan tinggi tertentu (definisi dari Java API kelas Rectangle). Ketika kita ingin membuat objek Rectangle, kita dapat langsung memberikan spesifikasi koordinat awal dimana Rectangle tersebut akan digambar sekaligus dengan nilai lebar dan tingginya. Salah satu constructor dari kelas Rectangle adalah sbb (diambil dari Java API kelas Rectangle):
Rectangle(int x, int y, int width, int height)
dimana x dan y adalah koordinat x, y awal Rectangle tersebut akan digambar, dan width dan height masing-masing menyatakan lebar dan tinggi dari Rectangle tersebut.
Sebagai contoh bila kita ingin membuat sebuah objek Rectangle yang bernama benderaMerah dengan koordinat awal penggambaran pada (10, 30) dan lebar serta tinggi masing-masing bernilai 200 dan 60 piksel, kita dapat menuliskan kode sbb: Rectangle benderaMerah = new Rectangle(10, 30, 200, 60);
Selanjutnya, bila kita ingin menggambarkan bagian bendera putih maka kita dapat membuat objek Rectangle dengan lebar dan tinggi yang sama namun berbeda lokasi awal dari benderaMerah sbb: Rectangle benderaPutih = new Rectangle(10, 90, 200, 60);
Objek benderaPutih akan menggambarkan komponen berbentuk persegi dengan koordinat awal (10, 90) dan lebar serta tinggi bernilai 200 dan 60 piksel.
Sampai tahap ini, kita sudah membuat dua objek Rectangle yang bila digambarkan akan membentuk kotak masing-masing dimulai pada koordinat (10,30) dan (10,90) dengan lebar dan tinggi bernilai 200 dan 60 piksel.
Membuat Objek Color
Selanjutnya kita akan membuat objek Color untuk memberikan warna merah dan putih dalam bendera kita. Setiap warna dapat dibuat dengan mengombinasikan nilai dari komponen warna merah (R), hijau (G) dan biru (B) dengan masing-masing nilai berkisar antara 0 – 255. Sebagai contoh, warna hitam memiliki nilai komponen R = 0, G = 0, dan B = 0. Sedangkan warna putih dapat dinyatakan dengan nilai komponen R = 255, G = 255, dan B = 255. Untuk membuat objek Color, kita dapat menggunakan constructor kelas Color sbb (diambil dari Java API kelas Color) : Color(int r, int g, int b)
Sehingga bila kita ingin membuat objek Color warna merah (255, 0, 0) dan putih (255, 255, 255) kita dapat menuliskannya dalam kode seperti ini: Color merah = new Color(255, 0, 0); Color putih = new Color(255, 255, 255);
Menggambarkan Komponen Dengan Objek Graphics2D Langkah selanjutnya adalah menggambarkan kedua objek persegi yang mewakili bentuk bendera serta menerapkan warna terhadap masing-masing bagian bendera. Kita memerlukan sebuah objek kelas Graphics2D untuk menggambarkan komponenkomponen tersebut. Objek kelas Graphics2D mempunyai method draw() untuk menggambarkan komponen, setColor() untuk mengaktifkan warna yang akan digunakan, dan fill() untuk mewarnai komponen dengan warna yang sedang aktif, dll (dapat dibaca di Java API kelas Graphics2D).
Berikut ini adalah cara pembuatan sebuah objek Graphics2D dengan nama graph2: Graphics2D graph2 = (Graphics2D) g;
dengan g adalah sebuah objek kelas Graphics. Pada umumnya, objek g ini diperoleh dari argumen method paintComponent.
Kemudian kita dapat menggambarkan komponen bendera tadi dengan langkah-langkah berurut sbb:
// menggambar kotak pertama graph2.draw(benderaMerah); // mengaktifkan warna merah graph2.setColor(merah); // mewarnai komponen dengan warna merah yang sedang aktif graph2.fill(benderaMerah);
// menggambar kotak kedua graph2.draw(benderaPutih); // mengaktifkan warna putih graph2.setColor(putih); // mewarnai komponen dengan warna putih yang sedang aktif graph2.fill(benderaPutih);
Menyimpan Komponen JComponent
Bendera
Dalam
Kelas
Yang
Meng-extends
Sampai tahap ini, kita sudah mengetahui urutan langkah-langkah untuk menggambarkan dua buah kotak masing-masing dengan warna merah dan putih yang dapat kita anggap sebagai sebuah komponen yang merepresentasikan bendera. Sebelum objek-objek tersebut dapat digambarkan dalam sebuah frame, maka kita harus menuliskan langkahlangkah tersebut dalam sebuah method bernama paintComponent dalam sebuah kelas yang meng-extends kelas JComponent. Jadi, kita akan membuat sebuah kelas baru yang merepresentasikan objek bendera.
Di bawah ini adalah contoh kelas dimana kita dapat meletakkan kode-kode pembuatan komponen bendera tersebut. Kita boleh saja membuat kelas dengan nama yang berbeda.
import import import import import
javax.swing.JComponent; java.awt.Graphics; java.awt.Graphics2D; java.awt.Rectangle; java.awt.Color;
public class KomponenBendera extends JComponent { public void paintComponent(Graphics g) { // tuliskan kode pembuatan komponen-komponen bendera di sini … } }
Kelas KomponenBendera tersebut mampu melakukan penggambaran bendera berwarna merah putih. Karena kelas KomponenBendera adalah sebuah komponen, maka kita memerlukan objek dari kelas JFrame untuk meletakkan komponen tersebut agar hasil proses penggambaran bendera tersebut dapat dilihat secara visual melalui frame.
Membuat Objek JFrame
Objek dari kelas JFrame dapat menampung berbagai macam komponen hasil extends dari kelas JComponent. Sebuah objek dari kelas JFrame akan ditampilkan sebagai sebuah window yang dapat kita atur karakteristiknya di antaranya adalah ukuran frame (lebar dan tinggi) serta judul pada frame dengan melakukan pemanggilan method setSize() dan setTitle(). Agar window dapat ditutup dengan sukses maka kita perlu juga memanggil method setDefaultCloseOperation(). Berikut adalah contoh pembuatan objek kelas JFrame dengan ukuran 300x400 dan berjudul “Bendera Merah Putih”. JFrame frameBendera = new JFrame(); frameBendera.setSize(300, 400); frameBendera.setTitle(“Bendera Merah Putih”); frameBendera.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
Membuat Objek Komponen Bendera dan Meletakkannya Pada Objek JFrame Setelah objek JFrame bernama frameBendera dibuat maka kita dapat membuat objek dari kelas KomponenBendera lalu menempatkannya pada objek frameBendera tersebut. // membuat objek komponen KomponenBendera bendera = new KomponenBendera(); // menambahkan objek komponen ke frame frameBendera.add(bendera); // membuat frame visible atau dapat dilihat frameBendera.setVisible(true);
Method add() yang dijalankan oleh objek frameBendera akan menambahkan komponen yang diberikan sebagai parameter ke dalam objek frame tersebut. Akhirnya, kita harus memanggil method setVisible() yang dimiliki oleh objek frameBendera agar frame dapat ditampilkan secara visual.
Menampilkan Frame dengan Komponen Bendera Merah Putih
Langkah terakhir untuk melihat sebuah frame yang menampilkan Bendera Merah Putih adalah dengan menempatkan langkah-langkah pembuatan frame dan penambahan komponen di atas dalam method main di suatu kelas baru yang harus kita buat. Kode berikut menunjukkan pada bagian mana kita harus menuliskan kode pembuatan frame dan penambahan komponen bendera tersebut. Nama kelas pada kode dapat diubah sesuai dengan keinginan masing-masing selama masih memenuhi kaidah penamaan class.
Dengan merangkaikan seluruh langkah-langkah yang sudah dijelaskan sebelumnya dengan baik dan benar, maka kita akan dapat melihat sebuah window yang menampilkan bentuk bendera merah putih di dalamnya. Jangan lupa bahwa semua code harus dicompile terlebih dahulu dan tidak boleh ada error! Selanjutnya jalankan perintah java pada class BenderaMerahPutih. Selamat mencoba! import javax.swing.JFrame;
public class BenderaMerahPutih { public static void main(String[] args) { // tuliskan kode pembuatan frame dan penambahan komponen di sini ... } }
Keluaran Program Keluaran dari program kurang lebih sbb:
Rangkuman Secara garis besar, proses pembuatan gambar Bendera Merah Putih dapat dituliskan dalam pseudocode sbb:
1. buat sebuah kelas yang meng-extends kelas JComponent 2. dalam method paintComponent di kelas tersebut, lakukan hal berikut a. buat sebuah objek Rectangle bernama benderaMerah dengan koordinat dan ukuran yang diinginkan b. buat sebuah objek Rectangle bernama benderaPutih dengan koordinat dan ukuran yang diinginkan c. buat objek Color warna merah d. buat objek Color warna putih e. buat sebuah objek Graphics2D f. gambarkan benderaMerah oleh objek Graphics2D dan berikan warna merah g. gambarkan benderaPutih oleh objek Graphics2D dan berikan warna putih 3. buat sebuah kelas yang memiliki method main 4. dalam method main di kelas tersebut, lakukan hal berikut a. buat sebuah objek JFrame dengan ukuran dan judul yang diinginkan b. buat sebuah objek kelas komponen bendera tadi dan tambahkan objek tersebut pada objek JFrame yang sudah dibuat c. buat agar objek JFrame tersebut dapat ditampilkan secara visual 5. simpan dan compile kedua file 6. bila tidak ada error, jalankan program dari kelas yang memiliki method main
Tutorial B Menggambar Lampu Lalu Lintas Pada Frame Setelah kita memahami proses pembuatan Bendera Merah Putih dari tutorial A, maka kita juga dapat menerapkan cara yang kurang lebih sama untuk membuat lampu lalu lintas.
Pertama-tama anda dapat membuat kelas Circle berikut ini. Kelas Circle ini memiliki padanan seperti kelas Rectangle, dimana Circle akan menggambar bentuk lingkaran.
import java.awt.geom.Ellipse2D;
public class Circle extends Ellipse2D.Double { public Circle(int x, int y, int width, int height) { super((double) x, (double) y, (double) width, (double) height); } }
Sebagai gambaran, anda mungkin saja memerlukan 3 objek Rectangle, 3 objek Circle, dan 4 objek Color (representasi warna merah, kuning, hijau, dan hitam).
Hasil akhir yang diharapkan dari program anda adalah sbb:
Selamat Mencoba!!!!
