Join James Williamson for an in-depth discussion in this video Dreamweaver-Spry integration, part of Dreamweaver CS4: Introduction to Spry.
- View Offline
So if I go up to the Menu to Help, I can see that the first link is to the normal Dreamweaver Help. If I go to the online Help directory, I can see that I have an entire section on Building Spry pages visually, where we get overviews of working with the different widgets, working with the Spry framework, and where to find everything within Dreamweaver. That's really cool! Now, I don't know if you noticed it or not, but I'm going to jump back into Dreamweaver, and you may have noticed that directly under the Help file there's this cool little Spry Framework Help. Let's go ahead and click on that and see what that's all about.
Now, this takes me to Adobe's LiveDocs page, to the Spry framework for Ajax Developer's Guide. Here we have sections on working with Spry widgets, working with data sets, building dynamic pages, and also working with Spry effects, so there's a lot of information here as well. So you might want to use either of these Help sections, if not both of them, as a starting point for working with Spry and Dreamweaver. Now, let's go back into Dreamweaver and see where in the interface we can access all these really cool Spry tools. So here we are back in Dreamweaver.
One of the most obvious places to look for Spry functionality would be an Insert toolbar, and indeed, Spry has its own toolbar. You'll notice its broken up into sections, and the first section involves dealing with Spry Data. The second section involves the Spry Form Validation widgets, and then the third section involves the User Interface widgets. Now, that's not the only place we can find those, you'll notice that if I look in Layout, I have the User Interface widgets. If I look in Forms, I have the Form Validation widgets. If I look in Data, there are all the data elements involved as well. Now, those are exactly the same as the ones that we find in the Spry Insert toolbar, they're just placed there so that as you're working with those types of objects, you will have access to the Spry objects as well, which in my opinion is pretty darn nice of them.
That is not the only place where you can find Spry functionality in Dreamweaver. If I go over to the Tag Inspector and I look at the Behaviors Panel, you may have noticed this before, because Behaviors has been around for a very long time inside Dreamweaver, but something that's rather recent to Dreamweaver is this little Effects fly-out Menu there. Well, those are all Spry Effects. So if you add one of these. Let's say you take something in Grow it or Shrink it or Fade it out, you're actually using Spry, even though you might not have known it. At some point in the process of using Spry, you are going to figure it out. Let me show you what I mean. Let's say I highlight the word home" here and I insert a Spry Tooltip widget. This is a really neat little feature that enables the Tooltip; if you hover over something, it will float the Tooltip up. Here's the Tooltip content right down there. Let's just type in Click here to go home. Not the best Tooltip I've ever done in the world, but it will suit our needs.
So if I save this file, notice that Dreamweaver is telling me, hey, you need certain files in order for this functionality to work, and these are what we call Spry Assets. Its going to copy those over to my site, and when I click OK, if I were to Preview in this Live View and I were to hover over home, you'll notice that there is the Tooltip. Perfect! So you can see that Dreamweaver makes adding Spry functionality to our pages really, really easy. As a matter of fact, it's as easy as adding any other page element. Keep in mind that the process of adding Spry to your pages will require Dreamweaver to link to and add external assets to your site. Managing those assets and making sure that you don't disable functionality, by either removing or failing to update links is extremely important, and will be a continuing theme for this title.
We'll also take a closer look next on how to plan strategies for managing those assets.
- Validating form data to give users robust feedback
- Customizing widgets to meet the style of a web site
- Building a pull-down menu navigation system
- Pulling data from XML, HTML, and Excel spreadsheets
- Constructing datasets and widgets using code