Here is a quick look at some new features in Spry. I modified my older CFLib Spry demo to show off a few new things. You can find the new demo here:
http://www.cflib.org/spry/index2.cfm
So what is new? First off, notice the status messages as the page loads and you change categories. If you view source on the older demo, you will see some fancy JavaScript being used to handle that. How is it done now? By just using the spry:state block. Consider this code block:
<div id="Libraries_DIV" spry:region="dsLibraries" class="box">
<h2>Libraries</h2>
<select id="Libraries_Table" onchange="dsLibraries.setCurrentRow(this.selectedIndex);document.filterForm.filter.value='';">
<option spry:repeat="dsLibraries" id="{ID}">{NAME}</option>
</select>
<div class="loading" spry:state="loading">Loading ...</div>
</div>
By using spry:state="loading" on the region, I don't have to worry about showing or hiding the block. It is done for me with Spry. Spry supports the following states: loading, error, ready. You can also build in your own custom states as well. So for example, maybe you have a call that performs a search for records. You could create a custom state for the state where no records were returned. You can also bind a state to multiple datasets. That way you could use one error handler for all your dynamic regions.
The second new feature is simple but powerful. Consider this old code to handle even/odd states in the table:
<tr spry:if="({ds_RowNumber} % 2) == 0" class="even" onclick="dsUDFs.setCurrentRow('{ds_RowID}');" >
<td>{NAME}</td>
<td>{CATNAME}</td>
<td>{LASTUPDATED}</td>
</tr>
<tr spry:if="({ds_RowNumber} % 2) != 0" class="odd" onclick="dsUDFs.setCurrentRow('{ds_RowID}');" >
<td>{NAME}</td>
<td>{CATNAME}</td>
<td>{LASTUPDATED}</td>
</tr>
While this worked, it was a bit of a pain to update column names since you needed to do it in two places. Now there is a way to simply get the even/odd state of the current row: {ds_EvenOddRow}. This is the new version of the above code:
<tr class="{ds_EvenOddRow}" onclick="dsUDFs.setCurrentRow('{ds_RowID}');" >
<td>{NAME}</td>
<td>{CATNAME}</td>
<td>{LASTUPDATED}</td>
</tr>
The last new feature I'm going to demonstrate is the debugging ability. I've added code to my demo such that if url.debug exists, I output this JavaScript line:
Spry.Data.Region.debug = true;
To see this in action, visit this link:
http://www.cflib.org/spry/index2.cfm?debug=dharma