The Frameset Page

Our application uses a frameset page

wroxcars.asp

, which contains three frames to hold the pages that the user sees. These are the 'banner' frame and page at the top containing our logo and animation, the 'menu' frame and page containing the navigation buttons, and the 'main' frame where the list of models, details, finance information and order form are displayed. The frameset HTML code is shown below. Notice that we don’t actually load the main page in the HTML—you'll see why in a while:

...

<FRAMESET ROWS="80,*">

<FRAME SRC="banner.htm" SCROLLING=NO FRAMEBORDER=NO

FRAMESPACING=0 BORDERCOLOR=white>

<FRAMESET COLS="150,*">

<FRAME NAME="menu" SRC="menu.htm" SCROLLING=NO

FRAMEBORDER=NO FRAMESPACING=0 BORDERCOLOR=white>

<FRAME NAME="main" SRC="" SCROLLING=AUTO FRAMEBORDER=NO

FRAMESPACING=0 BORDERCOLOR=white>

</FRAMESET>

</FRAMESET>

...

Even though it's a frameset, we wanted to achieve the border-less appearance that is so popular at the moment. To do this we set

FRAMEBORDER=NO

in the frameset and in each frame, and FRAMESPACING=0
and BORDERCOLOR=white
for each frame as well.

Global Variables And Procedures

We're going to be caching information locally, on the client, so we need some global variables to store it and make it available to all the other pages in the frameset. The best place for this is in the frameset page itself,

wroxcars.asp

. We can then access it from anywhere else using either parent.
variablename or top.
variablename. Because (as you saw earlier) we've arranged for our page to always be loaded into the full browser window, we can use top.
variablename in our code.

The Database Connection String

We're going to need a database connection to get the data about the cars and colors, and we declare this to ASP at the top of the page. This has to be changed to suit your server, so putting it here makes it easy to find:

<%

'the database connection string, change to suit your database

strConnection = "driver={SQL Server};server=yourservername;" _

& "database=WroxCarCo;UID=username;PWD=password"

%>

Other Global Variables

While the connection string is only required by ASP, the other variables are required by the client-side application so they need to be stored in script on the client. We do this next, within the

<HEAD>

section of the page:

<HTML>

<HEAD>

<TITLE>The Wrox Car Company</TITLE>

<SCRIPT LANGUAGE="VBScript">

'global variables for navigation

Dim selectedModel      'the currently selected CarID

Dim selectedColor      'the currently selected ColorID

Dim financePayment     'the current calculated monthly payment

Dim financeMonths      'the current calculated number of months

Dim financeTotal       'the current calculated total payment

Dim interestRate       'the interest rate

ReDim arrCars(7,100)   'array to hold details of all cars

ReDim arrColors(2,500) 'array to hold all car-to-color mappings

selectedModel = 0      'initialize the global variables

selectedColor = 0

totalPrice = 0

financePayment = 0

financeMonths = 0

financeTotal = 0

'change this to suit, also requires new finance.txt file for payments

interestRate = 7.25

...

We're storing the interest rate as a hard-coded number here (in the main

wroxcars.asp

file), but this could also be created dynamically by the server each time if required. However there are other issues involved, which we'll discuss when we come to look at the Finance page later on.

The Global Procedures

As well as storing variables globally in the frameset page, we can put procedures that are accessible from other pages there as well. We're storing the details of the cars and colors in two dynamic arrays,

arrCars(7,100)

and arrColors(2,500)
, which we declared in the previous section of code. These will hold all the details about all the cars and colors, including the CarID
and ColorID
values for each one.

We're also storing the car and color that the user has selected in the two global variables,

selectedModel

and selectedColor
, and so we need to be able to translate these key values into array indexes at several points in the application (i.e. when we want to get information about the currently selected car or color from the arrays):

...

Function CarArrayIndex()

'returns the array index of the currently selected car model

intArrayIndex = -1

intNumCars = UBound(arrCars, 2)

For intLoop = 0 To intNumCars

If selectedModel = arrCars(0, intLoop) Then

intArrayIndex = intLoop

Exit For

End If

Next

CarArrayIndex = intArrayIndex

End Function

Function ColorArrayIndex()

'returns the array index of the currently selected color

intArrayIndex = -1

intNumColors = UBound(arrColors, 2)

For intLoop = 0 To intNumColors

If selectedColor = arrColors(1, intLoop) Then

intArrayIndex = intLoop

Exit For

End If

Next

ColorArrayIndex = intArrayIndex

End Function

...

Caching Data Client-side

The next step is to store the car and color data client-side. Remember that this is an ASP page that also contains client-side script. We can create this client-side script code dynamically using ASP code on the server when we build the page (just as we would create tables of values, for example). In our case, we use ASP to create the client-side script that fills the arrays with values.

Caching The Car Details

To retrieve the car information from our database we use the same technique as we did in the showroom applications. This involved the custom business component

WCCCars

, which returns a recordset containing all the details of all the cars. However, instead of using it to create a table as we did for the showroom application, we use the recordset to fill the arrCars
array:

...

Sub window_onload()

'fill the arrays of cars and colors

<%

CRLF = Chr(13) & Chr(10) 'carriage return

QUOT = Chr(34)           'double quote character

Set recCars = Server.CreateObject("ADODB.Recordset")

Set objCars = Server.CreateObject("WCCCars.Cars") 'our business object

Set recCars = objCars.GetAll(strConnection)       'get all car records

recCars.Open

'loop through all the car records filling the array

intArrayRow = 0

recCars.MoveFirst

While Not recCars.EOF

Response.Write "arrCars(0, " & intArrayRow & ") = " _

& recCars("CarID") & CRLF

Response.Write "arrCars(1, " & intArrayRow & ") = " & QUOT _

& recCars("Model") & QUOT & CRLF

Response.Write "arrCars(2, " & intArrayRow & ") = " _

& recCars("EngineSize") & CRLF

Response.Write "arrCars(3, " & intArrayRow & ") = " _

& recCars("Doors") & CRLF

Response.Write "arrCars(4, " & intArrayRow & ") = " _

& recCars("Seats") & CRLF

Response.Write "arrCars(5, " & intArrayRow & ") = " _

& recCars("Price") & CRLF

Response.Write "arrCars(6, " & intArrayRow & ") = " _

& QUOT & recCars("Picture") & QUOT & CRLF

Response.Write "arrCars(7, " & intArrayRow & ") = " & QUOT _

& recCars("Description") & QUOT & CRLF

recCars.MoveNext

intArrayRow = intArrayRow + 1

Wend

Set recCars = Nothing

Set objCars = Nothing

'put code in page to redimension cars array to correct size

Response.Write "ReDim Preserve arrCars(7, " & intArrayRow - 1 & ")" & CRLF

...

Once this page gets to the client it looks like the following code. As far as the browser is concerned it is client-side VBScript. And once we've iterated through all the records, keeping count of the number with our

intArrayRow

variable, we can resize the array to the correct size—recall it started out as arrCars(7,100)
:

Sub window_onload()

' fill the arrays of cars and colors

arrCars(0, 0) = 1

arrCars(1, 0) = "Esquel GTXi"

arrCars(2, 0) = 94

arrCars(3, 0) = 2

arrCars(4, 0) = 4

arrCars(5, 0) = 18995

arrCars(6, 0) = "car1.gif"

arrCars(7, 0) = "A sporting yet all-purpose car that gives ... etc."

... rest of car details here ...

arrCars(0, 4) = 5

arrCars(1, 4) = "Deanay Pickup"

arrCars(2, 4) = 80

arrCars(3, 4) = 2

arrCars(4, 4) = 6

arrCars(5, 4) = 24995

arrCars(6, 4) = "van1.gif"

arrCars(7, 4) = "When it comes to those DIY jobs, moving ... etc."

ReDim Preserve arrCars(7, 4)

...

Caching The Color Details

Now we do the same to fill the array of colors. As in the showroom application, we use the SQL Server stored procedure

usp_AllColorsForAllCars

to return a recordset. Now, however, we're putting the values into our arrColors
array:

...

strSQL = "usp_AllColorsForAllCars"   'stored procedure

Set oConn = Server.CreateObject("ADODB.Connection")

oConn.Open strConnection

Set recColors = oConn.Execute(strSQL)

'loop through all the color records filling the array

intArrayRow = 0

recColors.MoveFirst

While Not recColors.EOF

Response.Write "arrColors(0, " & intArrayRow & ") = " _

& recColors("fkCarID") & CRLF

Response.Write "arrColors(1, " & intArrayRow & ") = " _

& recColors("ColorID") & CRLF

Response.Write "arrColors(2, " & intArrayRow & ") = " & QUOT _

& recColors("Color") & QUOT & CRLF

recColors.MoveNext

intArrayRow = intArrayRow + 1

Wend

Set recColors = Nothing

Set oConn = Nothing

'put code in page to redimension colors array to correct size

Response.Write "ReDim Preserve arrColors(2, " & intArrayRow - 1 & ")" _

& CRLF

%>

...

Once this part of the page gets to the browser it looks like this:

...

arrColors(0, 0) = 1

arrColors(1, 0) = 1

arrColors(2, 0) = "White"

arrColors(0, 1) = 2

arrColors(1, 1) = 1

arrColors(2, 1) = "White"

...

arrColors(2, 17) = "Dark Orange"

...

arrColors(2, 29) = "Powder Blue"

...

arrColors(2, 46) = "Black"

ReDim Preserve arrColors(2, 46)

End Sub

Loading The Main Car Models Page

Now that we've got all the data safely stored in our two arrays, we can load the 'list of models' page

carmodels.htm

into the main window. We didn’t do it before because we need the values in the arrays to build this page dynamically, and the browser can run script code and the HTML parsing engine as separate processes. This could have meant that the browser loaded the model list page before the values had been placed in the arrays by the client-side script:

...

'now load the car models page

frames("main").location.href = "carmodels.htm"

End Sub

</SCRIPT>