Working with Spry widgets (general instructions)



    About Spry widgets

    A Spry widget is a page element that provides a richer user experience by enabling user interaction. A Spry widget comprises the following parts:

    Widget structure
    An HTML code block that defines the structural composition of the widget.

    Widget behavior
    JavaScript that controls how the widget responds to user-initiated events.

    Widget styling
    CSS that specifies the appearance of the widget.

    The Spry framework supports a set of reusable widgets written in standard HTML, CSS, and JavaScript. You can easily insert these widgets—the code is HTML and CSS at its simplest—and then style the widget. The behaviors in the framework include functionality that lets users show or hide content on the page, change the appearance (such as color) of the page, interact with menu items, and much more.

    Each widget in the Spry framework is associated with unique CSS and JavaScript files. The CSS file contains everything necessary for styling the widget, and the JavaScript file gives the widget its functionality. When you insert a widget by using the Dreamweaver interface, Dreamweaver automatically links these files to your page so that your widget contains functionality and styling.

    The CSS and JavaScript files associated with a given widget are named after the widget, so it’s easy for you to know which files correspond to which widgets. (For example, the files associated with the Accordion widget are called SpryAccordion.css and SpryAccordion.js). When you insert a widget in a saved page, Dreamweaver creates a SpryAssets directory in your site, and saves the corresponding JavaScript and CSS files to that location.

    Spry widgets resources and tutorials

    Insert a Spry widget

     Select Insert > Spry, and select the widget to insert.

    When you insert a widget, Dreamweaver automatically includes the necessary Spry JavaScript and CSS files in your site when you save the page.

    Note: You can also insert Spry widgets by using the Spry category in the Insert panel.

    Select a Spry widget

    1. Hold the mouse pointer over the widget until you see the widget’s blue tabbed outline.
    2. Click the widget’s tab at the upper-left corner of the widget.

    Edit a Spry widget

     Select the widget to edit and make your changes in the Property inspector (Window > Properties).

    For details on making changes to specific widgets, see the appropriate sections for each widget.

    Style a Spry widget

     Locate the appropriate CSS file for the widget in the SpryAssets folder of your site, and edit the CSS according to your preferences.

    For details on styling specific widgets, see the appropriate customization sections for each widget.

    You can also format a Spry widget by editing styles in the CSS panel, just as you would for any other styled element on the page.

    Get more widgets

    There are many more web widgets available than the Spry widgets that install with Dreamweaver. The Adobe Exchange provides web widgets that have been developed by other creative professionals.

     Choose Browse for Web Widgets from the Extend Dreamweaver menu  in the Application bar.

    For a video overview from the Dreamweaver engineering team about working with web widgets, see www.adobe.com/go/dw10widgets.

    Change the default Spry assets folder

    When you insert a Spry widget, data set, or effect in a saved page, Dreamweaver creates a SpryAssets directory in your site, and saves the corresponding JavaScript and CSS files to that location. You can change the default location where Dreamweaver saves Spry assets if you prefer to save them somewhere else.

    1. Select Sites > Manage Sites.
    2. Select your site in the Manage Sites dialog box and click Edit.
    3. Select the Spry category in the Site Definition dialog box.
    4. Enter a path to the folder you want to use for Spry assets and click OK. You can also click the folder icon to browse to a location.