30 April 2010
Some experience with Dreamweaver will be helpful.
The Adobe Widget Browser is an Adobe AIR application that allows users to easily preview and configure widgets, and then generate an HTML page that uses the widget.
The Adobe Widget Browser is designed to solve these difficulties by providing an intuitive user interface for configuring and using widgets.
OpenAjax Alliance is a group of industry leaders that are helping to define a common way of communicating between frameworks. OpenAjax Alliance has developed a Metadata specification that can be used to describe a widget. The specification defines a standard for creating an XML file that describes the dependencies, markup, and options of a widget.
Adobe has been a part of OpenAjax Alliance since its inception and has helped to define the specification. The Adobe Widget Browser uses the XML format described in the specification.
The Adobe Widget Browser helps developers and designers use widgets by simplifying three main steps:
The Adobe Widget Browser displays any widgets that have been uploaded to the Adobe Exchange. Widgets are actually ZIP files that have been prepared for the Widget Browser.
As you browse widgets, you can sort them by name (see Figure 1), author, rating, number of downloads, and date posted.
After you sign in to Adobe Exchange, you can preview individual widgets and see additional details. Follow these steps to try it out:
You'll see an enlarged view of the widget, along with details including the author, version, framework, license, compatible browsers, and more (see Figure 2).
While previewing the widget you can interact with it as if it were on a web page, and you can click Code to see the widget's HTML code.
Before you can customize and use a widget, you have to add it to your My Widgets set. My Widgets is a collection of widgets that you like and want to use in your sites. Widgets in this collection are downloaded and stored locally.
Follow these steps to begin customizing a widget:
Presets are customized configurations for the widget. There are two types of presets: Developer and User.
The Developer presets come with the widget. Each widget comes with a default preset (labeled "<default>"), which is the basic configuration as set by the widget developer. The developer may also include additional presets with the widget to highlight a special style or certain capabilities of the widget.
When you configure a preset for your own use (a User preset) it is listed under My Presets (see Figure 3).
After you choose the widget you want to use, follow these steps to create your own preset:
In the jQuery UI Accordion widget (see Figure 4), you can select the mouse event that the accordion will respond to as well as color and font parameters for the text. The widget developer determines which properties are exposed to you for configuration.
Note: In some cases, there may be things that the widget can do that aren't exposed via the Widget Browser. In these cases, you'll need to check the widget documentation for more details.
As with the Live View display, the code changes are updated immediately when you change a property.
The new preset is now stored locally and can be accessed via My Widgets.
Adobe Widget Browser will confirm that it saved the files and ask if you want preview them in your browser.
When you add a widget to the My Widgets list, the widget and its presets are available in Dreamweaver CS5.
Follow these steps to access a widget from Dreamweaver CS5:
Dreamweaver will insert the widget onto the page and copy the dependent files to the local root folder.
With the Adobe Widget Browser you now have an easy way to find widgets, customize them visually, and then insert them in your web page via Dreamweaver.
For more resources, explore the Dreamweaver Developer Center and the Spry framework for Ajax topic page.