DM 171: Week Nine - Add XML Dynamically via Spry

Spry and Your Data

Once you have an XML file to work with, there are a few steps to follow to use Spry to display your data on your page. The Help menu has detail instructions if all fails…

Spry XML Data Set (CS4)

Dreamweaver CS4 makes utilizing XML data files easy!

  1. From the Spry Insert menu, choose "Spry Data Set."
  2. Follow the Spry Data Set "Wizard" to display your data. Remember to use your cursor and the tab key to navigate fields, the return key will exit the wizard.
  3. Style your display to match your look and feel.

Spry XML Data Set (CS3/CS2)

From the Spry toolbar, choose the farthest left icon labeled “Spry XML Data Set” or from the menu use Insert > Spry > Spry XML Data Set to add your XML data to your page. The ensuing dialog box asks for:

  1. the Data Set name
  2. the XML source, paste in the url if it is an external online file or Browse… on your hard drive for your local one
  3. if your XML data types do not show in the Row element box, click on the Get schema button
  4. you will see the data elements in the Row element box, select the element with the plus sign next to it (indicates a repeating element)
  5. in the Data Set columns box, you will see all of the data elements and their Data Type, by default, string. This will work for most data elements since they are usually just text. If some of your data elements are more than just plain text, select it and change its data type via the Data type pull down menu.
  6. If you want to sort your data, use the Sort pull down menu to pick the data element and choose your direction preference.
  7. Click OK
  8. Your data set and data elements should show up in your Bindings panel
  9. Dreamweaver also adds SpryData.js and xpath.js to your SpryAssets folder, make sure it does

You have added the data set to your page, now pick a method to show the data.

Spry Region

If you use the Spry Repeat List or Spry Table, Dreamweaver will automatically add the Spry Region to your page, otherwise you will need to add a Spry Region to the part of your page where your data will be viewed. The Spry Region is just a div tag with spry:region="your_data_set_name" attribute in it. This tells the SpryData.js to which data set the area is linked.

The Spry Repeat List and Spry Table are set up to automatically repeat items so the list item or table rows get populated with all your data. If you are using another method, you will need to use the Spry Repeat with the element you are repeating. Whichever method you choose, click on the “Update detail regions when *** is clicked” checkbox if you want other areas of your page to change as you select different items in your list or table.

Image Source

You may have an image that you wish to change dynamically. Use the menu Insert > Image and in the ensuing dialog box, instead of browsing for your image, choose the Data Sources… button to make the image source dynamic. This produces a Dynamic Data dialog box (looks much like the Bindings panel) that allows you to pick the XML element that has the url for your image. This puts Spry instructions within the image tag to indicate the data element to use.

Updating Elements

Once you have an element (such as an image) set to display dynamically, you need to link it to your data set and the repeating region element you are using to trigger the dynamic element update.

Choose the container of the dynamic element and in code view or quick tag edit view add the Spry attribute spry:detailregion="your_data_set_name" . This lets the SpryData.js know the relationship between your triggering element and the dynamically changing element. In your tag selector at in the status bar of your document window in design view, you will notice that the containing element turns orange to signify that it is a dynamically changing detail region.