Lesson 9 - Spry Behaviors

Spry is officially called "Spry framework of Ajax" which is a collection of javascript programs that offer sophisticated control of a web site through widgets, effects, and data sets.

• Effects do not provide functionality but rather provide visual effects like fade and squish.
• Widget is an interface element. We will be introducing the menubar, tabbed panel, accordian, collapsible panel, and Tooltip. Spry Validation was covered in the Forms lesson.
• Data sets present data in containers that have much more functionality than a table and they also have the ability to read the contents of XML files and update a web page with this information. In this class we will not cover this aspect of Spry.

Spry Effects

The Spry Effects are selected in the Tag Inspector tab. They are used to enhance the visual experience and have no effect on functionality. They can be used to draw the attention of the user to a particular region of the web page. Before you use them you must give the tag that is to use the behavior an ID if it does not already have one. Click on the tag and click on the Attributes button and enter an ID next to the id attribute.

After the tag has an ID then select the Behaviors button and then click on the + to access the Spry Effects.

Spry Widgets

There are five Spry Widgets that may be used for web site navigation and organizing information. These widgets are the menubar, tabbed panels, accordian, collapsible panel, and tooltip which are located in the Insert Panel near the bottom.

1. Spry Menu Bar

The Spry Menu Bar is used for navigation and allows you to put links into a compact horizontal or vertical menubar. These links might be to other pages within your site or to sites outside your web site.

To create a horizontal menubar select the menubar widget and select horizontal from the popup window.

A horizontal menu containing four items is placed across the top of the page.

To add labels and links go to the Property Inspector. The item is selected by clicking on it in the column with the "+-" and arrows. In this example Item 1 is selected and it has three submenus associated with it. In the Text box type in the label and in the Link box type in the link. To remove an item click on the "-" button. To shift positions click on the arrow buttons. In order for the menubar to show up in the Property Inspector the tab above the menubar in the design view must be clicked. To customize the menubar in CSS click on the "Customize this widget" link which will bring up the Dreamweaver Help that shows how to do this.

Try the Spry Menubar. Click on an menu item.

• Item 1
  • Item 1.1
  • Item 1.2
  • Item 1.3
• Item 2
• Item 3
  • Item 3.1
    • Item 3.1.1
    • Item 3.1.2
  • Item 3.2
  • Item 3.3
• Item 4

 

2. Spry Tabbed Panels

Spry Tabbed panels are great for organizing a lot of information on one page. There may be any number of them but only the selected one is shown. I created a page that has two tabs, Home, and Kevin Bacon. Below is a snapshot of the code and desgin views and the Property Inspector. The content of the Home tab is displayed in the design view.

To view the contents of the Kevin Bacon tab move the cursor to the Kevin Bacon tab and click on the eye that appears.

Below is what a Spry tabbed panel looks like when rendered in the browser. The contents of the Home tab are displayed because the default panel is set to the Home tab. When you click on the Kevin Bacon tab the contents of Home will disappear and the contents of Kevin Bacon are shown.

Try the Spry Tabbed Panel. Click on the Kevin Bacon and Home tabs.

 

3. Spry Accordian

Spry Accordian is another way to save space yet provide a lot of content. I created content for two tabs, Silobreaker: Semantic Networks and TED Sphere: Semantic Networks. Notice that the eye is on the far right of the TED Sphere: Semantic Networks bar.

The image below is what a Spry accordian looks like in the browser. The contents of the TED Sphere tab is currently being displayed. When you click on Silobreaker: Semantic Networks, the contents in the TED Sphere tab will collapse and the Silobreaker contents will be revealed.

Try the Spry Accordian. Click on the 'Semantic Networks - TED Sphere' bar to reveal the panel. After you do this the 'Semantic Networks - Silobreaker' panel will be hidden.

4. Spry Collapsible Panel

Spry Collapsible panels are shown as a bar in their collapsed state and when the arrow is clicked the panel containing the content opens just below the bar. It is useful for showing small pieces of information and for logging in.

When you click on the collapsible panel the contents of the panel are revealed. When you click on the panel again the content collapses. Below is a snapshot of the Collapsible panel in the browser after the panel has been clicked to reveal the contents.

Try the Collapsible Panel. To see the panel click on the 'Wild World of Dendrites...' bar located on the next line.

5. Spry Tooltips

The Spry Tooltip widget exposes additional information when a user hovers over a particular element on the page. The additional content disappears when the user stops hovering. You can also set tooltips to stay open for longer periods of time so that users can interact with content inside the tooltip. Below a delay on show and hide is set to 20 milliseconds.

When you move the mouse over the image the tooltip is shown. Spry Tooltips allows you to add any html so you are able to create sophisticated markup. In this example there is text and an image.

Try the Spry Tooltip. To see the tooltip roll the mouse over the image.

Examples

• Spry Menubar
• Spry Menubar from a Knowledge Quest assignment.
• Spry Tabbed Panel
• Spry Accordian
• Spry Collapsible Panel
• Spry Tooltip

References and Resources

• Adobe Dreamweaver CS4 - Spry
• Spry is more than a tool, it is a technology developed by Adobe Labs. Visit the web site to learn more.
• Dreamweaver CS3 The Missing Manual by David Sawyer McFarland.

* click the link below to read this week's homework assignment *
Assignment 9

Copyright © 2009 - 2010 Robert D. Cormia - May 23, 2010