Scripting ActiveX Controls

Besides the fact that ActiveX controls provide for extra functionality in a web page, another nice feature is that they can be scripted, which allows even more interesting things to happen.

How does this work ?

Well, scripting controls is really not that difficult if you have the right tool to find out what properties and methods a control exposes. Luckily, Microsoft makes a tool for this available which is called ActiveX Control Pad (or Cpad). Cpad combines a simple text editor, an object browser and a scripting wizard to help you quickly publish an ActiveX powered Web Page.

It's operation is quite simple - you start with a new or existing HTML page, which you can edit to add or modify HTML codes. Nothing fancy here. The cool stuff starts when you use Cpad to insert ActiveX controls. Cpad opens a little window which lists the controls available on your computer (see insax.gif). After selecting the control you want to use (a textbox is used in this example), Cpad opens a window to let you size the control and another one to set its properties (see edax.gif). When you're done, it inserts code (like the one below) to include the control in your HTML page.

You can now save and load the page in Internet Explorer (sorry - Still no ActiveX support in Netscape) and see the textbox control in action. Well, that's not too exciting - but that's were scripting comes in.

Let's add the 'HotSpot' control, which you can use to react to the mouse pointer position, and then use scripting to display the pointer's X,Y values inside the textbox. Just for fun, you can change the background colour of the browser when entering or exiting the HotSpot control.

To accomplish this, find and insert the HotSpot control with Cpad, and then start the Script wizard. The Script Wizard window has three panes (see swiz.gif)

The left pane is used to display the controls you inserted in the HTML page and their methods. The right pane lists the controls and their properties, as well as additional procedures and variables you can define. The bottom pane is used to show and enter code. It you've worked with VB, this all should be pretty familiar.

Now all you have to do is select the HotSpot control in the left pane, and then click on its 'MouseMove' method to show the code for this method. You can then go to the right pane, select the TextBox control and click its text property to insert the code 'TextBox1.Text =' in the code pane. Now you only have to type "x = "&X &" y = "&Y to complete that piece of code.

In much the same fashion you can select the MouseEnter and MouseExit methods of the HotSpot control and then select the window.document.bgColor property in the right pane. Add a color you like to the code to make it look like : window.document.bgColor = "#000000" (black).

Now when you exit the Script wizard, it will insert VBScript code in your HTML page which should look like this :

Save and load the page into IE and watch scripting in action !

When you've come to your senses after all the exitment from playing with the page you just created, you might start to wish that you could also script the position of a control. Imagine the possibilities of that .. (in one word : games !)

To be able to do this, you'll need the HTML layout control which comes with IE and which you can also use from within Cpad. The layout control is an ActiveX control itself and acts as a container for other ActiveX controls, the added benefit being that it allows for exact placement of the controls contained in it.

Let's start exploiting this feature in the next example, which could be used as the foundation for a very simple game.

In this example, a timer control is used to provide for the possibility to let something happen at regular intervals. This is often necessary in an event driven environment, especially if you want to do something like a game where the user has to react to something the computer does. It's not possible to simply program a loop, so the timer control is used to trigger an event every once in a while (100 milliseconds in this example).

Start Cpad and select 'new HTML layout' from the file menu. Cpad will then show a toolbox window with available controls and a layout window to place and position the controls in (much like a form in VB). Add a textbox, two labels, three buttons and a timer control and arrange them like shown in figure layout.gif. To go along with this example, change the button names to RButton, SButton and LButton and set the timer.interval property to 100 and the timer.visible property to true.

Now start the Script Wizard to program the controls. First use the right pane to define a new Global variable called 'dx'. Next select the button controls and insert the code 'dx=-1' , 'dx=0' , and 'dx=1' into the 'click' method of the RButton, SButton and LButton respectively. Then select the timer control's 'timer' method and insert the code below :

Label1.Left = Label1.Left + dx
TextBox1.Text = Label1.Left

The timer method will be executed every time the timer's interval period expires, so in this example the X position of the label 'Label1' will appear in the text box and the label will be moved according to the value of the variable 'dx', which is set by clicking on the buttons.

Finally, select the layout control in the left pane and enter the following code for its 'onLoad' method : 'IeTimer1.Enabled = True'

When you save the layout, Cpad will create the file layout1.alx which contains the VBScript and the <OBJECT> HTML statements for the controls contained in the layout. The last step is to use Cpad to insert the layout control into a regular HTML file by using 'insert HTML Layout' from the file menu. Select layout1.alx and Cpad will generate the following HTML :

After all this hard work, there's but one thing to do : save and load the HTML file into IE and start pushing those buttons for some movement!