A-Soft Technologies
the future at your fingertips
Howto ActiveX Controls  
  News ASoft.Net Products Free Software Free Information Support  

Free Information
Howto ActiveX Controls
VB Tips and Tricks
Links

What you need:

bulletVisual Basic 5 CCE (free), Learning, Professional or Enterprise Edition
bulletabout 15 to 30 minutes time
bulletGeneral knowledge of how Win95 and Win95 programs work.
bulletIE 3.01 (free) or higher (only if you want to use the control on a Webpage)
bulletActiveX Control Pad (free) (only if you want to use the control on a Webpage)

What you don't need:

bulletKnowledge of how to program in Visual Basic

What we are doing:

We are creating a simple ActiveX Control which is a button with a custom caption that displays a custom message box when clicked. Attention: In Webpages this could be done much easier using Scripting languages, but the sense is to learn how to write an ActiveX Control and not how to accomplish this task most efficient.

Let's begin programming my first ActiveX Control

Starting VB

All graphics displayed here (and the example itself) were done with VB 5.0 Professional. If you just have VB 5.0 CCE or learning edition graphics and options may vary on your system, but none of the steps made to make the control requires any of these additional features.

At first we start Visual Basic and choose ActiveX Control on the 'New' tab in the 'New Project' Window. After that we should see a blank UserControl - Window as seen in the picture to the right.  Blank Usercontrol

For people not familiar with the VB IDE design environment I will describe the elements here in short:

To the left there is the component Toolbox. By clicking on a control we select it and by then clicking on our component workspace in the middle of the screen and dragging the mouse to how big the control should be we place it onto our window/control. To the lower right we find the property box where we could change anything from a control already placed on our workspace. To the upper right there is the Project box where we could see what files are there in our project and select the file we just want to work on. In the center there is the workspace and on the top we find a toolbar and the menu. (Attention: Layout may vary, because it is completely reconfigureable), but now back to our control.

Project and properties box before change Now we'll first name the parts of your project.
Our Control should be named MessageBut, so we change the Name property in the properties box to MessageBox. Then we click on the Project1 in the Project Box and again change the name in the properties box, but now to MyFirstControl. After we have done this the Project Box should look something like the one shown below.Project box after change 

 

 

 

Command Button Next we need a button control on your user control.
The button control is found in the Toolbox to the left and there is the right control in the third row. Button on Usercontrol We click on it. Then we click on the top-leftmost corner of our usercontrol and drag the mouse to an appropriate size (The exact size is not important because we change it later nevertheless).
Then we select the button by single-clicking on it (it should already be selected, but just to be sure). Now we have to change the properties of the button. First we name it MainBut instead of Command1 (Remember? - change the name property in the properties box from Command1 to MainBut) and of course we don't want 'Command1' written onto our button, so we change the Caption property in the properties box to 'Click Me'. Now we double-click onto our button to open the code-window. Because Click is the standard sub of the Commandbutton, we start in the MainBut_Click sub. that means here is the code for what happens if we click on MainBut (our button) - right now nothing happens here, but we wanted to show a messagebox when the user clicks on the button. Code Window There is a function in VB which does exactly that - display a messagebox. The function is: MsgBox(prompt[, buttons] [, title] [, helpfile, context]) (don't be shocked right now - we don't need the whole function. We just write in the line between private sub and end sub:

MsgBox "Hello world",,"Message" 

This means we use the MsgBox function, We want the computer to prompt "Hello world", we don't use any special buttons (just using a ',' means we use the standard) and the title of the MessageBox should be 'Message'.

Now our basic control is ready and we could test it.
Because an our project is a control and ActiveX Controls can't run on their own, we need something to put it in, a container. Such a container could be Internet Explorer 3.01+ or a VB executable file. Add Project
For testing we use a VB executable (Attention: In VB 5.0 CCE you are not able to compile executables, just let them run within the design environment - but actually we don't need to compile the project here anyway). To use an Executable we choose File/Add Project... from the VB menu. And in the opening selection box we select 'Standard Exe'. Now set the New 'Project1' to 'TestControl' (Remember? - You could select it in the Project box and change the name-property in the properties box) and set the name of the 'Form1' to 'TestForm'.
We now just have to put our control onto the TestForm (That's the new window that opened with the new project in the middle), but therefore we first have to close the design window of our control (Should be named: MyFirstControl - MessageBut (UserControl)). After that we click on the TestForm window in the middle and see that there is a new control in the toolbox to the left. My Control If you stay a little while with the mouse above this icon you could read that this is the MessageBut Control. Control on Form You now put the MessageBut control onto the TestForm just as you put the Commandbutton on our Usercontrol (you don't have to put it to the leftmost, topmost corner but could put it anywhere).
Now is a good time to save our project. Therefore click onto the disk icon in the toolbar at the top, then choose a directory for your project (you should make an own because it consists of multiple files). You should take the names VB provides for you except 'Group1.vbg' which we name 'MyWholeProject.vbg'. Running Programm
Now it's time to start our program. This could be done by clicking on the play button in the toolbar or choosing Run/Start and we could test our self-made ActiveX Control (To end the program click the stop button in the toolbar - Attention: you couldn't do that with an opened MessageBox, so close it first).



 

Enhancing the ActiveX Control

The first thing we want to improve is the sizing of the button.
As you can try you, right now don't have the possibility to change the size of the button on the TestForm. Open Code WindowThis is the case because you only manipulate the Usercontrol and not the button placed on it. So we have to resize the button every time the usercontrol gets resized.  Therefore we open the Code Window of MessageBut (if it isn't still open). You can open a code window by choosing the objects entry in the project window and then clicking on the View Code Button at the top of the project window. Code Window In the code window we choose Usercontrol in the left selection box and Resize in the right one. This is the sub called if the UserControl gets resized. Here we do just set the MainBut's height and width to the height and width of the usercontrol using the following code (Type it yourself and don't copy it to see the quickinfo of VB):

MainBut.Width = UserControl.Width 
MainBut.Height = UserControl.Height 

Resized Control Then try to resize our control on the TestForm form or delete the old one and re-put it onto the form. The button will now always be as big as the whole usercontrol and it looks like if this was just an ordinary Command Button. Now we want to give the user the possibility to change the caption of the button and the Text in the messagebox (As you can see the MessageBut on our TestForm has no such properties). To include such properties we use an Add-Ins menu Add-In from the Add-Ins menu named ActiveX Control interface wizard (if there is no such entry in your Add-Ins menu choose Add-In manager from the same menu and check the appropriate checkbox). At the SelectMembers step we unselect all preset members and then just select the Caption property. After that we go on to the next page. There we make one new custom member. It should be a property named MsgBoxText. On the next page we, then could set the mapping. We select the Caption property and map it to MainBut control and it's caption member (VB does any work needed for further mapping itself now). One page further we now have to set the settings for the MsgBoxText property. The property should be a string, so we select data type: String, the default value we set to hello world. After that we could finish the wizard. After closing the wizards summary we can see that the wizard made lots of additions to our MessageBut Code (Stay clam you don't have to know what the wizard added there). Now we have to make a little change to our code. Look for the MainBut_Click() sub we did write previously. There you have to change the line of code we wrote to:

MsgBox MsgBoxText, , "Message" 

This means that we now use the MsgBoxText Variable in order to display the prompt text. We should now again save our project. Running Control Then we start our project (Start button or Run/Start). It still works - but nothing changed. We stop execution and switch to out TestForm window. After selecting our control by clicking on it we look at the properties box. There is now a caption property and a MsgBoxProperty. We change the caption to 'Click here' and the button caption is instantly changed to 'Click here', too. Now we set the MsgBoxText property to 'Welcome world' and after starting the program again it really displays 'Welcome World' after clicking onto the button.

 

 

Using the ActiveX Control in IE 3.01+

To use the Control in a Webbrowser we at first have to compile our project.
To do this we select some part of the MyFirstControl Project (the MyFirstControl entry itself or the MessageBut control) and then choose 'Make MyFirstControl.ocx...' from the File menu. You could accept the filename provided by VB or set a new one.
With the Options button you can open a window where you can set information about your control like copyright and version information. Then you choose OK and wait for VB compiling your project.
Then we could close Visual Basic. Perhaps you are asked to save some files - do so. Setup Wizard

Now we have to make a Browser-enabled version of the control (theoretically it would already work with the .OCX we just have made, but there could be some problems).
So we start the Application Setup Wizard which is provided with VB. We skip the first page and then on the second one browse to MyFirstControl.vbp and choose Internet Download Setup. 
On the next page we can choose where to save the files made by the setup wizard, choose as you like.New Directory
In the next step we click on the safety button and check both checkboxes, because our control can't harm any computer.
We could skip all the following pages (choose yes or no to the property page DLL question - it makes no difference for us) and on the last page you may save your setup settings and then finish.
After that you find two files in the new directory: a .htm and a .cab file. The Cab file contains the Control and setup information for the browser (and it's already compressed). Now we need some html editor that can use ActiveX Control. I prefer ActiveX Control Pad, but in the worst case even a Text editor will do.
ActiveX Control Pad Open the MyFirstControl.htm with the editor and copy the object tag with the MessageBut ID. You then put the object tag to the position you want to have it in your HTML file (or simply a new one) and click on the cube to the left to edit it (if you use another tool as ActiveX Control Pad you have to find out the way to edit the control yourself). Although it looks a little different, the system to set the properties or change the size is the same as in VB. After setting the properties (You have to close the edit windows in ActiveX Control Pad with the little X to the right top) you can save your .htm file and view it with IE.

That's it - I hope you liked my first programming course in Visual Basic. If you have comments or proposals for improvements please send me an EMail.