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

Father’s Day Gift Guide

Brand Post

Most Popular Reviews

Latest Articles

Resources

PCW Evaluation Team

Luke Hill

MSI GT75 TITAN

I need power and lots of it. As a Front End Web developer anything less just won’t cut it which is why the MSI GT75 is an outstanding laptop for me. It’s a sleek and futuristic looking, high quality, beast that has a touch of sci-fi flare about it.

Emily Tyson

MSI GE63 Raider

If you’re looking to invest in your next work horse laptop for work or home use, you can’t go wrong with the MSI GE63.

Laura Johnston

MSI GS65 Stealth Thin

If you can afford the price tag, it is well worth the money. It out performs any other laptop I have tried for gaming, and the transportable design and incredible display also make it ideal for work.

Andrew Teoh

Brother MFC-L9570CDW Multifunction Printer

Touch screen visibility and operation was great and easy to navigate. Each menu and sub-menu was in an understandable order and category

Louise Coady

Brother MFC-L9570CDW Multifunction Printer

The printer was convenient, produced clear and vibrant images and was very easy to use

Edwina Hargreaves

WD My Cloud Home

I would recommend this device for families and small businesses who want one safe place to store all their important digital content and a way to easily share it with friends, family, business partners, or customers.

Featured Content

Product Launch Showcase

Don’t have an account? Sign up here

Don't have an account? Sign up now

Forgot password?