Look into my Spry

Look into my Spry

Adobe Dreamweaver CS3 comes with some handy new scripting tools called Spry and this month we take a closer look at how to create dynamic content using this AJAX equivalent. We have an exclusive 30-day trial of Adobe's Creative Suite 3 Design Premium -- including Dreamweaver CS3 on the July 2007 Cover Disc.

First, create a Dreamweaver site directory (Site-New Site and follow the wizard -- ensure you're in the Basic tab). Once setup is complete, you'll need an XML file to feed data into the Web page. Go to File-New-Blank Page and create a new XML page, then add some product descriptions using the sample below:

<Products>
<Product>
<name>Product 1 name</name>
<description>Product 1 description.</description>
</Product>
<Product>
<name>Product 2 name</name>
<description>Product 2 description.</description>
</Product>
</Products>

Save this file as "products.xml" and then go back to File-New-Blank Page and create a blank HTML page (choose Layout ). Save as "products.html".

Before we can grab the XML data, we first need to create a Spry XML Data Set. This connects to the XML file you just created and can be accessed by going to Insert-Spry-Spry XML Data Set (or clicking the icon in the Spry toolbar). In the pop-up window, name your data set something easily identifiable (dsProducts in this example) and then click the Browse button to locate your XML file. Once found, click the "Get schema" button to display all the fields contained in your XML file. Highlight Product in the Row element window and click OK.

You'll now see the following displayed in your Web page code (View-Code):

<script src="SpryAssets/xpath.js" type="text/javascript"></script>
<script src="SpryAssets/SpryData.js" type="text/javascript"></script>

Xpath.js and SpryData.js are both JavaScript files needed by Spry to work correctly, and shouldn't be touched unless you're an experienced developer. You've probably also noticed another few lines of code:

<script type="text/javascript">
<!--
var dsProducts = new Spry.Data.XMLDataSet("products.xml", "Products/Product");
//-->
</script>

This links the data set variable dsProducts (that you just created in the Spry XML Data Set) with your XML file, and also the product field within that file.

The Bindings window (top-right of the Dreamweaver workspace by default) should also display a visual representation of your XML data fields. In Dreamweaver's Design view (View-Design), place your mouse cursor anywhere in the blank page and go to Insert-Spry-Spry Region. Make sure the Container is set to Div, the Type is set to Region, the correct Spry Data Set is chosen and click OK.

You'll now see a dotted box with some placeholder text in your page. With the text highlighted, go to Insert-Spry-Spry Table. In the pop-up window remove all fields except the name by highlighting the other fields and clicking the - button. Click OK once complete. An HTML table will then be created with the XML name field inserted. If you go to View-Code you'll see the Spry code that's been inserted. Spry:region is the area that will contain XML data; spry:repeat tells the Web page to keep repeating the table rows until all product names have been displayed. Now that we have the entire product names displayed, it's time to make things a bit more dynamic.

Go into code view (View-Code), select the line that contains the spry:repeat and change to the following:

<tr spry:repeat="dsProducts" onclick="dsProducts.setCurrentRow({ds_RowID})">

You'll notice as you hit the space bar whilst typing this line out that drop down options will appear, making it much easier to type in your code. What we've just told our Web page to do, when the product name is clicked, is to update other Spry regions (that we're about to create) with the correct information by using the unique product ID (ds_RowID) as a reference.

Now place your cursor on the outside of the last &alt;/div> in your code, hit &alt;Enter> to drop a line and go to Insert-Spry-Spry Region. In the Type area, choose Detail region and click OK.

Another Spry region has now been created, and we will use this area to display the product information after the product name has been clicked. You may have noticed that we selected Detail region instead of Region in the Type section - this is because the Detail region is used specifically to display dynamically updated data.

With the Spry region placeholder text highlighted, go to the Bindings window and drag the description filed into the region. If all goes well, the text should be replaced with {description} highlighted in blue.

When you return to your testing server you'll notice that when clicking on each product name, the description is updated to match the product selected. Nifty!

NOTE: Adobe have released pre-release version 1.5 of Spry that allows you to test your Spry code offline (Dreamweaver CS3 currently ships with version 1.4) - get it from the Adobe Labs (http://labs.adobe.com/technologies/spry).

Join the newsletter!

Or

Sign up to gain exclusive access to email subscriptions, event invitations, competitions, giveaways, and much more.

Membership is free, and your security and privacy remain protected. View our privacy policy before signing up.

Error: Please check your email address.
Keep up with the latest tech news, reviews and previews by subscribing to the Good Gear Guide newsletter.

Jason Wilson

PC World
Show Comments

Brand Post

Most Popular Reviews

Latest Articles

Resources

PCW Evaluation Team

Jack Jeffries

MSI GS75

As the Maserati or BMW of laptops, it would fit perfectly in the hands of a professional needing firepower under the hood, sophistication and class on the surface, and gaming prowess (sports mode if you will) in between.

Taylor Carr

MSI PS63

The MSI PS63 is an amazing laptop and I would definitely consider buying one in the future.

Christopher Low

Brother RJ-4230B

This small mobile printer is exactly what I need for invoicing and other jobs such as sending fellow tradesman details or step-by-step instructions that I can easily print off from my phone or the Web.

Aysha Strobbe

Microsoft Office 365/HP Spectre x360

Microsoft Office continues to make a student’s life that little bit easier by offering reliable, easy to use, time-saving functionality, while continuing to develop new features that further enhance what is already a formidable collection of applications

Michael Hargreaves

Microsoft Office 365/Dell XPS 15 2-in-1

I’d recommend a Dell XPS 15 2-in-1 and the new Windows 10 to anyone who needs to get serious work done (before you kick back on your couch with your favourite Netflix show.)

Maryellen Rose George

Brother PT-P750W

It’s useful for office tasks as well as pragmatic labelling of equipment and storage – just don’t get too excited and label everything in sight!

Featured Content

Product Launch Showcase

Don’t have an account? Sign up here

Don't have an account? Sign up now

Forgot password?