XP 1 New Perspectives on XML Binding XML Data with Internet Explorer

XP Creating Web Pages with XML Tutorial 2 2 Using XML as a Data Source Data binding is a technique where the Web page’s content is drawn from a data source. Data binding allows you to attach data from an XML document to a Web page. Data binding frees the data from the format in which it is displayed so the same data source can be combined with several different Web pages.

XP Creating Web Pages with XML Tutorial 2 3 Using XML as a Data Source In this tutorial, the data source is an XML document containing information about the employees at Freezing Point. The Web pages use placeholders which we will later populate with data from two XML documents.

XP Creating Web Pages with XML Tutorial 2 4 Opening the Web Page Open the file FP1text and save as FP1.htm. Open and view FR1.htm using Internet Explorer. page title text subtitle text descriptive text hyperlink to the page’s author information about an employee buttons to display different employees employee photograph employee name

XP Creating Web Pages with XML Tutorial 2 5 Using Data Binding to Create a Final Web Page This figure shows how data binding will be used to create a final Web page

XP Creating Web Pages with XML Tutorial 2 6 Fields, Records, and Recordsets Data in a data source is organized by fields, records, and recordsets. A field is an element that contains a single item of information such as an employees last name. A record is a collection of those fields. A recordset is a collection of records.

XP Creating Web Pages with XML Tutorial 2 7 Fields, Records, and Recordsets This figure shows fields, records, and a recordset of an XML document

XP Creating Web Pages with XML Tutorial 2 8 Data Islands The first step in data binding is to attach the Web page to a recordset. The attached data is called a data island. They can be either external files or code entered into the HTML file. The syntax to create a data island from an external file is: Here, id is the id name assigned to the data island URL is the filename and location of the external XML file

XP Creating Web Pages with XML Tutorial 2 9 Data Islands For example: This creates a data island named Company attached to Company.xml.

XP Creating Web Pages with XML Tutorial 2 10 Data Islands To insert a data island directly into the HTML file, use this syntax: xml code While this technique can be used, it is not recommended. After all, the philosophy of XML is to separate data content from data formatting.

XP Creating Web Pages with XML Tutorial 2 11 Data Islands Data islands are stored by the XML parser as a Data Source Object (DSO). The DSO takes care of the interaction between the Web page and the data island. Also, program code can be written to control the actions of the DSO such as specifying which records will be displayed in the Web page at any one time.

XP Creating Web Pages with XML Tutorial 2 12 Data Islands If the XML document is not well formed or valid, IE will not create a DSO. The DSO is created only once for each session. This means that if the contents of the data source are modified after the DSO is created, the changes will not be reflected in the Web page until it is refreshed or until the next time the page is opened.

XP Creating Web Pages with XML Tutorial 2 13 Creating a Data Island This figure shows how to create the data island name of data island XML document containing data for the Web page

XP Creating Web Pages with XML Tutorial 2 14 Binding XML Elements to HTML Tags After the data island has been created, the elements in the XML document need to be bound to the HTML file. The syntax is: Here, tag is the name of the HTML tag, id is the name of the data island, and field is the name of the field in the data source.

XP Creating Web Pages with XML Tutorial 2 15 HTML Tags that Support Data Binding in Internet Explorer This figure shows HTML tags that support data binding in Internet Explorer

XP Creating Web Pages with XML Tutorial 2 16 Binding XML Elements to HTML Tags This figure shows how to bind XML elements to HTML tags data source of the bound element bound element Placeholder text is deleted

XP Creating Web Pages with XML Tutorial 2 17 Binding XML Elements to HTML Tags Continued This figure shows how to bind the rest of the FPINFO.XML elements

XP Creating Web Pages with XML Tutorial 2 18 Binding to an XML Attribute Attributes, like the Status attribute of the Employee element, are treated by the DSO as fields. If the attribute is part of a record element, it is easy to bind attribute values to a Web page.

XP Creating Web Pages with XML Tutorial 2 19 Binding to an XML Attribute This code has the ID attribute as part of the Employee element: Alice Ashman Accounting

XP Creating Web Pages with XML Tutorial 2 20 Binding to an XML Attribute It is interpreted by the DSO as: E304 Alice Ashman Accounting

XP Creating Web Pages with XML Tutorial 2 21 Binding to an XML Attribute Attribute are more complicated when they are part of a field element: Alice Ashman Accounting

XP Creating Web Pages with XML Tutorial 2 22 Binding to an XML Attribute In the above code, the attribute is still treated by the DSO as a field element. A DSO treats the above code as: E304 Alice Ashman Accounting

XP Creating Web Pages with XML Tutorial 2 23 Binding to an XML Attribute However, this leaves the text "Alice Ashman" unassociated with a field. Remember to reference all character data within an element using the $Text field. The DSO interprets this code as: E304 Alice Ashman Accounting

XP Creating Web Pages with XML Tutorial 2 24 Binding to an XML Attribute If the attribute is part of a field element, it is still treated by the DSO as a field element. The field element containing the attribute becomes a record element. It is a good idea not to use attributes in field elements if you plan to do data binding.

XP Creating Web Pages with XML Tutorial 2 25 Binding to an XML Attribute This figure shows STAFF_INFO data displayed in the Web page bound element }

XP Creating Web Pages with XML Tutorial 2 26 The Data Source Object ActiveX Data Objects (ADO) is a data-access technology developed by Microsoft. ADO allows you to work with the Data Source Object by applying a method or by changing one of the properties of the DSO. The syntax for applying a method is: id.recordset.method

XP Creating Web Pages with XML Tutorial 2 27 The Data Source Object Here, id is the name of the data island in the Web document and method is the name of the method supported by ADO. There are several methods that can be applied to DSOs.

XP Creating Web Pages with XML Tutorial 2 28 The Data Source Object This figure shows a few available recordset methods

XP Creating Web Pages with XML Tutorial 2 29 The Data Source Object For example, if you want to display the last record in a DSO whose id is “Staff_Info”, run the following method: Staff_Info.recordset.moveLast( ) The simplest way to run a method is to assign the method to the onClick event handler of a as shown below:

XP Creating Web Pages with XML Tutorial 2 30 The Data Source Object When the user clicks the button, IE runs the command indicated by the onClick event handler, displaying the last record.

XP Creating Web Pages with XML Tutorial 2 31 Assigning a Recordset Method This figure shows how to enter the movefirst( ) method Move to the 1 st record in the recordset when this button is clicked

XP Creating Web Pages with XML Tutorial 2 32 Assigning a Recordset Method Continued This figure shows how to enter the remaining recordset methods move to the previous record move to the next record move to the last record

XP Creating Web Pages with XML Tutorial 2 33 Table Binding Using table data binding, each record can be displayed in a different row of a table. The syntax is:

XP Creating Web Pages with XML Tutorial 2 34 Table Binding In the example, id is the name of the data island, field1, field2 are the fields from the recordset.

XP Creating Web Pages with XML Tutorial 2 35 Page Binding As you add more records to your XML document, a table can become long and unwieldy. One way to fix this is to give the user the option of limiting the number of records displayed at any one time. The user can then move forward of backward that number of records at a time. This is called paging.

XP Creating Web Pages with XML Tutorial 2 36 Page Binding To specify the page size, add the dataPageSize attribute to the tag: dataPageSize=“number” number is the number of records you want displayed in a single page.

XP Creating Web Pages with XML Tutorial 2 37 Navigating a Table Page A unique identifier must be assigned to a table using the ID attribute before writing a command to navigate a table page. The syntax to do this is: Here, id is the name you assign to the table object. This is needed because the commands to navigate the table pages act on the table itself not the recordset.

XP Creating Web Pages with XML Tutorial 2 38 Table Methods and Properties These figures show some table methods and properties

XP Creating Web Pages with XML Tutorial 2 39 Table Methods and Properties To run these commands, add the command to the onClick event handler of a tag. For example, to move to the last page in a data table named “StaffTable”, you enter the attribute: onClick=“StaffTable.lastPage( )”

XP Creating Web Pages with XML Tutorial 2 40 Hierarchical Records This figure shows the layout of the EMP2.XML document

XP Creating Web Pages with XML Tutorial 2 41 Hierarchical Records To bind the Employee fields in the previous slide to a table, you create a table as follows: …

XP Creating Web Pages with XML Tutorial 2 42 Draft of the Final Web Page This figure shows the draft of the final Web page employee information grouped by department

XP Creating Web Pages with XML Tutorial 2 43 The Final Web Page This figure shows the final Web page

XP Creating Web Pages with XML Tutorial 2 44 Summary Data binding is a technique where the Web page’s content is drawn from a data source. The first step in data binding is to attach the Web page to a recordset. The attached data is called a data island. They can be either external files or code entered into the HTML file. ActiveX Data Objects (ADO) is a data-access technology developed by Microsoft. ADO allows you to work with the Data Source Object by applying a method or by changing one of the properties of the DSO.