|
|||||||
|
|
|
|||||
|
|
|||||||
All graphics displayed here (and the example itself) were done with VB 5.0 Professional. If you 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.
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 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 draging 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 there are in our project
and select the file we 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 MessageBut.
Then we click on 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 control. 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 alreday 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 properies
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 this 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 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 'TestForm'. We now just have to put our control onto the TestForm
(Thats 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 on the disk icon in the toolbar at the top, then
choose a directory for your project (you should make a new one because
it consists of multiple files). You should take the names VB provides for
you execpt 'Group1.vbg' which we name 'MyWholeProject.vbg'. 
Now it's time to start our programm. This could be done by clicking on
the run button in the toolbar or choosing Run/Start and we can test our
self-made ActiveX Control (To end the programm click the stop button in
the toolbar - Attention: you couldn't do that with an opened MessageBox,
so close it first).
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. 
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 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 posibility 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-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 apropriate 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 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 can 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 ). Now we have to make a little change to our code. Look
for the MainBut_Click() sub where we wrote the code 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.
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 programm again it displays 'Welcome World' after
clicking onto the button.
On the next page we can choose where to save the files made by the setup
wizard, choose as you like. 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: an .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 an 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 simly a new one) and click on the cube to
the left to edit it (if you use another tool than 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.