New Feature: Playlist Center! Pick a topic and let our playlists guide the way.

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

Dreamweaver CS3 Projects: Creating Custom Spry Widgets
Illustration by Don Barnett

Customizing the finished widget


From:

Dreamweaver CS3 Projects: Creating Custom Spry Widgets

with James Williamson

Video: Customizing the finished widget

If you remember previewing the finished project back in the first movie, you might recall how the content of the panel seem to blur while animating. A nice subtle effect that can make your Spry assets just that much better than what we get by default. By browsing the Spry assets CSS file, and I'm going to flip over to that because we have our SprySlidingpanels.CSS, you'll come across a few empty class styles that aren't used by default widgets. So I'm going to scroll down and as you get all the way down to the bottom here, I can see that we have SlidingPanelsAnimating, SlidingPanelsCurrentPanel and SlidingPanelsFocused.

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 CS3 Projects: Creating Custom Spry Widgets
1h 0m Intermediate Apr 18, 2008

Viewers: in countries Watching now:

Advanced Dreamweaver users wanting to add AJAX functionality to sites will find Dreamweaver CS3 Projects: Creating Custom Spry Widgets a valuable resource. Spry, Adobe's integrated AJAX framework, offers a built-in resource for providing richer user experiences. Instructor James Williamson shows how to go beyond Dreamweaver's installed Spry capabilities by creating custom Spry widgets. He delves into Adobe's online Spry documentation, demonstrates how to download and upgrade Dreamweaver to the latest Spry release, and examines how the Spry framework functions. Users will build a Sliding Panel widget, control the widget through JavaScript, and customize the panel content through the use of CSS.

Topics include:
  • Examining the Spry framework
  • Finding information on customizing Spry assets
  • Defining page structure
  • Using external JavaScript files to add interactivity
  • Modifying presentation through CSS
  • Customizing Spry widget functionality through JavaScript and CSS
Subjects:
Developer Web Projects
Software:
Dreamweaver
Author:
James Williamson

Customizing the finished widget

If you remember previewing the finished project back in the first movie, you might recall how the content of the panel seem to blur while animating. A nice subtle effect that can make your Spry assets just that much better than what we get by default. By browsing the Spry assets CSS file, and I'm going to flip over to that because we have our SprySlidingpanels.CSS, you'll come across a few empty class styles that aren't used by default widgets. So I'm going to scroll down and as you get all the way down to the bottom here, I can see that we have SlidingPanelsAnimating, SlidingPanelsCurrentPanel and SlidingPanelsFocused.

So these classes are dynamically assigned as your panel widget is activating. Now the only one that's got content on it currently is the SlidingPanelsAnimating and notice it says overflow hidden and it gives that a rank of important so that no matter what's going on, whatever's animating inside that, if there's any overflow, it will be hidden and that allows the viewport to continue to crop all the content without any of it flowing outside of it. Note the wild card. So that's telling you that anything, any element that's animating, is going have the style applied to.

We're going to take advantage of that. We're going to take advantage of the SlidingPanelsAnimating class to change the styling of our content while it's animating. We won't do that here inside of our SlidingPanels.CSS. We're going to have to use a more specific selector and since we might not want to change the default behavior of our Sliding Panels, we'll do it locally in our embedded styles. So I'm going to close this file, make no changes to it whatsoever. And I'll go back into the details_start.htm, which is found in the Chapter 10 directory. So I'm going to switch over to Code View, and once again we'll go up to our embedded styles and I'n just going to collapse my panel so I can see this a little bit better.

So here are the background images that we did earlier and what I'm going to do is go to the very bottom of those and hit Return and I'm going to enter a new CSS comment. Once again, giving myself some dashes there to sort of hold this out. I'll type in 'styles for panels as they animate.' Again, a little note to myself in terms of what the styles are doing. And we'll hit Return and we'll go down to our first style. Remember the class style is SlidingPanelsAnimating, and you'll never see it, because it's dynamically assigned to the panels as they animate. So we're taking advantage of both the JavaScript and the styling functionality to customize our widget.

So we're going to type in #mainContent, space, .Sliding, capital S, Panels, capital A, Animating, space h2. We're first going to style the heading as it animates. We're going to open up a curly brace for it and assign a different color to it and the color we're going to give it will be the #999, which is sort of a medium gray color. And don't forget your semicolon and then close your curly brace. So that's the first one. That's pretty easy, right? So let's go down and we'll do our second one, which is #mainContent.SlidingPanelsAnimating, space, p.

So now we're going to target the paragraph inside of that, and we're going to type in color and guess what? We're going to go ahead and do a #999 to that too. So if you're wondering, "Hey, can I have a group of those selectors together?" Yep. You certainly could have. Now if you're tired of typing in the first part of this, you could just copy the #mainContent.SlidingPanelsAnimating. And if you typed it in correctly the first time, that way you don't worry about making mistakes from there on. So that's what I'm going to do. I'm going to copy it, go down to the next line and paste it. And then I'm going to add to the descendent selector span.price.

So again we're going to be styling the span.price. And here we pass along the same color to it #999. So if you want to group all the selectors together, feel free. That's fine. I just want to separate them so you can see what each one of those is doing. So we're done with that and what we need to do now is work on all the individual panels themselves. So I'm going to hit Enter to go down to the next line. I'll go ahead and start that by using the copied #mainContent.SlidingPanelsAnimating and then inside that, I'm going to type in #panel0, panel zero. If you remember that is the first panel.

So open up that and I'm going to type in background, and I'll keep a lot of the stuff the same, so for example I'm going to use the same background graphic #A8BAAA. So do URL and we're going to browse to the Chapter 10 directory because we're in Chapter 10 now. So we'll go in Chapter 10, images, details, and here we can find hoody_blur and you can see it's just a blurred version of our normal hoody_detail file and that will give us the illusion as it's animating of blurring. So we're just going to swap one background graphic out for another one and that's another reason to use background graphics here because if this was an image tag, I would have to do some very fancy JavaScripting in order to swap this out. So I'm going to click OK.

So here I'm driving that functionality through CSS instead, which is a lot easier to do. Remember that we have to say no-repeat and we're going to do 10 pixels for our horizontal placement, 5 pixels for vertical placement and don't forget to close out the curly brace. Once again, if you don't feel like typing this all over again, I don't blame you. So I'm going to copy this and I will paste it. And I'm going to change the panel to panel one instead of panel zero. Everything else remains the same, just the name of the graphic is going to change. So instead of hoody_blur, the second one is going to get tshirt_blur.jpg.

I'll paste that for the third one. Scroll down to give us a little bit more room here. And again the third one needs to change to panel two and instead of hoody_blur, my third one's going to be bag_blur and we'll finish out our backgrounds by changing it to panel three and changing it from hoody_blur to longt_blur and this time we did blur and not blurs. What we've done is for our animated content, we've taken all the text and changed it to a lighter gray so it's going to appear to fade and maybe even look a little blurred itself. Then the images we swapped out our normal background graphic with a blurred version of the same graphic. So if I save the file, and we preview this in our browser...

now when I click on the thumbnails, you can see the blurred graphic is coming in, the text is getting lighter so it gives it the illusion of blurring as well. That looks really good. Now the one thing that we haven't talked about yet is customizing the animation itself and you might think that this is too slow. Or you might think it's too fast, so let's talk about how we can change our animation properties by changing the parameters that are passed into the constructor function. Let's go back into our file and let's go find our constructor function. It's on about line 85 by now, so somewhere around in there.

Actually mine's on line 91. So somewere around down there you'll see the constructor function, it's the script tag we did earlier. So currently the only thing we're passing into the constructor function is the name of the widget itself, which in this case is detailSlide1. Well after detailSlide1, I can type in a comma and then my options have to be passed in as an array. So I'll open up a curly brace. Take a look at some of the options here. We have defaultPanel, duration and enableAnimation, which is true or false. It's a Boolean value. enableKeyboardNavigation, frames per second, so there's a lot of things that we can change here. I'm going to pass in duration.

And I'm going to type in a duration of 500. Now that would be milliseconds so by saying 500, I'm saying let's animate to that position in half of a second. So duration has a colon and then the property follows it. Next we'll use a comma and we'll use FPS, which is frames per second and I'm going type in 80 frames per second. Now the higher the value of the frames per second, the smoother the animation will render, but it has its limits. If you go too far up, it's simply going to not be able to render it and performance will suffer. So you want to test this value pretty thoroughly. Sometimes a higher frames per second is not going to work over certain connection speeds so you might want to test that over as a wide array of connections as you can. So let's save that.

Test it in our browser and now when we click, the animation is occurring in only half a second, which is a little faster, and the blurring looks a little bit more meaningful, especially is we go over a longer distance. Cool beans. As you can see, digging around the CSS and JavaScript files can be very helpful in unlocking additional features for your widgets. Regardless of which widgets or content type you're adding to your site, a thorough examination of the structure and code will help you understand precisely what is and what is not possible with the widget.

Plus since it's merely JavaScript and CSS, you're free to modify and add to the existing functions and styles to truly make these widgets your own.

There are currently no FAQs about Dreamweaver CS3 Projects: Creating Custom Spry Widgets.

 
Share a link to this course

What are exercise files?

Exercise files are the same files the author uses in the course. Save time by downloading the author's files instead of setting up your own files, and learn by following along with the instructor.

Can I take this course without the exercise files?

Yes! If you decide you would like the exercise files later, you can upgrade to a premium account any time.

Become a member Download sample files See plans and pricing

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.

join now 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 CS3 Projects: Creating Custom Spry Widgets.

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

Are you sure you want to delete this note?

No

Notes cannot be added for locked videos.

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
Terms and conditions of use

We've updated our terms and conditions (now called terms of service).Go
Review and accept our updated terms of service.