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 |
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 Spry.Utils.removeClassName |
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 loadURL |
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 |
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. |