Home | | Internet Programming | HTML - Data binding and control

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"?>

 

<!-- Simple data binding and recordset manipulation -->

<html>

<head>

 

<title>Intro to Data Binding</title>

 

<object id = "Colors" classid = "CLSID:333C7BC4-460F-11D0-BC04-0080C7055A83"> <param name = "DataURL" value = 19 "HTMLStandardColors.txt" />

 

<param name = "UseHeader" value = "TRUE" />

<param name = "TextQualifier" value = "@" /> <param name = "FieldDelim" value = "|" /> </object>

 

<script type = "text/javascript">

<!—

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>

 

<body onload = "reNumber()" onclick = "forward()">

<h1>XHTML Color Table</h1>

 

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

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

 

<span id = "colorId" style = "font-family: monospace" datasrc = "#Colors" datafld = "ColorName"></span><br />

<strong>Color RGB Value: </strong>

 

<span id = "colorRGB" style = "font-family: monospace" datasrc = "#Colors" datafld = "ColorHexRGBValue">

</span><br />

 

Currently viewing record number

 

<span id = "recordNumber" style = "font-weight: 900"> </span><br />

 

<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">

<!-- Binding data to an image -->

 

<html xmlns = "http://www.w3.org/1999/xhtml">

<head>

<title>Binding to a img</title>

 

<object id = "Images" 13 classid = "CLSID:333C7BC4-460F-11D0-BC04-0080C7055A83"> <param name = "DataURL" value = "images.txt" />

 

<param name = "UseHeader" value = "True" />

</object>

 

<script type = "text/javascript">

<!--

 

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>

 

<img datasrc = "#Images" datafld = "image" alt = "Image" style = "position: relative; left: 45px" /><br />

<input type = "button" value = "First" onclick = "move( 'first' );" />

 

<input type = "button" value = "Previous" onclick = "move( 'previous' );" />

<input type = "button" value = "Next" onclick = "move( 'next' );" />

 

<input type = "button" value = "Last" onclick = "move( 'last' );" />

</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">

<!-- Using Data Binding with tables -->

 

<html xmlns = "http://www.w3.org/1999/xhtml">

<head>

<title>Data Binding and Tables</title>

 

<object id = "Colors" classid = "CLSID:333C7BC4-460F-11D0-BC04-0080C7055A83"> <param name = "DataURL" value = "HTMLStandardColors.txt" />

 

<param name = "UseHeader" value = "TRUE" />

<param name = "TextQualifier" value = "@" />

<param name = "FieldDelim" value = "|" />

</object>

 

</head>

 

<body style = "background-color: darkseagreen">

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

 

<table datasrc = "#Colors" style = "border-style: ridge; border-color: darkseagreen; background-color: lightcyan">

<thead>

 

<tr style = "background-color: mediumslateblue">

<th>Color Name</th>

 

<th>Color RGB Value</th>

</tr>

</thead>

<tbody>

 

<tr style = "background-color: lightsteelblue">

<td><span datafld = "ColorName"></span></td>

 

<td><span datafld = "ColorHexRGBValue" style = "font-family: monospace">

</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 |


Privacy Policy, Terms and Conditions, DMCA Policy and Compliant

Copyright © 2018-2023 BrainKart.com; All Rights Reserved. Developed by Therithal info, Chennai.