Spry UI

We are happy to present Spry UI: a series of full featured, extensible UI widgets that allow you to convert existing markup into dynamic page elements.

What's New?

Spry UI marks a big change in the way we build widgets compared to Spry 1.x.

While Spry 1.x focused on a simple include structure, defined markup, encapsulated functionality and no injected markup, Spry UI focuses on working with existing markup patterns, customizability and skinning.

The Spry Team is also working with the Open Ajax Alliance to support a common widget metadata format. We are using this OAA Metadata spec packaging widgets for the Widget Browser.

We have broken up the javascript into components. These components encompass discrete functionality. When these components are glued together properly, they make a Spry UI widget.

This methodology has a good number of benefits, including:

Consistency: All Spry UI widgets use the same base classes, so events, notifications and such are all consistent between widgets.
Customizability: If you want a tabbed panel widget that slides between panel content when clicking the tab, use a tabbed panel with and a sliding panels transition function and it just works.
Flexible markup model: Rather than describing the markup required for the widget, Spry UI works with repeating patterns of almost any markup.
Plugins: Almost any piece of functionality can be overridden with custom functions added via the Spry UI plugin model.
New Widgets: Using these components, users can build their own widgets by hooking up the components to suit their own needs.
Adaptable: Need widgets for mobile devices? Take out the IE6 support plugin and add the click navigation plugin, and now something like the Menu Bar reacts to taps rather than hover.

We have tried to take the feedback we have received from our Spry 1.x work and incorporated it into Spry UI.

What's available?

For this initial drop, we are providing the widgets listed below.

Spry Image Slideshow - Takes a set of images and cycles through them in a customizable window.

Image Slideshow with Thumbnails

Documentation

Spry Content Slideshow - Similar to Image Slideshow, this widget is designed to cycle through markup content.

Images with HTML details - This uses images but the Content Slideshow can handle the additional markup used for the panels details.

Documentation

Tabbed Panel 2.0 - Similar to the first tabbed panel, but with all the Spry UI enhancements.

Tabbed Panel Sample - Demonstrates different configurations of the panels.

Documentation

Menu Bar 2.0 - A complete rewrite of the original, this menu has all the new advantages of the Spry UI framework.

Other Samples

How do I get these Spry UI widgets?

In conjunction with these new widgets, we also have a new way of trying out and customizing these widgets. The Adobe Widget Browser is an AIR app that allows for browsing and visually customizing widgets.

Using the Widget Browser, you can set javascript and CSS properties and see the changes to the widget in a real-time, functioning preview of the actual widget. Once properly configured, users can output the widget to an HTML page.

Dreamweaver CS 5 users will also be able to insert these widgets onto their pages via the Insert panel.

The Adobe Widget Browser is available on Labs at http://labs.adobe.com/technologies/widgetbrowser/