Products

Technologies

A–C

D–H

I–Z

Developer services

Project centers

Developer resources

Community resources

Product documentation

Downloads

Samples

Training and books

Newsletters

Blogs

MXNA (blog aggregator)
Adobe blogs

ADC program

Additional resources

Dreamweaver Article

Building a photo album with the Spry framework

Defining the data set and adding data bindings

After building the HTML page, the next step is to add the Ajax script to the project. We’ll start by adding the XML data set. But before we’re ready to do that, let’s take a look at the XML data and get a feel for how it is used.

Open the photos.xml file in the source files folder using Dreamweaver. If you study one node of the XML file, you will see the following tag:

<photo
   path = "travel_01.jpg"
   width = "350"
   height = "262"
   thumbpath = "travel_01.jpg"
   thumbwidth = "75"
   thumbheight = "56">
</photo>

Notice that the 'photo' XML node contains all the basic information needed for an HTML <img> tag. You will use this data to dynamically build a series of HTML <img> tags that will display in the album.

Defining the data set

The first thing we need to do is link the sprydata.js and xpath.js files to the gallery.htm file you’ve created.

Type the following code into the <head> section of your HTML in the Code window:
```
<script type="text/javascript" src="includes/xpath.js"></script>
<script type="text/javascript" src="includes/SpryData.js"></script>
```
Note: If you've moved the xpath.js and sprydata.js files into a subfolder within the sample files folder, make sure that the src path matches your project's folder structure.

Now we are ready to create the data set. This is accomplished using a JavaScript call to the sprydata.js file. Follow the steps below:
In the <head> section of your HTML page, add a <script> tag. Type the code below to add the JavaScript call that will create the data set.
```
<script type="text/javascript">
      var dsGallery = new Spry.Data.XMLDataSet("photos.xml", "gallery/photos/photo");
</script>
```
If you haven't already, now is a good time to save your file.

Check your progress so far by taking a look at your Code window and comparing the code with the entire HTML page example below:
```
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://ns.adobe.com/spry">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Ajax Album Demo</title>
<script type="text/javascript" src="includes/xpath.js"></script>
<script type="text/javascript" src="includes/SpryData.js"></script>
<script type="text/javascript">
       var dsGallery = new Spry.Data.XMLDataSet("photos.xml", "gallery/photos/photo");
</script>
<style type="text/css">

</style>
</head>
<body>
   <div id="thumbContainer"> </div>
   <div id="main"> </div>
</body>
</html>
```
The code we've just added between the <script> tags creates a variable called 'dsGallery', which is the name of the data set. "Spry.Data.XMLdataset" is the function that creates the data set. The file "photos.xml" is the name of the XML file that contains the photo data. The part "gallery/photos/photo" describes the path within the XML where the actual data starts. This data set section of the code represents the first three tags in the sample XML node we reviewed. This means that the data for the data set begins within the <photo> node in the photos.xml document.

Surprisingly, that is all the script we need to add to define the data set!

Adding data bindings

Now that we have defined the data set, we can add data bindings to the HTML page. We'll start by adding the thumbnail images to the 'thumbcontainer' <div> we created earlier.
Insert an image tag within the 'thumbcontainer' DIV, by typing the following between the <div> tags: <img src="">
Next, add the data reference for the image URL to the src attribute, as follows:
```
<img src="thumbnails/{@thumbpath}" />
```
The 'src' field points to the thumbnails folder and then pulls in the XML value of the 'thumbpath' attribute in the XML file. This will complete the path to the thumbnail image. The @ symbol is used before the name because the value is an attribute of the image tag. For example, to link to an image file called "foo.jpg" from <image thumbpath="foo.jpg">, use this syntax: {@thumbpath}. This is different than typing a value of a tag, which would be: <thumbpath>foo.jpg</thumbpath>. This would be written as {thumbpath} without the "@".

The thumbnail image is now set. Now we'll set the images to repeat by adding a 'spry:repeat' attribute to the thumbnail image tag. This will cause the image tag to repeat over the entire data set.
Inside the thumbnail <img> tag, add the following 'spry:repeat' attribute:
```
<img src="thumbnails/{@thumbpath}" spry:repeat="dsGallery" />
```
Locate the 'thumbContainer' <div> tag, and add the following 'spry:region' attribute:
```
<div id="thumbContainer" spry:region="dsGallery">
```

Next, find the 'main' <div> tag and add a 'spry:detailregion' attribute:

<div id="main" spry:detailregion="dsGallery">

At this point, your code should look like the example below:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://ns.adobe.com/spry">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Ajax Album Demo</title>
<script type="text/javascript" src="includes/xpath.js"></script>
<script type="text/javascript" src="includes/SpryData.js"></script>
<script type="text/javascript">
       var dsGallery = new Spry.Data.XMLDataSet("photos.xml", "gallery/photos/photo");
</script>
<style type="text/css">
<!--
#main {
	position:absolute;
	left:476px;
	top:128px;
	width:491px;
	height:315px;
	z-index:2;
}
#thumbContainer {
	left:23px;
	top:127px;
	width:437px;
	height:430px;
	z-index:1;
	position:absolute;
}
-->
</style>
</head>
<body>
   <div id="thumbContainer" spry:region="dsGallery">
      <img src="thumbnails/{@thumbpath}" spry:repeat="dsGallery" /> 
   </div>
   <div id="main" spry:detailregion="dsGallery">
   </div>
</body>
</html>

In the two <div> tags, the 'spry:region' attribute tells the Ajax framework that each <div> layer contains dynamic data.

The 'spry:repeat' attribute in the <img> tag tells the dynamic region that it should create an image for each row in the dsGallery data set. This results in the page generating an image for every thumbnail in the data set.

Now, when you choose File > Preview in Browser, all the thumbnail images are displayed in the page.

Setting up the main image display

This next part will look very familiar, because it is very similar to the step we just completed.

In the 'main' <div> tag, add an image tag. Also add code to display the image name underneath the main image, as shown below:
```
<img src="images/{@path}"><br/>Name:{@path}
```
Notice that the only difference in this code from the thumbnail code is that we are using {@path} instead of {@thumbpath}. Since these values are identical in the XML files, we could use either one—but for the sake of clarity and best practices, we'll use the correct attribute.

The basic photo album functionality is now set up. Choose File > Preview in Browser again and you will see the page display the first main image and all of the thumbnail images. However, if you click the thumbnail images, nothing happens. Our goal for this next part is to add the functionality that when the user clicks on a thumbnail image, the corresponding larger version of that image will update the main <div> area. To do this, we need to establish a relationship between the thumbnail images and the main image, as shown below:

In the Code window, add a 'spry:setrow' attribute to the thumbnail <img> tag:

spry:setrow="dsGallery"

Here's an example of how your HTML code should look now:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://ns.adobe.com/spry">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Ajax Album Demo</title>
<script type="text/javascript" src="includes/xpath.js"></script>
<script type="text/javascript" src="includes/SpryData.js"></script>
<script type="text/javascript">
       var dsGallery = new Spry.Data.XMLDataSet("photos.xml", "gallery/photos/photo");
</script>
<style type="text/css">
<!--
#main {
    position:absolute;
    left:476px;
    top:128px;
    width:491px;
    height:315px;
    z-index:2;
}
#thumbContainer {
    left:23px;
    top:127px;
    width:437px;
    height:430px;
    z-index:1;
    position:absolute;
}
-->
</style>
</head>
<body>
<div id="thumbContainer"spry:region="dsGallery">
    <img src="thumbnails/{@thumbpath}" spry:repeat="dsGallery" spry:setrow="dsGallery"/> 
</div>
<div id="main"spry:detailregion="dsGallery">
    <img src="images/{@path}"><br/>Name:{@path}
</div>
</body>
</html>

Let’s take a look now, and see what is happening:

When the user clicks on a thumbnail, the spry:setrow attribute tells the browser to set the RowID of the data set as the CurrentRow. The 'spry:detailregion' attribute is updated with this value and that in turn updates the path of the main image with the image name from that node ID in the XML file. The new main image is now displayed.

When you preview your page in a browser, you’ll see that the photo album works quite well now in terms of functionality, but the thumbnail images are displaying in an disorderly fashion along the top of the browser window. Do not worry about the layout of your HTML page, we’ll address that in the next section of this tutorial.

A–C

D–H

I–Z