Tabular Data Control

-Premshree Pillai

Introduction :

In web pages, it is possible to create instances of objects that can be used to perform tasks of varying nature. This is achieved using 'ActiveX controls' and 'Java Applets'. These objects are inserted into the web page using the <OBJECT> HTML tag. Each object has a 32-bit unique identifier that is inserted in the CLASSID attribute of the <OBJECT> tag.

Tabular Data Control :

The "Tabular Data Control" is a Microsoft ActiveX control built into Microsoft Internet Explorer. Using this object, it is possible to extract ordered (delimited) contents from an ASCII (normally we use the .txt extension) file into HTML elements i.e. suppose we have a text file that contains 3 fields (synonymous to columns in database systems) and these fields are delimited by a character, then it is possible to extract the values of these fields into a HTML page.

This object is very useful if we have relatively small amounts of data and need to update this data frequently and require client-side scripting. Thus, it can act like a small database.

The tabular data control is available in Internet Explorer 4 upwards. The only disadvantage of this control is that; it being an ActiveX control, only Internet Explorer supports it. (Netscape requires a plug-in)

Implementation :

The ActiveX control is initialized using the <OBJECT> tag. The CLASSID (unique identifier) for the tabular data control is :

CLSID:333C7BC4-460F-11D0-BC04-0080C7055A83
Thus we initialize this control in a web page as follows :

<OBJECT ID="SomeID" CLASSID="CLSID:333C7BC4-460F-11D0-BC04-0080C7055A83">
...
...
...
</OBJECT>

Any object, like applets, has a number of parameters. Parameters of the object are specified using the <PARAM> tag. The tabular data control has around 7 parameters. Here, I'll discuss only the more important ones :

DataURL : The path of the file that contains the data. For eg "data.txt".
UseHeader : When set to true, it indicates that we want to use the field names for referencing a particular field. Normally we always set it to true. In some applications the field names (header) may not be required. The default value is false.
TextQualifier : The character at the beginning and end of a text that qualifies that text. For eg ~My name is Premshree~. Here the TextQualifier is '~'.
FieldDelim : The Field Delimiter is used to distinguish between the different data fields of the data file. For eg, consider a data file where we have the fields name, age and sex; then the values for these fields will be written as *SomeName*|*SomeAge*|*SomeSex*. Here, the field delimiter used is '|'. Here, I have used '*' as the text qualifier.

Thus, the complete initialization will look as follows :

<OBJECT ID="SomeID" CLASSID="CLSID:333C7BC4-460F-11D0-BC04-0080C7055A83">
<PARAM NAME="DataURL" VALUE="YourDataFile.txt">
<PARAM NAME="UseHeader" VALUE="TRUE">
<PARAM NAME="TextQualifier" VALUE="~">
<PARAM NAME="FieldDelim" VALUE="|">
</OBJECT>

The parameter names are not case sensitive.

The TextQualifier and FieldDelim parameters can be any character. Choose a character that you are less likely to use in your text.

Examples :

In these examples, I will use the text qualifier as "~" and field delimiter as "|". I use the .txt extension for the data files. You can use any extension you want.

First, let us consider a simple example where I store my name and age in a text file data1.txt. Now, I will display my name and age using the tag. This is how it is done :

Listing 1.0 (data1.txt)

name|age
~Premshree Pillai~|~19~

Now, I will extract this data and display it in a web page as follows :

Listing 1.1 (data1.htm)

<OBJECT ID="data1" CLASSID="CLSID:333C7BC4-460F-11D0-BC04-0080C7055A83">
        <PARAM NAME="DataURL" VALUE="data1.txt">
        <PARAM NAME="UseHeader" VALUE="TRUE">
        <PARAM NAME="TextQualifier" VALUE="~">
        <PARAM NAME="FieldDelim" VALUE="|">
</OBJECT>

<SPAN DATASRC="#data1" DATAFLD="name"></SPAN>

<SPAN DATASRC="#data1" DATAFLD="age"></SPAN>

The output will display : Premshree 19

Note the attributes within the SPAN tags. DATASRC specifies the data source to use, which is same as the ID of the object we have initialized (here, 'data1'). The DATAFLD attribute specifies which field of the data we want to display. The data file data1.txt had two fields 'name' and 'age' as you can see. Specifying the DATAFLD as 'name' will display the name.

Note that using the same method as above you can extract data from a text file into any HTML element; but the above method is inefficient in that if our data file contains more than 1 entry, we will not be able to extract all the values directly.

In these cases we use the tag. The TABLE tag has a special property as we will see in the following example.

Consider a simple example where we store the name, age and sex of 3 persons in a text file. Now, we want to extract this data and display it on the web page in a tabular form.

The text file looks like this :

Listing 2.0 (data2.txt)

name|age|sex
~Premshree Pillai~|~19~|~male~
~Vinod~|~18~|~male~
~Usha~|~19~|~female~

Now, we can extract all of the above data and display the same in a tabular form as follows :

Listing 2.1 (data2.htm)

<OBJECT ID="data2" CLASSID="CLSID:333C7BC4-460F-11D0-BC04-0080C7055A83">
        <PARAM NAME="DataURL" VALUE="data2.txt">
        <PARAM NAME="UseHeader" VALUE="TRUE">
        <PARAM NAME="TextQualifier" VALUE="~">
        <PARAM NAME="FieldDelim" VALUE="|">
</OBJECT>

<TABLE DATASRC="#data2" BORDER="2">
<THEAD>
        <TH>Name :</TH>
        <TH>Age :</TH>
        <TH>Sex :</TH>
</THEAD>
<TR>
        <TD><SPAN DATAFLD="name"></SPAN></TD>
        <TD><SPAN DATAFLD="age"></SPAN></TD>
        <TD>>SPAN DATAFLD="sex"></SPAN></TD>
</TR>
</TABLE>

The output will look like this :

Name :	Age :	Sex :
Premshree Pillai	19	male
Vinod	18	male
Usha	19	female

Thus, we have specified the three data fields (DATAFLD) in 3 different tags (columns) only once. The web page automatically displays all the 3 sets of values (3 rows). Thus, we can add as much content as we want to the text file and we need not make any modifications to the HTML code that extracts these values.

Tabular Data Control and JavaScript :

It is possible to manipulate the tabular data control object using JavaScript. In the first example that we saw, the element displayed the first entry of the data file. Now, suppose we add another entry to the file; the data file (data1.txt) now looks like this :

name|age
~Premshree Pillai~|~19~
~Vinod~|~18~

Now, if we want to see the second entry (i.e. Vinod 18), then that can be done as follows :

<OBJECT ID="data2" CLASSID="CLSID:333C7BC4-460F-11D0-BC04-0080C7055A83">
        <PARAM NAME="DataURL" VALUE="data2.txt">
        <PARAM NAME="UseHeader" VALUE="TRUE">
        <PARAM NAME="TextQualifier" VALUE="~">
        <PARAM NAME="FieldDelim" VALUE="|">
</OBJECT>

<SCRIPT LANGUAGE="JavaScript">
/* Get the complete data record set */
var dataSet=data1.recordset;

/* Go to next data */
dataSet.moveNext();
</SCRIPT>

<SPAN DATASRC="#data1" DATAFLD="name"></SPAN>

<SPAN DATASRC="#data1" DATAFLD="age"></SPAN>

Now, the output will be : Vinod 18

The above script is self explanatory : Initially we store the entire data of the data file into a variable dataset using the recordset method. The moveNext() method points to the next data item (next row). Some of other methods that can be used are :

moveFirst() : Point to the first data item (first row).
moveLast() : Point to the last data item (last row).
EOF : This property is used to check if we have reached the end of the file.

Now, I'll wrap up this article with a more dynamic example : I'll create a JavaScript Ticker that ticks a number of messages with each message pointing to a particular URL. Here, the ticker will read its messages and the corresponding URL from a text file (tickerData.txt)

Listing 3.0 (tickerData.txt)

~message~|~messageURL~
~Free JavaScripts by Premshree Pillai~|~http://premshree.resource-locator.com/javascripts.htm~
~Free PerlScripts by Premshree Pillai~|~http://premshree.resource-locator.com/perl.htm~
~My Journal~|~http://premshree.resource-locator.com/j~

Listing 3.1 (tickerStyle.css)

.tickerStyle{font-family:verdana,arial,helvetica; color:#666699; font-weight:bold;
font-size:8pt; background:#EEEEFF; border-right:#666699 solid 2px;
 border-left:#666699 solid 1px; border-top:#666699 solid 1px;
border-bottom:#666699 solid 2px; padding:3px; width:400px;
text-align:center; text-decoration:none}

.tickerStyle:hover{font-family:verdana,arial,helvetica; color:#666699;
font-weight:bold; font-size:8pt; background:#DDDDEE; border-right:#666699 solid 1px;
border-left:#666699 solid 2px; border-top:#666699 solid 2px;
border-bottom:#666699 solid 1px; padding:3px; width:400px;
text-align:center; text-decoration:none}

Listing 3.2 (ticker.htm)

<html>
<head>
<title>JavaScript Ticker (using Tabular Data Control)</title>
<link rel="stylesheet" href="tickerStyle.css">
<!-- BEGIN JAVASCRIPT TICKER USING TABULAR DATA CONTROL -->
<script language="JavaScript">
// JavaScript Ticker
// - using Tabular Data Control
// By Premshree Pillai

/*
        The Ticker function
        objName : the ID of the object to be used as data source
        maxMsgs : the number of messages in the data file
        counter : to keep count of the messages
        timeOut : delay (in milliseconds)
*/

function TDC_Ticker(objName, counter, maxMsgs, timeOut)
{
        try
        {
                eval('tickerSet=' + objName + '.recordset');
                if(!tickerSet.EOF && counter<maxMsgs-1)
                {
                        tickerSet.MoveNext();
                        counter++;
                }
                else
                {
                        counter=0;
                        tickerSet.MoveFirst();
                }
                setTimeout("TDC_Ticker('"+objName+"','"+counter+"','"+maxMsgs+"',
'"+timeOut+"')", timeOut);
         }
        catch(e)
        {
                alert('This Ticker works with IE 4+ only.');
        }
}
</script>
<!-- END JAVASCRIPT TICKER USING TABULAR DATA CONTROL -->
</head>
<body bgcolor="#FFFFFF">

<!-- BEGIN TICKER PLACEMENT -->
<center>
<object id="ticker" classid="CLSID:333C7BC4-460F-11D0-BC04-0080C7055A83">
        <param name="DataURL" value="tickerData.txt">
        <param name="UseHeader" value="TRUE">
        <param name="TextQualifier" value="~">
        <param name="FieldDelim" value="|">
</object>
<a href="" datasrc="#ticker" datafld="messageURL" class="tickerStyle">
        <span id="tickerDiv" datasrc="#ticker" datafld="message"></span>
</a>
<script language="JavaScript">
var tickerMaxMsgs=3; // Maximum Messages in the Data File
var tickerCount=tickerMaxMsgs;
new TDC_Ticker('ticker',tickerCount,tickerMaxMsgs,2000); // Set the Ticker
</script>
</center>
<!-- END TICKER PLACEMENT -->

</body>
</html>

The script is self explanatory.

You can download all the examples given in this article from :
http://premshree.resource-locator.com/articles/tdc_examples.zip.

I hope you have found this article useful. You can mail me your comments/suggestions etc.

© 2002 Premshree Pillai.
Website: http://premshree.resource-locator.com