Call us: 0845 0944 755
news feed
 
Core Media Design Services
 
Core Media Design News

Search Engine Users are Search Savvy: Does your Website have the right keywords to attract the right people?…
read more

 

Why Credit Crunch Cutbacks Must NOT affect your staff training programme…
read more

Web design tutorials
  • Display xml data in the table using Spry framework
  • This tutorial explains how to display xml data within html page using Dreamweaver´s Spry widgets.
  •  
XML Data table

First we need to create some simple xml file ­ for this purpose copy and paste the following to the new file and save it as data.xml:

<?xml version="1.0" encoding="utf-8"?>
<customers>
<customer>
<name>John Smith</name>
<tel>07779009876</tel>
<email>info@johnsmith.co.uk</email>
</customer>
<customer>
<name>Mark King</name>
<tel>07098764567</tel>
<email>info@yahoo.co.uk</email>
</customer>
<customer>
<name>Albert Montgomery</name>
<tel>12245679605</tel>
<email>info@gmail.com</email>
</customer>
</customers>

Create new html page and save it with any name you wish. Open this page and from the menu choose Insert > Spry > Spry XML Data Set (Fig. 01).

Create spry data set in Dreamweaver CS3 image
Fig. 01

In the Spry XML Data Set window browse for our data.xml file and click Get schema button to display the structure of the xml file.
In the Data Set columns section select tel and using Data type dropdown menu assign number data type to it.
From the Sort menu select name and leave Direction as default to display records in Ascending order. Lastly select Distinct on load checkbox to avoid displaying duplicate records and click OK to create a new Data Set (Fig. 02).

Spry data set window in Dreamweaver CS3 image
Fig. 02

Save the file. In the new window click OK to indicate that you will remember to upload supporting files to the server (Fig. 03).

Upload supporting files to the server image
Fig. 03

We are now going to insert behaviour which will display our data from the xml file in the form of table.
From the menu choose Insert > Spry > Spry Table (Fig. 04).

Add Spry table element to the page
Fig. 04

In the Spry Table window select any record you would like to be sorted when you click the header in the table and check Sort column when header is clicked.
If you have any stylesheet defined, you can assign class to the different state of the table header. Lastly check Update detail regions when row is clicked and click OK to add dynamic table to our page (Fig. 05).

Insert Spry table element to the page image
Fig. 05

When you test the page in the browser you should now see data from the xml file being displayed in the table.

Written by Freelance Web Designer ­ Sebastian Sulinski

Back to top

 

Testimonials | Job opportunities | How we work | Warranty | Web design news | About us | Contact us | Web Design Resources
Freelance Web Designer | Website Design Company Bognor Regis | Web Site Design Chichester | Illustrator Tutorial | Tutorials
Web Hosting Review | Chichester Restaurants | UK Services Review
Core Media Design Ltd is registered in England No 6557241 Suite B, 29 Harley Street, London, W1G 9QR | VAT Number: GB 930 8084 29
© Web Site Design Company - Core Media Design Ltd 2004-2009