|
Introduction
Companies often have large amounts of legacy, or old, data stored in varying formats across their networks. Old reports running on old mainframes need to be accessed over the Web. From Unix and Novell file servers to IBM mainframes, legacy data is everywhere. And this situation's not likely to change based on the reluctance to alter old systems for change's sake, especially if the systems are working fine There is, however, a need to access this legacy data over the Web. Internet Explorer (IE4) and higher delivers the perfect tool for doing this, the Tabular Data Control. The tool can also limit the amount of server-side processing needed to configure and display this data by allowing us to do this client side.
The Tabular Data Control is a Data Source Object. This is simply a term for an object that can provide information to IE in a specific format. If you're interested in writing your own Data Source Object, see the link at the end of this article.
Benefits of the Tabular Data Control
A key to maintaining code is to separate style from structure. The introduction of Cascading Style Sheets years ago allowed Web pages to separate the display format from the source code. However, there is more to a Web page than just style and structure. Content and data manipulation are important, as well as Web pages starting to behave more like applications. With a Data Source Object like the Tabular Data Control, the content of the page can be removed. This tool lets us create pages that are completely dynamic, with minimal coding and maintainability. As well, the Tabular Data Control relieves the server from a lot of processing because the client PC does most of the data manipulation and the configuring of its display format.
Using the Tabular Data Control as a Data Source Object
Since the Tabular Data Control is bundled with IE4 and above, there's nothing to install on your clients PCs. The tool can read any type of data source in text format that is either in the default Comma Separated Value (CSV) format, which Excel uses in its Save As, or in a format you specify. This flexibility enables the Web page designer to quickly and easily connect to a wide variety of data formats without doing a lot of coding.
Example 1: Connecting the Tabular Data Control to a data source and displaying it in a simple HTML table
In the first example, the format is a rather unique one in order to illustrate that it's the format is up to you. Later in this article, we'll revert to the CSV-type format most common to legacy data.
Binding an HTML Table to the data inside the Tabular Data Control
The data file in this example concerns two employees. The data is delimited by | and % characters and has a header with the field names. The field names are not case sensitive. Upper case is used simply to make the headers easier to read.
The file employees.txt is located on the Web server in the same folder as the Web page calling it. Legacy data usually isn't so conveniently located. At the end of this article, I'll show you how to connect your Web server to remote data.
Filename: employees.txt
%NAME%|%AGE%|%GENDER%
%Ian Vink%|%30%|%Male%
%Runa Ali%|%30%|%Female%
<head>
<OBJECT ID="tdcEmployees" WIDTH=0 HEIGHT=0
CLASSID="CLSID:333C7BC4-460F-11D0-BC04-0080C7055A83" >
<PARAM NAME="TextQualifier" VALUE="%">
<PARAM NAME="FieldDelim" VALUE="|">
<PARAM NAME="DataURL" VALUE="employees.txt">
<PARAM NAME="UseHeader" VALUE="true">
</OBJECT>
</head>
<body>
<table border=1 DATASRC="#tdcEmployees">
<tr>
<td><span datafld="NAME"></span></td>
<td><span datafld="AGE"></span></td>
<td><span datafld="GENDER"></span></td>
</tr>
</table>
</body>
When IE loads the page it creates the Tabular Data Control. Then it downloads the text file specified by the DataURL parameter into its internal data structure. After that happens, the table, which is bound to the Tabular Data Control, renders that data. The result is a simple table.
| Ian Vink | 30 | Male |
| Runa Ali | 30 | Female |
Code Explanation: The <OBJECT> in the <HEAD> Section
Although strictly speaking the Tabular Data Control doesn't have to be placed in the HEAD section of your HTML document, it's recommended to ease code maintenance. Specifying the CLASSID in the OBJECT tag creates the Tabular Data Control. The parameters tell the Tabular Data Control where to get the data, describe the data format, and more.
The ID in the Tabular Data Control is important. It links the data (called data binding) to a control on your page. In this case, it's called "tdcEmployees." Prefix ID names with the control type for better code readability. In this case I used "tdc" as a prefix.
Here's a list of the parameters you can specify for the Tabular Data Control. For the most part your data is standard text and few parameters need to be set. International companies, which use UNICODE, may need to set the CharSet property though to render the text properly.
|
Property |
Description |
|
CharSet |
Identifies the character set used by the data file. The default character set is latin1. |
|
DataURL |
Location of the data file as a URL. |
|
EscapeChar |
Identifies the character to be used as an escape character in the data file. There is no default escape character. |
|
FieldDelim |
Identifies the character that is used to mark the end of a field in the data file. The default character is the comma (,). |
|
Language |
Specifies the language used to generate the data file (this specifier uses the HTML standard codes based on ISO 369). The default specifier is eng-us. |
|
TextQualifier |
Specifies the optional character that surrounds a field. |
|
RowDelim |
Identifies the character used to mark the end of each row of data. The default character is the newline (NL) character. |
|
UseHeader |
Specifies whether the first line of the data file contains header information. The default value is FALSE. |
Displaying the Data: Looping without Looping?
One you link the HTML Table to the Tabular Data Control, the table will consume the data provided in an HTML format that you specify in the table design.
<table border=1 DATASRC="#tdcEmployees">
<tr>
<td><span DATAFLD="NAME"></span></td>
<td><span DATAFLD ="AGE"></span></td>
<td><span DATAFLD ="GENDER"></span></td>
</tr>
</table>
The DATASRC attribute of the HTML Table specifies which Tabular Data Control to use, since you can have more than one Tabular Data Control per page. The # mark is required, and the rest is simply the ID of the Tabular Data Control.
<table border=1 DATASRC="#tdcEmployees">
The table will repeat all the data automatically using a behind-the-scenes tool called the Table Repetition Agent. Just specify the DATAFLD in a span tag that matches a field in the data source and it will be displayed repeatedly in the Table.
<tr>
<td><span DATAFLD="NAME"></span></td>
<td><span DATAFLD ="AGE"></span></td>
<td><span DATAFLD ="GENDER"></span></td>
</tr>
Controlling the Number of Rows Displayed
A file with 2,000 employees would be too much to display all at once. You can limit the number of rows (records) shown by setting the table's parameter DATAPAGESIZE equal to the number of rows. This example limits the display to just 2 records:
<table border=1 DATASRC="#tdcEmployees" DATAPAGESIZE="2">
Example 2: Accessing the Tabular Data Control's records with an ADO recordset
Displaying data straight out of a table is a fairly simple task.
The following code demonstrates how to conditionally display only the Male members of the employee data file used in Example 1.
<HTML>
<head>
<OBJECT ID="tdcEmployees" WIDTH=0 HEIGHT=0
CLASSID="CLSID:333C7BC4-460F-11D0-BC04-0080C7055A83" >
<PARAM NAME="TextQualifier" VALUE="%">
<PARAM NAME="FieldDelim" VALUE="|">
<PARAM NAME="DataURL" VALUE="employees.txt">
<PARAM NAME="UseHeader" VALUE="true">
</OBJECT>
<SCRIPT LANGUAGE=vbscript>
<!--
'----------------------------------------------------
'A page level Recordset variable for holding the data
'----------------------------------------------------
Dim oRS
Sub window_onload
set oRS= tdcEmployees.recordset
'-----------------------------------------
' Loop though the recordset and display
' the male employees
'-----------------------------------------
do until oRS.eof
if oRS("GENDER") = "Male" then
'----------------------------------------
' Add HTML to the Empty-at-load DIV item
'----------------------------------------
output.innerHTML = output.innerHTML & "<b>Employee Name:</b> " & oRS("NAME") & " <b>Age:</b> " & oRS("Age") & "<br>"
end if
oRS.movenext
loop
'--------------------------------------------------
' Clean out the memory allocated to the recordset
'--------------------------------------------------
set oRS = nothing
End Sub
-->
</SCRIPT>
</head>
<body>
<div id=output></div>
</body>
</HTML>
Code Explanation: The OnLoad Event of the Window Object
On the OnLoad event of the Window, the Tabular Data Control's data is passed to an ADO recordset called the object recordset or oRS. Then this recordset is looped through and when the field GENDER is equal to "male," the employee's record is displayed. Although this is a rather simple example, it demonstrates a very important point. The server wasn't required to do anything. All database processing is done on the client side; the server only had to send a small amount of text data. With hundreds of client connections, this could be a considerable resource-saving design.
You could have a drop-down box that asks for gender and on the OnClick event of the button associated with it, the <DIV> tag's innerTEXT could be filled with the desired data., all without a trip to the server.
Example 3: Navigating though the Tabular Data Control's data client side
To this point this article has looked at how to connect client-side HTML elements to data sent to the Tabular Data Control. For small sets of data it's sufficient to just dump the data to the screen. However, in order to view larger sets of data, client-side navigation is required. This is where four methods of the Tabular Data Control come in handy. The methods -- firstPage, nextPage, previousPage, and lastPage -- move the data pointer correspondingly and let the user control what data is shown. Since the table is bound to the Tabular Data Control, it is updated automatically and instantly.
In this example a text file of quotes are controlled by the client. This kind of "Quote of the Day" or "Tip of the Day" display is popular on the Internet, but usually involves hits to the server for each new quote or tip. By sending a small text file to the Tabular Data Control, the user's PC handles the load of the database access and navigation.
The text file for this example is as follows. This time, however, it's in default CSV format, so few parameters have to be set on the Tabular Data Control object.
Filename: Quotes.txt
"ID","TITLE","TEXT"
"1","THOMAS WATSON, 1943","I think there is a world market for maybe five computers."
"2","STEVEN WRIGHT","Black holes are where God divided by zero."
"3","Bill Gates, 1981","640K ought to be enough for anybody."
The code is similar to the previous examples. However, four buttons are added at the bottom of the display.
<HTML>
<head>
<OBJECT ID="tdcQuote" WIDTH=0 HEIGHT=0
CLASSID="CLSID:333C7BC4-460F-11D0-BC04-0080C7055A83" >
<PARAM NAME="DataURL" VALUE="Quotes.txt">
<PARAM NAME="UseHeader" VALUE="true">
</OBJECT>
</head>
<BODY>
<TABLE ID="tdcQuote" datasrc="#tdcQuote" DATAPAGESIZE=1>
<TR STYLE="font-weight:bold" >
<TD>#</TD><TD>Title</TD><TD>Text</TD>
</TR>
<TR bgcolor=lightgrey>
<TD><DIV datafld="ID"></DIV></TD>
<TD><DIV datafld="TITLE"></DIV></TD>
<TD><DIV datafld="TEXT"></DIV></TD>
</TR>
</TABLE>
<BUTTON ID=cmdfirstPage onclick=" tdcQuote.firstPage()"><<</BUTTON>
<BUTTON ID=cmdpreviousPage onclick=" tdcQuote.previousPage()"><</BUTTON>
<BUTTON ID=cmdnextPage onclick=" tdcQuote.nextPage()">></BUTTON>
<BUTTON ID=cmdlastPage onclick=" tdcQuote.lastPage()">>></BUTTON>
</BODY>
</HTML>
The output looks like this:
Code Explanation: Navigation Buttons
Each of the four HTML buttons at the bottom has its onClick event call the corresponding navigation method of the Tabular Data Control. Since the table is bound to the Tabular Data Control, it is updated immediately and automatically. The table only displays one record since the DATAPAGESIZE attribute is set to 1.
<BUTTON ID=cmdpreviousPage onclick=" tdcQuote.previousPage()"><</BUTTON>
The advantages are huge when working with a large number of clients. There is minimal scripting needed, no load on the server, and instant response for the client. It's a perfect marriage of simplicity and functionality.
Specifying a Location for the Legacy Data on a Remote System
When the data you wish to access is not in the same folder on the web server, the Web administrator will have to create a Virtual Directory pointing to the data. Specify that URL in the DataURL parameter of the Tabular Data Control.
<PARAM NAME="DataURL" VALUE="http://somesite/virtualfolders/Quotes.txt">
Virtual Directories are essentially pointers from the Web server to data outside the Web server. The Virtual Directory looks and acts like it's a folder on the Web server. To create one, open the Web servers' Microsoft Management Console (MMC) and right click your web, then choose NEW | Virtual Directory and follow the wizard that appears.
The Tabular Data Control will navigate there and get the data. If the data moves, simply have the Web administrator change the pointer of the Virtual Directory. You won't have to change any of your code. Tools like SAMBA provide access to UNIX servers for NT domains. SAMBA, for example, is a freeware tool that allows NT machines to access UNIX data as a drive letter.
Note that MMC is a new universal took that all services and systems use to administer themselves. To see it. On a Win2K or NT machine, type MMC.EXE in the Run menu of the Start menu.
Accessing the Tabular Data Control's properties and methods in Visual InterDevInterdev allows access to the methods and properties of objects on Web pages. This eliminates the need to remember the names and arguments of each method or parameter. Once you've added the reference to the Tabular Data Control, its interface is completely exposed. Add a bit of client-side script to the page and the IntelliSence popup will appear once you press a dot after the tdcEmployees object. For help on the tool methods and properties, click the control and press F1 (requires MSDN installed). At the end of this document is a link to the Tabular Data Control site at Microsoft.
Accessing the Tabular Data Control's OCX
The Tabular Data Control is an ActiveX control and has a unique identifier called a CLASSID. This allows IE to identify it and find it on your system. If you search your registry for this key, you'll find a sub-hive that has its file name and ProgID so you could use it in your VB or C++ apps as well by adding it as a reference. But that's for another article.
Summary
The Tabular Data Control is a common tool that all IE 4+ browsers support. It gives you quick access to legacy data over an intranet or the Internet. Combined with a little scripting and Cascading Style Sheets, your Web page will be simple to maintain and enhance. The separation of style, content, and behavior provides the type of modularity demanded by large applications.
By putting data manipulation client side, server resources are conserved and clients get faster access to their data.
Links
Create Your Own Data Source Object:
http://msdn.microsoft.com/workshop/database/databind/comdatasources.asp
The Tabular Data Control:
http://msdn.microsoft.com/workshop/database/tdc/overview.asp#ch_tabdata_ovr
The Tabular Data Control Reference:
http://msdn.microsoft.com/workshop/database/tdc/reference.asp#tabdata_ref
Cascading Style Sheets:
http://msdn.microsoft.com/workshop/c-frame.htm?/workshop/author/default.asp
About the Author
Ian Vink is a Canadian who has worked all over the world in the IT sector,
most recently in Haifa, Israel. He has been an intranet Webmaster for
four years and has been writing code since 1982. He's taught computer
technology since 1994 and owns a number of Web stores. He's married to a
wonderful Australian Oracle designer. Please send comments or questions to
Ian at ian@ianvink.com.
|
