Spry 1.5 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. Bold denotes a sample that is new for this release.

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. AutoSuggest Widget, :hover, :suggestion
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
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
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.  
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
Widgets from Spry Data Using Spry Data to generate an accordion widget.  
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

Data Utility Samples

Sample Description Spry Used
add/RemoveClass This is a utility function that allows classes to be applied and removed from page elements. Spry.Utils.addClassName
Debugging Spry A sample and explanation of using the Spry Debugger utility file. Gives insight into all page elements.  
getNodeText This utility function enables text to be pulled from a node and used elsewhere. Spry.Utils.getNodeText
Form Submission via Ajax Coldfusion | ASP | PHP - Demonstrates how to send form data via XHR.  
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
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

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.  
AutoSuggest Sample Hinting results of a form text fields.  
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
Form Select Validation widget for Select drop down menus.  
Form Text Field Validation widget for text fields, including error messages and pattern matching.  
Form Text Area Validation widget for text area, including a counter and max characters.  
Form Checkbox Validation widget for checkbox groups.  
Form Radio Buttons Validation widget for radio buttons or groups.  
Form Validation with Data Combining Form Widgets and Spry Data and a dynamic Accordion.  
Menu Bar A list based menu system. Menu Bar
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  
Tabbed Panel A disclosure widget with a tabbed interface. Tabbed Panel
Tabbed Panel from Spry Data Using Spry Data to build and populate the Tabbed Panel widget.  

Effects Samples - Effects samples have all been updated to use the Spry 1.5 methodology.

Sample Description
Fade This is a sample for Fade Effect describing its behaviors in different situations.
Blind Up/Down 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 show the Highlight Effect capabilities.
Shake Demonstrates how the Shake Effect can be used.
Slide Up/Down This is a sample about the Slide Effect and the possible values for different options.
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.
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.