back

How to use Spry widgets in
Dreamweaver CS3

by Thomas Ortega II

Adobe® Dreamweaver® CS3 software comes with a collection of Spry widgets, which make adding dynamic elements to your websites quick and easy. No prerequisite knowledge of DHTML is required because Dreamweaver CS3 hides that complexity. The widgets are also CSS-enabled, which means you can customize the look and feel of the widgets to match your site.

If you look at the Spry section on the Insert panel in Dreamweaver CS3 (see Figure 1), you'll see three groups of Spry widgets. The first group controls data and how to display it with widgets such as Spry XML Data Set, Spry Region, Spry Repeat List, and Spry Table. The second group handles form elements with widgets such as Spry Validation Text Field, Spry Validation Select, Spry Validation Checkbox, and Spry Validation Text Area. The last group covers dynamic UI elements with widgets such as Spry Menu Bar, Spry Tabbed Panels, Spry Accordion, and Spry Collapsible Panel. This two-part article covers the last group. Part 1 covers the Spry Menu Bar and Spry Tabbed Panels widgets. Part 2 covers the Spry Accordion and Spry Collapsible Panel widgets.

Dreamweaver CS3 Spry Toolbar

Figure 1: Dreamweaver CS3 Spry toolbar.

While you may be tempted to open your site and start adding these widgets, that may not be the best approach. As with any new tool, you need some practice before jumping into a project. In this article, we use the Travel – Text page from the Starter (Theme) sections. If you use a page you don't really care about, you'll be less nervous to play with these widgets. Once you finish this two-part article, you should be comfortable enough with these Spry widgets to try them in a real project.

Spry menu bar

The Spry Menu Bar widget enables you to create fly-out menus (see Figure 2). With just a click of a button, you can easily create a menu. In the past, creating a simple menu like this would have taken more coding than the average web designer preferred to do. But that's no longer the case. To prove it, let's create the menu from Figure 2 in Dreamweaver CS3.

Spry Menu Bar

Figure 2: Spry menu bar.

In Design view, click the area where you want to place the menu. I chose the open area to the left of the text in the Travel – Text theme page. From the Spry tab on the Insert panel, choose the first item in the third group (the one that looks like a miniature menu).

Figure 3 shows the layout options for the menu bar. You can choose to create a horizontal or vertical menu. Horizontal menus work best when they are at the top of the page. Since this one is on the side of the page, vertical is the best choice.

Spry Menu Bar layout options

Figure 3: Spry Menu Bar layout options.

Once you have selected the orientation, the Menu Bar options are visible in the Properties panel (see Figure 4). The columns represent the levels of the menus: The first column is the main menu, the second column a submenu of the main menu, and so forth. Each column also has some tools above it. The plus and minus symbols let you add or remove items from a menu, while the arrow symbols let you move menu items up or down the sort order.

Spry Menu Bar Properties panel

Figure 4: Spry Menu Bar Properties panel.

To customize the menu items, simply select the menu item in the column you want to change. This then moves the data to the right side of the panel, where you can overwrite the properties for Text, Link, Title, and Target (the familiar properties of an Anchor tag).

To see just how cool this is, click the Turn Styles Off button in the Properties panel. You'll see that your dynamic menu is merely an unordered list that has been dressed up with some DHTML magic.

Now you need to modify the CSS to make the menu match the page better. To do this, merely save your document. This creates a Spry Assets folder in your web project. In the folder, you'll find a file called SpryMenuBarVertical.css for your tweaking pleasure. In Figure 5, I put red boxes around the values I changed. I merely modified the background color to match the color on my Theme page. I also removed the color attribute because I didn't want the font color to change. In addition, I modified the arrow image in the MenuBarItemSubMenuHover state to match the image in MenuBarItemSubmenu so it stays dark instead of switching to white.

Spry Menu Bar CSS

Figure 5: Spry menu bar CSS.

With just a few minor tweaks, you can create a custom dynamic menu that matches your site (see Figure 6). Menus are such an integral part of any website, that this Spry widget alone is worth the upgrade to Dreamweaver CS3.

Spry Menu Bar Stylized

Figure 6: Spry menu bar stylized.

Spry tabbed panels

Tabbed panels are one of the simplest UI elements to understand. A tabbed panel is merely an area of content that changes based on which tab is chosen (see Figure 7). Many of us grew up with tab divided notebooks and binders in school. Tabbed panels organize content the same way on a website.

Spry Tabbed Panels

Figure 7: Spry tabbed panels.

The concept behind this Spry widget is simple: You stack layers of content in the same location so all the information is quickly accessible but not necessarily always visible. Tabs enable users to select the content they want quickly and easily. A good example is cookie recipes. You might have ten cookie recipes, but users make only one type of cookie at a time. You could put each recipe on a separate page, but that's a lot of work. With this widget, you need only one page. You then add a tab for each cookie recipe (such as chocolate chip, sugar, and peanut butter). Users can then scan your recipe tabs for their desired recipe, click it, and start mixing.

Adding a Spry Tabbed Panel widget is simple. Place your cursor where you want the tabbed panel to go. In the Spry Insert Bar, choose the second button in the third group (see Figure 8). Its icon resembles a miniature tabbed panel. If you're in Design view, your page may look strange (see Figure 9). The tabs may obstruct the header image or be otherwise misplaced. To fix this, simply save the page.

Dreamweaver CS3 Spry Toolbar

Figure 8: Dreamweaver CS3 Spry toolbar.

Spry Tabbed Panels Weirdness

Figure 9: Spry tabbed panels weirdness.

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. Sometimes the weird formatting returns. If that happens, rest assured that while it may look strange in Design view, it renders correctly on the finished page.

Just like the Spry Menu Bar, you can customize the CSS of this widget to more adequately match your site's theme. In Figure 10, I've placed red boxes around the values I changed for the content background and selected tab background. This adds the greenish tint that is part of my theme to the tabbed panel set. Most aspects of the tabs and content area can be modified via CSS. Play with the SpryTabbedPanels.css in the Spry Assets folder, so you can achieve a tightly integrated experience.

Spry Tabbed Panels CSS

Figure 10: Spry tabbed panels CSS.

Another nice thing about exploring the CSS for these widgets is that you find hidden surprises, such as styles for a vertical tabbed panel (see Figure 11). Once you see this CSS, you know there must be a way to make the widget vertical. You can't select an orientation for the Tabbed Panels widget when you add it, the way you can with the Spry Menu Bar widget. And the Property panel does not offer an orientation option either.

Spry Vertical Tabbed Panels CSS

Figure 11: Spry vertical tabbed panels CSS.

Oddly enough, to make the Spry Tabbed Panel widget vertical, you must add a V to the front of the class name in the code. Figure 12 highlights where to do this. (Maybe for the next version, Adobe will make this option available via a prompt on creation or as a property in the class.)

Spry Vertical Tabbed Panels Code

Figure 12: Spry vertical tabbed panels code.

A vertical orientation may be better when you have several tabs (see Figure 13). In the horizontal layout, tabs truly look like tabs, while in the vertical layout they look more like a menu. If you modify your selected tab CSS before making it vertical, you'll need to change a different section of the code.

Spry Vertical Tabbed Panels

Figure 13: Spry vertical tabbed panels.

Conclusion

The Spry widgets are a great addition to Dreamweaver CS3. These powerful UI elements that once required programming skills have finally been brought down to the designer's level. With just a couple of clicks and CSS modifications, you can create a tightly integrated and highly interactive menu with the Spry Menu Bar widget. And instead of creating many pages with a little bit of content, you can create one page with a lot of content organized by tabs with the Spry Tabbed Panel widget.

Adobe has always strived to make software that is accessible to the average user. The Spry widgets are another great example of how Adobe enhances usability in CS3. The Spry framework itself is powerful and technical in nature. But the power of the widgets lies in the fact that they hide the complexity and code.

If you enjoyed learning about the Spry Menu Bar and Spry Tabbed Panel widgets, then check out Part 2 of this series in the next issue, which will cover two more great UI widgets in Dreamweaver CS3: Spry Accordion and Spry Collapsible Panel.

 


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