The "spry:choose" construct provides the functional equivalent to a case statement, or an if/else if/else construct. To create an "spry:choose" structure, add an "spry:choose" attribute to an element. Next, add one or more child elements with "spry:when" attributes on them. The value of an "spry:when" attribute should be a JavaScript expression that returns a zero or non-zero value.. To make a default case, just in case all of the JS expressions for each spry:when attribute returns zero/false, add an element with an "spry:default" attribute. The "spry:default" attribute doesn't require a value, but XHTML states that all attributes must have a value, so we use the convention of setting the value of the attribute equal to its name.
The region processing engine will evaluate the "spry:when" attribute of each node in the order they are listed under their parent element. The "spry:default" element is always evaluated last, and only if no "spry:when" expression returned a non-zero value.
spry:choose constructs must be within a spry:region or spry:detailregion.
spry:choose spry:when="javascript expression" spry:default="sprydefault"
<div spry:region="dsPhotos">
<div spry:choose="spry:choose">
<div spry:when="'{@path}' == 'surf.gif'">{@path}</div>
<div spry:when="'{@path}' == 'undefined'">Path was not defined.</div>
<div spry:default="spry:default">Unexpected value for path!</div>
</div>
</div>
spry:Content does a Inner HTML replacement of the existing content with the content specified in the attribute. This attribute is used for javascript degradation reasons. The existing content is displayed in non-scripting environments and the spry:content data is used when javascript is enabled.
spry:content supports a variety of content. The attribute accepts text, Spry data references or functions.
<div spry:content="This is dynamic content">This is static content</div>
<div spry:content="dsData::description"><!--#include file="description.htm" --> </div>
<div spry:region="dsData">This is static <span spry:content="{category}">content </span> </div>
spry:default="any value "
spry:default is used with spry:choose and spry:when to set up an if/then construct for displaying content. spry:default is used when all spry:when constructs return false.
spry:default will always be processed last. The placement of spry:default within spry:choose doesn't matter.
spry:default doesn't require a value, but XHTML demands that all attributes have values, so value can be used.
spry:default must be within a spry:region or spry:detailregion.
No specific value is required but some value must be used to follow the rules of XHTML.
<div spry:choose="spry:choose">
<div spry:when="'{@path}' == 'surf.gif'">{@path}</div>
<div spry:when="'{@path}' == 'undefined'">Path was not defined.</div>
<div spry:default="spry:default">Unexpected value for path!</div>
</div>
spry:detailregion="data set name"
This function defines an element as a spry detail region. A spry:detailregion works just like a Spry region but is also regenerated automatically when a listed data set is updated. A spry:detailregion sets up a listener to the listed data sets. All data references must be within a spry:detailregion or a spry:region. A spry:detailregion can be defined on any HTML element that allows Inner HTML writing.
Those tags that cannot accept a spry:detailregion are: COL, COLGROUP, FRAMESET, HTML, IFRAME, STYLE, TABLE, TBODY, TFOOT, THEAD, TITLE, TR.
Note: IE 7 has a bug that causes <select> tags that contain a spry:detailregion or spry:region to render incorrectly. It is not recommended that <select> tags be used as regions.
Although the elements listed above cannot be a dynamic region container, they can exist inside a dynamic region container.
<div spry:detailregion="dataset">
<div spry:detailregion="dataset dataset2 dataset3">
spry:even="classname"
spry:even is a behavior that sets a CSS class name to the element when Spry is writing data while the value of currentRow is even. This is commonly used to set alternating row colors or tables or other repeating elements.
If multiple data sets are specified in the region, it will use the first listed. If you want to use other datasets, they need to be specified in the value: spry:even="ds2 classname"
spry:even must be within a spry:region or spry:detailregion.
spry:even takes a CSS class name as a value.
Optional: data set name if the region uses multiple data sets.
<style>
.evenClass{ background-color:{#FFFFFF}
</style>
<tr spry:repeat="ds1" spry:even="evenClass">
This will change the background color of the table row when the currentRow number is even while looping over the <tr>.
The "spry:if" attribute is used to display a page element based on the results of a condition. The value of spry:if is a JavaScript expression that returns zero or non-zero values. A non-zero value returned by the JavaScript expression will result in the element being written to the final output. A zero result will cause the element not to be written to the page.
spry:if attributes must be within a spry:region or spry:detailregion.
spry:if="javascript expression "
<ol class="spry:repeat">
<li spry:if="'{@path}'.search(/^s/) != -1;">{@path}</li>
</ol>
<select spry:repeatchildren="dsGalleries" id="gallerySelect" onchange="dsGalleries.setCurrentRowNumber(this.selectedIndex);">
<option spry:if="{ds_RowNumber} == {ds_CurrentRowNumber}" selected="selected">{sitename}</option>
<option spry:if="{ds_RowNumber} != {ds_CurrentRowNumber}">{sitename}</option>
</select>
spry:hover="classname"
spry:hover is a behavior that sets a CSS class name when the mouse is over the element that contains the attribute. The class is removed when the mouse moves off of the element.
spry:hover must be within a spry:region or spry:detailregion.
spry:hover takes a CSS class name as a value.
<style>
.hoverClass{ background-color:{#FFF000}
</style>
<tr spry:hover="hoverClass">
This will change the background color of the table row when the mouse moves over it.
spry:odd="classname"
spry:even is a behavior that sets a CSS class name to the element when Spry is writing data while the value of currentRow is odd. This is commonly used to set alternating row colors or tables or other repeating elements.
If multiple data sets are specified in the region, it will use the first listed. If you want to use other datasets, they need to be specified in the value: spry:odd="ds2 classname"
spry:odd must be within a spry:region or spry:detailregion.
spry:odd takes a CSS class name as a value.
Optional: data set name if the region uses multiple data sets.
<style>
.evenClass{ background-color:{#FFFFFF}
</style>
<tr spry:repeat="ds1" spry:odd="evenClass">
This will change the background color of the table row when the currentRow number is odd while looping over the <tr>.
spry:region="data set name(s)"
This function defines an element as a spry region. A Spry region contains data references to be processed by the Spry engine (and any other markup). All data references must be within a spry:region or spry:detailregion. A spry region can only be used on any HTML element that allows Inner HTML writing.
Those tags that cannot accept a spry:region are: COL, COLGROUP, FRAMESET, HTML, IFRAME, STYLE, TABLE, TBODY, TFOOT, THEAD, TITLE, TR
Note: IE 7 has a bug that causes <select> tags that contain a spry:detailregion or spry:region to render incorrectly. It is not recommended that <select> tags be used as regions.
Although the elements listed above cannot be a dynamic region container, they can exist inside a dynamic region container.
<div spry:region="dataset">
<div spry:region="dataset dataset2 dataset3">
spry:repeat="data set name"
spry:repeat repeats the tag and children that contains the spry:repeat attribute, looping through the data references for each record of the dataset.
<ol>This example will repeat the data reference AND the <li> over every record in the data set. This will create a normal ordered list of names.
<li spry:repeat="dataset">{dataset::names}</li>
</ol>
spry:repeatchildren="data set name"
spry:repeatchildren repeats the tags within the tag that contains the spry:repeat attribute, updating data references for each record of the dataset, but does not repeat the tag that contains the attribute..
<ol spry:repeatchildren="dataset">This creates a standard ordered list of 'name's from the dataset. spry:repeatchildren can be used when more a more flexible layout is needed or when the container tag shouldn't be repeated.
<li>{dataset::name}</li>
</ol>
spry:select="classname"
spry:select is a behavior that sets a CSS class name to the element when the mouse is over the element that contains the attribute. The class persists on the element until the next click on another spry:select element. This is commonly used to highlight repeating elements.
spry:select must be within a spry:region or spry:detailregion.
spry:select takes a CSS class name as a value.
<style>
.selectClass{ background-color:{#FFFFFF}
</style>
<tr spry:select="selectClass">
This will change the background color of the table row when the user clicks on the row and will persist until the user clicks on another row. Then that row will have the class applied.
spry:selectgroup="unique id "
spry:selectgroup works in conjunction with spry:select to allow for multiple selects within a group of elements. This is used to ensure that multiple distinct selectable groups do not interfer with each other.
spry:selectgroup must be within a spry:region or spry:detailregion and must be used with a spry:select attribute.
spry:select takes unique value to distinguish it from other groups. A number or string can be used.
<tr>
<td><ul spry:repeatchildren="dsEmployees">
<li spry:select="selected" spry:selectgroup="l1">{firstname} {lastname}</li>
</ul></td>
<td><ul spry:repeatchildren="dsEmployees">
<li spry:select="selected" spry:selectgroup="l2">{firstname} {lastname}</li>
</ul></td>
</tr>
This code ensures that the items in the respective lists can be selected independently.
spry:setrow="number"
spry:setrow is use to update the current row number of the data set. This in turn causes detailregions to update. This attribute can be used in the same way as the setCurrentRow function:
onclick="ds1.setCurrentRow('{ds_RowID}');
It is common to use a data reference to set the currentRow. If only one data set is defined for the region, and a data reference is used for the vaule, Spry will use that data set value. If multiple data sets are defined for the region, Spry will use the first data set listed in the region attribute, unless another data set is specified in the attribute.
spry:setrow defaults to onClick.
spry:setrow must be within a spry:region or spry:detailregion.
spry:setrow takes a number. This can either be hardcoded or populated with a data reference.
<ul spry:repeatchildren="dsEmployees">
<li spry:setrow="dsEmployees">{firstname} {lastname}</li>
</ul>
spry:setrownumber="number"
spry:setrownumber is used to update the current row number of the data set. This attribute can be used in the same way as the setCurrentRowNumber function:
onclick="ds1.setCurrentRowNumber('{ds_RowID}');
RowID is a unique, non-changing number of a specific row in the data set. RowNumber refers to the number of the row being processed. For example, in a looping construct repeating <tr>, the 3rd row written out is RowNumber 2 (zero based counting system), but the RowID of the data in RowNumber 2 may be anything.
It is common to use a data reference to set the currentRowNumber. If only one data set is defined for the region, and a data reference is used for the vaule, Spry will use that data set value. If multiple data sets are defined for the region, Spry will use the first data set listed in the region attribute, unless another data set is specified in the attribute.
spry:setrownumber defaults to onClick.
spry:setrownumber must be within a spry:region or spry:detailregion.
spry:setrownumber takes a number. This can either be hardcoded or populated with a data reference.
<tr>
<td><ul spry:repeatchildren="dsEmployees">
<li spry:setrownumer="{ds_rowID}">{firstname} {lastname}</li>
</ul></td>
</tr>
<tr>
<td><ul spry:repeatchildren="dsFirst dsEmployees">
<li spry:setrownumber="dsEmployees {ds_rowID}">{firstname} {lastname}</li>
</ul></td>
</tr>
spry:sort="sortcolumn"
The spry:sort attribute is used to sort the specified column. It's equivalent to ds1.sort("column","toggle)
By default, spry:sort will toggle the sort order. Ascending and Descending can be set as options.
Columns can be set for secondary or tertiary sorting.
If multiple data sets are defined for the region that contains the sort, Spry will use the first data set listed, unless the desired data set is specified in the attribute.
spry:sort must be within a spry:region or spry:detailregion.
sortcolumn
Optional
dataset name - the name of the data set if it is not the first listed in the spry:region or detailregion.
sort order - toggle, ascending or descending. Toggle is none is specified.
<div spry:region="ds1">
<table>
<tr>
<th spry:sort="lastname">Lastname</th>
<th spry:sort="firstname">Firstname</th>
</tr>
<tr spry:repeat="ds1">
<td>{lastname}</td>
<td>{firstname}</td>
</tr>
</table>
</div>
<div spry:region="ds1">
<table>
<tr>
<th spry:sort="ds2 lastname,firstname">Lastname</th>
<th spry:sort="ds2 firstname,lastname ascending">Firstname</th>
</tr>
<tr spry:repeat="ds1">
<td>{lastname}</td>
<td>{firstname}</td>
</tr>
</table>
</div>
spry:state="statename"
The spry:state attribute is used to control which content displays while Spry is processing the data. Spry can show different content while the data is loading, when it's ready and if there is an error.
While Spry is processing the data, elements with the "loading" state will show.
When Spry is finished processing, the "ready" state elements will show and the "loading" elements will disappear.
If there is some error in processing the data, only the "error" state elements will show.
spry:state must be within a spry:region or spry:detailregion.
There are 3 built in Spry states:
<div spry:region="dsEmployees">
<div spry:state="loading">Loading employee data ...</div>
<div spry:state="error">Failed to load employee data!</div>
<ul spry:state="ready">
<li spry:repeat="dsEmployees">{firstname} {lastname}</li>
</ul>
</div>
spry:test is used when you want to limit or filter what gets written out in a spry:repeat loop. Adding a spry:test attribute to an element that contains a spry:repeat or spry:repeatchildren will control which records get written out.
spry:test is different than spry:if because spry:test is only used with a spry:repeat(children). spry:if can be used anywhere within a region.
<ul>
<li spry:repeat="dsPhotos" spry:test="'{@path}'.search(/^s/) != -1;">{@path}</li>
</ul>
This will only output records where the @path column contains the letter 's'. spry:when="javascript expression "
spry:when is used with spry:choose and spry:default to set up an if/then construct for displaying content. spry:when constructs are evaluated in the order in which they appear in the code.
The javascript expression in the spry:when should return a zero or non-zero (true/false).
spry:when must be within a spry:region or spry:detailregion.
A javascript expression that returns zero or non-zero.
<div spry:choose="spry:choose">
<div spry:when="'{@path}' == 'surf.gif'">{@path}</div>
<div spry:when="'{@path}' == 'undefined'">Path was not defined.</div>
<div spry:default="spry:default">Unexpected value for path!</div>
</div>
Copyright © 2007. Adobe Systems Incorporated.
All rights reserved.