New Perspectives on XML

1. New Perspectives on XML Tutorial 2 – Binding XML Data with Internet Explorer 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. 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. Creating Web Pages with XML Tutorial 2

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

7. Fields, Records, and Recordsets This figure shows fields, records, and a recordset of an XML document 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: <xml id=“id” src=“URL”></xml> • Here, id is the id name assigned to the data island • URL is the filename and location of the external XML file Creating Web Pages with XML Tutorial 2

9. Data Islands • For example: <xml id=“Company” src=“Company.xml”></xml> • This creates a data island named Company attached to Company.xml. Creating Web Pages with XML Tutorial 2

10. Data Islands • To insert a data island directly into the HTML file, use this syntax: <xml id=“id”> xml code </xml> • While this technique can be used, it is not recommended. After all, the philosophy of XML is to separate data content from data formatting. 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. 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. Creating Web Pages with XML Tutorial 2

13. XML document containing data for the Web page name of data island Creating a Data Island This figure shows how to create the data island 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: <tag datasrc=“#id” datafld=“field”> • 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. 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 Creating Web Pages with XML Tutorial 2

16. data source of the bound element bound element Placeholder text is deleted Binding XML Elements to HTML Tags This figure shows how to bind XML elements to HTML tags 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 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. 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: <Employee ID=“E304”> <Name>Alice Ashman</Name> <Department>Accounting</Department> </Employee> Creating Web Pages with XML Tutorial 2

20. Binding to an XML Attribute • It is interpreted by the DSO as: <Employee> <ID>E304</ID> <Name>Alice Ashman</Name> <Department>Accounting</Department> </Employee 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: <Employee> <Name ID="E304">Alice Ashman</Name> <Department>Accounting</Department> </Employee> 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: <Employee> <Name> <ID>E304</ID> Alice Ashman </Name> <Department>Accounting</Department> </Employee> 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: <Employee> <Name> <ID>E304</ID> <$Text>Alice Ashman</$Text> </Name> <Department>Accounting</Department> </Employee> 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. 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 bound element 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 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. Creating Web Pages with XML Tutorial 2

28. The Data Source Object This figure shows a few available recordset methods 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 <button> as shown below: <button onClick=“Staff_Info.recordset.moveLast( )”> 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. Creating Web Pages with XML Tutorial 2

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

32. move to the previous record move to the next record move to the last record Assigning a Recordset Method Continued This figure shows how to enter the remaining recordset methods 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: <table datasrc=“#id”> <tr> <td><span datafld=“field1”></span></td> <td><span datafld=“field2”></span></td> </tr> </table> 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. 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. Creating Web Pages with XML Tutorial 2

36. Page Binding • To specify the page size, add the dataPageSize attribute to the <table> tag: dataPageSize=“number” • number is the number of records you want displayed in a single page. 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: <table id=“id”> • 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. Creating Web Pages with XML Tutorial 2

38. Table Methods and Properties These figures show some table methods and properties 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 <button> tag. For example, to move to the last page in a data table named “StaffTable”, you enter the attribute: onClick=“StaffTable.lastPage( )” Creating Web Pages with XML Tutorial 2

40. Hierarchical Records This figure shows the layout of the EMP2.XML document 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: <table datasrc=“#Staff_Info” datafld=“Employee”> <tr> <td><span datafld=“Name”></span></td> <td><span datafld=“Position”></span></td> <td><span datafld=“Phone”></span></td> … </tr> </table> Creating Web Pages with XML Tutorial 2

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

43. The Final Web Page This figure shows the final Web page 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. Creating Web Pages with XML Tutorial 2