New features in Spry

This post is more than 2 years old.

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:

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>
&lt;select id="Libraries_Table" onchange="dsLibraries.setCurrentRow(this.selectedIndex);document.filterForm.filter.value='';"&gt;
	&lt;option spry:repeat="dsLibraries" id="{ID}"&gt;{NAME}&lt;/option&gt;

&lt;div class="loading" spry:state="loading"&gt;Loading ...&lt;/div&gt;


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:
Raymond Camden's Picture

About Raymond Camden

Raymond is a senior developer evangelist for Adobe. He focuses on document services, JavaScript, and enterprise cat demos. If you like this article, please consider visiting my Amazon Wishlist or donating via PayPal to show your support. You can even buy me a coffee!

Lafayette, LA

Archived Comments

Comment 1 by Tony Petruzzi posted on 7/14/2006 at 6:07 PM

I think I'm missing something here or the debug example is broken.

Comment 2 by Raymond Camden posted on 7/14/2006 at 6:14 PM

Define broken. Do you get a JS error? Do you get a blank plage?

Comment 3 by joel posted on 7/14/2006 at 6:16 PM

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.

Comment 4 by Raymond Camden posted on 7/14/2006 at 6:22 PM

Joel, be sure to report it at the forums.

Comment 5 by Jose Alberto Guerra posted on 7/14/2006 at 6:51 PM

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"??


Comment 6 by Raymond Camden posted on 7/14/2006 at 7:04 PM

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.

Comment 7 by Dan Sorensen posted on 7/14/2006 at 7:59 PM

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! :-)

Comment 8 by joel posted on 7/14/2006 at 8:05 PM

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;"

Comment 9 by James Edmunds posted on 7/15/2006 at 6:53 PM

Adobe labs now has a nice annotated roundoup of Spry 1.2 samples all linked from one page: