In this section, we provide samples that feature small examples of a specific behavior in the Spry Framework. These are designed to provide insight into building Spry applications. Feel free to use these code examples in your own work. Check the source code to see what's happening. Bold denotes a sample that is new for this release.
| File | Description | Spry used: |
|---|---|---|
| Auto Suggest | An example of using a Spry region and non-destructive filter to create an auto suggest widget. There is also a formal Spry Autosuggest widget. | AutoSuggest Widget, :hover, :suggestion |
| Built-in Data References | A visualization of all the built-in data references for data sets. Useful for learning the distinction between them. | :sort, filter |
| Combining Spry Attributes | This sample shows you how you can combine some of the processing instruction attributes to eliminate the need for using extra wrapper elements. | :if, :test,:choose, :when |
| CSV Data Set sample | Shows how to use the CSV data set. | :region, :repeat, :detailregion, :setrow |
| Custom Data References and Functions | Using the {Function::} method for custom data references and externalizing Spry logic. | {function::}, spry:if="function::" |
| Custom Data Set Columns | This sample shows you how to pre-process and add custom data set columns to a data set, after its data is loaded. | :even |
| Data Set Explorer | A great file. This sample accepts a path to your source XML file. It shows the schema as a tree. Clicking the tree node will show the resulting data set and provides the full code to create the data set. A nice way to visualize your data set. It also allows for testing the new POST support in Spry. | |
| Data Set Master/Detail | This is an example of how to set up a master/detail relationship between 2 data sets. Dependent dropdown menus | :if, :repeatchildren |
| Data Set Observer | This sample shows you the two ways you can register observers on a data set. | observer, :if, setCurrentRowNumber, filter |
| Debugging Generated Region Markup | This sample shows you how to turn on region debugging to see what template code is being processed and what markup is being generated. | |
| Detail Region With Effects | This is an example of how to use transition effects for a detail region. | effect, :selected, :hover |
| Even/Odd Row | This sample shows you how to use the built-in {ds_EvenOddRow} data reference to color even and odd rows of a table. | :even, :odd, {ds_EvenOddRow} |
| Filtering with XPath | Data set constructors can take XPath expressions to filter or otherwise restrict the data in the dataset. Check the source to see what's happening. | filter |
| Hiding Data References | This is an example of how to hide the data references used inside of spry:region and spry:detailregions as the page loads. | .SpryHiddenRegion, :content |
| HTML Data Sets | Use tables or other repeating markup structures as data sets! | |
| HTML Fragments in XML | This sample shows you how to embed HTML fragments within your XML for use with data sets and Spry regions. | setColumnType() |
| Multiple Non-Destructive Filters | This sample shows you how to apply more than one non-destructive filter to a single data set. | addFilter, removeFilter, applyFilters, removeAllFilters |
| Multiple Non-Destructive Filters Mode | This sample shows you how to switch between "and" and "or" filtering modes when dealing with multiple filters. | addFilter, setFilterMode |
| JSON | This sample shows you how to use the JSON data set and JSON nested data set. | :sort |
| JSON Parser | This sample shows you how to turn on the JSON.org parsing function and use the preparseFunc constructor option to help prevent unauthorized script from executing. | preParseFunc |
| Nested XML Data | This sample shows you a couple of ways to get access to your nested XML data. | nested data, :if |
| Nested XML Data (simple) | A more straightforward sample using the NestedXMLDataSet | NestedXMLDataSet |
| Non-destructive Filter | This file shows off the new non-destructive filtering capabilities. Typing a state name will filter the data. Backing out the text field will return the data. | filter |
| Non-XML Based Data Set | This is an example of how to manually insert data into a non-XML data set so that it can be used with Spry regions. | sort, :if, setDataFromArray |
| Paging | This is an example of how to page through a dataset, 10 records at a time. Handy for large datasets, or when design constrains the data area. | filter, setXPath, loadData, :test |
| Paged View Sample | A dedicated pager, more advanced and easier to implement than the above sample, this has functions for common paging patterns. | setCurrentRowNumber, filter, pagedView, :selectgroup, :hover, :setrow, :choose, :if, |
| Progressive Enhanced Version of the Products Demo | In working towards progressive enhancement and javascript disabled environments, spry:content allows for Inner HTML replacement and static content at the same time. This makes designing for non scripting environments much easier. Original Version of the progressively enhanced Products Demo. | |
| Region Observer | This is an example of how to register a Spry region observer function to perform an action whenever a region is finished updating. | addObserver, onPostUpdate |
| Regions States | This sample shows you how to use region states to specify when markup in dynamic regions should be shown. | :state, :test, :if |
| Region State Mapping | This sample shows you how to map the built-in regions states to your own custom states. | :state |
| Setting the Current Row | This file shows how the current row can be set by the user. Remember that Spry has a zero based counting system! | :if, addObserver, setCurrentRowNumber |
| Setting the Current Row Based on Specific Column Values | This sample shows how to look for a specific row that matches a couple of column values, and make it the current row for the data set. | :if, addObserver, setCurrentRowNumber, findRowsWithColumnValues |
| setURL and setXPath | Demonstrates how to programmatically change the URL and XPath of a data set. | setURL, setXPath, loadData. :if |
| Sharing Data Between Data Sets | Demonstrates how to leverage observers to share data between data sets to reduce trips to the server when useCache:false is used. | addObserver, useCache |
| Sorting | We have improved sorting support. We now sort ascending, descending and toggle. We also support multiple column sorts. This example shows these capabilities. | :sort, {ds_SortOrder}, {ds_SortColumn} |
| spry:select and spry:selectgroup | Spry:select and selectgroup allows users to highlight a data record on a click or other event. Different than hover, the select persists until the next event. Spry:select allows for one selection at one time. Selectgroup allows for multiple selects. | :select, :selectgroup |
| spry:setrow and spry:setrownumber | This sample shows you how to use the spry:setrow and spry:setrownumber attributes to add non-destructive onclick handlers that change the current row in a data set. | :setrow, :setrownumber, :hover, :select |
| Unobtrusive Spry Data | A basic demonstration of how to use the Element Selector to make unobtrusive Spry Data pages. | :region, :repeat, SpryDOMUtils.js |
| Widgets from Spry Data | Using Spry Data to generate an accordion widget. | |
| XML Data Set String Handling | Describes how string values within XML are handled by the XMLDataSet. | setColumnType() |
| XML String | This is an example of how to create an XML data set from an XML string. | stringToXMLDoc, setDataFromDoc, sort, :if |
| XPath filtering with URL Params | Shows how to construct a XPath filter with Spry URL Utils. | |
| Zuggest Sample | Very similar to the Auto Suggest Sample above, but the content is styled so that it appears as a set of results like Zuggest. | AutoSuggest, filter |
| Sample | Description | Spry Used |
|---|---|---|
| add/removeClassName | This is a utility function that allows classes to be applied and removed from page elements. | Spry.Utils.addClassName Spry.Utils.removeClassName |
| add/removeEventListener | These utility functions allow you to add or remove an event listener for a given DOM element without having to worry about cross browser differences. | Spry.Utils.addEventListener Spry.Utils.removeEventListener |
| Debugging Spry | A sample and explanation of using the Spry Debugger utility file. Gives insight into all page elements. | |
| Form Submission via Ajax | Coldfusion | ASP | PHP - Demonstrates how to send form data via XHR. | |
| XHR Submit and Form validation | Shows how to submit the page via AJAX only if the validation passed. | |
| loadURL | This function allows you to make sync/async "GET", "POST", or "HEAD" requests to the server. | loadURL |
| updateContent | This function allows users to insert a HTML fragment onto the page from another file. | Spry.Utils.updateContent Fade Effect |
| updateContent with Tabbed Panels | This sample shows how to use the updateContent function to dynamically load Tabbed Panels content. | Spry.Utils.updateContent Tabbed Panels widget |
| URL Utilities | These utility functions make it easier to access the search/hash data in a URL. | Spry.Utils.getLocationParamsAsObject |
| URL Utils with Spry Data | Shows how to use URL parameters with Spry Data. | Spry.Utils.getLocationParamsAsObject |
| XMLDocToObject | This utility function allows you to convert an XML Document/SubTree into an object so you can easily access its data. | Spry.Utils.stringToXMLDoc loadURL |
| Sample | Description |
|---|---|
| Accordion, Unobtrusive | Use the Element Selector to activate the widget constructor. |
| Collapsible Panel, Unobtrusive | A version that uses the Element Selector to construct the widget and handle the onClick behaviors. |
| HTML Panel with Element Selector | A sample of the HTML Panel widget that degraded gracefully. |
| Multiple Alternating Row Colors | Using Element Selector with Spry Data to set up alternating row colors. |
| Alt Row Colors with Spry Data | This sample shows how to have any number of background colors for a table. |
| Sliding Panels, Unobtrusive | Using the Element Selector to unobtrusive create and control the Sliding Panels widget. |
| Spry Data, Unobtrusive | A basic demonstration of how to use the Element Selector to make unobtrusive Spry Data pages. |
| Spry Data, Unobtrusive 2 | This sample has more attributes than the above sample and includes an accordion |
| Tabbed Panels, Unobtrusive | Using the Element Selector to unobtrusive create and control the Tabbed Panels widget. |
| Table Manipulation with Element Selector | Using the Element Selector to hide rows and columns. |
queryToXML - These are samples of how to convert database info into XML files. Samples are for Coldfusion, PHP and ASP.
| Sample | Description | Reference Widget |
|---|---|---|
| Accordion Sample | Accordion sample with examples of behaviors. | Accordion |
| Two versions of building an Accordion widget with Spry data. | ||
| Accordion, Unobtrusive | A version that uses the Element Selector to run the constructor script. | |
| AutoSuggest Sample | Hinting results of a form text fields. | AutoSuggest |
| AutoSuggest Styling | Shows how to take the suggest list out of the page flow, preserving page layout. | |
| Collapsible Panel | A single panel disclosure widget. | Collapsible Panel |
| Collapsible Panel Group | A set of Collapsible Panels that can be controlled together. | Collapsible Panel Group |
| Collapsible Panel, Unobtrusive | A version that uses the Element Selector to construct the widget and handle the onClick behaviors. | |
| Form Checkbox | Validation widget for checkbox groups. | Checkbox |
| Form Confirm Password | Checks to see that 2 fields are identical | Confirm |
| Form Password Validation | Validates the existence and strength of a password field. | Password |
| Form Radio Buttons | Validation widget for radio buttons or groups. | Radio Buttons |
| Form Select | Validation widget for Select drop down menus. | Select |
| Form Select with Data | Using Spry Data to populate the Validation Select widget. | |
| Form Text Field | Validation widget for text fields, including error messages and pattern matching. | Text Field |
| Form Text Area | Validation widget for text area, including a counter and max characters. | Text Area |
| Form Validation with Data | Combining Form Widgets and Spry Data and a dynamic Accordion. | |
| HTML Panel | Loading HTML fragments into a Spry page container. | HTML Panel |
| HTML Panel options | This sample covers the evalScripts options, observers and combining with Spry Effects. | |
| Menu Bar | A list based menu system. | Menu Bar |
| Menu Bar from Spry Data | A Menu Bar created from a Nested Data Set | |
| Menu Bar, Unobtrusive | Using the Element Selector to activate the Menu Bars. | |
Menu Bar Styling Samples |
Shows how to style the menu bar for certain situations: |
|
| Rating Widget Sample | Shows basic functionality of the Rating Widget. | Rating |
| Rating with Form Submission | Shows how to submit a new rating. | |
| Rating with Graceful Degradation | Make sure the widget works when Javascript is off. | |
| Rating with Observers | Using observers to update the Rating widget. | |
| Single Error for multiple form widgets | Using a single error message to warn with multiple form validation widgets. | |
| Sliding Panels | A disclosure widget that slides content behind a visible window. | Sliding Panels |
| Sliding Panels 2 Pane Layout | Shows how to use the Sliding Panels widget 2 windows at a time. | |
| How to build a Sliding Panels widget using Spry Data | ||
| Sliding Panels, Unobtrusive | Using the Element Selector to unobtrusive create and control the Sliding Panels widget. | |
| Tabbed Panels | A disclosure widget with a tabbed interface. | Tabbed Panels |
| Tabbed Panels from Spry Data | Using Spry Data to build and populate the Tabbed Panels widget. | |
| Tabbed Panels, Unobtrusive | Using the Element Selector to unobtrusive create and control the Tabbed Panels widget. | |
| updateContent with Tabbed Panels | This sample shows how to use the updateContent function to dynamically load Tabbed Panels content. | |
| Tooltip | A basic sample of using the Tooltip widget | Tooltip |
| Tooltip from Data | Using the Tooltip widget with Spry Data | |
| Tooltip with HTML Panel | Using the Tooltip widget with Spry Data |
| Sample | Description |
|---|---|
| Fade | This is a sample for Fade Effect describing its behaviors in different situations. |
| Blind | Demonstrates the Blind Effect capabilities with different options used. |
| Grow | This is a sample of the options that can be used for the Grow Effect. |
| Highlight | This file shows the Highlight Effect capabilities. |
| Shake | Demonstrates how the Shake Effect can be used. |
| Slide | This is a sample about the Slide Effect and the possible values for different options. |
| Multiple Slides | This is sample that will slide in the page an element after sliding out the element that was previously displayed. |
| Squish | A set of samples for the Squish Effect. |
| Observers | This sample shows you the two ways you can register observers to effects and why are they useful. |
| Clustering | This is an example of how to create your own Cluster of effects to run combined on an element. |
| Fade & Grow | Samples using a cluster with fade & grow effects in parallel, including one using data provided by a DataSet. |
| Combo Sample | A collections of samples used on different elements in the same page. |
| Combo Sample 2 | A more advanced sample of the Grow Effect to display thumbnails. |
| Simple Menu | A simple animated menu to demonstrate how you can combine different effects. |
| Transitions Sample | Shows the different transitions available to the Effects and widgets. |