What you need:
|Visual Basic 5 CCE (free), Learning, Professional or Enterprise Edition
|about 15 to 30 minutes time |
|General knowledge of how Win95 and Win95 programs work. |
|IE 3.01 (free) or higher (only if you want to use the control on a Webpage)
|ActiveX Control Pad (free) (only if you want to use the control on a Webpage)
What you don't need:
|Knowledge 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
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
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.
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.
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.
Next we need a button control on your user
The button control is found in the Toolbox to the left and there is the right control in
the third row.
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.
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.
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
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.
If you stay a little while
with the mouse above this icon you could read that this is the MessageBut Control.
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'.
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.
This 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
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
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
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
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.
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
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.
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
On the next page we can choose where to save the files made by the setup wizard, choose as
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
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.
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.