The structure of england.xmlis similar to the HTML table you created as a data source in gallery_eng.php, but it contains no image tags, so the resulting Spry data set will need to store the file name and the image dimensions separately.
The following instructions show you how to create a Spry data set from an XML document and then incorporate it in a master-detail set to display images by binding data to the attributes of HTML tags. Since the Spry Data Set wizard was covered in detail earlier in the chapter, I’ll concentrate on the differences of working with an XML data source.
1.Create a new page called spry_xml.phpin workfiles/ch19. (You can also use an .htmlfile name extension, because no PHP is involved in this process.)
2.Launch the Spry Data Set wizard from the Spry tab of the Insert bar or the Insertmenu.
19
Figure 19-15.With an XML source, the first step of the data set wizard closely resembles working with an XSLT fragment.
3.In the first step of the wizard, select XMLfrom the Select Data Type drop-down menu. As soon as you do so, the Detectdrop-down menu disappears, and the Data Selectionfield changes to Row element.
4.Change Data Set NametodsPhotos, and use the Browsebutton to set the Specify Data Filefield to use examples/ch19/england.xml. This populates the Row element field with a diagrammatic representation of the XML hierarchy in the same way as the Bindingspanel does when you create an XSLT fragment (see Chapter 18).
5.In the same way as with an XSLT fragment, you need to select the repeating node, which is indicated by a small plus icon alongside a pair of angle brackets. Select photoin the Row elementfield. This now populates the Data Previewfield with rows and columns representing the data set. The first step of the wizard should now look like Figure 19-15.
19
Notice that the dimensions of the image are displayed as file/@height and file/@width, indicating that they are attributes of the <file> node. Only the file names are shown, not the actual images, because the XML data source is text only.
6.Click Nextto move to the second step of the wizard. As you can see in Figure 19-16, it’s almost identical to the second step for an HTML source. You can’t change the column names, and the options not to use the first row as headers and switch rows to columns are not relevant to XML. The other options are the same.
7.Set Typeto numberfor file/@heightand file/@width; and for description, set Typeto html. Then click Nextto move to the final step of the wizard.
8.The final step is identical to when you use an HTML data source. Select the Insert master/detail layoutradio button, and then click the Set Upbutton alongside.
Figure 19-16.With XML, you cannot rename the column names.
9.I explained how the Spry Data Set – Insert Master/Detail Layoutdialog box works in the “Setting the options for a master-detail set” exercise earlier in the chapter, so I won’t go into the details again. Use the following settings, and then click OK.
10.Click Doneto close the wizard.
11.Save spry_xml.php, and click OKwhen prompted to copy dependent files to your Spry assets folder.
12.Because the XML data source is a static file, you can use Live view to see the out- put. It should look similar to Figure 19-10, only the file name is displayed instead of an image. You need to insert the image yourself and bind the Spry data to it.
13.Turn off Live view. It’s best to work in Split view so you can see what’s happening in the underlying code.
14.Select the {file}dynamic placeholder in Design view, and press Deleteto remove it.
This leaves the insertion point between the <p>tags, which is where you want to insert the image.
15.Click the Imagesbutton in the Insertbar, or select Insert➤Imageto open the Select Image Sourcedialog box.
16.To get the correct path for the dynamic image, you need to use the same technique as when you created the HTML data source at the beginning of this chapter.
Navigate to the images/galleryfolder, cut the value in the URLfield to your clip- board, and then select Data sourcesin the Select Image Sourcedialog box.
17.Select file from the dsPhotos data set, and paste the path back in front of the dynamic placeholder, as shown here:
18.Click OKto close the Select Image Sourcedialog box, and set the alternate text to
<empty>when prompted.
Notice that the code inserted in Code view uses {file} instead of {dsPhotos::file}. This is because it’s in a dsPhotosdetail region. The prefix isn’t required when the data set is the same as that for the detail region.
19.Finally, you need to bind file/@height to img.height, file/@width to img.width, and captionto img.alt through the Bindings panel in the same way as you did for the HTML image at the beginning of the chapter. The code for the image tag should end up looking like this in Split view:
19
20.Save spry_xml.php, and test it in Live view or a browser. It should look the same as Figure 19-10, except it uses the photos of England.
You can check your code, if necessary, against spry_xml.phpin examples/ch19.
This example uses a static XML document. However, you can also generate the XML data source dynamically with PHP. Details of how to do so are in the appendix.