Data Binding with Tabular Data Control

Objective To understand Dynamic HTML data binding. To be able to sort and filter data directly on the client without involving the server. To be able to bind a table and other XHTML elements to data source objects (DSOs). To be able to filter data to select only records appropriate for a particular application. To be able to navigate backward and forward through a database with the Move methods

3 Introduction Data-binding technology takes place on the Client, not the server. Changes to the data do not propagate back to the server. To bind external data to ________ elements, IE uses Data Source Objects (DSO’s). The type of DSO discussed here is the Tabular Data Control (TDC), which is an __________ control. XHTML ActiveX

Introduction Data binding – Data no longer reside exclusively on the server – Data can be maintained on the client – Eliminate server activity and network delays Data Source Objects (DSOs) – Tabular Data Control (TDC)

Data Binding  DataBinding is one of the most powerful features of.NET and Windows Forms.  It help in linking a control to a data source tables in the database.  This is useful to view, insert, update, and delete records in the table.

DataBinding  Allows you to create a link between the controls of the form and the database  Once the controls are linked to the database, you can retrieve data from the database.

Data binding

Data Provider Data Source Consumer Database

Data Binding Architecture Data binding is based on a component architecture Consists of four major pieces – Data source object (DSO) – Data consumers – Binding agent – Table repetition agent – Data source objects provide the data to a page – Data-consuming HTML elements display the data, – Agents ensure that both the provider and the consumer are synchronized.

Data Binding Architecture

Data Source Objects To bind data to the elements of an HTML page in Windows Internet Explorer, a DSO must be present on that page. DSOs implement an open specification that leaves it up to the DSO developer to determine the following: – How the data is transmitted to the page. – A DSO can use any transport protocol it chooses.(HTTP/file I/O). – A DSO also determines whether the transmission occurs synchronously or asynchronously. – Asynchronous transmission is preferred, because it provides the most immediate interactivity to the user. How the data set is specified. – A DSO might require an Open Database Connectivity (ODBC) connection string and an Structured Query Language (SQL) statement, or it might accept a simple URL. How the data is manipulated through scripts. Since the DSO maintains the data on the client, it also manages how the data is sorted and filtered.Whether updates are allowed.

Data Consumers Data consumers are elements on the HTML page that are capable of rendering the data supplied by a DSO. Elements include many of those intrinsic to HTML, as well as custom objects implemented as Java applets or Microsoft ActiveX Controls. Internet Explorer supports data binding architecture to enable authors to bind an element to a specific column of data in a data set exposed by a DSO. Applets and ActiveX Controls support additional binding semantics

Element Types Single-valued consumers- such as input elementsinput – Consume a single value from the current record provided by a data source. Tabular data consumers, such as the table element,table – Repeat an entire set of records from a data provider. This is called set binding.

Binding Agents The binding and repetition agents are implemented by MSHTML.dll, the HTML viewer for Internet Explorer, and they work completely behind the scenes. When a page is first loaded, the binding agent finds the DSOs and the data consumers among those elements on the page. Once the binding agent recognizes all DSOs and data consumers, it maintains the synchronization of the data that flows between them. When the DSO receives more data from its source, the binding agent transmits the new data to the consumers. Conversely, when a user updates a databound element on the page, the binding agent notifies the DSO.

Table Repetition Agent The repetition agent works with tabular data consumers, such as the HTML table element, to repeat the entire data set supplied by a DSO. Individual elements in the table are synchronized through interaction with the binding agent.

Types of Binding  Simple Binding : a property of a control is bound to a single value  Ex : TextBox with a column in table  Complex Binding : a control is associated with one or more data values  Can only be done on controls, which display more than one value at a time  Ex : comboBox

Data Binding Simple data binding Bind a single value from a data collection to a single control property Ex: customer name to Text property on Textbox Complex data binding Bind collection of data to control that presents multiple values from collection Ex: customers table in grid, customer name values in combo box.

Simple Data binding

Complex data binding

20 Introduction Data-binding technology takes place on the _______, not the server. Changes to the data do not propagate back to the server. To bind external data to ________ elements, IE uses Data Source Objects (DSO’s). The type of DSO discussed here is the Tabular Data Control (TDC), which is an __________ control. client XHTML ActiveX

21 Simple Data Binding I Data are stored in a separate file, such as HTMLStandardColors.txt. The first line in the data file is the _________ row: – – Format: … is the text qualifier and | is the field delimiter. The HTML file uses the ______ element to insert the TDC (the classid shown is the one used for TDC) header object

22 Simple Data Binding II The param element specifies parameters for the ________ element. <object id = "Colors" classid = "CLSID:333C7BC4-460F-11D0-BC C7055A83"> Sample data in the file object

23 Simple Data Binding III Binding the data to HTML Color Name: <span id = "colorId" style = "font-family: monospace" datasrc = "#Colors" datafld = "ColorName"> Color RGB Value: <span id = "colorRGB" style = "font-family: monospace" datasrc = "#Colors" datafld = "ColorHexRGBValue"> Currently viewing record number <span id = "colorSample" style = "background-color: aqua; color: ; font-size: 30pt">Color Sample

24 Simple Data Binding III Updating data dynamically using JavaScript var recordSet=Colors.recordset; function displayRecordNumber(){ if ( !recordSet.EOF ) recordNumber.innerText = recordSet.absolutePosition; else recordNumber.innerText=" "; } function forward() { recordSet.MoveNext(); if ( recordSet.EOF ) recordSet.MoveFirst(); colorSample.style.backgroundColor = colorRGB.innerText; displayRecordNumber(); }

HTML Extensions for Data Binding The key to data binding is to connect a data source object to a data consumer. A data consumer can be any HTML element that supports the extended data-binding attributes. The dataSrc attribute specifies the DSO being used for data binding.dataSrc For several fields of data, dataFld attribute is used to specify which field of data to bind to a given element.dataFld dataFormatAs attribute is used to specify how the data in a databound field is rendered. dataFormatAs The dataPageSize attribute is used to specify the maximum number of records that are displayed at once in a data bound table.dataPageSize

Categories Single-valued consumers – The binding agent takes a single value from the current record of a data source and passes it to a single-valued consumer Tabular data consumers – The repetition agent works with the binding agent to pass the entire set of records to a tabular data consumer.

Specifying Data Rendering Using the DATAFORMATAS Attribute The data supplied by a DSO can be in a variety of formats dataFormatAs attribute on single-valued consumer elements that support the attribute to indicate how the data should be rendered.(HTML and TEXT)

DATAPAGESIZE Attribute When binding a table to a data source, all the records in the data set are displayed by default. If the data set is large, the page might grow beyond what is visible to the user. In addition, any content positioned below the table is pushed off the screen. The dataPageSize attribute can be applied to a table to specify the maximum number of records to display at any one time

HTMLStandardColors.txt (1 of 1)

introdatabind.html (1 of 4)

introdatabind.html (2 of 4)

introdatabind.html (3 of 4)

introdatabind.html (4 of 4)

Using tag to handle Tabular Data Control For ASCII databases that contain quite lots of data using TDC it is easy to represent Using Data Src and Datafld attributes tabular datas are represented

35 Moving Within a recordset Web applications need the ability to navigate through a ___________. Identifying the data source begins with <object id = "Colors“ … A DHTML recordset object has the following methods – Colors.recordset.MoveFirst() – Colors.recordset.MoveLast() – Colors.recordset.MovePrevious() – Colors.recordset.MoveNext() Create buttons that use onclick() to move the pointer to the desired record. See p recordset

16.3 Moving within a Recordset Moving through a recordset using JavaScript (Fig. 16.3)

moving.html (1 of 5)

moving.html (2 of 5)

moving.html (3 of 5)

moving.html (4 of 5)

moving.html (5 of 5)

16.4 Binding to an img Many different types of XHTML elements can be bound to data sources – Binding to an img element Changing the recordset updates the src attribute of the image

44 Binding to an img Example of image.txt containing image file names: image numbers/0.gif numbers/1.gif numbers/2.gif … Identify the data _______ for the web page: <object id = “Images" ______ the data source and data field to an img : <img datascr = “#Images” datafld = “image” Create buttons that use onclick() to call methods like Images.recordset.moveNext() source Bind

images.txt (1 of 1)

binding.html (1 of 3)

binding.html (2 of 3)

binding.html (3 of 3)

16.5 Binding to a table Binding data to a table is perhaps the most important of data binding – Different from the data binding we’ve seen

51 Binding to a table Sample data in the file … Identifying the data source for the web page: <object id = "Colors" … Binding data source to a _______ element: <table datasrc = “#Colors” … Binding data fields to table cells: See p table

tablebind.html (1 of 2)

tablebind.html (2 of 2)

16.6 Sorting table Data Manipulate a large data source – Need to sort data Can be accomplished by the Sort property of the TDC

56 Sorting table Data (p. 524) Create a list of Sort options Color Name (Ascending) Color Name (Descending) Color RGB Value (Ascending) Color RGB Value (Descending) JavaScript keyword _______ refers to the element in which the statement resides ( select ). After setting the Sort property, the Reset() method of the TDC is invoked. For advanced sorting and filtering, see p this

sorting.html (1 of 3)

sorting.html (2 of 3)

sorting.html (3 of 3)

16.7 Advanced Sorting and Filtering Filtering – Selecting data that meets a specific criteria – Combined with TDC provides powerful data rendering

DBPublications.txt (1 of 1)

advancesort.html (1 of 7)

advancesort.html (2 of 7)

advancesort.html (3 of 7)

advancesort.html (4 of 7)

advancesort.html (5 of 7)

advancesort.html (6 of 7)

advancesort.html (7 of 7)

16.8 Data Binding Elements Exactly how a data source is displayed by the browser depends on the XHTML element to which the data is bound – Different elements may use the data for different purposes.

16.8 Data Binding Elements