- 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
Like this article? We recommend
Like this article? We recommend
Like this article? We recommend
Passing and Using Data with Ajax
Asynchronous JavaScript and XML (called Ajax for short) is a term that was coined in 2005 for a technique that has been available for over a decade. The Ajax technique is used to pass data to and from interactive web applications. It helps you to create web pages that appear more responsive, because the data passes between the user's computer and the server behind the scenes, without requiring the page to reload.
The two main technologies that make up Ajax are XML and JavaScript. Extensible Markup Language (XML) is a language that allows you to package information, such as a recordset, and maintain its structure while you send it over the Internet. JavaScript is a scripting language that lets you manipulate objects, such as your recordset, in the user's browser. Prior to Dreamweaver CS4, you had to use XML or JavaScript Object Notation (JSON, another way to structure your data) to provide the data for Ajax. CS4 now allows you to use HTML tables as recordsets. This approach makes Ajax much more accessible to web developers.
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.
The Spry framework has a number of useful elements, including a number of user interface "widgets," visual effects, and form validation. It's designed to be easy to implement for anyone with a basic knowledge of HTML, CSS, and JavaScript.
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.
){kind=small}
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.
){kind=small}
The browser preview (F12) command doesn't work with JavaScript files, because they look just the same in the browser. You can see the way that JSON structure works on the same data. When you're finished looking over the JSON file, close the file.
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.