Pada Visual Basic yang Anda gunakan, mungkin Anda akan menggunakan suatu control yang terdiri dari sebuah control label dan control shape, dan digunakan secara berulang-ulang di atas form Anda. Jika Anda mengalami hal seperti ini, maka suatu ide yang sangat bagus untuk menghemat sebagian besar waktu Anda (dan tentu memiliki banyak waktu yang menyenangkan dengan hasil yang memuaskan) untuk membuat sebuah control ActiveX yang dapat digunakan di project Anda setiap saat.
Berikut ini kita akan mencoba membuat sebuah ActiveX Control yang sederhana bernama "ShapeLabel". Walaupun control ini sendiri tidaklah begitu menarik, dengan membuat control ini, Anda akan mengetahui dengan cepat sebagian besar event yang digunakan oleh ActiveX Control, menunjukkan bagaimana menjalankan source code tersebut saat design-time, dan menunjukkan langkah-langkah dasar untuk membuat dan menggabungkan sebuah halaman property.
ActiveX control dapat ditambahkan ke project dengan tipe apapun. Ketika sebuah control dikompilasi sebagai bagian dari sebuah file .exe, biar bagaimanapun, dia tidak dapat digunakan oleh aplikasi-aplikasi lainnya. Kontrol ShapeLabel akan dikompilasi ke sebuah file .ocx sehingga bisa digunakan bersama. Oleh karena itu, project ControlDemo akan dibuat sebagai sebuah project ActiveX control.
Sebuah project ActiveX control dapat terdiri dari banyak control yang ingin Anda buat. Ketika membuat project, file .ocx yang dihasilkan akan terdiri dari semua control yang telah Anda tambahkan.
Untuk membuat project ControlDemo:
1.
Dari menu "File", klik "New Project" untuk membuka sebuah kotak dialog project baru. (Hal ini akan menutup project atau project group yang sedang terbuka; Anda akan diminta untuk menyimpan perubahan yang baru saja Anda buat). Dobel klik icon ActiveX Control untuk membuat sebuah project baru. Visual Basic otomatis menambahkan sebuah UserControl Designer ke project ini. Nama defaultnya adalah "UserControl1", dan akan kelihatan sebagai caption dari designer-nya.
2.
Pada menu "Project", klik "Project1 Properties" untuk membuka kotak dialog. Pilih tab "General", isikan informasi yang ditampilkan di bawahnya. Di antaranya: pada kotak isian "Project Name", masukkan: "Project_ShapeLabel" dan pada kotak isian "Project Description", masukkan: "ActiveX Control Creation Demo", lalu klik tombol "OK".
3.
Dobel klik "UserControl1" di jendela "Project Explorer" untuk menampilkan designer.
4.
Di jendela "Properties", dobel klik property "Name" dan ganti nama usercontrol menjadi: "ShapeLabel". Nama yang baru kelihatan di caption (bagian atas) dari designer dan di jendela "Project Explorer". Nama yang Anda pilih menjadi nama class dari control Anda, sama seperti "CommandButton" adalah nama class untuk sebuah control command button. Catatan bahwa: jendela "Properties" kelihatan seperti jendela untuk sebuah form milik Visual Basic. Beberapa properti yang Anda gunakan kelihatannya hilang, tapi, ada properti yang tidak dimiliki oleh form di Visual Basic. Properti-properti ini tidak dibahas di sini. Anda bisa melihat informasi tentang hal ini selengkapnya pada artikel yang berjudul "Building ActiveX Controls". Silahkan cari dari google.com.
5.
Dalam control designer, atur ukuran control dengan mendrag pada sudut kanan bawah dari control, drag ke atas dan ke kiri akan membuat control semakin kecil. Hal ini menentukan ukuran default dari control.
6.
Dari menu "File", klik "Save Project" untuk menyimpan file-file project ini. Namakan mereka dengan nama yang ada di tabel berikut ini. Visual Basic akan menambahkan dengan ekstensi yang sesuai dengan file-nya secara otomatis.
File Nama File Ekstensi
UserControl ControlDemo_ShapeLabel .ctl
Project ControlDemo_ShapeLabel .vbp
Informasi binary di sebuah control - seperti bitmaps - akan disimpan di dalam sebuah file binary dengan nama yang sama, dan memiliki ekstensi .ctx.
Untuk mencoba control ShapeLabel, Anda membutuhkan sebuah form. Anda tidak dapat hanya menambahkan sebuah form ke ControlDemo dan menjalankan project, karena sebuah project .ocx tidak dapat dijalankan oleh dirinya sendiri. (Hal ini sama dengan menjalankan file .ocx sendiri).
Untuk mengizinkan proses debug di component in-process, Visual Basic membolehkan Anda untuk me-load dua atau lebih project di dalam sebuah project group. Dengan tujuan untuk memungkinkan proses debug in-process, project group membuat hal ini semakin mudah untuk memuat project .ocx dan project test Anda tadi.
Untuk menambahkan sebuah project ke project group:
1.
Dari menu "File", klik "Add Project" untuk membuka kotak dialog Add Project. Jangan klik "Open Project" atau "New Project", karena hal ini akan menutup project control tadi.
2.
Dobel klik icon "Standard EXE" untuk menambahkan sebuah project exe baru. Anda sekarang dapat melihat kedua project ini di dalam jendela "Project Explorer", dan caption dari jendela Project Explorer akan menampilkan nama default dari project group. Project baru dengan segera menjadi project Startup untuk project group. Jendela "Project Explorer" menandakan project awal dengan menampilkan namanya dengan huruf tebal. Sebuah project ActiveX Control seperti ControlDemo, tidak dapat sebagai project Startup.
3.
Dari menu "File", klik "Save Project Group" untuk menyimpan project test dan project group. Nama-nama file tersebut ditampilkan di bawah ini. Visual Basic akan menambahkan dengan ekstensi yang sesuai dengan file-nya secara otomatis.
File Nama File Ekstensi
Form TestCtlDemo_Forml .frm
Project TestCtlDemo .vbp
Project Group ControlDemo .vbg
Tidak seperti object-object di pemrograman lainnya, control-control memiliki perilaku saat "design-time" dan "run-time". Itulah mengapa beberapa code di control Anda akan dieksekusi ketika seorang pengembang menempatkan sebuah instansiasi dari control di atas sebuah form saat design-time.
Sebagai contoh, code yang ditempatkan di event procedure "UserControl_Reisize" akan dieksekusi, keduanya saat design-time dan run-time.
Untuk men-debug perilaku "design-time" dari control Anda, Anda harus dapat mengeksekusi code di control selagi form tempat menempatkan control tadi dalam keadaan "design-mode".
Dua procedure berikut ini akan menunjukkan hal tersebut. Dalam procedure pertama, Anda akan menambahkan coding untuk event Resize dari control ShapeLabel. Dalam procedure kedua, Anda akan meletakkan bagian dari ControlDemo ke dalam "mode-run"-selagi test project masih dalam keadaan "mode-design"-kemudian menambahkan sebuah instansiasi dari control ShapeLabel ke sebuah form di dalam project test.
Untuk menambahkan coding ke event Resize:
1.
Dari jendela "Project Explorer", dobel klik "ShapeLabel" untuk membuatnya sebagai designer yang aktif.
2.
Dobel klik control "ShapeLabel" untuk membuka jendela coding.
3.
Di dalam kotak Procedure, klik event Resize untuk menuju ke procedure tersebut. Tambahkan coding berikut:
Private Sub UserControl_Resize()
Static intCt As Integer
intCt = intCt + 1
Debug.Print "Resize " & intCt
End Sub
Catatan: Nama dari event procedure memiliki awalan "UserControl", sama seperti event procedure "Form_Resize" untuk sebuah form, memiliki awalan "Form".
Dalam pengembangan sebuah aplikasi Visual Basic, Anda sekarang akan mengklik tombol "Start" yang berada di bagian toolbar, atau menekan tombol F5 di keyboard, untuk menjalankan aplikasi Anda. Jika Anda ingin menempatkan sebuah control ShapeLabel ke atas Form1, biar bagaimanapun, Anda telah menjalankan coding di control, meninggalkan semua lainnya dalam "mode-design".
Untuk menjalankan control ShapeLabel saat design-time:
1.
Dalam jendela "Project", dobel klik "ShapeLabel" untuk menampilkannya, lalu tekan tombol CTRL+F4 di keyboard untuk menutup jendela. Tutup jendela designer untuk meletakkan control ShapeLabel dalam mode-run. Begitu control dalam mode-run, icon-nya (default icon toolbox untuk sebuah control pengguna) menjadi aktif di toolbox. Penting Anda ketahui: Jangan klik tombol "Start" di toolbar, atau tekan F5, karena hal ini akan meletakkan project group yang sedang berjalan ke dalam mode-run, dan Anda tidak akan dapat menambahkan sebuah control baru ke sebuah form. Ketika Anda meletakkan sebuah control dalam mode-run, hal ini bukanlah masalah untuk Anda menutup jendela designer. (Anda selalu dapat mengatakan jika designer sedang terbuka, karena icon control di toolbox akan berwarna abu-abu).
2.
Dalam jendela "Project Explorer", dobel klik "Form1" untuk menampilkannya.
3.
Dobel klik icon "ShapeLabel" untuk menambahkan control ini ke Form1. Control akan kelihatan sebagai sebuah kotak persegi berwarna abu-abu dengan kotak-kotak kecil di sekelilingnya: Di jendela Properties Anda dapat melihat properties default untuk sebuah control baru. Control ShapeLabel yang baru saja Anda tambahkan ke form telah memiliki nama default, yaitu: ShapeLabel1. Catatan: Penamaan control Anda ketika Anda sedang mendisainnya mengabaikan sesuatu yang dapat membingungkan. Misalkan Anda menempatkan sebuah control dengan sebuah nama default, seperti UserControl1, di atas sebuah form. Otomatis penomoran pada control-control baru akan menambahkan sebuah nomor ke nama control tersebut, menjadi UserControl2, UserControl3, dst.
4.
Event Resize milik "ShapeLabel" terjadi ketika control ini ditempatkan di atas form, seperti yang dapat Anda lihat di jendela "Immediate". Gunakan penanganan drag untuk mengatur ukuran control beberapa kali. Setiap kali Anda melakukan pengaturan ukuran, event Resize akan terjadi. Jika Anda menggerakkan control di sekitar form, event Resize tidak terjadi.
5.
Di Form1, dobel-klik control ShapeLabel untuk membuka jendela coding untuk Form1. Cursor akan berada pada default event procedure, ShapeLabel1_GotFocus. Anda dapat menggunakan kotak Procedure ini untuk menampilkan event ketiga Visual Basic secara otomatis yang disediakan control Anda. Tutup jendela coding ketika Anda telah selesai.
6.
Di jendela "Project Explorer", dobel klik "ShapeLabel" untuk membuka designer ShapeLabel. Catatan: Control ShapeLabel yang telah Anda taruh di Form1 ditandai dengan tanda lubang abu-abu yang berarti control ini sedang tidak aktif. Dengan membuka sebuah designer milik control ini, membuat semua instansiasi dari control ini menjadi tidak aktif. Dengan mengubah coding di jendela coding control mungkin juga membuat instansiasi control menjadi tidak aktif.
7.
Coding di module "ShapeLabel" tidak dapat dieksekusi ketika jendela designer sedang terbuka. Gunakan penanganan drag untuk mengatur bayangan control di atas Form1. Event Resize tidak ditimbulkan, jadi tidak ada pesan baru tampil di jendela Immediate.
8.
Yakinkan bahwa designer ShapeLabel sedang ditampilkan, lalu tekan CTRL+F4 untuk menutup jendela, dan akan mengaktifkan kembali instansiasi dari control. Bayangan hilang dari control di Form1, menandakan bahwa instansiasi menjadi aktif lagi. Jika control telah berubah menjadi tidak aktif, itu karena perubahan di codingnya, Anda dapat mengklik kanan di form test untuk menampilkan konteks menunya, dan mengklik "Update UserControls" untuk mengaktifkan kembali instansiasi control.
Catatan: Berhubungan ke sejumlah procedure yang dibutuhkan Windows, Anda mungkin sering kali menemukan designer ShapeLabel telah hilang di belakang form lainnya. Anda dapat men-dobelklik ShapeLabel di jendela Project Explorer untuk menampilkan designer ke depan.
Usia dari sebuah form biasa Visual Basic ditandai oleh event-event tertentu, seperti: Initialize, Load, QueryUnload, dan Unload. Untuk membuat aplikasi yang seharusnya, merupakan hal yang penting untuk mengetahui kapan event-event ini terjadi di siklus hidup sebuah form.
Hal yang sama berlaku juga untuk control. Event-event kunci di dalam siklus hidup sebuah UserControl adalah: Initialize, InitProperties, ReadProperties, WriteProperties, dan Terminate. Procedure-procedure berikut akan menampilkan event-event ini.
Untuk menampilkan event-event ShapeLabel:
1.
Dari jendela "Project Explorer", dobel klik "ShapeLabel" untuk membuka designer-nya.
2.
Dobel klik designer untuk membuka jendela coding untuk ShapeLabel, lalu masukkan coding dalam event procedure berikut ini:
Private Sub UserControl_Initialize()
Debug.Print "Initialize"
End Sub
Private Sub UserControl_InitProperties()
Debug.Print "InitProperties"
End Sub
Private Sub UserControl_ReadProperties(PropBag As PropertyBag)
Debug.Print "ReadProperties"
End Sub
Private Sub UserControl_WriteProperties(PropBag As PropertyBag)
Debug.Print "WriteProperties"
End Sub
Private Sub UserControl_Terminate()
Debug.Print "Terminate"
End Sub
Catatan: Untuk object-object UserControl, Load dan Unload digantikan dengan event ReadProperties dan WriteProperties.
3.
Yakinkan bahwa designer ShapeLabel sedang ditampilkan di depan, lalu tekan tombol CTRL+F4 untuk menutup jendela, lalu letakkan control di mode-run. Pesan debug akan tampil di jendela Immediate. Apa yang sedang terjadi di sini? Anda belum membuat instansiasi dari control ShapeLabel di Form1. Dari mana semua event-event ini berasal?
Hal ini menggambarkan sebuah hal yang penting mengenai control. Seorang user meletakkan control di atas form, dan setelah itu control sebagai sesuatu yang bersifat tetap di form. Dari sisi pembuat control, biar bagaimanapun, control-control ini dihancurkan dan dibuat kembali setiap saat.
Ketika Anda meletakkan ShapeLabel di mode-run dengan menutup designer-nya, instansiasi dari ShapeLabel di Form1 dihancurkan dan dibuat kembali setiap control ini menerima event Initialize. Mengapa Anda tidak melihat event Terminate terlebih dulu? Karena instansiasi asli dari ShapeLabel yang telah Anda tempatkan di Form1 dibuat sebelum Anda menambahkan coding di event procedure "UserControl_Terminate! Selamat datang di dunia pembuatan control yang penuh "kekejaman" dan "keasyikan"!!!.
Catatan: Instansiasi control juga dihancurkan dan dibuat kembali ketika Anda mengklik "Update UserControlls" dari context menu miliknya form (klik kanan di form...).
4.
Tekan CTRL+F5, atau klik tombol Start di toolbar, untuk menjalankan TestCtlDemo. Ketika project sedang berjalan, grid di Form1 hilang, jadi Anda tidak dapat melihat ShapeLabel, tapi Anda dapat melihat sekilas siklus hidup sebelumnya di jendela Immediate.
Setelah sebuah control yang diinstansiasi dibuat, event ReadProperties memberikan Anda sebuah kesempatan untuk memperoleh property yang tersimpan di control dari file .frm yang terdiri dari instansiasi control tersebut.
Ketika instansiasi control saat design-time dihancurkan, event WriteProperties memberikan kepada Anda kesempatan untuk menyimpan nilai-nilai properties yang diset saat design-time oleh pengguna yang memakai control Anda. Nilai-nilai property ini disimpan di file .frm tempat control ini berada, seperti yang akan Anda lihat di bagian "Menyimpan Nilai Property ShapeLabel" di bagian selanjutnya pada tutorial ini.
Event Terminate terjadi ketika control dihancurkan.
Catatan: Secara default, pilihan "Compile On Demand" yang terpilih di tab "General" pada kotak dialog "Option" (yang dapat Anda akses dari menu "Tools"). Dengan menggunakan CTRL+F5 (atau Start dengan Full Compile, di menu Run) akan meng-override Compile On Demand, dan meng-compile secara penuh semua project di group sebelum memasuki mode-run. Hal ini sangat berguna karena kompilasi error biasanya membutuhkan pengaturan ulang project, yang mana berarti harus kembali lagi ke mode-design. Ketika Anda sedang men-debug control, Anda mungkin lebih memilih untuk mematikan pilihan "Compile On Demand" daripada mengingat untuk menggunakan CTRL+F5.
5.
Tutup Form1, untuk kembali ke mode-design project. Di jendela Immediate, Anda akan melihat sebuah event Terminate (tapi tidak WriteProperties, mengapa tidak ada?) saat instansiasi run-time dari ShapeLabel dihancurkan. Kemudian, Anda akan melihat Initialize, ReadProperties, dan event Resize, saat instansiasi design-time dari control tersebut dibuat.
Instansiasi control saat run-time tidak pernah memperoleh event WriteProperties, karena dia tidak membutuhkan nilai property-nya yang tersimpan. Untuk melihat mengapa tidak, pertimbangkan ShapeLabel untuk berikutnya. Ketika dia dikompilasi ke dalam sebuah file .ocx, Anda akan menambahkannya ke project lain, meletakkan sebuah instansiasi ke atas sebuah form, mengkompilasi project menjadi sebuah file .exe, dan menjalankannya. Ketika Anda menutup exe tadi, hanya tempat instansiasi ShapeLabel yang dapat menyimpan nilai properties-nya ke dalam file .exe. Urutan perilaku ini tidak ditoleransi oleh perilaku sistem operasi yang seharusnya.
6.
Scroll ke atas dari jendela Immediate, klik di bagian atas sudut kiri, dan drag untuk memilih semua text di jendela tersebut. Tekan tombol "Delete" di keyboard untuk menghapusnya dari jendela Immediate.
7.
Di jendela "Project Explorer", dobel klik "Form1" untuk membawa Form1 ke depan.
8.
Di Toolbox, dobel klik icon ShapeLabel untuk menambahkan instansiasi dari control ke Form1. Anda akan melihat sebuah event baru saat ini.
Ketika sebuah instansiasi dari control Anda ditempatkan pada sebuah kontainer (Form1), dia memperoleh sebuah event InitProperties. Di event procedure "UserControl_InitProperties", Anda dapat menempatkan coding untuk melakukan sebagai berikut:
* Menentukan nilai default untuk setiap nilai properties milik control.
* Membentuk tugas-tugas ketika seorang pengguna membuat instansiasi control Anda.
9.
Tutup designer Form1 dengan mengklik tombol Close di pojok kanan atas form tersebut atau dengan menekan tombol CTRL+F4 selagi designer ini berada di depan. Di jendela Immediate, Anda akan melihat dua kelompok dari event WriteProperties dan Terminate, masing-masing instansiasi dari ShapeLabel.
10.
Dari jendela "Project Explorer", dobel klik "Form1" untuk membuka designer-nya lagi. Ketika designer terbuka, semua controls di atas Form1 dibuat, dan event-event Initialize mereka dibangkitkan. Semua control kemudian menerima event ReadProperties, yang mengizinkan mereka untuk mengambil nilai property yang sudah tersimpan sebelumnya. Event InitProperties tidak terjadi, karena kedua instansiasi dari control ShapeLabel sudah ada.
Anda dapat menggunakan methode graphics, seperti Circle (bulatan) dan Line (garis), untuk menggambar control Anda, atau Anda dapat membuat tampilan control dengan menggunakan control ActiveX yang sudah ada dan control-control Visual Basic lainnya. Control-control yang Anda tambahkan ke UserControl untuk membuat tampilannya disebut dengan: constituent controls
Seperti namanya, Tampilan ShapeLabel dibuat dengan menggunakan sebuah control Shape dan sebuah control Label.
Untuk menambahkan constituent controls ke control ShapeLabel:
1.
Dari jendela "Project Explorer", dobel klik "ShapeLabel" untuk membuka designer-nya.
2.
Di Toolbox, dobel klik control Shape milik Visual Basic untuk menempatkan sebuah control Shape ke atas designer ShapeLabel. Jika Anda belum pernah memakai control Shape sebelumnya, lewatkan mouse Anda di atas tombol-tombol di Toolbox sampai Anda menemukan salah satu ToolTip berisi "Shape".
3.
Di jendela "Properties", set nilai-nilai property untuk control Shape tersebut:
Property Value
BorderStyle 0 - Transparent
FillColor &H000000FF (Red)
FillStyle 0 - Solid
Name shpBack
Shape 2 - Oval
4.
Di Toolbox, dobel klik control Label untuk menambahkan sebuah Label di bagian atas dari control Shape. Di jendela "Properties", set nilai property untuk control Label:
Property Value
Alignment 2 - Center
BackStyle 0 - Transparent
ForeColor &H00FFFFF (White)
Name lblCaption
5.
Gunakan penanganan drag untuk mengubah tinggi dari label sehingga lebih tinggi dari teks yang berada di dalamnya. ShapeLabel kira-kira kelihatan akan menjadi seperti ini:
Gambar Control ShapeLabel
6.
Dobel klik designer ShapeLabel untuk menampilkan jendela coding ke depan, dan masukkan coding berikut ke event procedure "UserControl_Resize":
Private Sub UserControl_Resize()
'Atur ukuran control Shape untuk memenuhi ukuran ShapeLabel
'Tampilkan area permukaannya.
shpBack.Move 0, 0, ScaleWidth, ScaleHeight
'Ketengahkan control Label secara vertikal, dan
'buat ukuran lebarnya sama dengan ukuran ShapeLabel.
lblCaption.Move 0, _
(ScaleHeight - lblCaption.Height) / 2, ScaleWidth
End Sub
7.
Ketika Anda sedang mendisain sebuah controluser, ingatlah bahwa area yang harus Anda kerjakan dengan mengacu pada batas ScaleWidth dan ScaleHeight dari control tersebut. Di luar batas ini tidak ada yang bisa ditampilkan ke pengguna control Anda. Lebih lanjut, ukuran dari luas client akan berubah pada saat pengguna mengubahnya. Event Resize adalah salah satu event yang paling penting dalam pendisainan controluser.
8.
Yakinkan bahwa designer ShapeLabel sedang berada di depan, lalu tekan CTRL+F4 untuk menutup jendela, dengan meletakkan control di mode-run. Di jendela "Project", dobel klik Form1 untuk membawanya ke bagian depan.
9.
Kedua control ShapeLabel seharusnya sekarang ditampilkan sebagai sesuatu berbentuk oval berwarna merah, dengan tulisan putih "Label1" berada di tengah-tengah. Atur ukuran ShapeLabel untuk mencoba efek dari coding di event Resize.
Anda dapat menambahkan properties dan methods kepada sebuah ActiveX Control dengan cara yang sama Anda menambahkan mereka ke dalam class modules: dengan membuat procedure yang bersifat Public. Sejak ShapeLabel akan menjadi sebuah control label yang lain dari yang lain, dia harus memiliki sebuah property Caption.
Procedure berikut menambahkan sebuah property bernama "Caption", dan mendukung coding untuk menyimpan dan mengambil nilai property. Sebuah nilai property disimpan bersamaan dengan data yang mendeskripsikan tempat control ini berada, dalam hal ini adalah: Form1.
Untuk menambahkan property Caption ke control ShapeLabel:
1.
Dari jendela "Project Explorer", dobel klik "ShapeLabel" untuk membuka designer-nya, lalu dobel klik lagi designer-nya untuk membuka jendela coding.
2.
Dari menu "Tools", klik "Add Procedure" untuk membuka kotak dialog. Di kotak "Name", masukkan nama "Caption". Klik atau pilih "Property" dan property "Public", lalu klik OK.
3.
Di jendela coding, ganti procedure pada property yang baru saja dibuat seperti tampak di bawah ini (ganti "vNewValue As Variant" menjadi: "NewCaption As String"):
Public Property Get Caption() As String
Caption = lblCaption.Caption
End Property
Public Property Let Caption(ByVal NewCaption As String)
lblCaption.Caption = NewCaption
PropertyChanged "Caption"
End Property
Catatan: Hati-hati mengganti kedua deklarasi property dengan menambahkan "As String", seperti yang ditampilkan di atas. Property "Get" dan Property "Let" haruslah saling cocok. Dengan menggunakan tipe yang lebih spesifik (menggunakan String lebih spesifik daripada jika menggunakan Variant), maka akan meningkatkan kecepatan dalam pengeksekusian, dan menyediakan pemeriksaan tipe nilai untuk pengguna yang memakai control Anda.
Procedure Property Let dieksekusi ketika sebuah nilai baru di-assign ke property Caption. Dia menyimpan nilai baru langsung ke property Caption dari control label yang bernama lblCaption pada control ShapeLabel.
Procedure Property Get dieksekusi ketika nilai property ini diambil. Dia membaca nilai yang disimpan di property Caption miliknya label lblCaption.
Procedure Property Let di control haruslah memanggil PropertyChanged, seperti yang akan dijelaskan di bagian "Adding Properties to Controls" dalam "Building ActiveX Controls". Hal ini menjelaskan jendela Properties untuk me-refresh tampilannya, dan menginformasikan ke Visual Basic bahwa form telah berubah.
Procedure Property dijelaskan lebih lanjut di bagian "Adding Properties to a Class" pada "Programming with Objects" di dalam "Visual Basic Programmer’s Guide". Silahkan cari di google.com.
4.
Untuk menginisialisasi property "Caption", tambahkan coding berikut ke dalam event procedure "UserControl_InitProperties":
Private Sub UserControl_InitProperties()
'Biarkan nilai awal untuk property Caption
'diberikan untuk instansiasi dari ShapeLabel.
Caption = Extender.Name
Debug.Print "InitProperties"
End Sub
Apakah ini object tambahan (Extender)? Untuk pengguna dari sebuah control, properties tambahan seperti Name, Top, dan Left kelihatan menjadi bagian dari control Anda. Walaupun properties ini benar-benar disediakan oleh tempat dari control tempat Anda diletakkan. Object tambahan dari UserControl memberikan Anda: designer control, akses ke properties ini langsung dari dalam control Anda.
Property "Name" yang bersifat read-only dari object tambahan mengembalikan nama dari container (atau pengguna) yang memberi sebuah instansiasi yang tertentu dari control Anda. Dengan menggunakan nama ini (sebagai contoh, namanya: ShapeLabel1) sebagai inisial nilai dari property Caption, menirukan perilaku dari control Label.
Apa yang akan terjadi jika Anda membuat sebuah property bernama "Name" di control Anda? Anda akan dapat mengaksesnya dari dalam control Anda, tapi hanya property Name yang pengguna control Anda lihat saja yang akan menjadi property Name dari object tambahan tersebut.
Hal ini memperkenalkan sebuah topik yang sudah ada untuk control: Container mendeteksi sebagian besar dari perilaku dan tampilan control. Dia adalah container yang mendeteksi property Name, Top, dan Left dari control Anda yang berhubungan kepada koordinate dari container itu sendiri. Topik ini dapat Anda lihat di "Building ActiveX Controls".
Satu hal lagi: Mengapa coding ini ditempatkan di dalam event InitProperties? Mengapa tidak menggunakan event Initialize? Seperti yang telah Anda lihat, Initialize dipanggil setiap kali control yang diinstansiasi dibuat, di mana hal ini akan sering sekali terjadi. InitProperties terjadi hanya ketika pengguna control Anda menempatkan control di atas container-nya. InitProperties membuat control ini tempat yang cocok untuk mengeset nilai awal untuk instansiasi sebuah control.
Sebagai tambahan, object-object tambahan milik UserControl dan object-object AmbientProperties belumlah tersedia ketika event Initialize terjadi. "Understanding Control Lifetime dan Key Events" di "Building ActiveX Control", menerangkan pemakaian yang tepat untuk event Initialize.
5.
Untuk menyimpan nilai dari property Caption, tambahkan coding berikut ke event procedure "UserControl_WriteProperties":
Private Sub UserControl_WriteProperties(PropBag As PropertyBag)
Debug.Print "WriteProperties"
PropBag.WriteProperty "Caption", Caption, Extender.Name
End Sub
PropertyBag adalah sesuatu yang diimplikasikan oleh namanya; sebuah "tas" (bag) tempat nilai-nilai property disimpan. "Tas" ini disediakan oleh container. Anda tidak dapat melihat ke dalamnya, dan Anda tidak mengetahui di mana atau bagaimana data tersebut disimpan. Yang hanya dapat Anda lakukan adalah meletakkan nilai-nilai di dalamnya dan mengambilnya kembali.
Argumen yang pertama dari method WriteProperty adalah nama dari property, yang akan digunakan sebagai kunci untuk keperluan pengambilan. Anda seharusnya menggunakan nama dari property untuk argumen ini, karena dia akan kelihatan di dalam file teks .frm (di Visual Basic, container lainnya mungkin menggunakan nama file lainnya untuk menyimpan data project), dan mungkin dapat dilihat oleh pengguna control tersebut.
Argumen kedua adalah nilai. Sebuah property yang disimpan bernilai Variant.
Argumen ketiga, cukup aneh, adalah nilai default. Mengapa menyediakan nilai default ketika menyimpan nilai property? Sebelum menyimpan nilai, method WriteProperty membandingkan nilai property dengan nilai default ini. Jika nilai mereka sama, nilai property tidak perlu disimpan, karena nilai default akan diset secara otomatis ketika control diload kembali. Hal ini menjaga file .frm dari "kekacauan" dengan ratusan nilai masukan default, sebuah hal yang bagus untuk membantu pengguna control Anda!
6.
Tempatkan coding berikut di dalam event ReadProperties, untuk mengambil nilai property yang tersimpan untuk property Caption:
Private Sub UserControl_ReadProperties(PropBag As PropertyBag)
Debug.Print "ReadProperties"
Caption = PropBag.ReadProperty("Caption", Extender.Name)
End Sub
Argumen kedua dari method ReadProperty adalah sebuah nilai default yang digunakan jika tidak ada nilai yang disimpan, jika pengguna telah menghapus property dari file teks .frm, atau jika nilai telah diganti dari nilai default, dan oleh karena itu tidak pernah disimpan dengan menggunakan methode WriteProperty.
7.
Yakinkan bahwa designer ShapeLabel berada di bagian depan, klik tombol Close atau tekan CTRL+F4 untuk menutup jendela, control diposisikan ke dalam mode-run. Seperti sulap, caption dari control ShapeLabel berubah ke nama default dari dua instansiasi, ShapeLabel1 dan ShapeLabel2.
Gunakan jendela "Properties" untuk mengubah property Caption dari control ShapeLabel yang kedua di Form1, lalu klik tombol Close di designer Form1. Di jendela Project Explorer, dobel klik Form1 untuk membuka kembali designer Form1.
Dari pesan yang muncul di jendela Immediate, Anda dapat melihat bahwa control-control telah dihancurkan dan dibuat ulang kembali, tapi nilai dari property Caption telah disimpan dan diambil.
8.
Tekan CTRL+F5 untuk menjalankan TestCtlDemo, project Startup dari project group, dan mencoba perilaku saat run-time dari control ShapeLabel.
9.
Klik tombol close di Form1 untuk kembali ke mode-design.
Properties sederhana baru saja Anda buat dengan menggunakan procedure property yang akan ditampilkan otomatis di jendela Properties Visual Basic. Anda juga dapat menghubungkan control Anda ke halaman property (property pages), yang akan menampilkan properties control dalam sebuah alternatif format lainnya.
Setiap halaman property Anda terhubung ke control Anda menjadi satu tab pada kotak dialog Tabbed Properties. Visual Basic menangani semua detail dari halaman yang ditampilkan sebagai sebuah tabbed dialog, dan mengatur tombol OK, Cancel, dan Apply. Yang perlu Anda lakukan hanya mengatur tata-letak dari nilai property yang akan ditampilkan di halaman property ini.
Halaman-halaman property berguna ketika sebuah kelompok property berinteraksi dalam sebuah tempat yang kompleks, seperti dengan control Toolbar yang terdapat di Visual Basic. Mereka juga berguna untuk control-control yang akan didistribusikan secara Internasional, karena caption-nya dapat diatur untuk bahasa yang berbeda-beda. Halaman-halaman property ini juga mengizinkan control Anda untuk digunakan oleh tools pengembangan yang tidak mempunyai jendela "Property".
Untuk menambahkan sebuah halaman property (property page) ke project:
1.
Di jendela "Project Explorer", klik "ControlDemo" untuk memilih project control. Dari menu "Project", klik "Add Property Page" untuk membuka kotak dialog "PropertyPage". Dobel klik icon "Property Page" untuk menambahkan sebuah halaman property ke project.
2.
Di jendela Properties, dobel klik property "Name", dan ganti nama dari halaman property menjadi "SLGeneral". Dobel klik property "Caption", dan ganti captionnya menjadi: "General". Caption yang akan kelihatan adalah caption di tab halaman property ketika dia sedang digunakan (aktif). Mengapa nama SLGeneral digantikan oleh General? Anda boleh memiliki beberapa control di dalam sebuah project, dan setiap control boleh memiliki sebuah halaman General. Ini adalah halaman General untuk control ShapeLabel.
3.
Dari menu "File", klik "Save Project Group" untuk menyimpan project group. Namakan property yang bertalian seperti yang ditampilkan pada tabel berikut. Visual Basic akan menambahkan ekstensi untuk setiap file yang bertalian secara otomatis.
File Nama File Ekstensi
Property page ControlDemo_SLGeneral .pag
Informasi binary di dalam sebuah halaman property - seperti bitmaps - akan disimpan di dalam sebuah file binary dengan nama yang sama dan memiliki ekstensi .pgx.
Designer untuk sebuah halaman property nampaknya kelihatan seperti designer untuk sebuah control, kecuali bahwa caption bar dari designer menampilkan property "Caption" dari halaman property, menggantikan property "Name".
Untuk mendisain halaman property General control ShapeLabel:
1.
Tempatkan sebuah control Label di atas halaman property, dan ganti property "Caption" label menjadi kata Caption.
2.
Di bawah label, tempatkan sebuah control TextBox, dan masukkan nilai property:
Property Value
Name txtCaption
Text (empty)
Dengan menempatkan deskripsi property label di atas textbox dalam bagian ini akan membuat lebih mudah untuk membuat control Anda untuk berbagai bahasa, di mana kata "Caption" mungkin lebih panjang atau lebih pendek.
3.
Dobel klik halaman property, untuk membuka jendela coding. Di dalam combobox "Events" pilih event bernama "SelectionChanged", dan tambahkan coding berikut:
Private Sub PropertyPage_SelectionChanged()
'Tampilkan caption control pertama di daftar
'dari control-control yang sudah ada.
txtCaption.Text = SelectedControls(0).Caption
'Agar saat muncul, tombol Apply mula-mula tidak aktif.
Changed = False
End Sub
Kegunaan dari event ini adalah untuk mendapatkan property yang sudah ada dari control ShapeLabel atau control-control yang sudah terpilih. Hal ini benar, mungkin ada lebih dari satu control ShapeLabel yang terpilih. Pemilihan secara banyak adalah suatu hal yang penting untuk pengguna dari control Anda, tapi ini artinya sangat banyak berarti bagi pekerjaan Anda.
Sebuah halaman property menerima event "SelectionChanged" ketika dia dibuka. Dia juga menerima event ini ketika daftar dari control-control yang terpilih mengalami perubahan. Hal ini perlu karena kotak dialog "Property Pages" bersifat "modeless", jadi, seorang pengguna mungkin memilih untuk menambahkan control lagi ketika kotak dialog ini sedang terbuka.
Anda telah memutuskan bagaimana menangani pemilihan secara banyak dalam sebuah "basis property oleh property". Sebagai contoh, jika halaman property Anda menampilkan property "Width" dari control pertama di koleksi "SelectedControls" yaitu: SelectedControls(0), seperti ditunjukkan di dalam coding di atas, hal ini akan lebih mudah bagi pengguna untuk mengganti lebar dari semua control yang terpilih kepada nilai tersebut.
Di sisi lain, ada sedikit penggunaan setting caption dari semua control ShapeLabel yang berada di atas sebuah form untuk nilai yang sama, jadi logika untuk melakukan dengan property Caption adalah menonaktifkan txtCaption jika property "Count" dari koleksi SelectedControls lebih besar dari satu.
Biar bagaimanapun, procedure ini tidak melakukan hal tersebut. Sebagai ilustrasi, halaman property akan diizinkan untuk menentukan caption secara bersamaan. Berikutnya, jika Anda ingin mengaktifkan perilaku yang dijelaskan di atas, Anda dapat menambahkan coding berikut ini ke dalam event procedure yang bernama "PropertyPage_SelectionChanged":
'Tolong jangan lakukan ini sebelumnya!
If SelectedControls.Count > 1 Then
txtCaption.Enabled = False
Else
txtCaption.Enabled = True
End If
4.
Untuk menentukan nilai property untuk semua control-control yang sedang terpilih, tambahkan coding berikut ini ke dalam event "ApplyChanges":
Private Sub PropertyPage_ApplyChanges()
'Gunakan sebuah variabel Object umum, dalam hal
'lebih dari satu control yang dipilih.
Dim objControl As Variant
For Each objControl In SelectedControls
objControl.Caption = txtCaption.Text
Next
End Sub
Halaman property Anda menerima event ApplyChanges ketika pengguna mengklik tombol Apply atau OK pada kotak dialog Property Pages, atau jika berpindah ke tab lainnya.
Bagaimana Anda tahu bahwa setiap control di dalam SelectedControls mempunyai sebuah property Caption? Sebagai designer dari component control, Anda menentukan halaman property yang mana yang terhubung ke setiap control. Sebuah halaman property hanya akan kelihatan jika semua control yang terpilih mempunyai halaman tersebut di dalam daftar Property Pages mereka. Hal termudah untuk melakukan ini adalah dengan meyakinkan bahwa halaman-halaman di-assign ke setiap control yang tidak menampilkan properties yang tidak dimiliki control.
Jika Anda berharap untuk menggunakan sebuah halaman property dengan manfaat yang umum untuk sejumlah control, dan beberapa dari control-control tersebut tidak memiliki semua properties yang ditampilkan di halaman property, Anda dapat menambahkan coding ke event ApplyChanges untuk mencoba tipe dari control, dan tambahkan nilai property yang pantas. Sebagai alternatif, Anda dapat menggunakan sebuah statement On Error untuk mengatasi dan mengabaikan error-error dari control yang tidak memiliki property.
Anda hanya perlu memusatkan pada control-control di component Anda, karena control- control yang tidak merupakan bagian dari component Anda tidak akan pernah menggunakan halaman property component Anda tersebut.
5.
Untuk mengaktifkan tombol Apply dari kotak dialog Property Page ketika property Caption mengalami perubahan, tambahkan coding berikut ke event Change dari control txtCaption:
Private Sub txtCaption_Change()
Changed = True
End Sub
6.
Dalam jendela "Project", dobel klik "SLGeneral" untuk menampilkan halaman designer ke depan. Klik tombol close atau tekan CTRL+F4 untuk menutup designer dan menempatkan halaman tersebut ke mode-run. Seperti object-object UserControl, object PropertyPage harus dijalankan sementara sisa dari project group berada dalam keadaan mode-design.
4. Untuk menghubungkan halaman property ke control ShapeLabel:
Dari jendela "Project Explorer", dobel klik "ShapeLabel" untuk membuka designer.
5.
Dari jendela Properties, dobel klik property "PropertyPages" untuk menampilkan kotak dialog berjudul "Connect Property Pages".
Kotak dialog "Connect Property Pages" dapat digunakan untuk menghubungkan banyak halaman ke sebuah usercontrol, dan untuk menentukan urutan tampilan tab di kotak dialog Property Pages control Anda. Property pages juga dapat dihubungkan saat run-time.
6.
Ceklist atau tandai "SLGeneral", lalu klik tombol OK.
7.
Bawa designer ShapeLabel ke depan, lalu klik tombol Close atau tekan CTRL+F4 untuk menempatkan control ShapeLabel ke dalam mode-run.
8.
Dari jendela "Project Explorer", dobel klik Form1 untuk membawa designer-nya ke depan.
9.
Klik kanan di salah satu control ShapeLabel yang ada di Form1, untuk menampilkan menu pop-up, lalu klik "Properties" untuk menampilkan kotak dialog "Property Pages".
10.
Di dalam textbox Caption yang ada di tab General, ganti nilai caption yang ada dengan sebuah nilai yang baru. Ketika Anda melakukan hal ini, tombol Apply menjadi aktif. Klik tombol Apply untuk mengganti caption dari control tersebut. Catatan: Anda juga dapat mengganti caption tersebut dengan mengklik tombol OK, tapi hal ini akan langsung menutup kotak dialog Property Pages. Kotak dialog seharusnya terbuka untuk langkah selanjutnya di bawah ini.
11.
Tahan tombol CTRL di keyboard Anda, lalu klik control ShapeLabel yang kedua di Form1, sehingga ada dua control ShapeLabel yang terpilih sekarang. Ganti caption dan klik tombol Apply untuk mengganti kedua caption menjadi nilai yang sama.
Anda boleh saja menambahkan control lainnya, misalnya Commandbutton, ke atas Form1, lalu amati efek dari perbedaan pemilihan banyak pada kotak dialog Property Pages.
0 comments:
Post a Comment