Chapter: Web or internet Programming : Dynamic HTML

HTML - Data binding and control

With data binding, data need no longer reside exclusively on the server. The data can be maintained on the client and in a manner that distinguishes that data from the XHTML markup on the page.

Data binding and control

• With data binding, data need no longer reside exclusively on the server. The data can be maintained on the client and in a manner that distinguishes that data from the XHTML markup on the page.

• Data are sent to the client and then all subsequent manipulations take place on that data directly on the client, thus eliminating server activity and network delays.

• To bind external data to XHTML elements, Internet Explorer employs software capable of connecting the browser to live data sources. These are known as Data Source Objects (DSOs). There are several DSOs available. The most popular DSO is the Tabular Data Control (TDC).

Simple Data Binding

• The Tabular Data Control (TDC) is an ActiveX control that is added to a page with the object element. Data are stored in a separate file and not embedded into the XHTML document.

<?xml version = "1.0"?>

<html>

<head>

<title>Intro to Data Binding</title>

<!—

var recordSet = Colors.recordset;

function reNumber()

{

if ( !recordSet.EOF )

recordNumber.innerText = recordSet.absolutePosition; else

recordNumber.innerText = " ";

}

function forward()

{

recordSet.MoveNext(); if ( recordSet.EOF )

recordSet.MoveFirst();

colorSample.style.backgroundColor = 46 colorRGB.innerText; reNumber();

}

// -->

</script>

</head>

<h1>XHTML Color Table</h1>

<h3>Click to move forward in the recordset.</h3>

<p><strong>Color Name: </strong>

<strong>Color RGB Value: </strong>

</span><br />

Currently viewing record number

<span id = "colorSample" style = "background-color: aqua; color: 888888; font-size: 30pt">Color Sample

</span></p>

</body>

</html>

• Data in each field is enclosed in text qualifiers (@) and each field is separated with a field delimiter (|).

• The object element here inserts the Tabular Data Control is one of the Microsoft ActiveX controls built into Internet Explorer 5.5.

• Attribute classid specifies the ActiveX control to add to the Web page—here we use the classid of the Tabular Data Control.

The param tag specifies parameters for the object in the object element. Attribute name is the parameter name and attribute value is the value. Parameter DataURL is the URL of the data source (HTMLStandardColors.txt). Parameter UseHeader, when set to true, specifies that the first line of our data file has a header row.

• The datasrc attribute refers to the id of the TDC object (Colors, in this case) preceded with a hash mark (#), and the datafld attribute specifies the name of the field to bind it to (ColorName, in this case). This place the data contained in the first record (i.e., row) of the ColorName column into the span element.

• MoveNext method moves the current recordset forward by one row, automatically updating the span to which we bound our data.

Binding to an img

Many different types of XHTML elements can be bound to data sources. One of the more interesting elements in which to bind data is the img element.

<?xml version = "1.0"?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>Binding to a img</title>

</object>

<!--

recordSet = Images.recordset; function move( whereTo )

{

switch( whereTo ) { case "first":

recordSet.MoveFirst();

break; case "previous":

recordSet.MovePrevious(); if ( recordSet.BOF )

recordSet.MoveLast();

break;

case "next": recordSet.MoveNext(); if ( recordSet.EOF )

recordSet.MoveFirst();

break;

case "last": recordSet.MoveLast();

break;

}

// --> </script> </head> <body>

</body>

Binding to a table

Binding data to a table element is perhaps the most important feature of data binding.

<?xml version = "1.0"?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<head>

<title>Data Binding and Tables</title>

</object>

</head>

<h1>Binding Data to a <code>table</code></h1>

<thead>

<th>Color Name</th>

<th>Color RGB Value</th>

</tr>

</thead>

<tbody>

</span>

</td>

</tr>

</tbody>

• Bind the table by adding the datasrc attribute to the opening table tag. We complete the data binding by adding the datafld attribute to span tags that reside in the table cells.

Study Material, Lecturing Notes, Assignment, Reference, Wiki description explanation, brief detail

Web or internet Programming : Dynamic HTML : HTML - Data binding and control |