ptg 392 Chapter 16 Creating a Spry Region Create a Spry Region Open the Web page you want to insert a spry region, and then click to place the insertion point where you want it. Click the Spry tab on the Insert panel, or click the Insert menu, point to Spry, and then click Spry Region. Select the DIV or SPAN option. Click the Region or Detail Region option to specify the type of region you want to insert. Click the Spry Data Set list arrow, and then select the data set you want to use. Click the Wrap Selection option to insert a new region around an object, or the Replace Selection option to replace an existing region for an object. Click OK. Dreamweaver inserts a region placeholder on your page. You can replace the placeholder with spry data objects, such as a table or repeat list, or with dynamic data from the Bindings panel. 7 6 5 4 3 2 1 After you identify the data sets (HTML or XML source files) you want to use, you can insert one or more spry data objects to display the data on a page. A spry data object is enclosed in a spry region on a page, so you need to insert one first or let Dreamweaver do it for you. You can create a region or a repeated region. There are two types of regions: a region and a detail region. A spry region is a page section that wraps around data objects. A spry detail region updates data based on changes made in a master table object (also known as a spry table) somewhere else on a page. A repeat region is a data structure you can format to display your data. A repeat region is useful for elements you want to repeat within a page layout, such as a gallery of images. 1 Spry region 2 3 7 6 4 5 From the Library of Wow! eBook ptg Chapter 16 Using Spry Widgets and Effects 393 Create a Spry Repeat Region Open the Web page you want to insert a spry region, and then click to place the insertion point where you want it. Click the Spry tab on the Insert panel, or click the Insert menu, point to Spry, and then click Spry Repeat. Select the DIV or SPAN option. Click the Repeat or Repeat Children option to specify the type of region you want to insert. Use the Repeat Children option when data validation is done for each line in a list at the child level. Click the Spry Data Set list arrow, and then select the data set you want to use. Click the Wrap Selection option to insert a new region around an object, or the Replace Selection option to replace an existing region for an object. Click OK. Dreamweaver inserts a region placeholder on your page. You can replace the placeholder with spry data objects, such as a table or repeat list, or with dynamic data from the Bindings panel. 7 6 5 4 3 2 1 1 2 Spry repeat region 3 7 6 4 5 From the Library of Wow! eBook ptg 394 Chapter 16 A spry data object, such as a repeat list, displays data from a spry data set. A spry data object is enclosed in a spry region on a page, so you need to insert one first. If you don’t, Dreamweaver inserts one for you. The repeat list data object allows you to display your data as an ordered list, an unordered (bulleted) list, a definition list, or a drop- down list. Creating a Spry Repeat List Create a Spry Repeat List Open the Web page you want to insert a spry region, and then click to place the insertion point where you want it. Click the Spry tab on the Insert panel, or click the Insert menu, point to Spry, and then click Spry Repeat List. Click the Container Tag list arrow, and then select the tag you want to use: UL (Unordered List), OL (Ordered List), DL (Definition List), or SELECT (Drop-down List). ◆ If you choose the SELECT (Drop-down List) option, you also need to select a display column and value column (the value sent to the background server). Click the Spry Data Set list arrow, and then select the data set you want to use. Click the Display Column list arrow, and then select the column you want to display. Click OK. Dreamweaver inserts a repeated region in your page. 6 5 4 3 2 1 1 2 3 5 6 4 From the Library of Wow! eBook ptg Chapter 16 Using Spry Widgets and Effects 395 Each spry widget is associated with a CSS and JavaScript file. The CSS file contains all the styling for the widget and the JavaScript file pro- vides all the functionality for the widget. (For example, the files associ- ated with the Validation Radio Group widget are called SpryValidationRadio.css and SpryValidationRadio.js). When you insert a widget in a saved page, Dreamweaver creates a SpryAssets folder in your site and saves the associated files in it. If you want to customize the styling for a spry widget, all you need to do is open the CSS file in the SpryAssets folder, make the changes you want, and then save it. Customizing a Spry Widget Change the Style of a Spry Widget Click the File menu, click Open, navigate to the SpryAssets folder in your site, select the CSS file for the widget that you want to change, and then click Open. The CSS file becomes available in the SpryAssets folder after you use it on a web page. Locate the CSS rule for the part of the widget that you want to change. The available CSS rules vary depending on the spry widget. Make the changes you want. ◆ You can also make changes to a CSS file in the CSS Styles panel. Click the File menu, and then click Save to save your changes. Click the File menu, and then click Close. 5 4 3 2 1 See Also See Chapter 9, “Working with CSS Rules” on page 224 for more informa- tion on changing CSS styles. 1 2 3 4 From the Library of Wow! eBook ptg 396 Chapter 16 Dreamweaver goes a step further with spry widgets that allows you to add special effects to page elements. A spry effect is useful for high- lighting information or creating an animated transition. You can use the Behaviors panel to add a variety of spry effects including fades, high- lights, blinds, slides, shakes, and squishes. You can combine more than one effect to an element to create a unique display. If you no longer want to use an effect, you can quickly remove it. Adding and Removing Spry Effects Apply a Spry Effect Open the Web page with the element you want to apply a spry effect. Select the element on the page you want to change. Click the Window menu, and then click Behaviors to display the Behaviors panel. Click the Add Behavior button (plus sign), point to Effects, and then select the effect you want: ◆ Appear/Fade. Makes the element appear or fade away. ◆ Highlight. Changes the element background color. ◆ Blind. Displays the element with a window blind effect. ◆ Slide. Moves the element up or down. ◆ Grow/Shrink. Makes the element increase or decrease in size. ◆ Shake. Makes the element shake from left to right. ◆ Squish. Makes the element disappear in the upper left corner. Specify the options you want for the selected spry effect; the options for the effect vary depending on the one you select. Click OK. 6 5 4 3 2 1 1 2 Add Behavior button 3 6 5 4 From the Library of Wow! eBook ptg Chapter 16 Using Spry Widgets and Effects 397 Remove a Spry Effect Open the Web page with the effect you want to remove. Select the element on the page with the spry effect. Click the Window menu, and then click Behaviors to display the Behaviors panel. Select the effect you want to remove in the Behaviors panel. Click the Remove Event button in the subpanel title bar. ◆ You can also right-click (Win) or control-click (Mac) the behavior, and then click Delete Behavior. 5 4 3 2 1 2 1 Behaviors panel 3 5 4 Did You Know? Applying a spry effect adds code to your Web page file. When you apply a spry effect, Dreamweaver adds code to the document that initiates and iden- tifies the SpryEffects.js file, which pro- vides the executable code to perform the effect. Do not remove or modify this code in Code view. You can add multiple effects to an ele- ment. Select the element you to which want to apply multiple effects, open the Behaviors panel, click the Add Behavior button (plus sign), point to Effects, select the effect you want on the submenu, select the element’s ID from the target element list, or select <Current Selection>, specify the other options you want, and then click OK. From the Library of Wow! eBook ptg 398 Chapter 16 Before you add Spry widgets, you need to download and link the latest required Spry Framework files from the Adobe Labs Web site (http://labs.adobe.com/technologies/spry/). When you unzip the Spry Framework files, you also get some samples and demo files that show you by example how to use a spry widget. In addition to spry widgets, there are also other widgets available that work with Dreamweaver. You can browse for widgets on the Adobe Exchange web site, which you can quickly access from Dreamweaver. Click the Browse for Web Widgets from the Extend Dreamweaver menu on the Applications bar. Checking Out Spry Samples From the Library of Wow! eBook . Selection option to insert a new region around an object, or the Replace Selection option to replace an existing region for an object. Click OK. Dreamweaver inserts a region placeholder on your. Selection option to insert a new region around an object, or the Replace Selection option to replace an existing region for an object. Click OK. Dreamweaver inserts a region placeholder on your. create a region or a repeated region. There are two types of regions: a region and a detail region. A spry region is a page section that wraps around data objects. A spry detail region updates