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).
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.
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.
Figure 2: Spry Accordion
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
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.
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.
Figure 5: Spry Accordion CSS file
When viewed on the web page, it blends in perfectly (see Figure 6).
Figure 6: Same Spry Accordion with modified CSS values
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).
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.
Figure 8: Spry Collapsible Panels closed
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.
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.
Figure 11: Same Spry Collapsible panels with modified CSS values
<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".