Presenting Photos using Spry Tables

What is Spry?

Spry is Dreamweaver CS3's brand of AJAX or Asynchronous JAvaScript and XML

• XML is Extensible Markup Language, the language in which XHTML is written. XML lets you create your own tags.
• XML has the same rules as XHTML about lowercase tags, that have to be closed in the same nested way they are opened.
• You can create your own XML file with your own photo information for Project 2, using the techniques below. If your XML file is well formed, it will display in the browser.
  • You can prepare your own XML file o include all 6 of the images and explanations of how you prepared them
• Be sure that all the photos you use have the same dimensions so they will display correctly in the imageholder
• If necessary you can increase the canvas size to the dimensions and create a fill layer with the same color as the element that holds the images. Then drag the fill layer below the image layer before you save for web (you may have to change the name of the background layer to drag anything below it).
• NOTE: the spry markup is NOT valid XHTML. Your CSS will validate, however.
• Spry display final results

XML example

This example contains a set of photos and their descriptions.

• The page opens with an xml statement which tells the browser that the file abides by the XML standard. If the XML file does not display in the browser, there is usually a problem with the tags.
• The root element in this example is <photos>
• the list of photos are instances of the root element. Each is within a set of tags named <photo>.
• The entire list of <photo> elements is nested within the opening and closing <photos> ... </photos> tags
• Within each <photo> ... </photo> set of tags are attributes of the photo, each with its own tag, e.g., <name> ... </name>.
• Not all of the properties have to have values
• The text inside the <![CDATA ... ]]> will not be parsed by the parser in the browser. If you don't identify it as CDATA, the parser will find an error.
• XML file structures can be defined in;
  • a Data Type Definition or DTD. There are many specialized DTDs such as ones for law, mathematics, etc. that the field defines for their specialized use.
  • A Schema which imposes the rules and inter-relationships between the usages of the elements and the meanings of the attributes
• Attributes define what will be displayed by the spry table
• XML files are often used to hold data from a database in a flat text files.
• Data from different databases can be combined into a single XML file through an XSLT translation program.
• CSS stylesheets are used to display the XML data.

Using Spry Table to display the photos in the XML file

• Create a sub-directory in your CIS421 folder named spry
• Create a sub-directory assets inside spry.
• Create a sub-directory within assets named pictures
• Download the following sample files:
• photos.css into the assets folder -- you can use your own stylesheets later
• sprystart.htm into the spry folder
• photos.xml into the spry folder -- you can use your own data later.
• oporto.jpg, lisbonbuilding.jpg, GamlaUpsala.jpg into the pictures folder.
  • All of these images have the same dimensions as the imageplaceholder on the sprystart.htm page
  • the Spry table we insert will hold a list of the names of the photos and their size in kb.
  • We can set up the spry table to sort by the title or by the photo size.
  • When the user clicks on an element in the spry table, the html page will pull data from the XML file and display the appropriate image and the description of the image.

Program The Spry Table in Dreamweaver

Establish the spry DataSet

• Open sprystart.htm in Dreamweaver and save with another name such as spryend.htm in the html folder.
• Attach the stylesheet in the CSS window by clicking on the link and browsing to the photos.css file
• on the Insert bar right below the top menu, click on the Spry tab to open the Spry group.
• Click the Spry XML Data Set icon on the left end of the Spry group
• In the Spry XML Data Set window
  • Leave the Data Set name to ds1
  • Click the Browse button to select the xml source file, photos.xml
  • Click the Get Schema button to display the XML schema in the Row Element area
  • Repeating entries in the XML file are like records and are signified by <>
  • Click the repeating element photo to select it
  • Click Preview to see the data in the XML file for each instance of the photo element -- check to see that the data is what you expect
  • Click OK to close the preview window.
  • Next define any data types
    • In the Data Set Columns display, select pic
    • select image link in the Data type pop-up
    • if you had numerical or date data here, it would be good to type it as well.
  • In the Sort window, click Name, which will be the sorting criteria used when the page opens.
  • Click OK to close the window
  • The Copy Dependent Files dialog box will tell you that Dreamweaver needs to save JavaScript files to make Spry work correctly
    • Click OK
    • Dreamweaver creates a folder called SpryAssets with 2 JavaScript files.
    • You need to upload this folder and the JavaScript files to your Website, in the root directory or Spry won't work.

Add the Spry Table

• Select the words "Photo list placeholder' on the html page
• Click the Spry Table icon on the Spry Insert bar to replace the words.
• ds1 is selected in the Spry Data Set menu because it's the only dataset.
• the XML elements will display in the columns window. You need to delete the elements that will not display in the Spry Table
  • Select pic and click the minus (-) button to remove it from the table.
  • Select desc and click the minus (-) button to remove it from the table
• Program the table sort columns
  • Select name, and select the Sort column when header is clicked check box so the user can sort the table by the element name
  • repeat for the size element so the user can sort the table by file size
• Style the rows in the table -- you can change the colors later to suit yourself
  • Choose the oddRow class if there is a drop-down list -- if not type oddRow in the Odd row class input box.
  • in the Hover class, choose or type hoverRow
  • In the Even Row Class, type or choose evenRow
  • In the Select Class, type or choose selectRow
• Check the Update detail regions when row is clicked check box or Spry won't work
• Click OK
• Dreamweaver will ask if you want to add a Spry region. Click Yes
• Dreamweaver adds a table in place of the "Photo list placeholder'
• you can add scope attributes to the <th> tags and style the table
• Save the file and view in the browser.
• You should see a list of the elements and their file size in a table. When you click on one of the column headings the table should resort itself.

Add Spry Detail Regions

• The next step is to create a Spry Detail Region that will display the photos and the description when the user clicks on the photo name in the spry table
• Double-click the imagePlaceholder to open the open image window.
• Click the Data Sources radio button at the top of the window to associate the imagePlaceholder with a data source so the associated image will appear dynamically when the user selects an image in the spry table.
• A list of the photo element attributes will appear in the Field window
• Click on pic to associate the picture image data source
• Click OK
• Dreamweaver displays a broken image placeholder and updates the attribute
  <img src="{ds1::pic}"
• Go back to the Dreamweaver Design view of the page and select the Description Placeholder text
• Click Window>Bindings to open the Bindings Panel if it is not displayed already on the right panel group
• In the Bindings window, select desc
• Click the Insert button at the bottom of the window to insert the code for Spry dynamic text.
• Dreamweaver inserts {ds1::desc} detail region in place of the Description Placeholder text
• Update the <div id="photoDetail"> tag that holds both the image and description detail regions
• Click right before the > in the tag and hit the space bar
• Type the words spry:detailregion="ds1" so that the tag reads:
  <div id="photoDetail" spry:detailregion="ds1">
• Save the page and view it in the browser.
• When you click on the name of the image in the spry table, the image and description should change in the spry detail region.