If you submit a page that uses Spry to the W3C validator at http://validator.w3.org/, you get a series of errors saying, for example, that there is no attribute spry:regionor spry:repeatchildren. This happens even though Dreamweaver amends the <html>tag at the top of the page like this:
<html xmlns="http://www.w3.org/1999/xhtml" ➥ xmlns:spry="http://ns.adobe.com/spry">
The code highlighted in bold declares spryas a namespace. This tells the browser not to confuse anything prefixed with spry:with standard HTML attributes or custom attributes from other namespaces, such as other Ajax frameworks. While this prevents conflicts, it’s not sufficient for W3C validation. You need to tell the validator where to find the Spry document type definition (DTD) by inserting an ENTITYdeclararation into the DOCTYPE declaration at the top of each page like this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ➥
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
[
<!ENTITY % SPRY SYSTEM "http://www.adobe.com/dtd/spry.dtd">
%SPRY;
]>
<html xmlns="http://www.w3.org/1999/xhtml" ➥ xmlns:spry="http://ns.adobe.com/spry">
So, why doesn’t Dreamweaver add the necessary code? Figure 19-17 shows why. Internet Explorer, Firefox, and Safari all fail to understand the <!ENTITY>declaration and display
%SPRY; ]> at the top of the page if you include it (see http://labs.adobe.com/
technologies/spry/articles/validation/validating_spry.html).
Figure 19-17.Most leading browsers can’t cope with the code needed to ensure that Spry validates.
If W3C validation is a mandatory requirement for your website, you have two options:
don’t use Spry, or remove the Spry markup from the page with Dreamweaver CS4’s new JavaScript Extractor.
The JavaScript Extractor was covered in Chapter 8, but let’s put it to practical use convert- ing the gallery you have worked on throughout this chapter.
This brief exercise shows you how to extract the Spry markup from gallery_select.php so that the page validates against W3C standards. Continue using the same file as in previ- ous exercises. Alternatively, use gallery_select_04.phpin exercises/ch19as your start- ing point.
1.With gallery_select.php open in the Document window, select Commands ➤ Externalize JavaScript.
2.Because the page has a .phpfile name extension, Dreamweaver displays a warning that it’s not recommended to run the command on pages with server-side code and asks whether you want to proceed anyway. The warning is there because the JavaScript Extractor might not be able to identify the right elements to extract if server-side code, such as PHP, and HTML are mixed within the body of the page.
That’s not the case here, so it’s safe to go ahead. Click Yes.
3.In the Externalize JavaScript dialog box, select Externalize JavaScript and attach unobtrusively. As shown in Figure 19-18, Dreamweaver displays a list of all the JavaScript elements that will be removed. You want to remove all of them, so leave everything selected, and click OK.
Figure 19-18.The JavaScript Extractor identifies all the JavaScript elements and Spry markup Converting the Spry gallery to use unobtrusive JavaScript
19
4.Dreamweaver displays a report of what it has done, as shown in the screenshot alongside.
The important information is at the bottom of the report: the names of two external JavaScript files that need to be uploaded with the page. The first one, SpryDOMUtils.js, will be saved to your Spry assets folder. The second one, gallery_select.js, contains the unobtrusive Java- Script code, and it will be cre- ated in the same folder as the original page.
5.Click OKto dismiss the report, and save the page. If this is the first time you have used the JavaScript Extractor in a site, you will see a message telling you that SpryDOMUtils.jsis being copied to your Spry assets folder. Click OKto dismiss the message.
6.Test the page in a browser to make sure it still works as before. You can check your code, if necessary, against gallery_select_05.php and gallery_select.js in examples/ch19.
7.Upload the page, together with all its dependent files, to your remote server, and submit its URL to the W3C validator at http://validator.w3.org/. As Figure 19-19 shows, you now have a Spry gallery that passes validation with flying colors.
Figure 19-19.Attaching the Spry markup with unobtrusive JavaScript produces a valid page.