Using the Adobe Widget Browser

Additional Requirements

Adobe Widget Browser

• Download

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 term widget has many definitions, but in this context, a widget is a combination of small pieces of HTML, CSS, and JavaScript code that work together to make a complex web page component. Accordions, tabbed panels, and image lightboxes are examples of widgets.

Many widgets are freely available on the web from countless sources. When you find a widget you want to use, you download the ZIP file, and then figure out how to configure it. This last step–understanding how to customize the widget for your own needs–can be a real challenge. You may need to set JavaScript properties or style button states, and if the documentations is lacking, this can take some time. Additionally, the widget may have dependencies not included in the ZIP file, which you'll also need to locate, download, and figure out.

The Adobe Widget Browser is designed to solve these difficulties by providing an intuitive user interface for configuring and using widgets.

A quick overview

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:

• Browse: View details and ratings as you browse available widgets.
• Configure: Configure JavaScript and CSS properties, including background colors, duration, and any other settings exposed by the widget developer. As you set properties, the widget is updated in real-time as it runs in the Preview pane.
• Deploy: Save the current working code to a file that can be integrated into your web pages.

Browsing widgets

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:

1. Start Adobe Widget Browser and click Sign In.
2. Enter your Adobe ID and password. (If you don't have one, you can click Create Account.)
3. Click the jQuery UI Accordion.

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

4. Click Preview to see a live working view of the widget.

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.

Customizing a widget

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.

Select a widget and preset

Follow these steps to begin customizing a widget:

1. Select the widget you want to customize and open it in the Details view or Preview view.
2. Click Add To My Widgets.
3. Review and accept the license agreement for the widget, if any.
4. When Adobe Widget Browser confirms that the widget has been added to My Widgets, click Go To My Widgets.
5. Select the widget to view the existing presets for the 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).

Configure the widget

After you choose the widget you want to use, follow these steps to create your own preset:

1. Select the preset that you'd like to start with.
2. Click the Configure button (found below the list of presets) to open the Configuration panel.
3. Type a Name for the preset you are creating and optionally a description.
4. Adjust any of the properties in the Properties group; as you do, the Live View on the right will update automatically to reflect the changes you make.

    

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.

5. Click Code to see the generated code.

   As with the Live View display, the code changes are updated immediately when you change a property.

6. When you've finished configuring the widget, click Save Preset.

   The new preset is now stored locally and can be accessed via My Widgets.

7. Back on the My Widgets panel, click Save Widget Files to create an HTML file with the widget in its current configuration and all the dependent files needed to run the widget.
8. Select a destination folder for the files.

   Adobe Widget Browser will confirm that it saved the files and ask if you want preview them in your browser.

9. Click Preview to see the widget you configured running in the browser.

Dreamweaver integration

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:

1. Open a new or existing HTML page in Dreamweaver.
2. If the Insert panel is not open, choose Window > Insert to open it.
3. In the Common category of the Insert panel, click Widgets.

4. In the Widget dialog box, select the widget and preset you want (see Figure 5).

Dreamweaver will insert the widget onto the page and copy the dependent files to the local root folder.

Where to go from here

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.