Using The Tabular Data Control in Internet Explorer

The output will display: Premshree 19

Note the attributes wthe 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 the 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 method 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 won’t be able to extract all the values directly.

In these cases we use the

tag. The TABLE tag has a special property, as we’ll 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, data2.txt looks like this:

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

Now, we can extract all the above data and display it in (via data2.htm) a tabular form as follows:

<OBJECT ID="data2" CLASSID="CLSID:333C7BC4-460F-11D0-BC04-0080C7055A83"> <br>
  <PARAM NAME="DataURL" VALUE="data2.txt"> <br>
  <PARAM NAME="UseHeader" VALUE="TRUE"> <br>
  <PARAM NAME="TextQualifier" VALUE="~"> <br>
  <PARAM NAME="FieldDelim" VALUE="|"> <br>
</OBJECT> <br>
 <br>
<TABLE DATASRC="#data2" BORDER="2"> <br>
<THEAD> <br>
  <TH>Name :</TH> <br>
  <TH>Age :</TH> <br>
  <TH>Sex :</TH> <br>
</THEAD> <br>
<TR> <br>
  <TD><SPAN DATAFLD="name"></SPAN></TD> <br>
  <TD><SPAN DATAFLD="age"></SPAN></TD> <br>
  <TD><SPAN DATAFLD="sex"></SPAN></TD> <br>
</TR> <br>
</TABLE>

The output will look like this :

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).

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, 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  <br>
~Premshree Pillai~|~19~  <br>
~Vinod~|~18~

Now, if we want to see the second entry (i.e. Vinod 18), we can do it like this:

<OBJECT ID="data1" CLASSID="CLSID:333C7BC4-460F-11D0-  <br>
BC04-0080C7055A83">  <br>
  <PARAM NAME="DataURL" VALUE="data1.txt">  <br>
  <PARAM NAME="UseHeader" VALUE="TRUE">  <br>
  <PARAM NAME="TextQualifier" VALUE="~">  <br>
  <PARAM NAME="FieldDelim" VALUE="|">  <br>
</OBJECT>  <br>
  <br>
<SCRIPT LANGUAGE="JavaScript">  <br>
/* Get the complete data record set */  <br>
var dataSet=data1.recordset;  <br>
  <br>
/* Go to next data */  <br>
dataSet.moveNext();  <br>
</SCRIPT>  <br>
  <br>
<SPAN DATASRC="#data1" DATAFLD="name"></SPAN>  <br>
  <br>
<SPAN DATASRC="#data1" DATAFLD="age"></SPAN>

Now, the output will be: Vinod 18

The above script is fairly self explanatory. Initially we store the entire data of the data file in 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 whether we’ve 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 displays 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 from the archive). For a full understanding of this code, you must be familiar with dynamic HTML techniques.

Here’s the tickerData.txt file:

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

And the tickerStyle.css file:

<OBJECT ID="data2" CLASSID="CLSID:333C7BC4-460F-11D0-BC04-0080C7055A83"> <br>
  <PARAM NAME="DataURL" VALUE="data2.txt"> <br>
  <PARAM NAME="UseHeader" VALUE="TRUE"> <br>
  <PARAM NAME="TextQualifier" VALUE="~"> <br>
  <PARAM NAME="FieldDelim" VALUE="|"> <br>
</OBJECT> <br>
 <br>
<TABLE DATASRC="#data2" BORDER="2"> <br>
<THEAD> <br>
  <TH>Name :</TH> <br>
  <TH>Age :</TH> <br>
  <TH>Sex :</TH> <br>
</THEAD> <br>
<TR> <br>
  <TD><SPAN DATAFLD="name"></SPAN></TD> <br>
  <TD><SPAN DATAFLD="age"></SPAN></TD> <br>
  <TD><SPAN DATAFLD="sex"></SPAN></TD> <br>
</TR> <br>
</TABLE>

And lastly, ticker.htm:

name|age  <br>
~Premshree Pillai~|~19~  <br>
~Vinod~|~18~

Frequently Asked Questions (FAQs) about Internet Explorer Control

What is Internet Explorer Control and how does it work?

Internet Explorer Control is a feature that allows developers to embed the functionalities of Internet Explorer into their applications. It works by using the WebBrowser ActiveX control, which can be added to any application and programmed using languages like C# or VB.NET. This control provides a range of functionalities, including navigation, history, and favorites, among others. It also allows developers to interact with the HTML document loaded in the control, enabling them to manipulate web pages or extract information.

How can I add the WebBrowser control to my application?

To add the WebBrowser control to your application, you need to open your project in Visual Studio, go to the Toolbox, and find the WebBrowser control under the “Common Controls” section. You can then drag and drop the control onto your form. Once added, you can start programming the control using the Properties window or directly in your code.

How can I navigate to a web page using the WebBrowser control?

To navigate to a web page using the WebBrowser control, you can use the Navigate method. This method takes a string parameter, which is the URL of the web page you want to navigate to. For example, to navigate to Google, you would use the following code: webBrowser1.Navigate("http://www.google.com");

How can I interact with the HTML document loaded in the WebBrowser control?

The WebBrowser control provides the Document property, which gives you access to the HTML document loaded in the control. This property returns an HtmlDocument object, which you can use to interact with the HTML elements in the page. For example, you can use the GetElementById method to find an element by its ID, and then manipulate its properties.

Can I use JavaScript with the WebBrowser control?

Yes, you can use JavaScript with the WebBrowser control. The control provides the InvokeScript method, which allows you to execute JavaScript code in the context of the loaded web page. This method takes a string parameter, which is the JavaScript code you want to execute.

How can I handle navigation events in the WebBrowser control?

The WebBrowser control provides several events that you can handle in your code. For example, the Navigating event is raised before the control navigates to a new web page, and the Navigated event is raised after the navigation is complete. You can handle these events to perform actions before or after navigation, such as showing a loading indicator or updating the address bar.

Can I control the Internet Explorer settings from my application?

Yes, you can control some of the Internet Explorer settings from your application. The WebBrowser control uses the same settings as the Internet Explorer application, so any changes you make to the settings will affect both the control and the application. However, keep in mind that this might not be desirable in all cases, as it could affect the user’s experience when using Internet Explorer.

How can I display HTML content directly in the WebBrowser control?

The WebBrowser control provides the DocumentText property, which you can use to display HTML content directly in the control. This property takes a string parameter, which is the HTML content you want to display. For example, you can use the following code to display a simple HTML page: webBrowser1.DocumentText = "

Hello, world!";

Can I use the WebBrowser control to download files?

Yes, you can use the WebBrowser control to download files. The control provides the Navigate method, which you can use to navigate to the URL of the file you want to download. The file will be downloaded in the same way as if the user had clicked on a download link in a web page.

Are there any limitations or issues I should be aware of when using the WebBrowser control?

One limitation of the WebBrowser control is that it uses the Internet Explorer rendering engine, which is not as modern or standards-compliant as the engines used by other browsers like Chrome or Firefox. This means that some web pages might not display correctly in the control. Also, the control might not work correctly if the user has disabled Internet Explorer on their system.

The above is the detailed content of Using The Tabular Data Control in Internet Explorer. For more information, please follow other related articles on the PHP Chinese website!