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).

Keep up with the latest tech news, reviews and previews by subscribing to the Good Gear Guide newsletter.

Jason Wilson

PC World

Comments

Comments are now closed.

Latest News Articles

Most Popular Articles

Follow Us

GGG Evaluation Team

Kathy Cassidy

STYLISTIC Q702

First impression on unpacking the Q702 test unit was the solid feel and clean, minimalist styling.

Anthony Grifoni

STYLISTIC Q572

For work use, Microsoft Word and Excel programs pre-installed on the device are adequate for preparing short documents.

Steph Mundell

LIFEBOOK UH574

The Fujitsu LifeBook UH574 allowed for great mobility without being obnoxiously heavy or clunky. Its twelve hours of battery life did not disappoint.

Andrew Mitsi

STYLISTIC Q702

The screen was particularly good. It is bright and visible from most angles, however heat is an issue, particularly around the Windows button on the front, and on the back where the battery housing is located.

Simon Harriott

STYLISTIC Q702

My first impression after unboxing the Q702 is that it is a nice looking unit. Styling is somewhat minimalist but very effective. The tablet part, once detached, has a nice weight, and no buttons or switches are located in awkward or intrusive positions.

Resources

Best Deals on GoodGearGuide

Latest Jobs

Don’t have an account? Sign up here

Don't have an account? Sign up now

Forgot password?