Using the Widget Browser - Dreamweaver CS5.5

Add site functionality with ease by using the new Widget Browser. Set up and install the Widget Browser, explore Adobe Exchange, Adobe's new community-based online resource for widgets, and see a sample integration of a slideshow widget.

Widgets available in the Widget Browser are combos of CSS, HTML and JavaScript, providing advanced user interface controls like sliding panels, accordion widgets or complex components like lightboxes or slideshows.

Access the Widget Browser

To access the widget browser:

  1. Go the Application toolbar.
  2. Find the Widget menu.
  3. Choose Widget Browser.

You will then be prompted to download the browser. This is a separate Adobe Air application that can be installed with or without Dreamweaver.

Note: In order to install the Widget Browser, an Adobe ID is required. To obtain an Adobe ID, users can go to the Adobe website or go through the installation process to create the ID.

Package Widgets

Once the Widget Browser is installed, users can then browse Adobe Exchange to see the available widgets. Widgets can also be packaged and shared with other users.

To package widgets:

  1. In the Widget Browser, click Options.
  2. Choose Enable Widget Projects.
  3. Select Widget Projects.

Widgets can then be packaged and uploaded to the Exchange!

Adding Widgets from Adobe Exchange

To add a widget to My Widgets from Adobe Exchange:

  1. In the Widget Browser, go to Adobe Exchange.
  2. Click on a desired widget. A pop-up box will prompt you for your Adobe ID.
  3. Once logged in, the selected widget will be downloaded and added to My Widgets.
    • In My Widgets, you will be able to see the ratings, number of downloads and license information for the widget.
  4. Click Preview in the top, right corner to preview how the widget works as well as the code involved in creating the widget.
  5. Click Add to My Widgets in the bottom, right corner.
  6. You will be prompted to agree to the licensing of the Widget. Click I Agree to continue.
  7. Click Go to My Widgets.

Setting and Reviewing Widget Presets

To adjust widget presets:

  1. In My Widgets, click on the desired widget to open and view the various presets.
  2. To create personal presets for the widget, click Configure. You will then be able to toggle various settings for the widget.
  3. Click Save Preset when finished.

Embedding a Widget

Non-Dreamweaver users can click Save Widget Files in My Widgets of the Widget Browser to save all JavaScript, CSS and HTML to separate files which can then be integrated into a site.

To embed a widget on a web page:

  1. Click onto the page to insert the cursor where the widget is to be placed.
  2. Go to the Insert panel.
  3. In the Common category, select the Widget icon. A widget pop-up menu will appear.
  4. In the Widget menu, select a widget and preset.
  5. Click OK.

The widget will then be placed on the page.

Widget Coding

To evaluate the coding of a widget:

  1. Go to Code View.
  2. Locate the widget code by the widget name. You can then make the desired edits to the page.
  3. Once changes are complete, go to File > Save to save your work.
  4. You will be prompted with the option to copy dependent files. These files are often external JavaScript, HTML or CSS that assists in the overall functionality of the widgets on the page. Click OK.

Dreamweaver is a popular Adobe program for creating websites and applications.  It supports HTML5, CSS3, PHP, FTP, jQuery and more; and it works with HostGator web hosting.

You can learn more about Dreamweaver by visiting Adobe's website or the video learning portal, Adobe TV.  The video in this article is courtesy of Adobe TV.