back

Part II: How to use Spry widgets in
Dreamweaver CS3

by Thomas Ortega II

Adobe Dreamweaver CS3 software comes with a collection of Spry widgets, which makes adding dynamic elements to your websites quick and easy. No prerequisite knowledge of DHTML is required, and the widgets are CSS-enabled.

For the July/August edition of the Edge, my article, Part I: How to use Spry widgets in Dreamweaver CS3, provided a brief explanation of the Spry widgets as a whole, going in-depth with the Spry Menu Bar and Spry Tabbed Panels widgets. In Part 2, I cover the Spry Accordion and Spry Collapsible Panel widgets. These four widgets are the last group on the Spry Toolbar (see Figure 1).

Dreamweaver CS3 Spry Toolbar

Figure 1: Dreamweaver CS3 Spry toolbar

As with Part I, in this article, we will be using the Travel – Text page from the Starter (Theme) sections. I believe if you practice with a page you don't really care about, you'll be less nervous when playing with these widgets. Once you finish this two-part article, you should be comfortable enough with these widgets to use them in a real project.

Spry Accordion

The Spry Accordion widget is named after the musical instrument for its appearance and how it animates (see Figure 2). It allows you to stack many layers of content on top of each other while only keeping one layer visible, very similar to the Spry tabbed panels widget covered in Part 1.

Spry Accordion

Figure 2: Spry Accordion

Find the area of your page where you want to add the accordion. On my test page, I'm removing the text from the main body and inserting an accordion instead. To insert the widget, click the second to last icon on the Spry section of the Insert Panel (see Figure 1). This will insert the widget into your page, along with the supporting code. To preview the accordion, save the page you're working in. A dialog box will warn you that you're copying a CSS and JavaScript page into the Spry Assets folder of your project. Don't worry, all Spry widgets do this. Once saved, preview the page in your preferred browser. Admire the smooth animation as you click on the different labels.

Looking at the code and design preview for the Spry Accordion (see Figure 3), you notice a couple of things. First, you see that the Spry Accordion is made up of <div> tags, which normally are nothing special. It's the magic of the Spry framework that makes the content in the <div> tags animate and look nice. To see just how much magic there is, open SpryAccordion.js in the SpryAssets directory. You can tell by the function names which part of the code controls the selecting, animating, and so on. Thankfully, you can close that file and never worry about that JavaScript code.

Split Code/Design View

Figure 3: Split Code/Design view

The other thing you notice in Figure 3 is where the content actually goes. You can see the label text goes into the AccordionPanelTab div, whereas the content itself goes into the AccordionPanelContent div.

You can add more sections to the accordion very easily. Click the main <div> tag in the code view or the Spry Accordion box in the design view. This will pull up the widget in the Property panel (see Figure 4). Above the current list of panels, you see familiar icons. The plus (+) and minus (–) signs add and remove panels, while the arrows move the selected panel up or down the list.

Spry Accordion Properties

Figure 4: Spry Accordion properties

As with all Spry widgets, CSS styles are available for the Spry Accordion. You can modify SpryAccordion.css in the SpryAssets directory to customize your widget colors (see Figure 5). I've modified two values used by the Accordion widget when it has focus on the page. The upper red box shows how I make non-selected tabs the same green as the background of my breadcrumb and date line bar. The red box at the bottom highlights where I make the active tab match the orange text of my tagline.

Spry Accordion CSS file

Figure 5: Spry Accordion CSS file

When viewed on the web page, it blends in perfectly (see Figure 6).

The same Spry Accordion with modified CSS values

Figure 6: Same Spry Accordion with modified CSS values

Spry Collapsible Panel

The Spry Accordion has one big limitation: only one panel can be expanded at a time. What if you want multiple panels open simultaneously? That's where the Spry Collapsible Panel comes into play. The last icon on the Spry Toolbar is the Collapsible Panel (see Figure 7).

Dreamweaver CS3 Spry toolbar

Figure 7: Dreamweaver CS3 Spry toolbar

I've inserted two panels into a new copy of the Travel – Text page from the Starter (Theme) sections. Figure 8 shows the two panels closed, while Figure 9 shows the two panels opened.

Spry Collapsible Panels Closed

Figure 8: Spry Collapsible Panels closed

Spry Collapsible Panels Open

Figure 9: Spry Collapsible Panels open

As you can see, the Spry Collapsible Panels, when placed on top of each other, resemble the Spry Accordion in appearance, but not function. In the Spry Accordion, all the panels are in one widget, and opening one closes the others. With a group of Collapsible Panels, each one is independent, and therefore any number of them can be open at the same time.

As with other Spry widgets, the Collapsible Panel can be customized with CSS. In Figure 10, you can see where I've modified a few background color values.

Spry Collapsible Panel CSS

Figure 10: Spry Collapsible Panel CSS

These values are taken from my web page's CSS and help draw the panel into the page (see Figure 11). The nice thing about this is that all instances of each Spry widget use the same CSS file. So when you make any changes, they are instantly reflected in all instances of the widget.

The same Spry Collapsible panels with modified CSS values

Figure 11: Same Spry Collapsible panels with modified CSS values

Where to go from here

Once you start using the Spry widget toolset, you start to feel a little adventurous. While this is good in some cases, there is one case where it isn't. Do not copy and paste the widget code when placing multiple copies of the same Spry widget. This would be a mistake, as every Spry widget needs to set itself up as a widget via JavaScript to work properly. These JavaScript lines are often not near the widget <div> tags. Always add new copies of these widgets by clicking their respective icon in the Spry toolbar (see Figure 7).

I've now introduced you to four of the Spry widgets. Despite their rather impressive presentation factor, you can see how easy Dreamweaver CS3 has made them to use. You've also spent some time using the widgets in test files; now it's time to use them in the real world. Go ahead and pull up an old project; see if it could use a little excitement. Or better yet, when prototyping your next project, impress your client and coworkers by putting these widgets in the mock-ups.

You'll see that the more you start to use the widgets, the more time and effort it will save you. The important thing to remember, though, is to have fun. The Spry widgets, though technical in nature, are there to make life easier for both the website designer and the website user. If you want to find out more about the Spry widgets, use Dreamweaver CS3's online help or look for resources in the Dreamweaver Developer Center.

 


Tom Ortega II is a Principal at 360Conferences, where he coordinates low-cost, developer-friendly conferences such as 360Flex and 360|iDev. In addition, he keeps up his coding skills with projects at RapidNinja under the alias of "Ninja Debu".