- What You Will Learn
- Defining a Static Site
- Passing and Using Data with Ajax
- Connecting the Country Profiles Page to HTML Data
- Styling the Spry Table
- Creating Spry Regions
- Displaying with a Spry Accordion
- Adding Images and the Country Name
- Refining Page Display Using CSS Styling and Positioning
- What You Have Learned
- Additional Spry Functionality in Dreamweaver CS4
- Additional Resources
Passing and Using Data with Ajax
Several Ajax libraries are available, some with quite sophisticated capabilities, and each requires a specific level of technical knowledge. Adobe created the Spry framework to make Ajax available to web designers with minimal programming experience.
Dreamweaver CS4 shipped with Spry prerelease version 1.6.1. Each release includes new features and refinements. It's easy to update your Spry libraries, because the Spry team releases a Dreamweaver Extension with each new release of Spry.
In this exercise, you will take the recordset that might be created by querying the database for the country profiles, and publish it as a page on the Web. We will look at XML, JSON, and HTML versions of the data. You're welcome to use whichever version you like, but we'll use the HTML version for this lesson, because most people are comfortable with HTML. This will serve as the data for your profile page application. Then you'll use Adobe Spry to create a table for the list of countries and their regions, and use the Spry Accordion to display details of the chosen country.
Before we begin, let's take a look at the data. The newland folder has all three versions of the data. Each format has its own advantages, and your situation will dictate which you ultimately use. If your records are maintained in a database, you may already have experience outputting those records as HTML tables. Many programming languages have functions to output records as XML. If you have many records, or very large records, JSON might be the best choice for you, because it's the lightest-weight solution. For now, XML will give us the best view of the data, so we'll start there.
- Open the file countryDetailXML.xml. Press F12 to view the results.
- Close the XML file and open countryDetailTable.html. Press F12 to view the results (see Figure 8).
- Open countryDetailJSON.js (see Figure 9).
Most modern browsers can parse and display properly formed XML. The entire recordset is labeled <countries>, with each individual record shown in an individual <country> node in the XML file (see Figure 7). In this case, the fieldnames in the XML dataset reflect the fieldnames from the database from which the data was pulled. These arbitrary names will be the names of your variables once you pull the data into your page. The browser's parser gives us a convenient view of the data. If you click the minus (-) sign next to an opening tag of any element that has multiple rows of content, it will collapse the element for greater ease of reading.
The XML view gives us a clear idea of the nature of our recordset. To visualize it another way, we'll look at the HTML table version.
The HTML table view of the data should be comfortably familiar. Fortunately, Dreamweaver CS4 and Spry give you options to use data in this format as well. Before closing the HTML file, take a look at the opening table tag in the source code. Its ID attribute has the value "countries". This setup is critical for making it available to Spry as a data source. (We'll return to that later.) Close the HTML file for now.
Finally, we'll look at the JSON data. While Dreamweaver CS4 recognizes JSON data through its Spry Data Set wizard, the functions are there in the libraries, and the tag insight will suggest it when typing in code view.
Now it's time to take our data file and use it to create a more dynamic experience for our users and our site administrators.