Keep in mind that the code examples that make up the remainder of this chapter were created and tested locally—that is, on the PC on which this book was written, rather than at a remote site. All the code works. But to implement it in your environment, you will have to tailor two of its most important factors to that environment:
· the path names of all subsidiary HTML and content files
· the path names of all referenced URLs
Also, you should be aware that all the code in this chapter was tested and functioned under several versions of Netscape Navigator, including 1.2, 2.0, 3.0, and 4.0. However, if you’re running Internet Explorer in any of its incarnations, or some other browser such as NCSA Mosaic, you may want to tweak this code slightly to get the same results we did. For example, we did all our scripting in JavaScript. So, if you’re trying to port this code to an Internet Explorer 4.0 environment, the lines that read
SCRIPT LANGUAGE=“JAVASCRIPT”
could be changed to
SCRIPT LANGUAGE=“JSCRIPT”
We’ll present
the code for the NWU page in three categories:
·
the basic page
·
the second level
·
more sophisticated
dynamic behaviors:
The file nwu_dtwr
<HTML>
<HEAD>
<TITLE>Dear Tech Writer...</TITLE>
<!--Since the phrase you include within the TITLE container will be
--displayed in a browser’s status bar when the file is opened, make
--sure that phrase is something meaningful to others.-->
</HEAD>
<FRAMESET COLS=21%,79%>
<!--Create two columns for the page, one occupying 21% of the screen,
--and the other taking up 79%.-->
<FRAMESET ROWS=29%,71%>
<!--In the page’s first column, create two rows,
one occupying 21% of the
--column’s height, and the other taking 71% of that height.
-->
<FRAME
<!--Define the frame that will house the page’s banner image.-->
<!--In testing this frame, we used the static TIFF shown in Figure
18-3.-->
NAME="
MARGINHEIGHT = 1
MARGINWIDTH = 1
SCROLLING = "NO"
NORESIZE>
<FRAME
NAME="BANNERTEXT"
SRC="banner.htm"
MARGINHEIGHT = 1
MARGINWIDTH = 1
SCROLLING = "NO"
NORESIZE>
<FRAME
NAME="PURPOSETEXT"
SRC="purpose.htm"
MARGINHEIGHT = 1
MARGINWIDTH = 1
SCROLLING= "NO"
NORESIZE>
<FRAME
NAME="DISPLAYTEXT"
SRC="dsplytxt.htm"
MARGINHEIGHT = 1
MARGINWIDTH = 1
SCROLLING="YES"
NORESIZE>
<FRAME
NAME="DISPLAYFIGS"
SRC="dsplyfig.htm"
MARGINHEIGHT = 1
MARGINWIDTH = 1
SCROLLING="YES"
NORESIZE>
<FRAME
NAME= "BOTMLINKS"
SRC="javsimap.htm"
MARGINHEIGHT = 1
MARGINWIDTH = 1
SCROLLING ="NO"
NORESIZE>
</FRAMESET>
</FRAMESET>
<NOFRAMES>
<!--In order to accommodate users working with older,
-- frames-incapable browsers, we’ve included this section.-->
To use this page to best effect,
you need a Web browser, such as Netscape 2.0 or higher,
or Internet Explorer 3.0 or higher, that allows you to view frames.
<A HREF="c:\winword\jobstuf\dhtml_bk\src_info\noframes.txt"
<EM><STRONG>Click here
</EM><STRONG>
</A>
if you wish to continue without the ability to see frames.
</NOFRAMES>
</HTML>
This section presents the code for the page’s more simple dynamic behaviors.
The file movement.htm
<HTML>
<HEAD>
<TITLE>Pen and PC</TITLE>
</HEAD>
<BODY onLoad="movePen">
<!--The opening BODY tag makes use of the built-in JavaScript
--method onLoad to begin to move the
image of the quill pen
--across that of the PC as soon as the frame loads.-->
<LAYER ID="firstpc" LEFT="10" TOP="8">
<IMG SRC="wallpapr.jpg">
</LAYER>
<LAYER ID="pen" LEFT="10" TOP="8"
ABOVE="firstpc">
<IMG SRC="pen.jpg" >
</LAYER>
<!--The LAYER tag is specific to more recent versions of Netscape.
--However, layers can also be implemented through the use of CSS1
--style sheets.-->
<SCRIPT>
<!--Simple move function-->
function movePen() {
var penPlace = document.layers["pen"];
<!--The variable penPlace is
assigned a value derived from the
--built-in JavaScript document attribute document.layers.
if (penPlace.left < 140) {
<!--If the pen layer’s upper-left corner is at a point less than 140
--pixels from the left of the frame, we’ll move it...-->
pen.moveBy(1,0);}
<!--one pixel at a time...-->
else {penPlace.left = 10;}
<!--Otherwise, we’ll place it at the 10-pixel point.-->
setTimeout(movePen, 700);}
<!--Then we’ll wait 700 milliseconds before starting the whole
--process over again.-->
</SCRIPT>
</BODY>
</HTML>
This section presents two files:
·:navigate.htm,
which enables the user to send email to Dear Tech Writer, to send email to an
Expert, and to query the page’s database of technical terms
·search.htm, which allows the user to enter a query.
The file navigate.htm.
<HTML>
<BODY BGCOLOR="#A6CAF0" LINK="#000000"
ALINK="#800000">
<!--The hexadecimal value A6CAF0
sets the frame’s background color
--to sky blue. The value 000000 sets
the color of unvisited links
--to black. The hex number 800000
sets the color of visited links
--to dark red.-->
<P>
<STRONG>
<FONT SIZE="2">
Links to Other Information:<BR><BR>
</STRONG>
</FONT>
<FONT SIZE="2">
<A HREF="mailto:petrovsk@voicenet.com">
Send mail to Dear Tech Writer.<BR><BR></A>
</FONT>
<FONT SIZE="2">
<A HREF="mailto:tpark@voicenet.com">
Send mail to an Expert.<BR></A>
</FONT>
</P>
<P>
<A HREF="search.htm">
<STRONG>
<FONT SIZE="2">
<I>Search our database of technical terms.</I></A>
</FONT>
</STRONG>
</P>
</BODY>
</HTML>
The file search.htm.
<HTML>
<HEAD>
</HEAD>
<BODY BGCOLOR="#FFFFFF" TEXT="#000080">
<P>
<FORM NAME="queryForm" ACTION=" METHOD="GET">
<!--Define the form into which the user will enter queries.-->
<STRONG>
<FONT SIZE="2">
<I>Hi! I'm Dear Tech Writer.<BR><BR></I>
Click in the box below, and enter the term you want me to define.
Then click the Submit button.<BR><BR>
</FONT>
</STRONG>
<INPUT TYPE="text" NAME="inputbox"
VALUE="">
<INPUT TYPE="button" NAME="submtbtn"
Value="Submit"
onClick="dbsearch(queryForm)">
<!--When the user clicks the Submit
button, the JavaScript routine
--dbsearch will execute.-->
<SCRIPT LANGUAGE="JAVASCRIPT">
function dbsearch(form) {
var searchString=document.queryForm.inputbox.value;
<!--Set the variable searchString
equal to the phrase the user
--entered.-->
<!--Code here to pass the search string the user has entered to your
--database/SQL server; the section “The
Dynamic Display of Text and
--Figures” later in this chapter
gives one example.-->
window.open("peaceful.jpg","NAVIGATE");
<!--Clear the frame by using the built-in JavaScript method
--window.open to display the canvas
in the JPEG file peaceful.-->
}
</SCRIPT>
</FORM>
</P>
</BODY>
</HTML>
The JPEG file links.jpg is the source for the image map displayed in both the top and bottom navigation frames. The HTML document shown below, javsimap.htm , controls this map, in part through the use of a CSS1 style sheet and in part through more complex scripting than we’ve needed to this point.
<HEAD>
<STYLE TYPE="text/css">
<!--Define the type of style sheet used.-->
#elMenu { position: relative }
<!--The element defined as Menu
will be positioned relative to
--other elements.-->
#elMenuUp {
<!--The element defined as MenuUp
will be positioned absolutely
--within the frame.-->
position: absolute;
top: 0;
left: 0
}
#elMenuOver {
position: absolute;
visibility: hidden;
<!--The element defined as MenuOver
will be positioned absolutely
--within the frame and will be hidden,
or transparent.-->
top: 0;
left: 0
}
-->
</STYLE>
<SCRIPT LANGUAGE="JavaScript">
<!--
ver4 = (document.layers ||
document.all) ? 1 : 0;
if (ver4) {
<!--Find out the version of Navigator being used
--If it’s Communicator, that is, version 4, do the following.-->
secondIm = "<IMG
SRC='links.jpg' USEMAP='#linksMenu'
WIDTH=500 HEIGHT=22
BORDER=0>";
<!--Define the image to be used as the basis of the image map.-->
arPopups = new Array()
<!--Create the array that will index the image map.-->
}
else { secondIm = "" }
<!--If you’re not dealing with Communicator, these features will
--be defined later.-->
function setBeginEnd(which,from,to) {
<!--This function tracks the coordinates of the portion of
--the image map being activated or deactivated.-->
if (!ver4) { return };
<!--Since we’ve already dealt with Communicator, we can
--bypass this code if that’s the version running.-->
arPopups[which] = new Array();
arPopups[which][0] = from;
arPopups[which][1] = to;
}
function mapOver(which,on) {
<!--This function takes actions specific to the part of
--the image map being activated or deactivated.-->
if (!ver4) { return };
<!--Since we’ve already dealt with Communicator, we can
--bypass this code if that’s the version running.-->
if (document.all) { whichEl =
document.all.elMenuOver.style;
<!--if the cursor is in the periphery of the image map,
--apply transparency to the entire image map.-->
else { whichEl =
document.elMenu.document.elMenuOver };
<!--otherwise, only apply transparency to the current area
--of the image map.-->
if (on) {
whichEl.clip.left =
arPopups[which][0];
whichEl.clip.right =
arPopups[which][1];
<!--If one of the linkable areas of the image map is being moused
--over, grab the coordinates of that area.-->
whichEl.visibility = "visible"
<!--Also, make sure the area is visible.-->
}
else { whichEl.visibility =
"hidden" }
}
-->
</SCRIPT>
</HEAD>
<BODY>
<DIV ID="elMenu">
<!--The DIV tag was introduced in
HTML 3.0 to allow you to specify
--logical divisions in a page. Using
this capability also lets you
--do such things as align all the text in such a section with a
--single command.-->
<DIV ID="elMenuUp">
<IMG SRC="links.jpg"
USEMAP="#mpLinks" WIDTH=500 HEIGHT=22
BORDER=0>
</DIV>
<DIV ID="elMenuOver">
<!--Now we’re defining the behavior to be associated with
--style sheet elements.-->
<SCRIPT
LANGUAGE="JavaScript">
document.write(secondIm)
</SCRIPT>
</DIV>
</DIV>
<MAP NAME="mpLinks">
<AREA SHAPE="RECT" COORDS="0,0 145,15"
HREF="http://www.nwu.org"
onMouseOver="mapOver(2,true)"
onMouseOut="mapOver(2,false)">
<AREA SHAPE="RECT" COORDS="160,0 305,15
HREF="http://www.altavista.digital.com"
onMouseOver="mapOver(3,true)"
onMouseOut="mapOver(3,false)">
<AREA SHAPE="RECT" COORDS="320,0 465,15"
HREF="http://www.opentext.net"
onMouseOver="mapOver(4,true)"
onMouseOut="mapOver(4,false)">
</MAP>
<!--The coordinates in this map definition agree precisely with
--the size of the JPEG file that is its source image.
--Note also that this definition uses the built-in JavaScript event
--onMouseOver to pass parameters to
the JavaScript in this file.-->
</BODY>
</HTML>
Surely the simplest of the many HTML files that make up the NWU page, these frames employ no scripting of any kind. Nor do they require any but the most basic tags.
The files in question are banner.htm and purpose.htm.
The file banner.htm.
<HTML>
<BODY BGCOLOR="#FFFBF0">
<P ALIGN=CENTER>
<FONT
SIZE=5
<EM>
<STRONG>
Dear Tech Writer...
</EM>
</STRONG>
</FONT>
</P>
</BODY>
</HTML>
The file purpose.htm.
<HTML>
<BODY BGCOLOR="#A6CAF0">
<P>
<FONT SIZE=2>
<EM>
Hi, and welcome to the National Writers Union's
<STRONG>
Dear Tech Writer.
</STRONG>
We hope, through this page, to help those of you who wish to learn more about
technical writing,
and especially about writing on data processing-related subjects.
</EM>
</FONT>
</P>
</BODY>
</HTML>
One of the
design requirements of the NWU page is that it have sound linked to the local
navigation frame defined by navigate.htm. This audio is to be played only as
part of a warning generated if the user attempts unauthorized or
ill-advised actions.to
The second
example of more sophisticated dynamic behavior in the NWU page is the its
ability to query one or more databases, which we plan to incorporate in it as
part of the project’s ongoing evolution.
This section presents code that you might use to accomplish these behaviors in JavaScript-capable environments.
The file js_sound.htm
<HTML>
</A>
<FONT COLOR = "#0000DF">
<PRE>
<FRAMESET ROWS="0,*" FRAMEBORDER=0 BORDER=0>
<!--Note that the sound-frame has no rows, columns, or border.-->
<FRAME
SRC="blank.htm"
<!--The file blank.htm is truly empty; it serves only to
--allow us to embed sound.-->
NAME="SOUNDFRAME"
SCROLLING=NO
MARGINHEIGHT=0
MARGINWIDTH=0
NORESIZE>
</FRAMESET>
</PRE>
</FONT>
<!--The JavaScript routine presented next controls the playing of the WAV
file housing the alert sound.-->
function play_sound(file)
{
with (parent.sound_frame.document)
<!--The line above defines the parent document of the sound frame,
--in this case, the local navigation frame, as that with which
--the sound will be associated.-->
{
open (“blank.htm”);
writeln ('<EMBED
SRC="..." WIDTH=2 HEIGHT=2
<!--Place the name of the source file containing the sound
--you want to play within these quotes.-->
CONTROLS=console VOLUME=100 LOOP=10
AUTOSTART=TRUE
NAME="music_embed">;');
<!--By writing this HTML line to blank.htm, we also specify
--parameters, such as volume and number of repetitions,
--that will be applied to the sound to be played.-->
close ();
}
</HTML>
The file get_quer.c shown here is CGI-compliant, and uses C++ to extract user input to be forwarded to a server-side database. You’ll notice, in scanning through this example, that writing such code requires a degree of programming sophistication, as well as an understanding of C and C++.
#include
<stdio.h>
/* Tell the compiler to include the library stdio,
or standard I/O,
in your executable.*/
#ifndef NO_STDLIB_H
#include <stdlib.h>
#else
char *getenv();
#endif
/* If the constant NO_STDLIB_H hasn’t
been defined, tell the compiler
to include the library stdlib in your
executable. Otherwise, tell it
to grab characteristics of your operating environment.*/
typedef struct {
char name[128];
char val[128];
} entry;
/*Create and define the compound variable called entry, which will
store user input.*/
void getword(char *word, char *line, char stop);
char x2c(char *what);
void unescape_url(char *url);
void plustospace(char *str);
/*Create variables that store pointers to such aspects of user input
as the words, lines, and end-of-line it includes.*/
main(int argc, char *argv[]) {
entry entries[10000];
register int x,m=0;
char *cl;
printf("Content-type:
text/html%c%c",10,10);
if(strcmp(getenv("REQUEST_METHOD"),"GET")) {
printf("This script should
be referenced with a METHOD of GET.\n");
printf("If you don't
understand this, see this ");
printf("<A
HREF=\"http://www.ncsa.uiuc.edu/SDG/Software/Mosaic/Docs/fill-out-forms/overview.html\">forms
overview</A>.%c",10);
exit(1);
/*This program is kind enough to point those who employ it
inappropriately to sources of further help before bailing out.*/
}
cl = getenv("QUERY_STRING");
/*Then the code gets down to business, and grabs the query.*/
if(cl == NULL) {
printf("No query information
to decode.\n");
exit(1);
/*If nothing’s been entered, it responds appropriately, and exits.*/
/*Otherwise, it parses the user’s entry, and prints results with
appropriate HTML tags.*/
}
for(x=0;cl[0] != '\0';x++) {
m=x;
getword(entries[x].val,cl,'&');
plustospace(entries[x].val);
unescape_url(entries[x].val);
getword(entries[x].name,entries[x].val,'=');
}
printf("<H1>Query Results</H1>");
printf("You submitted the
following name/value pairs:<p>%c",10);
printf("<ul>%c",10);
for(x=0; x <= m; x++)
printf("<li>
<code>%s = %s</code>%c",entries[x].name,
entries[x].val,10);
printf("</ul>%c",10);
}
Alan, the text and code samples in this last section don’t actually appear in the “live” page. But I’ve included them for you for two reasons. First, they cover Microsoft’s “current record binding” scheme, and therefore relate to one characteristic of Microsoft’s definition of DHTML. And second, if you decide to include them in the Web site re: the book, they’ll hopefully help you dovetail more closely with the book’s presentation of the topic.
By all means, let me know if there’s anything else you need.
Current-record binding is the name given by Microsoft to their recently-developed technique for sorting and filtering retrieved data solely through the client browser. This technique thereby spares the user the finger-drumming which often accompanies waiting for the results of server-based sorts and similar operations. As important, by reducing the number of calls to the server, current-record binding improves overall throughput and reduces bandwidth demands.
To illustrate current-record binding, we will use:
· a hypothetical database which we’ll assume was created in Microsoft Access
· VBScript code
· the existing HTML tags <OBJECT>, <SPAN>, and <TABLE>
· the new attributes, proposed by Microsoft to the W3C as extensions to HTML, <DATAFLD> and <DATASRC>
We’ll assume further that the schema for the data file we’ve created in Access defines the fields described in Table 18-1.
Table 18-1 Partial Schema of a Gardening Database
|
This field |
is of this data type |
and represents |
|
Flower |
string |
a type of flower |
|
Light |
string |
the type of light the flower in question needs in order to thrive; for example, “full sun” |
|
Soil |
string |
the type of soil in which the flower in question is most likely to thrive; for instance, “acid” |
Here are a few sample records from our fictitious file.
Flower, Light, Soil
Zinnia, full sun, acid
Portulaca, full sun, poor
Nierembergia, shade, clay
Because our data includes a header line that defines field names, VB will be able to use its Tabular Data Control to read our data, and to prepare that data for being bound to HTML-based forms controls. But in order to complete this process of making VB’s life easier, we must add appropriate code to an HTML document. That is, we must incorporate the Tabular Data Control into the HTML page with the <OBJECT> tag.
Tip
Remember, from some of our earlier discussions, what object-oriented programming, and objects, allow us to accomplish. An object can be thought of as a composite variable that enables us to define or deal with a number of characteristics of a single entity.
In the sample <OBJECT> tag below, for example, we’ve defined:
· an overall object which happens to be a Tabular Data Control
· the name of the file from which we’ll draw the source data which that control will help us manipulate
· the nature of the delimiter which will separate units within a record from that file
· the fact that we want VB to use the header that’s included in our data file
<OBJECT ID=TDC>
<PARAM NAME=DataURL Value="GardenInput.txt">
<PARAM NAME=TextQualifier Value=",">
<PARAM NAME=UseHeader Value=True>
</OBJECT>
Table 18-2 explains this code fragment in more detail.
Table 18-2 Coding to Create a Tabular Data Control
|
This line of code |
means |
|
<OBJECT ID=TDC> |
the object we’re creating will act as a tabular data control, that is, a template which can be used to pass data back and forth between client and server |
|
<PARAM NAME=DataURL Value="GardenInput.txt"> |
the source of the data against which we’ll match this template is the file called GardenInput.txt, at the URL we’ve defined elsewhere in our HTML document |
|
<PARAM NAME=TextQualifier Value=","> |
fields within our data records will be indicated and separated by commas |
|
<PARAM NAME=UseHeader Value=True> |
we want to use the header line of the file as the means of identifying individual fields within retrieved records |
|
</OBJECT> |
we’re done setting up our template/object |
Tip
A number of standard HTML elements can be used in conjunction with both DATASRC and DATAFLD. Among these are:
· A
· DIV
· FRAME
· IMG
· INPUT
· LABEL
· MARQUEE
· OBJECT
· SPAN
· TEXTAREA
In addition to these and others, you may also use the tag <TABLE>, but only with DATASRC, not DATAFLD.
How does Internet Explorer 4.0 field all this? Here’s an introduction of the team. IE4 includes two agents, or specialized software components, which exist specifically to handle record and field binding. These are its:
· binding agent, which moves data from the appropriate database fields into the HTML fields or other elements with which that data has been associated, or, to put it another way, to which that data has been bound
· repetition agent, which repeatedly searches tables or data files for records which meet specified criteria
Now that you’ve met the players, let’s move on to the play-by-play.
1. When an HTML document is parsed, that is, is dissected to determine the meaning of its codes and directives, IE4’s binding agent tracks all elements which have been coded with the DATAFLD attribute.
2. Then, the binding agent fills these fields or elements with data from the field within the data source object with which the HTML field has been associated.
3. At the same time, the binding agent monitors and records any changes the user might make to this bound data, and sends the modified data, if any, back to the server for re-incorporation into the data source.
4. Backing up the binding agent on every play it makes is IE4’s table repetition agent. This second specialized software component applies the record template that we have supplied through the <OBJECT> tag to every record in our data source file. The table repetition agent does this by:
· searching out any <TABLE> tag that contains the DATASRC attribute in an HTML document
· successively applying the template our <OBJECT> tag represents to record after record of the indicated data source, and sending records derived from that source according to that template to the HTML page, where that data is ...
· available to and actually displayed by the binding agent
That’s current record binding in a nutshell. But in order to use this technique to either sort or filter retrieved data, we must write code; Internet Explorer 4.0 is bright, but it’s not a mind-reader. So, let’s show you some code that might execute when our user indicates, by clicking the button we’ve labeled Flower, that he or she wants to see information on posies we might plant in a shade garden. We’ll begin with a section of code that could sort data retrieved from the server.
<INPUT TYPE=BUTTON VALUE="Flower" ONCLICK=flower_sort()>
<SCRIPT>
function flower_sort() {
TDC.SortAscending=true;
TDC.SortColumn="Flower";
TDC.Reset(); }
</SCRIPT>
Now let’s use Table 18-3 to elaborate upon this code.
Table 18-3 Coding to Sort Retrieved Data
|
This line of code |
means |
|
<INPUT TYPE=BUTTON VALUE="Flower" ONCLICK=flower_sort()> |
clicking this button tells HTML, through the VBScript code we’ve embedded, that we want to see data on flowers, rather than on soil or water conditions, for instance |
|
<SCRIPT> |
here’s where the script we’ve embedded begins |
|
function flower_sort() { |
here’s where the function which will sort the names of flowers retrieved from our data file begins |
|
TDC.SortAscending=true; |
sort the data retrieved from the file represented by the object TDC in ascending order |
|
TDC.SortColumn="Flower"; |
run that ascending-order sort on the contents of the filed Flower |
|
TDC.Reset(); } |
start all over again to sort the next set of retrieved records/fields |
|
</SCRIPT> |
here’s where the embedded script ends |
Filtering, of course, is another matter. Recall that, in setting up this example, we said we wanted to gather data on flowers which would be good candidates for a garden in a shady spot. That type of conditional retrieval and presentation fairly screams filter. So, we must expand the code we just wrote. Here’s that extended code.
<INPUT TYPE=BUTTON VALUE="Flower" ONCLICK=flower_sort()>
<SCRIPT>
function flower_filter() {
TDC.FilterColumn="Light";
TDC.FilterValue=flower.value;
TDC.FilterCriterion="Shade";
TDC.Reset(); }
function flower_sort() {
TDC.SortAscending=true;
TDC.SortColumn="Flower";
TDC.Reset(); }
</SCRIPT>
Once again, we’ll turn to a table, Table 18-4, to explain this sample code.
Table 18-4 Coding to Both Filter and Sort Retrieved Data
|
This line of code |
means |
|
<INPUT TYPE=BUTTON VALUE="Flower" ONCLICK=flower_sort()> |
clicking this button tells HTML, through the VBScript code we’ve embedded, that we want to see data on flowers, rather than on soil or water conditions, for instance |
|
<SCRIPT> |
here’s where the script we’ve embedded begins |
|
function flower_filter() { |
here’s where the function which will filter retrieved data begins |
|
TDC.FilterColumn="Light"; |
filter the data retrieved from the file represented by the object TDC on the basis of the field (column) Light ... |
|
TDC.FilterValue=light.value; |
and of the values contained in that field ... |
|
TDC.FilterCriterion="Shade"; |
passing to the binding agent only those records which have a value equal to “Shade” in this field |
|
TDC.Reset(); } |
start all over again to filter the next set of retrieved records/fields |
|
function flower_sort() { |
here’s where the function which will sort the names of flowers retrieved from our data file begins |
|
TDC.SortAscending=true; |
sort the data retrieved from the file represented by the object TabDatCtrl in ascending order |
|
TDC.SortColumn="Flower"; |
run that ascending-order sort on the contents of the filed Flower |
|
TDC.Reset(); } |
start all over again to sort the next set of retrieved records/fields |
|
</SCRIPT> |
here’s where the embedded script ends |
Note
A Tabular Data Control without a Table? Yes ad no. Had we completely fleshed out our sample code, we would have included many lines of standard or very-nearly-standard HTML, like
<TABLE ID=GardenTable DATASRC=#TDC>
<TBODY>
<TR>
<TD><SPAN DATAFLD=Flower></SPAN></TD>
</TR>
in which we would have specified the nature and structure of the table our HTML document will use as the carton, so to speak, for the data we retrieve. But TABLE, TR, TD, and SPAN belong to standard, not Dynamic, HTML. They certainly don’t pertain directly to current record binding. So, for the purposes of this discussion, we’ve foregone them.
Tip
If the explanations in this section on current record binding seem a little stiff, just be thankful we haven’t given them to you in formal data pocessing jargon. In that style of speech, “filling elements” would be called “populating”, and “sending data back” would be called “propagating changes back”. We think the meaning is as clear if not more so when conveyed in English. And there’s something more important for you to understand here than differences in phrasing. The basic principles of programming will always apply, no matter the language used to describe them. So, current record binding can legitimately be seen simply as the association of values contained in variables, that is, pigeonholes in a computer’s memory, with external receptacles, such as records in a file somewhere on disk, or, as it happens, areas of an HTML document. While the latter usage is new, the principle has been around for a long, long time. So don’t let the jargon throw you.