Membuat ActiveX Usercontrol dengan Visual Basic 6.0 (berjalan di Windows dan Web)

Visual Basic 6.0 disertai dengan control-control bawaan seperti textbox, commandButton, Label dan lain-lain yang diletakkan di Form.

Kita juga bisa membuat kontrol buatan kita sendiri dengan UserControl.
Mengapa harus membuat usercontrol sendiri?

Ada berbagai alasan mengapa kita harus membuat usercontrol sendiri antara lain mungkin kita ingin membuat sebuah objek control yang sesuai dengan keinginan kita diluar hal-hal yang bisa disediakan oleh bawaan visual basic.

Saya pernah membuat Project Windows dan WEB dengan sebuah UserControl yang dapat dijalankan di Windows Form maupun WEB dengan Visual Basic 6.0.

Dengan alasan membuat User Interface lebih mudah, lebih cepat dan lebih mudah dikendalikan dengan Visual Basic 6.0 daripada membuatnya dengan kode HTML.
Dengan kode HTML  kita harus mengendalikan evant-evant dan DOM (Dokument Object Model) HTML dengan JavaScript.

Daripada membuat User Interface dengan HTML dan Javascript lebih baik
Project-project VB6 yang sudah lama ada dan berjalan dengan baik dibuat menjadi UserControl yang dapat berjalan di WEB maupun Windows tinggal dikonversi kodenya sedikit.

Satu hal yang mendasar dari UserControl adalah UserControl tidak dapat berdiri sendiri seperti Windows Form. Usercontrol harus mempunyai wadah (container) untuk dapat dijalankan. Wadahnya bisa berupa Form ataupun Browser.

Lihat gambar di bawah ini:



Saya sengaja membedakan warna UserControl dan Warna Form (sebagai container) agar kelihatan.

Pusat interaksi user dengan program yang kita buat terletak pada UserControl. data dari textbox dan event tombol yang ada di UserControl tidak dapat keluar sebelum kita memberikan jalur komunikasinya ke Container (Form atau Webbrowser).

Sampai di sini mungkin anda masih bertanya-tanya apa sih? OK. tidak apa-apa nanti juga bakal ngerti.

Kita mulai saja dengan membuat project Windows yang mendemonstrasikan UserControl.

Buka Project Baru Standard.EXE

Lalu klik project - Add User Control

Lihat gambar di bawah ini:



Setelah anda klik Add New Control maka akan terlihat seperti gambar di bawah ini:



Klik tombol open lalu tambahkan textbox, label dan command button atur propertynya sedemikian rupa hingga hingga UserControl jadi seperti gambar di bawah ini:



Di project kita sekarang ada Form dan UserControl yang bernama ctl
Lihat gambar di bawah ini:



anda sudah lihat gambar di atas user control sekarang sudah berada di toolbox seperti contol-control visual basic biasa. Namun dalam keadaan tidak aktif.

Untuk mengaktifkannya anda harus menutup window Project1 - ctl (UserControl).

Jika anda melakukannya dengan benar maka ctl yang kita buat aktif di toolbox. Anda bisa menariknya ke Form.

Untuk membedakan warna form dan usercontrol aturlah property backcolor dari form menjadi warna putih. (Lihat gambar paling atas pada artikel ini)

Di bawah ini adalah kode yang dibuat pada UserControl:

Public Event onClose()
Public Event onSave()

Private m_sNIS As String
Private m_sNama As String

Private Sub cmdClose_Click()
  RaiseEvent onClose
End Sub

Private Sub cmdSave_Click()
  Me.NIS = txtNIS.Text
  Me.Nama = txtNama.Text

  RaiseEvent onSave
End Sub

Public Property Get NIS() As String
  NIS = m_sNIS
End Property

Public Property Let NIS(ByVal sNewNIS As String)
   m_sNIS = sNewNIS
End Property

Public Property Get Nama() As String
  Nama = m_sNama
End Property

Public Property Let Nama(ByVal sNewNama As String)
   m_sNama = sNewNama
End Property


Berikut adalah kode yang kita berikan pada Form1:

Private Sub ctl1_onClose()
  Unload Me
End Sub

Private Sub ctl1_onSave()
  MsgBox "NIS: " & ctl1.NIS & " Nama: " & ctl1.Nama

End Sub


Bagaimana hasilnya jika program di jalankan? Tekan tombol Run atau F5. Lalu isi NIS = 007 dan Nama = James Bond

Lihat gambar di bawah ini hasilnya:



Bagaimana membuat UserControl Ini agar dapat berjalan di WebBrowser?

Copy kan ctl.ctl ke folder baru mis: d:\project web

Buat project baru - pilih ActiveX Control. Lihat gambar di bawah ini:



klik tombol open, lalu klik Project - Add User Control - pilih tab existing lalu cari tempat dimana ctl.ctl file berada. Lihat gambar di bawah ini:



klik tombol open lalu hapus UserControl1 dengan cara klik kanan UserControl1 - Remove UserControl1. Simpan project nya.

Anda harus membuat paket Internet melalui Package & Develpoment Wizard bawaah vb6. Lihat gambar di bawah ini:



lalu pilih project yang anda paket lihat gambar di bawah ini:



Tekan tombol Package lalu pilih Internet Package. Lihat gambar di bawah ini:



Setelah anda selesai membuat paket Internet maka User Control sekarang bisa berjalan di WEB Browser. Kode di bawah ini adalah kode objek yang dibuat otomatis oleh Internet Package:

<object id="ctl" classid="CLSID:9EA7EA8F-8E1F-4D43-A982-6C54B04FC38F" codebase="Project1.CAB#version=1,0,0,0" style="left: 0px; top: 0px" viewastext="">
><param name="_ExtentX" value="8467">
<param name="_ExtentY" value="6033">
</object>


Kode selengkapnya adalah seperti di bawah ini:

<HTML>
<HEAD>
  <TITLE></TITLE>

<SCRIPT LANGUAGE=javascript>

function ctl_onClose() {
  alert('close....');
}

function ctl_onSave() {
  var s;
  s='No. Induk: ' + ctl.NIS + 'Nama: ' + ctl.Nama;
  alert(s);
}

</SCRIPT>

<SCRIPT LANGUAGE=javascript FOR=ctl EVENT=onClose>  
  ctl_onClose()
</SCRIPT>

<SCRIPT LANGUAGE=javascript FOR=ctl EVENT=onSave>
  ctl_onSave()
</SCRIPT>
</HEAD>
<BODY>
<OBJECT id=ctl style="LEFT: 0px; TOP: 0px" codeBase=Project1.CAB#version=1,0,0,0 classid=CLSID:9EA7EA8F-8E1F-4D43-A982-6C54B04FC38F VIEWASTEXT> <PARAM NAME="_ExtentX" VALUE="8467"> <PARAM NAME="_ExtentY" VALUE="6033"></OBJECT>
</BODY>
</HTML>

Siimpan kode tersebut dengan nama 'UserControlWEB.htm'
lalu buka dengan Internet Explorer. Jika berjalan dengan benar maka akan terlihat seperti gambar di bawah ini:



Selamat UserControl anda sudah berjalan di Windows maupun Web.

0 komentar:

Poskan Komentar

Starcraft Pointer
 
Web Design by : Givo-Alfajri ..!! ®