Click to return to the DHTML, HTML     
Data Binding Architecture     Binding HTML Elements to ...     Data Binding    
Web Workshop  |  DHTML, HTML & CSS

Adding a Data Source Object to a Page


When a Web author has identified the data that she wants to display on a page, the next step is to choose the data source object (DSO) that will supply the data, and to add a reference to the DSO to that page. Microsoft® Internet Explorer 4.0 ships with a number of data source objects. These include:

In addition to these data providers, Microsoft maintains a gallery of data source objects Non-MSDN link. Check this site to learn about other data providers as they become available.

A DSO can be implemented as an ActiveX® control or as a Java applet. The OBJECT element is used to embed an ActiveX control on the page; the APPLET element is used to embed a Java applet on the page. In general, Web authors can copy and paste the appropriate OBJECT or APPLET declaration corresponding to the DSO of their choosing and modify the PARAM tags appropriately. So that elements on the page can bind to the data source, the declaration should include the ID attribute.

Because the data source object specification imposes no requirements on the DSO regarding the object model it exposes, Web authors should familiarize themselves with the documentation associated with the DSO they select to provide data to their page.

Tabular Data Control (TDC)

The TDC is a simple DSO that provides access to delimited text files. This is the DSO used in the majority of the samples provided with this section. Consider using the TDC if:

The following example represents a declaration specific to the TDC.

<OBJECT CLASSID="clsid:333C7BC4-460F-11D0-BC04-0080C7055A83"
    ID=dsoComposer WIDTH=0 HEIGHT=0>
    <PARAM NAME="DataURL" VALUE="composer.csv">
</OBJECT>

DataURL is a property specific to the TDC. The TDC uses this property to allow an author to specify the data set that should get loaded along with the page. For more information about the TDC, see the Tabular Data Control Reference.

Remote Data Service (RDS)

The Remote Data Service Non-MSDN link is a more sophisticated DSO that ships with Internet Explorer 4.0. RDS obtains its data from a database using OLE-DB or ODBC. Consider using RDS if:

A declaration specific to RDS is as follows:

<OBJECT classid="clsid:BD96C556-65A3-11D0-983A-00C04FC29E33"
    ID=dsoComposer HEIGHT=0 WIDTH=0>
    <PARAM NAME="Server"  VALUE="http://musicserver">
    <PARAM NAME="Connect" VALUE="dsn=music;uid=guest;pwd=">
    <PARAM NAME="SQL"     VALUE="select compsr_name from composer">
</OBJECT>

First, note the class identifier (CLSID) specific to RDS. Every ActiveX component requires a CLSID to differentiate it from other objects registered on the system. Next, note that the base properties exposed by RDS differ significantly from those exposed by the TDC. That's because the TDC derives its data from a flat text file, while the RDS is capable of retrieving and updating data from any OLE-DB or ODBC-compliant database. The following are the properties specified in the example declaration above.

ServerString identifying the protocol and the server that supplies the data.
ConnectStandard ODBC connection string identifying the data source name configured on the server.
SQLSQL query identifying the table and columns to be selected from the database.

For the specifics on how to use RDS, see the RDS Documentation Non-MSDN link.

JDBC DataSource Applet

The JDBC DataSource Applet is a DSO available for download from the Microsoft Data Source Object Gallery Non-MSDN link. Consider using this applet if:

<APPLET CODE=JDC.class NAME="DSA1" ID="DSA1" WIDTH=0 HEIGHT=0>
    <PARAM NAME=cabbase VALUE= 
        "http://www.microsoft.com/downloads/files/datasrc/jdbcapplet/jdc.cab">
    <PARAM NAME=dbURL VALUE="jdbc:odbc:Northwind">
    <PARAM NAME=showUI VALUE=false>
    <PARAM NAME=sqlStatement VALUE="select ProductName, CompanyName, 
        CategoryName from Products, Suppliers, Categories where 
        Suppliers.SupplierID=Products.SupplierID and Categories.CategoryID = 
        Products.CategoryID and Categories.CategoryID < 5">
    <PARAM NAME=allowInsert VALUE="true">
    <PARAM NAME=allowDelete VALUE="true">
    <PARAM NAME=allowUpdate VALUE="false">
    <PARAM NAME=user        VALUE="">
    <PARAM NAME=password    VALUE="">
</APPLET>

Instead of a CLSID, the CODE attribute uniquely identifies the DSO. Note that the basic properties exposed by this DSO differ from those exposed by the TDC or RDS. The following properties are specified in the example declaration above.

cabbaseGeneral property, applicable to all applets, that specifies the location of the code for the applet. The code will be downloaded to the client if not already installed.
dbURLRequired string that identifies the ODBC data source name (DSN) configured in the user's control panel.
showUIOptional Boolean value indicating whether a user interface should be displayed.
sqlStatementSQL string identifying the table and columns to be selected from the database.
allowInsertBoolean value indicating whether new records can be inserted into the data set.
allowDelete Boolean value indicating whether existing records can be deleted.
allowUpdate Boolean value indicating whether existing records can be updated.
userOptional string identifying the user. Some ODBC data sources require authentication.
passwordOptional string identifying the specified user's password.

The allowInsert, allowDelete, and allowUpdate properties allow changes to be made to the local data store. The JDBC DataSource Applet does not make updates to the server.

XML Data Source

Extensible Markup Language (XML) describes data and structured text on the Web in a standard way. Internet Explorer 4.0 shipped with a Java applet that serves as an XML data provider. While the XML DSO is a read-only data provider, Web authors should consider using it to display hierarchical data.

To use the XML data source object, add an APPLET element to your page, as in the following:

<APPLET
    CODE="com.ms.xml.dso.XMLDSO.class"
    ID="xmldso" 
    WIDTH="0"
    HEIGHT="0"
    MAYSCRIPT="true">
    <PARAM NAME="URL" VALUE="composer.xml">
</APPLET>

Since the DSO is implemented in Java, embedding it on the page requires the use of the APPLET element. The CODE attribute specifies the package in which the code is implemented. The URL property specifies the location of the data. The XML DSO retrieves the XML from this location, parses it, and provides the data to bound elements on the page. The data-consuming elements are isolated from the details of XML.

Click the Show Me button to see a simple example that uses the XML DSO to display an XML data set in a tabular format.

This feature requires Internet Explorer 4.0 or later. Click the icon below to install the latest version. Then reload this page to view the sample.
Microsoft Internet Explorer

Using the XML DSO to View Hierarchical Data

The following example shows how the XML DSO can be used to bind nested tables to hierarchical XML data. The XML data contains a list of CUSTOMERS. Each customer contains a list of ORDERS. Each order contains a list of ITEMS yielding three levels of repetition bound to three nested tables.

This feature requires Internet Explorer 4.0 or later. Click the icon below to install the latest version. Then reload this page to view the sample.
Microsoft Internet Explorer

Using XML in Internet Explorer 5

Internet Explorer 5 further integrates XML support directly into the browser through the use of XML data islands. XML data islands can be used to embed data in XML format directly into an HTML page using the XML element. For example, the following XML element might be embedded directly into an HTML page that describes the accessKey property.

<!--[if gte IE 5]>
<XML ID="xml1">
<topic-info>
    <page-type>reference</page-type>
    <member-type>property</member-type>
    <persistent-name>ACCESSKEY</persistent-name>
    <runtime-name readable="1" writeable="1">accessKey</runtime-name>
    <abstract>Sets or retrieves the accelerator key for the object.</abstract>
</topic-info>
</XML>
<![endif]-->

The use of conditional comments in the previous example prevents downlevel browsers from rendering the data contained within the XML data island as text.

Data islands can also be used to refer to an external source of XML data by specifying the SRC attribute in association with the XML element. For complete details, see the article on XML Data Islands.

Additional XML Resources

For additional information on XML, see the following resources:

MSHTML Data Source

In addition to using external components as data source objects, Web authors can define their data sets within an HTML document and use MSHTML itself to provide read-only data to a page. For the purposes of this section, the page supplying the data is called the data page.

When MSHTML is used as a DSO, it parses through the data page in search of elements with an ID attribute. The set of unique IDs defines the columns in the data set, and Web authors use these ID attributes as the value for the DATAFLD attribute on elements of the bound page. For example, given the following SPAN property from a data page, MSHTML interprets compsr_last as the name of a column and Mozart as data in that column.

<SPAN ID=compsr_last>Mozart</SPAN>

Multiple elements on the page sharing the same ID identify additional records in the data set. A column that is not represented is given the null value in the corresponding data set. Only elements with an opening and closing tag—for example, DIV, SPAN, or Hn—can be used to supply data. The following example defines a two-column table consisting of three records.

<H1 ID=COMPSR_FIRST>Hector</H1>
<MARQUEE ID=COMPSR_LAST>Berlioz</MARQUEE>
<DIV ID=COMPSR_BIRTH>1803</DIV>
<H2 ID=COMPSR_FIRST>Modest</H2>
<H3 ID=COMPSR_LAST>Moussorgsky</H3>
<BUTTON ID=COMPSR_BIRTH>1839</BUTTON>
<TEXTAREA ID=COMPSR_FIRST>Franz</TEXTAREA>
<XMP ID=COMPSR_LAST>Liszt</XMP>
<SPAN ID=COMPSR_BIRTH>1811</SPAN>

Observe that the MSHTML DSO disregards the lack of consistency in the elements used. In the example above, the H1, H2, and TEXTAREA elements represent the data for the first-name column in the data set; the MARQUEE, H3, and XMP elements represent the last-name column; the DIV, BUTTON, and SPAN elements represent the date-of-birth column.

Once the data page is defined, use an OBJECT tag on the databound page to supply the data, as follows:

<OBJECT ID=htmlComposer DATA="compdata.htm" HEIGHT=0 WIDTH=0>
</OBJECT>

The DATA attribute points to the data page and can specify a complete or relative URL.

Elements on the page used to present the data can be bound using the data binding extensions.

Click the Show Me button to see how the MSHTML DSO works.

This feature requires Internet Explorer 4.0 or later. Click the icon below to install the latest version. Then reload this page to view the sample.
Microsoft Internet Explorer

Creating Custom Data Source Objects

While the components described above are implementations of data source objects (DSOs) provided with Internet Explorer 4.0 and available through the DSO gallery, the specification is completely open and language independent so that independent software vendors (ISVs) can create their own data providers. For more information on creating a DSO, see the COM Objects as Data Providers document.



Back to topBack to top

Did you find this topic useful? Suggestions for other topics? Write us!

© 1999 Microsoft Corporation. All rights reserved. Terms of use.