An <OBJECT> Example - Using a Spin Button

Article
06/30/2006

Let's see an example to demonstrate what we're talking about. Open a new file in NotePad and enter this:

  <HTML>
<HEAD>
<TITLE> Objects </TITLE>
</HEAD>
<BODY>
<CENTER>
<H1> Objects </H1>
<FORM NAME="frmTest">
  Spin Value: <INPUT TYPE="TEXT" NAME="txtSpinValue"><P>
</FORM>
<OBJECT CLASSID="clsid:79176FB0-B7F2-11CE-97EF-00AA006D2776" ID="spnTest"
  CODEBASE="http://activex.microsoft.com/controls/mspert10.cab">
</OBJECT>
<SCRIPT LANGUAGE="VBScript">
Sub spnTest_Change
  Document.frmTest.txtSpinValue.Value = spnTest.Value
End Sub
</SCRIPT>
</CENTER>
</BODY>
</HTML>

If you load this page into Internet Explorer, you'll notice that a text box and two spin buttons. You've probably seen these in other Windows applications, but perhaps not in an HTML page.

Spin buttons aren't one of the standard HTML form control elements, so we've created one ourselves with an <OBJECT> tag. Click on the up and down buttons and notice how the value in the text box changes—the code in our page connects the spin button's Change event with the text box, so the text box is updated each time the spin button is clicked.

The spin button control we're using here is from the Forms 2.0 Object Library. If you've installed the ActiveX Control Pad, Visual InterDev, the HTML Layout Control, or Internet Explorer 3.01 or 3.02, you'll have this file installed and registered on your system. However, with the additional CODEBASE attribute we've added, the file will be automatically downloaded from the Microsoft site if it's not already present on the machine you use to view this page.

Displaying the Spin Button's Value Property

We'll now briefly go over the code that causes the text box to interact with the spin button control. With the background we acquired from the last chapter, it's easy to understand what the script code on this page is doing.

We're using the ObjectName_EventName method of connecting code to an object's event. The spin button control fires an event called Change whenever its value changes. It also supports events called SpinUp and SpinDown that are only fired on an up or down click, respectively. For our purposes Change is fine, so that's the only event we'll handle.

  <SCRIPT LANGUAGE="VBScript">
Sub spnTest_Change
  Document.frmTest.txtSpinValue.Value = spnTest.Value
End Sub
</SCRIPT>

The code that we execute when the value changes is simple. The spin button object's current value is stored in a property called Value. Because we've named the object spnTest, we can access this number with the code spnTest.Value. The rest of the code on this line is just performing an assignment to the Value property of the text box (named txtSpinValue) on our form (named frmTest). We see the results of this assignment on the HTML page when the value displayed by the text box changes as we click the spin button.

Presetting the Value with a Parameter Tag

Now imagine that the page is not an .htm file, but an Active Server Page on our Intranet server. The spin button and text box display the number of items on a customer's order. If they are reviewing an existing order, it needs to be set to the value of the current order, ready for the customer to increase the quantity, if need be.

The <OBJECT> tag we used earlier sets the value of the spin button when it's created in the page to the default of zero. How do we go about setting it to a different 'default' value? The answer is to add a <PARAM> tag to the code. This example sets the value to 10:

  <OBJECT CLASSID="clsid:79176FB0-B7F2-11CE-97EF-00AA006D2776" ID="spnTest"
  CODEBASE="http://activex.microsoft.com/controls/mspert10.cab">
  <PARAM NAME="Position" VALUE="10">
</OBJECT>

In effect, all it's doing is setting a property to a default value. In fact, the code uses Position rather than Value, but the result is the same. When the object is created, its value will be 10.

The only real way to work with objects like this is to use Microsoft's ActiveX Control Pad, or an equivalent such as Visual InterDev, which understands how to insert objects and set the properties.

Doing It From a Database

This still doesn't answer the whole question, though. The value won’t be a static number, it will be a value in a database. No problem, because the page is an .asp file rather than a normal .htm page. It can get the value and insert it into the <PARAM> tag, as well as into the text box:

  ...
<% 
  Set oConn = Server.CreateObject("ADODB.Connection")
  oConn.Open "Contacts"
  Set oRs = oConn.Execute("SELECT * FROM Orders WHERE OrderNo = 'PR0172'")
  strExistingQty = CStr(oRs.Fields("Quantity"))
  oRs.Close
%>
...
<FORM NAME="frmTest" ACTION="AmendOrder.asp>
  Spin Value: 
  <INPUT TYPE="TEXT" NAME="txtSpinValue" VALUE="<% = strExistingQty %>">
  <P>
</FORM>
...
<OBJECT CLASSID="clsid:79176FB0-B7F2-11CE-97EF-00AA006D2776" ID="spnTest"
  CODEBASE="http://activex.microsoft.com/controls/mspert10.cab">
  <PARAM NAME="Position" VALUE="<% = strExistingQty %>">
</OBJECT>
...

When it arrives at the client, ready to be displayed in the browser, the values have been filled in, and of course the ASP code is not sent anyway:

  ...
<FORM NAME="frmTest" ACTION="AmendOrder.asp>
  Spin Value: 
  <INPUT TYPE="TEXT" NAME="txtSpinValue" VALUE="10">
  <P>
</FORM>
...
<OBJECT CLASSID="clsid:79176FB0-B7F2-11CE-97EF-00AA006D2776" ID="spnTest"
  CODEBASE="http://activex.microsoft.com/controls/mspert10.cab">
  <PARAM NAME="Position" VALUE="10">
</OBJECT>
...

This is just a simple example, there are many other things we could do, for example we should be more thorough when querying the database of course. However, it's enough to illustrate the point that we are now firmly into client/server territory. The server creates the page containing the existing values, but the client is 'active' in the sense that it can handle all the work of setting the text box value without needing further involvement from the server.

Beyond Properties: Calling Methods

Like we've said, dealing with objects on the client is very similar to working with objects on the server. Where the methods of an object are concerned, they're actually exactly the same. Suppose we've already created an object, and assigned it's reference to a variable named objVar. Further, suppose that this object has a method called myMethod. Whether we're executing code in the browser or on the server, the way we call this method is identical:

  objVar.myMethod

The syntax is also the same regardless of whether we're using JavaScript or VBScript, although it will differ slightly if the method accepts parameters. Method calls in VBScript do not use parentheses, while JavaScript method calls do.

Beyond Properties: Handling Events

While intrinsic ASP objects like Application have events, objects we create and use on the server don't generally fire events. Our exposure to these objects is limited to method calls and property access. As you've seen in the previous chapter, many objects on the client-side do fire events—it's one of the most commonly used ways to execute code.

The syntax to connect code to an object's event is exactly the same for user-created objects as it is for objects in the browser object model, and depends on the style we choose to connect our code to the event. Different methods of hooking up event code were discussed at length at the beginning of the last chapter. Our choice may depend on the scripting language. In VBScript, we can use:

  <SCRIPT LANGUAGE="VBScript">
Sub ObjectName_Event1Name
   ...
End Sub 
Sub ObjectName_Event2Name
   ...
End Sub
</SCRIPT>

JavaScript doesn't support the Visual Basic system of multiple event handlers in one <SCRIPT> block. Also since adding the event name to the <INPUT> tag is only supported for intrinsic elements that can be created with HTML, this leaves only one style for the combination of user-created objects and JavaScript:

  <SCRIPT LANGUAGE="JavaScript" FOR="ObjectName" EVENT="Event1Name">
...
</SCRIPT>
<SCRIPT LANGUAGE="JavaScript" FOR="ObjectName" EVENT="Event2Name">
...
</SCRIPT>

This style can also be used with VBScript code if you wish.