Spry 1.4 Samples

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.

Spry Data Set and Dynamic Region Samples:

Auto Suggest Sample - An example of using a Spry region and non-destructive filter to create an auto suggest widget.

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.

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 Sample - This is an example of how to set up a master/detail relationship between 2 data sets.

Data Set Observer - This sample shows you the two ways you can register observers on a data set.

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 Sample - This is an example of how to use transition effects for a detail region.

Even/Odd Row Sample - This sample shows you how to use the built-in {ds_EvenOddRow} data reference to color even and odd rows of a table.

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.

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.

Non-destructive Filter Sample - 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.

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.

Paging Sample - 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.

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.

Region Observer Sample - This is an example of how to register a Spry region observer function to perform an action whenever a region is finished updating.

Regions States Sample - This sample shows you how to use region states to specify when markup in dynamic regions should be shown.

Region State Mapping Sample - This sample shows you how to map the built-in regions states to your own custom states.

Sort Sample - We have improved sorting support. We now sort ascending, descending and toggle. We also support multiple column sorts. This example shows these capabilities.

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!

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.

setURL and setXPath - Demonstrates how to programmatically change the URL and XPath of a data set.

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.

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.

XML String Sample - This is an example of how to create an XML data set from an XML string.

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.

Data Utility Samples

getNodeText - This utility function enables text to be pulled from a node and used elsewhere.

add/RemoveClass - This is a utility function that allows classes to be applied and removed from page elements.

updateContent - This function allows users to insert a HTML fragment onto the page from another file.

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

Accordion Sample

Collapsible Panel

Form Select

Form Text Field

Form Text Area

Form Checkbox

Menu Bar

Tabbed Panel

Effects Samples

Appear/Fade

Blind Up/Down

Combo Sample

Combo Sample 2

Grow/Shrink

Highlight

Shake

Slide Up/Down

Squish

SetUp/Finish Functions

Simple Menu