ActiveX, VBScript, and Layouts

Description

The ActiveX / VBScript approach is Microsoft's answer to Java and JavaScript
It borrows heavily from earlier Microsoft technologies,
especially the COM object model used to make OLE happen in Windows
and Visual Basic, Microsoft's rapid development language
These technologies show great promise for their ease of use…
but they currently run only on Microsoft Internet Explorer (MSIE), which is not available for all platforms
Thus, it is basically a Windows 95 - only solution.
There are netscape add - ons to allow reading of activeX controls, but only in Win 95
The ease of use and development model are still worth examining.
When java / javascript editors become as easy to use as the ActiveX control pad, we will have something strong

VBScript

VBScript (VBS) is the scripting language built into MSIE. It is very similar to JavaScript
It has the same basic functionality
works with the objects in HTML forms with the same naming structures
Main difference: syntax based on BASIC style languages rather than C - like languages
Generally considered easier for beginners, about as powerful
MSIE can also read JavaScript, but Netscape cannot (currently) read VBS.
JS comes into its own when used with ActiveX controls.

ActiveX

ActiveX controls are miniature programs which can be embedded into other programs
They can be incorporated into web pages like java applets
They can also be incorporated into other application types
Windows and Mac OS already supports these features for major applications.
EG. The spell checker in your word processor, the graph maker in your spreadsheet may be activeX objects.
It is relatively easy to incorporate such objects into other documents if they speak the same "object language"
For example, the graphic below is actually an object:

I used an activeX program called WordArt to create it. WordArt, like many objects was packaged with application software. It make sense for software companies to create this type of object, because it can be packaged with many different programs. The capability to create special graphics like this can be extended to any application that can read ActiveX controls
In this case, my WordArt object was embedded by the commands available to me in my word processor. I could also attach it to many other OLE capable documents in other applications.
To play with ActiveX (sometimes called ole) controls, go to a high end word processor or other application and play around with the insert object command. You will see a number of objects already installed on your computer
ActiveX controls are the latest generation of objects in the Microsoft world. They are designed to be incorporated into any type of document, including web pages.
When an ActiveX - capable browser encounters an ActiveX control, it first checks to see if that object is already installed on the client machine. If not, it attempts to download it from the web.
There are, of course some security concerns about this.
ActiveX controls do not have the same security features as Java Applets!
They can read and write to the client machine!
Instead of preventing these features, Microsoft chose to impliment a 'signature' feature.
Through this feature, you can always tell who wrote a control (and presumably take legal action if it hurts your computer)
As you can imagine, this has sparked quite a debate.
Most ActiveX controls are quite safe, but know who you are downloading from.
You probably already have a number of activeX controls installed on your Windows machine, attached by programs you installed in your system.
There's also a large number of such controls available online at ww.microsoft.com
There are controls for all the major windows objects such as buttons, text boxes, scroll bars, and so on.
There are also more specialized controls to handle calendars, animation, graphs, and whatever else.

Layouts

ActiveX controls can be added to a page with the <object> tag, but there are some problems with this approach.
The HTML gets pretty ugly, as each object may have a number of obscure parameters
There is very little precise control of control placement with standard html
If you get a particular setup you like, it is difficult to move
Microsoft's answer is layout files
A layout is something like a java applet, with some important differences
A layout consists of a background container holding a bunch of activeX controls
JavaScript or VBScript is used to allow the controls to interact
the layout is saved as an .ALX file
The layout is called with an <object> tag in an html document.
Layouts can be made with Microsoft's activeX control pad or a text editor.

Example: The IO Demo

Description

We want to demonstrate how the Microsoft solution compares with JavaScript, Java, and Visual Basic.
We will create a simple program that you may have seen in one of these other languages
We want to create an input text box, a label for output, and a command button
The user should type something in the input box, click on the command button
The output label will show whatever the user typed.

The tools

We will write this program in a number of ways.
We will start by using the ActiveX control pad, which is a tool provided by Microsoft for free at www.microsoft.com.
When we fire up this program, we will see a basic html editor.
It allows us to write straight HTML, and it has features to simplify activeX and VBScript editing.
We will see the features of the editor as we go

Straight HTML with VBScript

We will start with a simple HTML file that uses VBScript.

<HTML>
<HEAD>
<TITLE>New Page</TITLE>
<script language = "VBScript">
sub cmdCopy_Click
'copy the value of the txtIn to txtOut
document.myForm.txtOut.value = document.myForm.txtIn.value
end sub
</script>
</HEAD>
<BODY>
<center>
<h1>Andy's IO Demo</h1>
<h4>VBScript, HTML only version<hr></h4>
<form name = "myForm">
Output:
<input type = "text"
name = "txtOut"
value = " ">
<br>
Input:
<input type = "text"
name = "txtIn"
value = " ">
<br>
<input type = "button"
name = "cmdCopy"
value = "Copy"
onclick = "cmdCopy_Click"
language = "VBScript">
<hr>
</form>
</BODY>
</HTML>

Notes on code above

The syntax details (how subprograms are defined, comment characters, general syntax) are derived from VB.
The form object handling is much like JavaScript.
This program has no major advantages over its JS peer, but will only run on MS browsers.
It looks like this:

Same program with activeX controls rather than HTML form objects.

Create a new page
Insert an activeX control by choosing 'insert activex control' from the Edit menu

This type of dialog will show up:

It lists all of the controls that are registered to the computer where the page is being designed.
In this case I want a Label Object, so I double-click on it…
The following two windows open up

The Edit ActiveX Control window allows me to manipulate the size of the object, and shows results of any manipulations I do in the Properties window
I dragged on the white boxes with the mouse to choose the size I wanted for my label
This properties box will be VERY familiar to VB programmers.
I want to change the caption to "Output goes here", so I will select the Caption property and type in that value. When I do, the Edit box changes to this…

I can also change the size, color and other attributes by playing with the other elements in the properties box:
Note that I changed the id property to give it a name (In this case lblOut)
When finished, I can click on the close window button, and I will be returned to the editor.
The HTML will have an <object></object> pair inserted, and a lot of <param> tags (reminiscent of Java!) describing all the things I changed.
I can edit this text directly (Yuck!) or click on the little cube icon in the border to edit the object again.
I did the same thing to make a text box and a button

Output

Note that we have a real output area here, not just another text box - the user cannot change it.
Note in the code that there is no form! The objects are NOT html objects, but ActiveX objects.
The objects have characteristics (Such as colors and sizes) that are not possible in straight HTML
Note that we also incorporate some regular HTML for placement. It's crude, but it works.

The code to make it:

<HTML>
<HEAD>
<TITLE>IO Demo with ActiveX controls</TITLE>
</HEAD>
<BODY>
</BODY>
</HTML>
<center>
<h1>Andy's IO Demo</h1>
<h4>ActiveX version<hr></h4>
</center>
Output:
<OBJECT ID="lblOut" WIDTH=127 HEIGHT=27
CLASSID="CLSID:99B42120-6EC7-11CF-A6C7-00AA00A47DD2">
<PARAM NAME="_ExtentX" VALUE="3360">
<PARAM NAME="_ExtentY" VALUE="714">
<PARAM NAME="Caption" VALUE="Output goes here">
<PARAM NAME="Angle" VALUE="0">
<PARAM NAME="Alignment" VALUE="4">
<PARAM NAME="Mode" VALUE="1">
<PARAM NAME="FillStyle" VALUE="0">
<PARAM NAME="FillStyle" VALUE="0">
<PARAM NAME="ForeColor" VALUE="#000000">
<PARAM NAME="BackColor" VALUE="#C0C0C0">
<PARAM NAME="FontName" VALUE="Arial">
<PARAM NAME="FontSize" VALUE="12">
<PARAM NAME="FontItalic" VALUE="0">
<PARAM NAME="FontBold" VALUE="1">
<PARAM NAME="FontUnderline" VALUE="0">
<PARAM NAME="FontStrikeout" VALUE="0">
<PARAM NAME="TopPoints" VALUE="0">
<PARAM NAME="BotPoints" VALUE="0">
</OBJECT>
<br>
<br>
Input:
<OBJECT ID="TxtIn" WIDTH=96 HEIGHT=24
CLASSID="CLSID:8BD21D10-EC42-11CE-9E0D-00AA006002F3">
<PARAM NAME="VariousPropertyBits" VALUE="746604571">
<PARAM NAME="Size" VALUE="2540;635">
<PARAM NAME="FontCharSet" VALUE="0">
<PARAM NAME="FontPitchAndFamily" VALUE="2">
<PARAM NAME="FontWeight" VALUE="0">
</OBJECT>
<br>
<br>
<OBJECT ID="cmdCopy" WIDTH=96 HEIGHT=32
CLASSID="CLSID:D7053240-CE69-11CD-A777-00DD01143C57">
<PARAM NAME="Caption" VALUE="Copy">
<PARAM NAME="Size" VALUE="2540;846">
<PARAM NAME="FontEffects" VALUE="1073741825">
<PARAM NAME="FontCharSet" VALUE="0">
<PARAM NAME="FontPitchAndFamily" VALUE="2">
<PARAM NAME="ParagraphAlign" VALUE="3">
<PARAM NAME="FontWeight" VALUE="700">
</OBJECT>
</body>
</html>

adding script

We could do the script by hand as above, but using ActiveX and the control pad make scripting much easier.
Remember that our original pseudocode was:
When the button is clicked, copy the value in the textbox to the label.
The control pad has a script wizard. When I click on it, I see this:

The pane numbered "1. Select an Event" is a list of the objects in this form.
I want code to happen when cmdCopy is clicked, so I click on cmdCopy, and see a list of events command buttons can recognize. I chose the click event, since I want action when the button is clicked.
I then need to specify an action, so I look in panel #2, Remember, I want the caption of lblOut to change, so I'll click on lblOut, and I see a list of its properties that can be changed.
My window now looks like this:

If I scroll down in window 2, I will see a caption property. When I double-click on it, I am prompted for a value to place in the caption property.
Just for grins, I type "Hello" (I know this isn't really what I want, but it will give me a start)
Pane 3 now tells me:

When I change to code view, I see

which appears to be vbscript code.
When I hit the OK button, I go back to the editor, which has inserted a <script></script> pair with the vbscript code already in it (!)

I save this file and load it into Explorer, and it WORKS!! With ZERO lines of traditional programming. <wow>

This was not exactly what I was looking for, though. What I really wanted was to copy the text property of txtIn to the lblOut.Caption.

When I return to the script wizard, I looked at the line of code that said change lblOut.caption to Hello, and hit the Modify value button.
The dialog that popped up gave me a custom button so I said to my self "aw, what the heck" and clicked it.
Now it said I could enter a variable name.
I tried txtIn.text (which I guessed by looking at pane 2)

Then I re-saved and re-loaded.

This time it worked EXACTLY as expected.

Using layouts

The code is easy to write, but messy, and still has some problems
The objects are huge and distracting. It's easy to get intimidated by them in the HTML

This code would not be easy to re-use

We still are limited by HTML's placement restrictions. We don't have very much control over where objects go.

The answer is using a layout.
Layouts in Microsoft 'feel' like Applets.

The user may not be able to tell the difference
The activeX control pad makes them easy to create.

Making the IODemo with a layout

We start by telling the control pad to make a new layout
You will see what looks VERY MUCH like a form if you're used to standard VB
You will also see a toolbox with a bunch of controls on it. (Also familiar to VB programmers)

The layout can be modified much like a paint program. We can resize it in the normal ways, and manipulate it as an activeX object (which, in fact it is).
I will change its background color, so I right click on it, and get a menu of choices. One is properties. When I click on it, I get the properties list just like any other ActiveX control.
I will use it to change the form's background color to yellow.

I will next add the lblOut label.
The thing that looks like a large capital A on the toolbox is a label. When I click on this, I can draw a label onto the layout.
I can move and resize the label on the layout, and change its properties.

I'll repeat this process to add the other components.
I also added labels that say input and output. My form now looks like this…

I will use the script wizard to write exactly the same code I did before…
I will save this layout. Notice that I am NOT writing an HTML file, and I cannot view this thing directly. It must be viewed in an HTML document (just like java applets)
My file will be saved with an .ALX extension, and when I close it, I am returned to the editor.
Now I make an HTML page, and choose the Insert Layout command
I will get a list of the layouts I have saved, and select the IO.ALX (or whatever this layout was called.)
My actual html file is this:
<HTML>
<HEAD>
<TITLE>IO Demo 4</TITLE>
</HEAD>
<BODY>
<center>
<h1>Andy's IO Demo</h1>
<h4>ActiveX version, with VBScript in a layout<hr></h4>
</center>
<OBJECT CLASSID="CLSID:812AE312-8B8E-11CF-93C8-00AA00C08FDF"
ID="IO_alx" STYLE="LEFT:0;TOP:0">
<PARAM NAME="ALXPATH" REF VALUE="IO.alx">
</OBJECT>
</BODY>
</HTML>
It is a very simple page, with basically just a reference to the layout.
All the vbscript and document definitions are embedded into the layout
It will be very easy to incorporate this layout into any page I want.

Again, it took very little code.

Here is what the final html document looks like in Explorer:

Reality Check

…and here's how it looks in Netscape:

Netscape doesn't read activeX. (Although there are reportedly some plugins available)
Currently, ActiveX only works well in a Microsoft environment (Windows 95 or NT)
This is a huge drawback

The Promise of ActiveX

An interesting feature of ActiveX is that there are a HUGE number of very powerful ActiveX controls available, and these controls can be very powerful.
Many Windows documents can be embedded as ActiveX controls, so you can embed a word document, and if the user has Word, she can activate and utilize the document over the web.

You can also embed graphics created in spreadsheets, and custom controls that do elaborate jobs.

The real power of ActiveX lies in its ease of use. This is a MUCH easier environment to work in than Java. Eventually, we will see some tools that make Java as easy to use as ActiveX is now.
In fact, there is a new feature of java called javabeans which offers very similar functionality.

It's worth watching the 'java wars' to see what happens. The things we saw today are interesting and exciting technology. Unfortunately they are severely hampered by platform-dependence. Who knows what will happen if somebody can combine the best features of Java with those of ActiveX? It is a very good time to be a web author and programmer.