MEMBUAT APLIKASI MENGGAMBAR (MENGGUNAKAN KOMPONEN TCOLORGRID, TMAINMENU, DAN KOMPONEN DIALOG)

Transkripsi

1 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

2 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

3 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

4 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

5 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

6 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

7 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

8 Pilih SpeedButton Fill dan tentukan warna BackgroundColor pada ColorGrid 8

9 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

10 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

11 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

12 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

13 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

14 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

15 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

16 Pilih menu Save As untuk menyimpan gambar. Muncul Save Picture Dialog, isikan nama file selanjutnya tekan tombol Save. 16

17 Maka gambar pada komponen Image akan disimpan sebagai file Bitmap Menambahkan Komponen OpenPictureDialog Tambahkan komponen OpenPictureDialog pada form, komponen ini digunakan untuk menampilkan dialog Open File dan akan mendapatkan informasi mengenai nama file dan path file. 17

18 Selanjutnya tambahkan kode berikut pada menu OpenFile. 18

19 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