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

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

Adding Spry interaction


From:

Dreamweaver CS3 Projects: Creating Custom Spry Widgets

with James Williamson

Video: Adding Spry interaction

Structuring your code correctly is only part of creating your Spry widgets. In this movie we'll take care of three important tasks. First we'll add links to external JavaScript and CSS files necessary to make our Spry widget function. Next we'll add the constructor function that will instantiate and control our Sliding Panel widget. Finally, we'll add the event handlers to our links that will trigger the widget's interactivity. Before we start doing this to our file, I want to point something out. We're in the Chapter 6 directory, and I have the details_start file open.

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

Adding Spry interaction

Structuring your code correctly is only part of creating your Spry widgets. In this movie we'll take care of three important tasks. First we'll add links to external JavaScript and CSS files necessary to make our Spry widget function. Next we'll add the constructor function that will instantiate and control our Sliding Panel widget. Finally, we'll add the event handlers to our links that will trigger the widget's interactivity. Before we start doing this to our file, I want to point something out. We're in the Chapter 6 directory, and I have the details_start file open.

I want you to notice to the Chapter 6 directory I have a folder called SpryAssets and inside that I already have the SprySlidingPanel CSS and the SprySlidingPanels JavaScript file copied over. So you would want to do this for your own root directory if you are creating this with your files. And if you downloaded the Spry 1.6 framework, you can find them inside the widgets folder and you can just copy them wherever you want. Most developers will keep their Spry library on one place on the hard drive and then copy those files into the root directory as they need them.

Some people share a global directory, but it's really a personal preference in terms of what you want to do. OK. So I'll flip over to Code View, and once again I'm going to hide our panels so that I have a little bit more room for code on the screen. So first I'm going to scroll up into the head of my content and you'll notice that on lines 13 to 14, I have a couple of lines commented out. Let's go ahead and highlight those, lines 13 and 14, and using the Coding toolbar, click the Remove Comment and let's take a look at what these are doing. So in the first is a script tag and it's referencing as its source the SpryAssets folder and the SprySlidingPanels JavaScript file, so that's the file that I just showed you guys copied over into the Chapter 6 folder.

We also have a link tag and the link tag is linking out to the CSS file. So we're now referencing the external JavaScript file and the external styles to help us drive our widget. So that's essentially flipping the switch on, if you will. The next thing we have to do is, in order to have a Sliding Panels widget, we need to use the constructor function, which is just a little bit of JavaScript that's going to create that widget for us. So having the structure is good, making sure all the names are correct in terms of class and IDs are great, but if you don't have a constructor function, you have no widget. So let's go ahead and make that.

So we're going go down to about line 63 in our code, so scroll down to about line 63. And on line 63, we've got a blank line where the constructor function is going to go. The only rule you need to follow for the constructor function is that it needs to be below is a widget that it's going to turn on. So your widget code will do directly above the constructor function. It can come at the very bottom of the page. It just needs to be somewhere within the body tag and somewhere below the element that you're instantiating. So we'll start out by using a script tag, so we'll just say script and the language is going to be JavaScript. I'm going to be too precise there.

Type is going to be text/JavaScript. And then close the opening of the script tag and we'll go ahead and do our constructor function. So the constructor function's going to use the var keyword and after the var keyword we're going to type in SP1. SP1 is the name of our Sliding Panels. You can name them anything you want to name them. SP1 is just kind of like a default name. If you use something else, however, be aware and remember what you've used because this is the name that you're going to use in the event handler when you're doing the function call. So remember that.

So we're going to say SP1 and then that's going equal a new, so we'll use the new keyword, and it we'll just do a little dot syntax here. Spry.Widget.SlidingPanels and notice that as soon as we type in Spry, we get code hinting aplenty. So Dreamweaver understands the Spry framework, even the stuff that's not default in Dreamweaver, and still gives you those code hinting things, which is awesome. So Sliding Panels and then in parentheses, in the quotation marks, we're going to pass in detailSlide1. More on that in just a moment. Notice that the code hinting is telling us that we can pass in an element and then an array of options after that. We'll deal those options a little bit later on. For right now, we're only going to pass the value detailSlide1. Again you want to put that in quotation marks, close your parenthesis and add a semicolon to that.

Who is detailSlide1? Well detailSlide1, if we scroll up just a little bit, you see that that is the ID that we've used for the overall DIV tags surrounding Sliding Panel. Also we're identifying the element on the page that Dreamweaver is going to be driving as a Sliding Panel widget. Now don't forget to come back in and close your script tag out. It's very important. We'll save this and we're almost done. We've got links to our external JavaScript and cascading style sheet file. We have a new constructor function that is instantiating a new Sliding Panels widget and the last thing we have to do is we have to go up into the elements that are going to trigger the Sliding Panels and add a little in-line JavaScript event handler to those.

Now if I switch over to Design View, you can see that these thumbnails have a link attached to them and they're just sort of a default JavaScript link. Just enable connectivity, enable a little bit of accessibility on those. We don't need the link tag in order to do the inline event handler. But based on cross browser compatibility, it's a good idea. So I'll go to about line 46 on my code and I'll click inside the first link tag, which has the title of hoody, and right after as a title of hoody and still inside the opening tag, I'll hit space. So right after hoody, I'll type in onClick equals and then in quotation marks, SP1. So remember that's the name that we just used in the constructor function.

SP1.showPanel. showPanel is pretty much the only method invoked here, although there are a couple of other ones like showFirstPanel, things like that. The panels are built in an array. So I'll use panel0 for the first panel and then we'll type in a semicolon and close the quotation mark. So again it should say onClick equals, and then in quotation marks, SP1.showPanel, zero. So what you're doing is you're passing in the ID, so which palette it is. Zero would be the first one. Now we mimic that when we gave our panel structure an ID, if you remember that.

Looking down here at line 50, it says DIV ID panel0. Now those two do not need to match up. I'm just making sure that you understand the numberings convention that Spry uses as it numbers these elements so that it builds an array, the first one, zero, the second one is one, so forth and so on. So we're going to go to the next link, which has the title of smallT. And if you want, you can make life a little bit easier on yourself by copying this. And then pasting it directly after that and then just changing the index value from zero to one. That's a lot faster so I'm going to do that for that one.

Then I'll find the opening link tag for bag. Paste that in. That one's going to be two. Then find your final link tag, go inside that. That's a longT. Paste that there and remember your last one is going to be showPanel 3. Alright. Excellent. Save the file. We'll switch back over to Design View. And we'll preview this in Firefox. We'll see how it's working. So if I click, notice our first, second, third and fourth panel content is animating exactly the way that we want it to.

We're just using placeholder data in the moment because I want you to see the functionality before we focus on the actual content itself. One of things I want you to notice about this is that it's scrolling vertically, so our animation is happening vertically. Not horizontally. And that's not what we want. We don't have anything going on customize in terms the animation itself. So it's functional, but it's not done just yet. We need to change the animation so it scrolls horizontally, not vertically. We definitely need to work on the styling. Before we tackle the styling we'll focus on getting the functionality where we need it, and that's the subject of the next movie.

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.