MEMBUAT APLIKASI MENGGAMBAR (MENGGUNAKAN KOMPONEN TCOLORGRID, TMAINMENU, DAN KOMPONEN DIALOG)
Tambahkan dua komponen TShape dan TColorGrid pada form yang telah anda buat pada materi sebelumnya, TColorGrid merupakan komponen visual yang digunakan untuk menampilkan color palette dalam bentuk Grid baris dan kolom.
Komponen Shape terletak pada component pallete pada tab Additional, sedangkan komponen TColorGrid terletak pada component pallete pada tab Sample
Ubah nama Shape1 menjadi ShapePen, dan Shape2 menjadi ShapeBrush
1
Oleh : Edi Sugiarto, S.Kom
Komponen TColorGrid digunakan untuk menampilkan warna dalam bentuk Grid baris dan kolom, default komponen tersebut menampilkan 16 warna dalam grid 4 baris dan 4 kolom, untuk mengganti kita dapat atur pada properties GridOrdering.
TcolorGrid memberikan opsi pemilihan warna kedalam dua jenis yakni ForegroundColor dan BackgroudColor, untuk warna ForegroundColor ditunjukan pada komponen tersebut dengan label FB dan BackgroundColor ditunjukan dengan label BG. Untuk mengganti index warna FB dan BG pada komponen ini dapat anda tentukan pada properties ForegroundIndex.
Ubah properties BackgroundIndex menjadi 15 maka label BG akan menunjukan pada warna putih.
2
Oleh : Edi Sugiarto, S.Kom
Selanjutnya tambahkan kode berikut pada komponen TcolorGrid event onChange
Setelah kode tersebut anda tulis selanjutnya jalankan aplikasi dan tentukan warna pada ColorGrid.
Ketika ForegroundIndex atau BackgroundIndex pada komponen ColorGrid1 berganti maka ShapePen akan menampilkan warna ForegroundColor dan ShapeBrush menampilkan warna BackgroundColor.
Selanjutnya tambahkan kode berikut pada komponen Image1 event onMouseDown untuk mengatur pewarnaan pena (garis) ketika user menggambar pada canvas.
Tambahkan kode berikut 3
Oleh : Edi Sugiarto, S.Kom
Sehingga ketika aplikasi dijalankan.
Ketika user menekan SpeedButton Rectangle dan menentukan warna Foreground = clRed (merah) pada ColorGrid
Maka user dapat menggambar segiempat dengan warna pena / garis merah.
4
Oleh : Edi Sugiarto, S.Kom
Menambahkan Tool Untuk Pewarnaan Selanjutnya tambahkan satu SpeedButton pada form dan ubah penamaan dengan nama SPBBrush, SPBBrush ini digunakan untuk pewarnaan seperti halnya menggunakan sebuah kuas.
Atur juga properties GroupIndex dengan nilai 1 agar SpeedButton ini berada dalam satu grup dengan SpeedButton yang lain.
Selanjutnya tambahkan kode berikut pada komponen Image1 event onMouseDown
Tambahkan kode berikut
5
Oleh : Edi Sugiarto, S.Kom
Selanjutnya tambahkan kode pada komponen Image event onMouseMove sbb:
Tambahkan kode berikut
Selanjutnya jalankan aplikasi, maka hasilnya sbb:
Tekan SPBBrush dan tentukan BackgroundColor pada ColorGrid
6
Oleh : Edi Sugiarto, S.Kom
Selanjutnya tambahkan SpeedButton dan ubahlah nama menjadi SPBFill, SPBFill digunakan untuk mewarnai kurva tertutup menggunakan prosedur FloodFill().
Tambahkan SpeedButton dan ubah nama menjad SPBFill.
Selanjutnya tambahkan kode berikut pada kompone Image event onMouseDown
Selanjutnya jalankan aplikasi dan buatlah suatu gambar.
7
Oleh : Edi Sugiarto, S.Kom
Pilih SpeedButton Fill dan tentukan warna BackgroundColor pada ColorGrid
8
Oleh : Edi Sugiarto, S.Kom
Pilih bidang kurva tertutup yang akan di beri warna
Selanjutnya tambahkan satu SpeedButton dan berilah penamaan dengan nama SPBSpray, SPBSpray ini digunakan untuk mewarnai gambar layaknya menggunakan penyemprot.
Tambahkan SpeedButton dan ubah nama menjadi SPBSpray
9
Oleh : Edi Sugiarto, S.Kom
Tambahkan kode program sehingga SpeedButton tersebut dapat digunakan seperti pada gambar berikut ini:
Ketika status SPBSpray adalah Down maka user dapat mewarnai gambar seperti halnya menggunakan penyemprot
Menambahkan Menu Terdapat dua komponen yang dapat digunakan untuk menampilkan menu, yaitu TMainMenu dan TPopupMenu. Kedua komponen tersebut terdapat pada tab Standart dari Component Palette.
Komponen TMainMenu digunakan untuk menampilkan palang menu lengkap dengan itemitemnya.
10
Oleh : Edi Sugiarto, S.Kom
Tambahkan TMainMenu pada form anda.
Untuk menambahkan item menu anda dapat memilih Menu Designer.
Klik kanan pada komponen TMainMenu, pilih Menu Designer
Selanjutnya akan muncul jendela Menu Designer
11
Oleh : Edi Sugiarto, S.Kom
Selanjutnya tambahkan Item Menu pada komponen TMainMenu, ketika kita kembali ke Form maka item menu ditampilkan pada sisi atas Form.
Tambahkan kode berikut pada menu Exit event onClick
12
Oleh : Edi Sugiarto, S.Kom
Maka ketika aplikasi anda jalankan dan pilih menu Exit, aplikasi akan berhenti.
Selanjutnya tambahkan kode pada menu New File.
Tambahkan kode berikut pada menu item New1 event onClick
Kode tersebut akan mengakibatkan pemanggilan prosedur onShow() pada Form1.
13
Oleh : Edi Sugiarto, S.Kom
Menggunakan Komponen Dialog Komponen dialog pada umumnya digunakan untuk menampilkan kotak dialog yang sering digunakan, misalnya kotak dialog untuk memilih file, memilih warna, menampilkan printer setup dan sebagainya. Komponen tersebut dapat kita temui pada Component Palette pada tab Dialogs.
Terdapat beberapa macam tipe kotak dialog umum, yaitu : •
TOpenDialog dan TSaveDialog digunakan untuk memilih nama file
•
TOpenPictureDialog dan TSavePictureDialog untuk memilih file gambar / citra
•
TFontDialog, untuk memilih Font
•
TColorDialog, untuk memilih warna
•
TPrintDialog, untuk menampilkan kotak dialog mencetak ke printer
•
TPrinterSetupDialog, untuk menampilkan kotak dialog konfigurasi printer
•
TFindDialog, untuk menampilkan kotak dialog pencarian teks
•
TReplaceDialog, untuk menampilkan kotak dialog mencari dan mengganti teks.
Selanjutnya tambahkan komponen TSavePictureDialog pada Form anda, komponen dialog ini digunakan untuk menampilkan jendela penyimpanan gambar ketika user ingin menyimpan gambar. Tambahkan kompone SavePictureDialog dari tab Dialogs ke Form
14
Oleh : Edi Sugiarto, S.Kom
Selanjutnya aturlah properties Filter untuk menentukan format file apa saja yang digunakan.
Selanjutnya tambahkan event onClick pada menu SaveAs1.
Selanjutnya jalankan aplikasi, buatlah sebuah gambar dan kemudian pilih menu SaveAs maka dialog Save Picture akan ditampilkan.
15
Oleh : Edi Sugiarto, S.Kom
Pilih menu Save As untuk menyimpan gambar.
Muncul Save Picture Dialog, isikan nama file selanjutnya tekan tombol Save.
16
Oleh : Edi Sugiarto, S.Kom
Maka gambar pada komponen Image akan disimpan sebagai file Bitmap
Menambahkan Komponen OpenPictureDialog Tambahkan
komponen
OpenPictureDialog form,
komponen
digunakan
pada ini untuk
menampilkan dialog Open File dan akan mendapatkan informasi mengenai nama file dan path file.
17
Oleh : Edi Sugiarto, S.Kom
Selanjutnya tambahkan kode berikut pada menu OpenFile.
18
Oleh : Edi Sugiarto, S.Kom
Selanjutnya jalankan aplikasi dan pilih menu Open File.
Pilih menu Open File maka akan muncul dialog Open File. Pilih file yang akan di buka dan tekan Open.
Gambar ditampilkan pada komponen Image
19
Oleh : Edi Sugiarto, S.Kom
