Spry Samples

Spry Data Set and Dynamic Region Samples

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

Utilities Samples

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

Element Selector Samples

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.

Server Side Utilities

queryToXML - These are samples of how to convert database info into XML files. Samples are for Coldfusion, PHP and ASP.

Spry Widget Samples

Sample	Description	Reference Widget
Accordion Sample	Accordion sample with examples of behaviors.	Accordion
Accordion from Spry data	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: Auto Width Horizontal Menu Bar Auto Width Vertical Menu Bar Centering a Horizontal Menu Bar
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.
Sliding Panels from Data	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

Effects Samples

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.

Spry 1.6.1 Samples

Spry Data Set and Dynamic Region Samples

Utilities Samples

Element Selector Samples

Server Side Utilities

Spry Widget Samples

Effects Samples