- 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
Connecting the Country Profiles Page to HTML Data
Currently, the Country Profiles page (profiles.html) contains a listing in static HTML of the countries to which Newland offers tours. In order to create a page that's easy to maintain when new countries are added or changed, this information should come from a database. We'll use our data file to emulate a database. Therefore, just about all of the content on this page (excluding the banner and footer) is obsolete, so you need to delete it.
Once you have removed all of the old content, you'll need to add a list of links that will let users choose a country profile. This list will come from the HTML dataset you viewed in the previous section. In this step, you'll pull that dataset into this page for use by Spry, both for the list and the detailed profiles.
- Open profiles.html in design view.
- Drag to select everything on the page, starting from the horizontal rule just above Namibia all the way down to the bottom of the page, including the words Nuevo Peso at the end of the profile of Mexico (see Figure 10).
- Press Delete.
- Replace the first line of
body text with the following
text (see Figure
11):
The following list shows all of the countries to which we currently offer tours. To learn more about a country, click on its name.
Here, you are just changing the directions of the page to reflect the new functionality of the page.
- Insert your cursor in the blank space below the paragraph you just typed. Click Insert > Spry > Spry Data Set (see Figure 12).
- In the Specify Data Source dialog, leave the Select Data Type as HTML. For the Data Set Name, enter ds1, and choose Tables in the Detect box. Next to Specify Data File, browse for countryDetailTable.html and select it. Click the yellow arrow to the left of the table headings (see Figure 13) to identify this table as your data container.
- In the Data Containers drop-down list, choose countries. That value comes from the ID attribute of the table that we noted earlier, when looking at the source code of the HTML document. Once the Data Container is selected, the Data Preview at the bottom of the dialog is populated, as shown in Figure 14.
- Click the Next button to move to the Set Data Options dialog. In the Column Name drop-down list, choose the population column, and set its Type to number. All others can remain strings. You also have the option of setting a default Sort Column for the data. Choose countryName and set the sort as Ascending (see Figure 15).
- Click Next to move to the Choose Insert Options dialog. Select the "Insert table" radio button and click Set Up (see Figure 16). You will choose which fields in the dataset you want to include in your table.
- Remove all columns except region and countryName by clicking the minus (-) button next to Columns. Move countryName above region by highlighting the countryName row and clicking the up-arrow button. Make sure that the value for Sortable is set to Yes for each column name. If it isn't, highlight the column name and click the checkbox below the list. Finally, select "Update detail regions when row is clicked" and click OK (see Figure 17).
- Click Done to close the Spry Data Set wizard. Switch to code view to see the information that Dreamweaver has inserted into your page.
- Add the following instruction at the end of the text at the top of the page:
- Save the changes to your file. You will be prompted to copy files into your site directory, creating a SpryAssets folder in the process. Accept the files. Highlight profiles.html in your Files panel and press F12 to preview. You should see the list of country and region names.
- The heading for the column containing the names of the countries reflects the name of the database field (countryName). Before you move on, change that heading by capitalizing country and placing a blank space before Name, as shown in Figure 19.
)
The content is removed, and the cursor is left in an empty <p> tag, visible in code or split view, at the bottom of the page.
){kind=small}
)
){kind=small}
Take a moment to examine the other options in the dialog. Notice that, by changing the Select Data Type setting, you could use the XML file instead of the HTML tables. The Detect drop-down list shows the other types of containers that can serve as data sources. In this example, it's not really necessary to identify the data container, as the page contains only one table. If the page included more than one source (table, div, or list), a yellow arrow would appear next to each, allowing you to identify which container would be the source of your data.
)
)
){kind=small}
)
Remember that Ajax uses JavaScript to manipulate your data. For Spry to use the HTML file you just bound to profiles.html, it needs some JavaScript functionality. Dreamweaver has inserted references to a couple of JavaScript libraries in your page, and will prompt you to move those libraries into your site when you save your document.
A Spry region has been created, with your Spry table inside it. A Spry region is an area on a page that is bound to a dataset. This region is bound to our HTML dataset, referred to here as ds1, the variable to which you assigned it when first connected to the page.
If you look in the Bindings panel, you will now see your full dataset, ready for use (see Figure 18). As with a recordset from a database query or columns in an HTML table, these individual variables can be inserted on the page in order to display their dynamic content. You will do just that later in the lesson.
)
Click column headings to sort.
When you style the table, you will add a visual indication that the column headings are clickable, but having some simple directions will also aid users.
That was pretty easy, but what's so special about a Spry table? The columns are sortable! Check this functionality by clicking the column names to sort and then reverse-sort the records. Without Ajax, users would have to refresh the page to sort the records.
)
