DATA BINDING

Session 15

Objectives Data binding architecture. Sorting and filtering data.

Database A database is an organized collection of related

data, which allows easy access and manipulation of data. The data from a database can be accessed using three different types of architectures:

Single-tier architecture: works with databases that reside on a single machine. This manipulates the data within the database immediately.

Two-tier architecture: stores and maintains database information on a centralized server. Thus, the client accesses the database by connecting to the database server. The kind of architecture is also referred as client/server.

Three-tier architecture: is a multi-tier client/server architecture that consists of three parts namely client machine, application logic, and the database. The client connects to one or more application servers, which in turn connects to the database server.

Data binding Data binding is a process of associating data from the

database with appropriate HTML elements. It helps to display the data from the database in HTML elements and controls.

Data binding allows to retrieve data from the database. There are some features:

On-demand content management: allows retrieving data from the DB on demand.

Platform-independent access: allows accessing, updating, and retrieving data, irrespective of the browser version or the type of DB.

Asynchronous processing: performing multiple tasks at the same time. While requesting or updating data from the DB, can continue interacting with the web page to perform another task.

Sorting and filtering data: allows to access and retrieve data by reordering the data in the database. In addition, filtering of data allows to retrieve only the data that meet the specified criteria.

Architecture of data binding Data binding helps you to link data from the database

with the elements of a web page using its various built-in components.

Data binding architecture consists of four main components:

Data source object(DSO): acts as an intermediary between HTML elements and DB. The DSO establishes a connection with the DB, fetches the data from the DB, and allows HTML elements to display the fetched data.

Data consumers: are the elements of an HTML page that display data provides by DSO.

Binding agent: determines the DSOs and data consumers from the elements contained within the web page. After this, the binding agent checks the synchronization of data transmitted from the DSO to the consumer.

Table repetition agent: generally deals with an HTML table for data repetition. It displays the data supplied by DSO in a table.

Data source object You can display the data provided by

DSOs by binding the HTML elements to DSOs. To implement the DSO, you need to consider certain points such as:

Determining the means of data transmission to an HTML page. To transmit the data, DSO can use different protocols such as the Hypertext Transfer Protocol (HTTP).

Checking whether the transmission of data is synchronous or asynchronous.

Verifying whether updates are allowed. Specifying the data by using a

Structured Query Language (SQL) statement or simple Uniform Resource Locator (URL).

Tabular Data Control The tabular data control (TDC) is a data

source object that allows you to display data accessing the delimited text files. A delimited text file is a simple file that contains records of data separated by commas, tabs, …

The benefits of TDC: Display data of simple types. Access and retrieve data offline. This

can be done since the delimited file transmitted by TDC can be stored in your system that enables you to read data online.

Avoid access to DB system. This can be done by writing server side scripts to fetch the data from the DB into a delimited text file.

“.CSV” File Delimited text files that are separated by commas are

also known as .csv files (comma separated values or variables).

The size of a .csv file is very small. The largest .csv file is about 100Kb. These files are widely accessed by another applications. This is because the overall format of a .csv file is same as it stores the data as text.

Creating a “.CSV” File

Steps to create a .csv file:1. Open the spreadsheet application.2. Define at least three fields that are separated

by commas and placed within double quotes. These fields are mandatory and case-sensitive.

3. Declare additional fields besides these fields as per your requirements.

4. Save the file with a proper name followed by .csv file type.

Data binding

Data binding allows you to link data over the Internet or Intranet. The steps involved in the process of data binding are:

1. Adding a data source object on an HTML page. This allows you to transmit the data over the internet.

2. Binding HTML elements to the data source object. This allows you to either display one record at a time or multiple records in a tabular format.

3. Writing scripts to enable user interactivity. This allows you to navigate, add, update, sort, and filter records. This step is optional.

Properties of TDC1. AppendData: determines whether the data is appended or the

current data is replaced. Returned type is true or false.2. CaseSensitive: determines whether the casing should be

avoided while comparing the data.3. CharSet: recognizes the character set of the data within a text

file.4. DataURL: describes the file location.5. EOF: determines whether the end of file is reached.6. EscapeChar: describes a character that specifies the end of data

fields.7. Filter: specifies the way the data is filtered.8. Language: describes the language of data within the file such as

eng-us.9. recordset: refers to the text file in TDC to fetch data.10.RowDelim: describes a character that specifies the end of each

row.11.sort: describes the columns to be sorted and the sorting order.

12.UseHeader: determines the file contains the header information.

Methods of TDC

1. moveFirst(): moves to the first data in the data field.

2. moveNext(): moves to the next data from the current position.

3. moveLast(): moves to the last data in the data field.

4. Reset(): filters or sorts the data as per the specified condition.

Binding HTML elements The different HTML elements that support

data binding are text boxes, frames, tables, lists, and so on. There are certain attributes that allows you to bind to your HTML elements.

Some attributes to bind data: DATAFLD: specifies the field of s DSO that

should be bound to an HTML element. DATAFORMATAS: specifies the format of data in

an HTML page. DATASRC: specifies the source of data for

binding an HTML page.

Data binding - Demo

Demo: S15_DataBinding.html

Sorting data with TDC The TDC implements the mechanism of sorting by

providing the Sort property. The value of this property is the column name based on which the sorting task will take place.

Steps to sort the data:1. The TDC control is embedded in the web page and is linked to

Students.csv file.2. The table is linked with the TDC and each table column is bound to

the appropriate column in the Students.csv file.3. A button is created, and when the user click on button the sort()

function is invoked.4. The sort() function takes the column name parameter that is the

key to sort.5. The Sort property of TDC is set to the column name passed as the

parameter to the function.6. The Reset() method of TDC displays the sorted data of the

Students.csv file.

Sorting - Demo

Demo: S15_SortData.html

datapagesize attribute A .csv file might contain huge of records, which might

not fit in a table when it loads in the browser. Therefore, you might want to display only a specific number of records at a time in a web page to improve readability. This is done by using the datapagesize attribute in DHTML.

Steps to use datapagesize attribute :1. The TDC control is embedded in the web page and is linked to

Students.csv file.2. The table is linked with the TDC and the datapagesize attribute is

set as 10. This means that the details of only 5 records will be displayed in the browser.

3. A button is created whose value is set to previous. When the user clicks it the previousPage() of TDC is invoked that displays the previous 10 records.

4. A button is created whose value is set to next. When the user clicks it the nextPage() of TDC is invoked that displays the previous 5 records.

datapagesize - Demo

Demo: S15_PageSize.html

Data filtering using TDC Data filtering is the means by which you can

block or restrict the display of the data to the users. Data filtering allows viewing only selected data based on a criterion.

Some operators you can use to filter the data: =: denotes the equal to operator. >: denotes the greater than operator. >=: denotes the greater than or equal to operator. <: denotes the less than operator. <=: denotes the less than or equal to operator. <>: denotes the not equal to operator. & (AND): denotes whether both the conditions are true. | (OR): denotes whether at least one of the conditions

is true.

Data filtering using TDC Steps to specify the criteria to filter:

1. The TDC control is embedded in the web page and is linked to Students.csv file.

2. The table is linked with the TDC and is bound to appropriate columnf of the Students.csv file.

3. A button is created, and when the user clicks on it the showAll() is invoked to display the records satisfied the criteria.

4. The Filter property is assigned the value as “StuID > 12”. This means that the program will filter all records have the ID greater 12.

Filter - Demo

Demo: S15_FilterData.html

Summary Data binding refers to accessing the text

file and database to fetch and display data from them dynamically.

The data binding architecture allows access any database from any browser, irrespective of the software and hardware platform.

Can sort data and filter it to view only limited data.

Summary… There are some of features:

On-demand content Management Platform - Independence access Asynchronuos Processing Sorting and filtering data

Data binding architecture consists of four main components: Data Source Object (DSO) Data consumer Binding Agents Table repetition Agents