Introduction
Many times, you may need to use a powerful COM-based control in your web application that might need to be modified at a later date. In some cases, it is sufficient to simply reference the .ocx file (<OBJECT CODEBASE="myActiveXcontrol.ocx" />). However, this method will not work if the code for the control needs to be modified and reinstalled on the user's machine.
Instead, a better method will utilize Visual Studio's Package and Deployment Wizard to create a CAB file that serves as a direct installation (or reinstallation) of the .ocx which can be referenced in the <object> tag.
Step 1: Create the Control in Visual Basic
As an example, we will first create a simple control in VB 6.0.
Open MS Visual Basic, and choose "ActiveX" control:
I then placed two components on my control- a Command button, called cmdTest, and a text box, called txtTest:
(This a very simple example, just to show how a web client script interacts with an embedded ActiveX control).
Next, we will write some code to test our functionality. Our goal is to pass a value to the text box from our web page, then use the command button to display that text in a message box. We will need the code for the _click() and a Public function to populate the textbox (we need it public so that it can be accessed outside of the scope of the VB control, i.e., the web page code). I use the function setText() to accomplish this:
Public Function setText(txt As String)
txtTest.Text = txt
End FunctionPrivate Sub cmdTest_Click()
MsgBox txtTest.Text
End Sub
Step 2: Package the Project
Next, we will need to save, make, and package our project. My project is called vbActiveX, and my control is called ctlVBAX. Click on Tools-->Package and Deployment Wizard. Click Package at the main screen. (It may ask you to re-compile and/or save your project. Just click Yes.)
Follow the screen shots as so:
Your package should exist now in /Package within your project folder.
Step 3: Write the web page code
Our last step involves adding the client side script on our web page, as well as some HTML to interact with the embedded ActiveX control.
I simply created a dropdown called "drpValues", and gave the options "value1"-"vaue5". Our goal is to populate the textbox on the AX control (txtTest) with the value selected from the dropdown. We will need to add a JavaScript function to accomplish this:
<select id="drpValues" onclick="send_value(this)">
<option value=""></option>
<option value="value1">value1</option>
<option value="value2">value2</option>
<option value="value3">value3</option>
<option value="value4">value4</option>
<option value="value5">value5</option>
</select>
<--this goes into the <head></head> section-->
<script>
function send_value(obj){
document.all('ctlVBAX').setText(obj.options[obj.selectedIndex].value);
}
</script>
Notice the <object> tag, and what it holds:
<OBJECT ID="ctlVBAX"
CLASSID="CLSID:748FEF73-28D1-4889-A582-E5F8F526CDD1"
CODEBASE="vbActiveX.CAB#version=1,0,0,0">
</OBJECT>
As you can see, the object ID is ctlVBAX, and this is what we refer to when using in our script. Also notice that the CODEBASE portion includes the .CAB file, not the .ocx, so the system looks to the version of the CAB to initialize the ActiveX control. If it is a newer version, it will update the control, almost like a re-installation.
Test the page by opening up vbActiveX.HTM inside the /Package folder.
To test the updating, change a few things in the ActiveX control code, and re-make the project (File->Make). Then, copy the new .ocx from your main project folder into the /support directory, and use the batch file there to re-make the CAB file in /Package. Finally, copy that CAB file back into your project folder, and re-open the web page. You should notice that the changes have taken.
