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.
Access the Widget Browser
To access the widget browser:
- Go the Application toolbar.
- Find the Widget menu.
- 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.
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:
- In the Widget Browser, click Options.
- Choose Enable Widget Projects.
- 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:
- In the Widget Browser, go to Adobe Exchange.
- Click on a desired widget. A pop-up box will prompt you for your Adobe ID.
- 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.
- Click Preview in the top, right corner to preview how the widget works as well as the code involved in creating the widget.
- Click Add to My Widgets in the bottom, right corner.
- You will be prompted to agree to the licensing of the Widget. Click I Agree to continue.
- Click Go to My Widgets.
Setting and Reviewing Widget Presets
To adjust widget presets:
- In My Widgets, click on the desired widget to open and view the various presets.
- To create personal presets for the widget, click Configure. You will then be able to toggle various settings for the widget.
- Click Save Preset when finished.
Embedding a Widget
To embed a widget on a web page:
- Click onto the page to insert the cursor where the widget is to be placed.
- Go to the Insert panel.
- In the Common category, select the Widget icon. A widget pop-up menu will appear.
- In the Widget menu, select a widget and preset.
- Click OK.
The widget will then be placed on the page.
To evaluate the coding of a widget:
- Go to Code View.
- Locate the widget code by the widget name. You can then make the desired edits to the page.
- Once changes are complete, go to File > Save to save your work.
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.