form cantik activeskin 4.3
TRANSCRIPT
DISCLAIMER
Seluruh dokumen E-Trik di dalam CD ini dapat digunakan dan disebarkan secara bebas untuk tujuan belajar bukan komersial (non-profit), dengan syarat tidak menghapus atau merubah atribut penulis dan pernyataan copyright yang disertakan dalam dokumen. Tidak diperbolehkan melakukan penulisan ulang, kecuali mendapatkan ijin tertulis terlebih dahulu dari Penerbit Maxikom.
E-Trik Visual C++ 6.0
Form Cantik Dengan ActiveSkin 4.3
MUHAMMAD SADELI
�
E-Trik berikut ini merupakan E-Trik sederhana Visual C++ 6.0, yang dapat memodifikasi tampilan Form pada Visual C++ 6.0 dengan berbagai bentuk tipe dan jenis form yang Anda inginkan. Agar para pengguna program yang Anda buat tidak mudah bosan dengan tampilan program Anda.
A. Membuat Project Baru1. Buka program Microsoft Visual C++ 6.0. Caranya klik tombol Start pada
windows taksbar. Kemudian pilih All Programs > Microsoft Visual Studio 6.0 > Microsoft Visual C++ 6.0, lihat Gambar 1
Gambar 1. Membuka program Microsoft Visual C++ 6.0
�. Setelah menu kerja Microsoft Visual C++ tampil buatlah project baru Microsoft Visual C++ 6.0 dengan nama “Form Cantik Dengan ActiveSkin 4.3”. Caranya, klik menu File > New atau tekan Ctrl+N. Setelah itu kotak dialog New akan tampil, pada Tab project pilih jenis project MFC AppWizard(exe), lalu ketikkan nama project dan tentukan lokasi peny-impanan dengan menekan tombol , pada kolom Location kemudian klik OK, lihat Gambar 2
Form Cantik Dengan ActiveSkin 4.3E - Trik
3
Form Cantik Dengan ActiveSkin 4.3
Gambar 2. Menentukan jenis project
3. Pada kotak dialog MFC AppWizard - Step 1, pilih radio button Dialog Based kemudian klik tombol Next >, lihat Gambar 3
Gambar 3 Menentukan tipe aplikasi
4. Pada kotak dialog MFC AppWizard - Step 2 of 4, klik tombol Next >, lihat Gambar 4
1. Pilih Project MFC AppWizard(exe)
3. Tentukan Lokasi Penyimpanan
4. Klik Tombol OK
Tab Project
2. Ketik Nama Project
1. Pilih Radio Button Dialog Based
2. Klik Tombol Next >
4
Form Cantik Dengan ActiveSkin 4.3
Gambar 4. Menentukan fitur yang ingin dipakai
5. Pada kotak dialog MFC AppWizard - Step 3 of 4, klik tombol Next >, lihat Gambar 5
Gambar 5. Menetukan style project
6. Pada kotak dialog MFC AppWizard - Step 4 of 4, klik tombol Finish, lihat Gambar 6
Klik Tombol Next >
Klik Tombol Next >
5
Form Cantik Dengan ActiveSkin 4.3
Gambar 6. Hasil pembuatan project baru dari step 1 - step 4
7. Terakhir muncul kotak dialog New Project Information, klik tombol OK, lihat Gambar 7
Gambar 7. Menampilkan informasi project secara sfesifikasi
Klik Tombol Finish
Klik Tombol OK
6
B. Mendesain Tampilan Program
Setelah Selesai dalam pembuatan project baru Microsoft Visual C++ 6.0. Sek-arang Anda desain tampilan program yang akan Anda buat seperti dibawah ini, lihat Gambar 8
Gambar 8. Desain tampilan program
C. Menambahkan Komponen ActiveX Control ActiveSkin 4.3
Untuk mendukung jalanya aplikasi dengan baik Anda harus menambahkan komponen ActiveX Control yaitu ActiveSkin 4.3 Control sebanyak 6 buah, yang softwarenya bisa Anda Download di http://www.softshape.com. Untuk menempelkan kontrol ActiveSkin 4.3 ke dalam lembar Form Caranya ikuti langkah- langkah dibawah ini.
1. Klik kanan pada lembar Form kemudian pilih Insert ActiveX Control, lihat Gambar 9
Gambar 9. Menampilkan Komponen ActiveX Control
Form Cantik Dengan ActiveSkin 4.3
1. Klik Kanan Pada Lembar Form
2. Klik Insert Active X Control
Button
7
�. Kotak dialog Insert ActiveX Control akan muncul, pilih komponen dengan nama ActiveSkin Control 4.3, kemudian klik tombol OK, lihat Gambar 10
Gambar 10. Memilih komponen activeskin 4.3
3. Setelah itu komponen ActiveSkin 4.3 , akan tertempel secara otomatis pada lembar Form, lihat Gambar 11
Gambar 11. Komponen ActiveSkin yang tertempel pada lembar Form
D. Memberikan Nama Variabel Member
Setelah itu kita akan memberikan nama variabel member pada masing - mas-ing kontrol yang melekat pada lembar form. Untuk pemberian nama variabel member, kita hanya memberikan beberapa kontrol saja yang dianggap perlu dan mendukung dalam pembuatan kode atau listing pada jendela editor kode pemrograman Visual C++ 6.0. Berikut akan ditampilkan Tabel nama Variabel member, lihat Tabel 1.
Form Cantik Dengan ActiveSkin 4.3
1. Pilih Kontrol Active Skin 4.3 Control
2. Klik Tombol OK
Kontrol ActiveSkin 4.3
�
Tabel 1. Nama Variable Member
E. Memilih Jenis Skin
Untuk memilih jenis skin yang Anda inginkan Anda harus mencari folder “Skins” pada drive komputer Anda. Dan lokasi folder “Skins” tergantung pada waktu Anda menginstall software ActiveSkin 4.3, untuk memilih jenis “Skins”, Caranya :
1. Klik kanan kontrol ActiveSkin 4.3 yang tertempel pada lembar Form yang telah Anda desain. Kemudian pilih ActiveSkin 4.3 Control Object lalu klik Load Skin, lihat Gambar 12
ID Kontrol Type Kontrol Variabel Member Type Caption
IDC_BUTTON 1 BUTTON - CButton Tes Skin 1
IDC_BUTTON 2 BUTTON - CButton Tes Skin 2
IDC_BUTTON 3 BUTTON - CButton Tes Skin 3
IDC_BUTTON 4 BUTTON - CButton Tes Skin 4
IDC_BUTTON 5 BUTTON - CButton Tes Skin 5
IDC_BUTTON 6 BUTTON - CButton Tes Skin 6
IDC_KELUAR BUTTON - CButton Keluar
IDC_SKIN21 SKIN m_SKIN1 CSkin -
IDC_SKIN22 SKIN m_SKIN2 CSkin -
IDC_SKIN23 SKIN m_SKIN3 CSkin -
IDC_SKIN24 SKIN m_SKIN4 CSkin -
IDC_SKIN25 SKIN m_SKIN5 CSkin -
IDC_SKIN26 SKIN m_SKIN6 CSkin -
Form Cantik Dengan ActiveSkin 4.3
�
Gambar 12. Load Skin
�. Kotak dialog Open Skin akan muncul, cari lokasi folder “ActiveSkin 4.3” pada drive komputer Anda, dan pada folder ActiveSkin 4.3 akan terdapat folder “Skins”, klik folder tersebut dan kumpulan jenis “Skins” akan tampil, pilih jenis skin yang diinginkan dengan mengklik jenis skin lihat Gambar 13
Gambar 13. Menentukan jenis skin
3. Lakukan langkah 1 - � sampai pada kontrol ActiveSkin 4.3 yang ke 6, dan untuk jenis skin, sebagai contoh Anda dapat mengikuti ketentuan jenis skin dengan melihat tabel dibawah ini, lihat Tabel 2
Form Cantik Dengan ActiveSkin 4.3
1. Klik Kanan Pada Kontrol ActiveSkin 4.3
2. Pilih ActiveSkin 4.3 Control Object 2. Klik Load Skin
1. Klik ProgramFiles
2. Klik ActiveSkin 4.3
3. Klik Skins
4. Pilih Jenis Skin
10
Tabel �. Jenis Skin
F. Pembuatan Kode Atau Listing Program
Selanjutnya kita akan membuat kode pemrograman pada jendela editor kode pemrograman Visual C++ 6.0, ikuti langkah dibawah ini
1. Double klik pada tombol Button dengan caption “Tes Skin 1” klik tombol OK pada kotak dialog Add Member Function, kemudian ketikkan kode pemrograman seperti dibawah ini :
Hasil kode pemrograman diatas akan menghasilkan tampilan Form seperti gambar dibawah ini, lihat Gambar 14
Form Cantik Dengan ActiveSkin 4.3
ID Skin Jenis Skin
IDC_SKIN21 Winaqua
IDC_SKIN22 Green
IDC_SKIN22 Web II
IDC_SKIN22 Top Secret
IDC_SKIN22 B - Studio
IDC_SKIN22 Zhelezo
m_SKIN1.ApplySkin(0);1
- Baris 1 Merupakan fungsi untuk merubah tampilan Form atau meng aktifkan jenis skin pada kontrol ActiveSkin 4.3 yang pertama sesuai dengan jenis skin yang kita pilih pada saat Load Skin.
Keterangan Kode
11
Gambar 14. Bentuk Form kontrol ActiveSkin 4.3 yang pertama
�. Double klik pada tombol Button dengan caption “Tes Skin �” klik tombol OK pada kotak dialog Add Member Function, kemudian ketikkan kode pemrograman seperti dibawah ini :
Hasil kode pemrograman diatas akan menghasilkan tampilan Form seperti gambar dibawah ini, lihat Gambar 15
Gambar 15. Bentuk Form kontrol ActiveSkin 4.3 yang kedua
Form Cantik Dengan ActiveSkin 4.3
m_SKIN2.ApplySkin(0);1
- Baris 1 Merupakan fungsi untuk merubah tampilan Form atau meng aktifkan jenis skin pada kontrol ActiveSkin 4.3 yang kedua sesuai dengan jenis skin yang kita pilih pada saat Load Skin.
Keterangan Kode
1�
3. Double klik pada tombol Button dengan caption “Tes Skin 3” klik tombol OK pada kotak dialog Add Member Function, kemudian ketikkan kode pemrograman seperti dibawah ini :
Hasil dari kode pemrograman diatas akan menghasilkan tampilan form seperti dibawah ini, lihat Gambar 16
Gambar 16. Bentuk Form kontrol ActiveSkin 4.3 yang ketiga
4. Double klik pada tombol Button dengan caption “Tes Skin 4” klik tombol OK pada kotak dialog Add Member Function, kemudian ketikkan kode pemrograman seperti dibawah ini :
Form Cantik Dengan ActiveSkin 4.3
m_SKIN3.ApplySkin(0);1
- Baris 1 Merupakan fungsi untuk merubah tampilan Form atau meng aktifkan jenis skin pada kontrol ActiveSkin 4.3 yang ketiga sesuai dengan jenis skin yang kita pilih pada saat Load Skin.
Keterangan Kode
m_SKIN4.ApplySkin(0);1
- Baris 1 Merupakan fungsi untuk merubah tampilan Form atau meng aktifkan jenis skin pada kontrol ActiveSkin 4.3 yang keempat sesuai dengan jenis skin yang kita pilih pada saat Load Skin.
Keterangan Kode
13
Hasil dari kode pemrograman diatas akan menghasilkan tampilan form seperti dibawah ini, lihat Gambar 17
Gambar 17. Bentuk Form kontrol ActiveSkin 4.3 yang keempat
5. Double klik pada tombol Button dengan caption “Tes Skin 5” klik tombol OK pada kotak dialog Add member Function ketikkan kode pemrogra-man seperti dibawah ini :
Hasil dari kode pemrograman diatas akan menghasilkan tampilan form seperti dibawah ini, lihat Gambar 18
Gambar 18. Bentuk Form kontrol ActiveSkin 4.3 yang kelima
Form Cantik Dengan ActiveSkin 4.3
m_SKIN5.ApplySkin(0);1
- Baris 1 Merupakan fungsi untuk merubah tampilan Form atau meng aktifkan jenis skin pada kontrol ActiveSkin 4.3 yang kelima sesuai dengan jenis skin yang kita pilih pada saat Load Skin.
Keterangan Kode
14
6. Double klik pada tombol Button dengan caption “Tes Skin 6” klik tombol OK pada kotak dialog Add member Function, kemudian ketikkan kode pemrograman seperti dibawah ini :
Hasil dari kode pemrograman diatas akan menghasilkan tampilan form seperti dibawah ini, lihat Gambar 19
Gambar 19. Bentuk Form kontrol ActiveSkin 4.3 yang keenam
7. Double klik pada tombol Button dengan caption “Keluar”, klik tombol OK pada kotak dialog Add Member Function, ketikkan kode pemrograman seperti dibawah ini :
Form Cantik Dengan ActiveSkin 4.3
m_SKIN6.ApplySkin(0);1
- Baris 1 Merupakan fungsi untuk merubah tampilan Form atau meng aktifkan jenis skin pada kontrol ActiveSkin 4.3 yang keenam sesuai dengan jenis skin yang kita pilih pada saat Load Skin.
Keterangan Kode
CDialog::OnOK( );1
- Baris 1 Merupakan fungsi untuk mengakhiri jalannya program yang telah Anda buat atau menutup program yang telah Anda buat.
Keterangan Kode
15
G. Menjalankan Program / Kompile
Setelah Anda selesai dengan penulisan kode program pada jendela editor kode pemrogramanVisual C++ 6.0, Anda bisa langsung menjalankan pro-gram yang telah Anda buat, Caranya klik menu Build > Execute atau klik icon , atau bisa juga dengan menekan tombol F5 pada keyboard Anda. Lihat Gambar 20
Gambar 20. Menjalankan program
H. Tampilan Program Saat Dijalankan
Untuk melihat hasil kerja dari program yang telah anda buat klik tombol But-ton dengan caption “Tes Skin 1” sampai “Tes Skin 6” dan lihat perubahan Form yang terjadi. Dan Anda dapat menerapkannya pada program Anda.
Gambar 14. Tampilan program saat dijalankan
Form Cantik Dengan ActiveSkin 4.3
2. Klik Execute
KLik Icon Builder / Execute
1. Klik Menu Build