Some Script Examples

[Previous] [Next]

This book isn't about creating user interfaces; it's about creating scalable server-side objects. Still, we want to describe more fully some elements of this DHTML prototype.

The RDS DataSpace Object

The following code snippet puts an RDS DataSpace object on the page. The DataSpace object is part of the Remote Data Service that comes with ADO and OLE DB in the Microsoft Data Access Components (MDAC) package.

<!-- RDS.DataSpace ID ADS1--> <OBJECT ID="ADS1" WIDTH=1 HEIGHT=1 CLASSID="CLSID:BD96C556-65A3-11D0-983A-00C04FC29E36"> </OBJECT>

The page uses the DataSpace object to call business objects on the server side. In effect, the DataSpace object helps you make Distributed Component Object Model (DCOM) calls over the HTTP protocol.

Please make special note of the ID chosen for the object: ADS1. We'll use that ID in all the methods that use this DataSpace object.

Getting the Horse List

The following VBScript uses the DataSpace object to obtain a list of horse names. It also creates the HTML needed to show the list of names on a Web page. (See Figure 7-2.)

Sub GetHorses(NamePattern) Dim objHorseMaint, Rs, vntHTML Set objHorseMaint = ADS1.CreateObject _ ("RaceMaintFacades.fcdHorseMaint", _ "HTTP://Per_Armada7800") Set Rs = objHorseMaint.GetHorseList(NamePattern) While Not Rs.EOF vntHTML = vntHTML & _ "<SPAN STYLE=#'width:100%' ID='ID" & _ Rs("HorseId") & _ "' CLASS=horse onMouseOver=" & _ "'listMouseOver()' " & _ "onMouseOut='listMouseOut()' " & _ "onClick='GetHorseById(""" & _ Rs("HorseId") & """)'>" & _ Rs("HorseName") & "</SPAN><BR> " Rs.MoveNext Wend window.document.all.HorseList.InnerHTML = vntHTML End Sub

There are several interesting things about this code:

On object creation

• It uses the CreateObject method of the ADS1 DataSpace object to create a facade object on the server side. The script creates this object to use its default interface:

 Set objHorseMaint = ADS1.CreateObject _ ("RaceMaintFacades.fcdHorseMaint", _ "HTTP://Per_Armada7800")

Since we use VBScript, we can't easily use any other COM interface to the object we create. (More on this later in this chapter, in the "Using Separate Interfaces from Script" section.)

• The second parameter of the CreateObject call is an HTTP machine address: HTTP://Per_Armada7800. This makes the call a DCOM call.
• If you leave this second parameter blank, the call will be converted to an ordinary COM call that expects to find the component specified in the same machine on which the DHTML page is running. You could also replace the HTTP machine address with a Web address, allowing the call to be sent to an unknown machine.

On recordset creation

• After the object is created, you call it just as you would call any object:

 Set Rs = objHorseMaint.GetHorseList(NamePattern)

In our example, we call the GetHorseList method of the facade object, giving it a name pattern for selecting the proper set of horses. The result of the call is an ADO recordset that (we hope!) contains the names and IDs of all the horses selected.

On presentation

• The data isn't presented in a list box, a combo box, or a table. Instead, it's presented as a number of HTML SPAN elements, which together form the content of a scrollable list.

 While Not Rs.EOF vntHTML = vntHTML & _ "<SPAN STYLE=#'width:100%' ID='ID" & _ Rs("HorseId") & _ "' CLASS=horse onMouseOver=" & _ "'listMouseOver()' " & _ "onMouseOut='listMouseOut()' " & _ "onClick='GetHorseById(""" & _ Rs("HorseId") & """)'>" & _ Rs("HorseName") & "</SPAN><BR> " Rs.MoveNext Wend

(Read more about the scrollable list in the last bulleted item.)

• Each element of the list will get its ID as a combination of the letters ID and the content of the HorseId field in the current record:

 "<SPAN STYLE=#'width:100%' ID='ID" & Rs("HorseId")

• Each element of the list contains DHTML calls that will change the appearance of the element as the mouse moves over it (the onMouseOut and onMouseOver events) as well as information about what to do when the user clicks on a horse name (the onClick event):

 "onMouseOver='listMouseOver()' " & _ "onMouseOut='listMouseOut()' " & _ "onClick='GetHorseById(""" & _

• The content of the list is built up in the vntHTML variable. After the entire recordset is read, the content of this variable will make up the InnerHTML of the HorseList DIV element on the page:

 vntHTML = vntHTML & _ "<SPAN STYLE=#'width:100%' ID='ID" & _ Rs("HorseId") & _ "' CLASS=horse onMouseOver=" & _ "'listMouseOver()' " & _ "onMouseOut='listMouseOut()' " & _ "onClick='GetHorseById(""" & _ Rs("HorseId") & """)'>" & _ Rs("HorseName") & "</SPAN><BR> " Rs.MoveNext Wend window.document.all.HorseList.InnerHTML = vntHTML 

This DIV element is the one we referred to when we talked about the scrollable list. Here's the HTML code that defines the scrollable HorseList DIV element:

<DIV ID=HorseList onMouseOver = "window.status ='Pick a horse'; this.style.cursor = 'hand'; return true" onMouseOut="window.status=''" STYLE=" HEIGHT: 285px; LEFT: 10px; MARGIN-LEFT: 10pt; OVERFLOW: scroll; POSITION: absolute; TOP: 150px; WIDTH: 275px"> </DIV>

Picking a Horse

When the user clicks one of the horses in the list, the GetHorseById VBScript method is called. You'll find the code for this method surprisingly simple yet powerful (which, by the way, is often the case with DHTML script code):

<SCRIPT LANGUAGE= "VBScript"> Dim Rs Sub GetHorseById(HorseId) Dim objHorseMaint enterImage() Set objHorseMaint = ADS1.CreateObject _ ("RaceMaintFacades.fcdHorseMaint", _ "HTTP://Per_Armada7800") Set Rs = objHorseMaint.GetHorseByID(clng(HorseId)) If Not Rs.EOF Then txtHorseId.Value = Rs("HorseId") txtHorseName.Value = Rs("HorseName") cboBredIn.Value = Rs("BredIn") cboSex.Value = UCase(Rs("Sex")) txtBirthyear.Value = Rs("Birthyear") cboTrainer.Value = Rs("Trainer") End If End Sub <...other procedures...> </SCRIPT>

We included the <SCRIPT LANGUAGE= "VBScript"> and Dim Rs statements for one reason only. The <SCRIPT LANGUAGE= "VBScript"> and </SCRIPT> tag pair form a scope delimiter, which makes the Rs recordset variable, declared inside this scope, known to all the subroutines and functions defined within it.

As you can see, the code itself looks almost identical to Visual Basic code. The only differences are those listed here.

• The declaration of the objHorseMaint variable and the HorseId parameter doesn't specify their respective data types. This, as you know, is typical of script code. All variables in a script are Variants. (This, by the way, is the reason that it's difficult for scripts to specify an interface other than the default interface of a business object.)
• The enterImage method call doesn't look exactly as it would have in Visual Basic. There would have been no parentheses.
• Objects are created through the ADS1 DataSpace object, using an HTTP machine address.
• Since the HorseId variable that's received is a Variant, it must be converted to a long integer before it's sent to the facade object. In Visual Basic, the variable would have been declared as a long integer in the first place, making the conversion unnecessary.

That's all! Everything else is exactly as it would have been in Visual Basic, including the code that populates visible objects such as text boxes. Even the naming of those is the same.

On Animation

On reflection, we see yet another difference between the VBScript that we use in this example and the corresponding code that we would have used in an ordinary Visual Basic form.

In Visual Basic, you'd probably not have included the enterImage call at all. The enterImage method animates the HorseDetail form and its fields. That would be very hard to do in Visual Basic. Just to give you an idea of how easy it can be to program animation in DHTML, here's the Java Script we used:

function enterImage() { if (HorseDetail.style.visibility == "visible") { // Do nothing } else { HorseDetail.filters.item(0).Apply(); HorseDetail.style.visibility = "visible"; HorseDetail.filters.item(0).Play(); } }

A Final Example

This chapter's final example shows the code for getting a list of all countries and putting them in an HTML combo box:

Sub GetCountries() Dim objHorseMaint, Rs, vntElement Set objHorseMaint = ADS1.CreateObject _ ("RaceMaintFacades.fcdHorseMaint", _ "HTTP://Per_Armada7800") Set Rs = objHorseMaint.GetCountryList() While Not Rs.EOF Set vntElement = document.createElement("OPTION") vntElement.Text = Rs("Country") vntElement.Value = Rs("CountryCode") cboBredIn.Options.Add vntElement Rs.MoveNext Wend End Sub

For each record in the recordset, this method creates an element for the cboBredIn combo box. Each such element has a text property to display (Country) and a value to use when selected (CountryCode).

We could have used HTML data binding mechanisms, but we decided to write the code ourselves for this example. After all, we didn't have to write much code, and it wasn't very difficult either.