New perspectives on xml
Download
1 / 44

New Perspectives on XML - PowerPoint PPT Presentation


  • 347 Views
  • Uploaded on

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

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about 'New Perspectives on XML' - terentia


An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
New perspectives on xml l.jpg

New Perspectives on XML

Tutorial 2 – Binding XML Data with Internet Explorer

Creating Web Pages with XML

Tutorial 2


Using xml as a data source l.jpg
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


Using xml as a data source3 l.jpg
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


Opening the web page l.jpg

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


Using data binding to create a final web page l.jpg
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


Fields records and recordsets l.jpg
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


Fields records and recordsets7 l.jpg
Fields, Records, and Recordsets

This figure shows fields, records, and a recordset of an XML document

Creating Web Pages with XML

Tutorial 2


Data islands l.jpg
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


Data islands9 l.jpg
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


Data islands10 l.jpg
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


Data islands11 l.jpg
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


Data islands12 l.jpg
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


Creating a data island l.jpg

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


Binding xml elements to html tags l.jpg
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


Html tags that support data binding in internet explorer l.jpg
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


Binding xml elements to html tags16 l.jpg

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


Binding xml elements to html tags continued l.jpg
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


Binding to an xml attribute l.jpg
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


Binding to an xml attribute19 l.jpg
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


Binding to an xml attribute20 l.jpg
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


Binding to an xml attribute21 l.jpg
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


Binding to an xml attribute22 l.jpg
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


Binding to an xml attribute23 l.jpg
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


Binding to an xml attribute24 l.jpg
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


Binding to an xml attribute25 l.jpg
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


The data source object l.jpg
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


The data source object27 l.jpg
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


The data source object28 l.jpg
The Data Source Object

This figure shows a few available recordset methods

Creating Web Pages with XML

Tutorial 2


The data source object29 l.jpg
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


The data source object30 l.jpg
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


Assigning a recordset method l.jpg

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


Assigning a recordset method continued l.jpg

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


Table binding l.jpg
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


Table binding34 l.jpg
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


Page binding l.jpg
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


Page binding36 l.jpg
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


Navigating a table page l.jpg
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


Table methods and properties l.jpg
Table Methods and Properties

These figures show some table methods and properties

Creating Web Pages with XML

Tutorial 2


Table methods and properties39 l.jpg
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


Hierarchical records l.jpg
Hierarchical Records

This figure shows the layout of the EMP2.XML document

Creating Web Pages with XML

Tutorial 2


Hierarchical records41 l.jpg
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


Draft of the final web page l.jpg

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


The final web page l.jpg
The Final Web Page

This figure shows the final Web page

Creating Web Pages with XML

Tutorial 2


Summary l.jpg
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


ad