Start learning with our library of video tutorials taught by experts. Get started

Dreamweaver CS4 New Features

Understanding Spry datasets


From:

Dreamweaver CS4 New Features

with James Williamson

Video: Understanding Spry datasets

With each new release, Adobe continues to integrate more and more Spry features into Dreamweaver. For CS4, another notable addition is the inclusion of Spry HTML Data Sets to accompany the existing XML Data Set capabilities. The overall Spry Data Set functionality has been improved as well. With a wizard-like interface that gives you options for how your data set information is presented on the page, you can choose from Preset Data Layouts or simply use the Bindings panel to populate Spry widgets or manually created Spry regions later.

Watch this entire course now—plus get access to every course in the library. Each course includes high-quality videos taught by expert instructors.

Become a member
Please wait...
Dreamweaver CS4 New Features
1h 57m Intermediate Sep 23, 2008

Viewers: in countries Watching now:

In Dreamweaver CS4 New Features, Adobe Master Instructor James Williamson focuses on the improvements that benefit typical workflows in this popular web design and development tool. James demonstrates how to make efficient use of the new user interface, including the workspace manager, code navigator, Live view, and Property inspector. He also explores the capabilities of the Spry AJAX framework, including validation, tooltips, and datasets. Exercise files accompany the course.

Subject:
Web
Software:
Dreamweaver
Author:
James Williamson

Understanding Spry datasets

With each new release, Adobe continues to integrate more and more Spry features into Dreamweaver. For CS4, another notable addition is the inclusion of Spry HTML Data Sets to accompany the existing XML Data Set capabilities. The overall Spry Data Set functionality has been improved as well. With a wizard-like interface that gives you options for how your data set information is presented on the page, you can choose from Preset Data Layouts or simply use the Bindings panel to populate Spry widgets or manually created Spry regions later.

In this video, we will examine the new Spry HTML Data Set capabilities by first taking a look at the source file of our data set and how this information will be presented on another page. So here I have the gear.htm file opened from the Chapter 12 folder. If I scroll down I can see that there is a table on the page that shows some properties of two of my cameras: Sony camera and the Fuji FinePix. Well, I notice that this table has a lot of information: Maximum Resolution, Low Resolution, Sensor Type, Zoom Wide, on and on and on. Well, I might want to present this data in other ways throughout my entire site.

Now, by using a Spry HTML Data Set I can use this data as the source, populate the entire rest of my site, even building interactive displays of this data, knowing that all I have to do to update it is update this one table. So it's a huge time saver, great for maintenance and updating, and it also allows me to repurpose data without having to worry about using any server-side software. So there is a lot of positives here. Now, of course before I can start doing this, I have to understand a little bit about the structure of the table that I'm using to store this data. Now, what I'm going to do is I'm going to turn my Style Rendering off so I can see exactly how this table has been constructed.

If I right click the Document toolbar, I can open up my Style Rendering toolbar. Now, typically, this will dock with the Document toolbar as well. On the Mac, you are limited to having it docked with the Document toolbar. But with the PC, I can float it around. So to save a little bit of screen real estate, I'm just going to float it up here. So I'm going to turn off the displaying of CSS Styles by clicking this Toggle icon, and now I see my table unformatted. Now, in the unformatted view, I notice that there are a couple of things that are visible now that weren't before. For example, this Camera Header and this Image Label, neither of those were visible when my CSS is turned on.

Well, we don't want to present that visually, but for our data structure to be used throughout the site, having those labels is going to be extremely helpful. So one of the things that we see here is that if we are going to use the table as an HTML data source, it's important that it be structured properly for the creation of the data source, and that's going to include labeling all of those items that I want to display. Now, I don't want to display this entire table throughout my site. I don't need all this information. I'm going to build an interactive summary of these cameras on another page and I don't need all of that data. Now, there are a couple of ways to filter this data out.

One would be to go ahead and identify specific regions of data by applying Class Styles to it or some type of unique selector structure, but in this case, I can filter the data out as I apply the Spry HTML Data Set to the page, and you will see that in our next exercise. Now, before we move on to actually creating the Spry Data Set, I want to show you how this data is going to be used. So I have opened up the galleries page from the Finished folder. If I turn my Style Rendering back on again, I have this in little Gear Check sidebar, a summary of these two cameras.

If I turn Live View on, scroll down, I can see that I have a summary of the Sony camera and the Fuji camera, and that's a nice little interactive summary. This data is being pulled from the table that we were looking at, so that gives me a nice static source of the data, that if that updates this interactive display will also update and that reduces the amount of maintenance on the page, also makes it easier for people who aren't comfortable with server-side code to update that data. Well, now that we understand the structure of the table that we are going to be creating our data set from, our next exercise will focus on actually creating the data set and exploring the Data Set Creation Wizard.

There are currently no FAQs about Dreamweaver CS4 New Features.

Share a link to this course
Please wait... Please wait...
Upgrade to get access to exercise files.

Exercise files video

How to use exercise files.

Learn by watching, listening, and doing, Exercise files are the same files the author uses in the course, so you can download them and follow along Premium memberships include access to all exercise files in the library.
Upgrade now


Exercise files

Exercise files video

How to use exercise files.

For additional information on downloading and using exercise files, watch our instructional video or read the instructions in the FAQ.

This course includes free exercise files, so you can practice while you watch the course. To access all the exercise files in our library, become a Premium Member.

Upgrade now

Are you sure you want to mark all the videos in this course as unwatched?

This will not affect your course history, your reports, or your certificates of completion for this course.


Mark all as unwatched Cancel

Congratulations

You have completed Dreamweaver CS4 New Features.

Return to your organization's learning portal to continue training, or close this page.


OK
Become a member to add this course to a playlist

Join today and get unlimited access to the entire library of video courses—and create as many playlists as you like.

Get started

Already a member?

Become a member to like this course.

Join today and get unlimited access to the entire library of video courses.

Get started

Already a member?

Exercise files

Learn by watching, listening, and doing! Exercise files are the same files the author uses in the course, so you can download them and follow along. Exercise files are available with all Premium memberships. Learn more

Get started

Already a Premium member?

Exercise files video

How to use exercise files.

Ask a question

Thanks for contacting us.
You’ll hear from our Customer Service team within 24 hours.

Please enter the text shown below:

The classic layout automatically defaults to the latest Flash Player.

To choose a different player, hold the cursor over your name at the top right of any lynda.com page and choose Site preferencesfrom the dropdown menu.

Continue to classic layout Stay on new layout
Welcome to the redesigned course page.

We’ve moved some things around, and now you can



Exercise files

Access exercise files from a button right under the course name.

Mark videos as unwatched

Remove icons showing you already watched videos if you want to start over.

Control your viewing experience

Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.

Interactive transcripts

Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.

Thanks for signing up.

We’ll send you a confirmation email shortly.


Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from lynda.com.

Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

   
submit Lightbox submit clicked