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
Archived Comments
I think I'm missing something here or the debug example is broken.
Define broken. Do you get a JS error? Do you get a blank plage?
The {ds_EvenOddRow} seems to break spry:hover. I had a hover class that would change the background color of the moused-over row, but it has no effect if background-color is specified in the .even and/or .odd classes.
Joel, be sure to report it at the forums.
http://www.adobe.com/go/lab...
Did you noticed that every time you reorder the list clicking NAME or CATEGORY or DATE, it regenerates the "UDFs_SPRY_DIV" and the "Body_Div" TWICE?? . . . and why does it regenerates the "Body_Div" if it is reordering the "UDFs_SPRY_DIV"??
Regards
It makes sense to regen the body as sorting could change the current selected row I suppose. As for why it shows up twice, I'm not sure.
I wonder if there is a way to turn the cursor from an I-Beam into a pointer when you mouse over the sortable column headers, I think that would be more intuitive.
Otherwise, it's pretty cool! :-)
Yes, use spry:hover
td class="subheader" onclick="dsUsers.sort('LAST_NAME', 'toggle')" spry:hover="subhdrselected">Last Name</td
where the hover class subhdrselected contains "cursor: pointer;"
Adobe labs now has a nice annotated roundoup of Spry 1.2 samples all linked from one page:
http://labs.adobe.com/techn...
-James