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!

Error: Please check your email address.
Rocket to Success - Your 10 Tips for Smarter ERP System Selection
Keep up with the latest tech news, reviews and previews by subscribing to the Good Gear Guide newsletter.

Jason Wilson

PC World
Show Comments

Cool Tech

Breitling Superocean Heritage Chronographe 44

Learn more >

SanDisk MicroSDXC™ for Nintendo® Switch™

Learn more >

Toys for Boys

Family Friendly

Panasonic 4K UHD Blu-Ray Player and Full HD Recorder with Netflix - UBT1GL-K

Learn more >

Stocking Stuffer

Razer DeathAdder Expert Ergonomic Gaming Mouse

Learn more >

Christmas Gift Guide

Click for more ›

Most Popular Reviews

Latest Articles

Resources

PCW Evaluation Team

Walid Mikhael

Brother QL-820NWB Professional Label Printer

It’s easy to set up, it’s compact and quiet when printing and to top if off, the print quality is excellent. This is hands down the best printer I’ve used for printing labels.

Ben Ramsden

Sharp PN-40TC1 Huddle Board

Brainstorming, innovation, problem solving, and negotiation have all become much more productive and valuable if people can easily collaborate in real time with minimal friction.

Sarah Ieroianni

Brother QL-820NWB Professional Label Printer

The print quality also does not disappoint, it’s clear, bold, doesn’t smudge and the text is perfectly sized.

Ratchada Dunn

Sharp PN-40TC1 Huddle Board

The Huddle Board’s built in program; Sharp Touch Viewing software allows us to easily manipulate and edit our documents (jpegs and PDFs) all at the same time on the dashboard.

George Khoury

Sharp PN-40TC1 Huddle Board

The biggest perks for me would be that it comes with easy to use and comprehensive programs that make the collaboration process a whole lot more intuitive and organic

David Coyle

Brother PocketJet PJ-773 A4 Portable Thermal Printer

I rate the printer as a 5 out of 5 stars as it has been able to fit seamlessly into my busy and mobile lifestyle.

Featured Content

Product Launch Showcase

Latest Jobs

Don’t have an account? Sign up here

Don't have an account? Sign up now

Forgot password?