Another Spry demo

This post is more than 2 years old.

The more I play with Spry, the more I like it. I'd like to show you one more demo...

http://ray.camdenfamily.com/spry/blog3.cfm

I've added two cool things here. First is the alt-table row colors. This is done by Spry's support for conditionals. Here is the code behind it:

<tbody spry:repeat="dsEntries"> <tr spry:if="({ds_RowNumber} % 2) == 0" class="even" onclick="dsEntries.setCurrentRow('{ds_RowID}');" > <td>{TITLE}</td> <td>{POSTED}</td> <td>{COMMENTCOUNT} </td> </tr> <tr spry:if="({ds_RowNumber} % 2) != 0" class="odd" onclick="dsEntries.setCurrentRow('{ds_RowID}');" > <td>{TITLE}</td> <td>{POSTED}</td> <td>{COMMENTCOUNT} </td> </tr> </tbody>

Notice the spry:if check. This handles checking the current row number and using a different CSS class for each row. Nice and simple. The only thing I wasn't sure about was how to use it. The last version applied the spry:repeat to the TR tag. Since I needed the condition in the TR, I wasn't sure how they would mix. One of the Spry demos showed the technique above though and it worked like a charm.

In the zip you can download from Adobe, they have a few additional examples not demonstrated on the Labs site. One is pagination. View source on the demo to see the JavaScript behind it. Just to be clear - I didn't write this. I simply cut and pasted from the example in the zip, but I'm again impressed with how simple this is. Note the use of the filter function in the xml call:

var dsEntries = new Spry.Data.XMLDataSet("blogspry.cfc?method=getentries&category={dsCategories::CATEGORYID}", "entries/entry", { filterFunc: MyPagingFunc });

You can obviously filter by other methods as well. Anyway, check it out, view source, and enjoy. I didn't update the zip, but the only change to the CFC was that I upped the max number of results to 100 so that paging would actually work.

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 https://www.raymondcamden.com

Archived Comments

Comment 1 by Justice posted on 6/13/2006 at 9:22 PM

Ray,

Maybe I am just a bit slow, but why would you want to re-invent the wheel like this? Everything this Spy does could be done with JS and CF currently, and with tags I know now.

I'm not trying to be an ass, but why would I want to take the time to learn how to write in Spry?

Comment 2 by Scott Stroz posted on 6/13/2006 at 9:36 PM

Justice - Spry is not just for CF, just like Flex is not just for CF. My guess, fwiw, is its a way to have to products, one in each corner, in the Web 2.0 wars.

Comment 3 by Raymond Camden posted on 6/13/2006 at 9:42 PM

Spry is an AJAX framework. Sure I could write my own - but why? Well, ok, so I -do- reinvent the wheel a few times w/ CF, but my JS skills aren't the best, and this makes AJAX work easy. Also note that I -am- using CF, to power the XML.

Comment 4 by Justice posted on 6/13/2006 at 9:51 PM

ahhh, I gotcha. So this really would let you do some basic development just using xml and spry / javascript, with no need to have a CF or ASP layer. Gotcha, that is pretty dang cool.

Someone must make one language to rule them all, a nice english based one.

'Create a report to show me my revenue from 2006' BAM! =)

Comment 5 by Raymond Camden posted on 6/13/2006 at 9:52 PM

Well something needs to make your XML. It need not be dynamic though. Mine was. View source on the demo to see.

Comment 6 by Neil Bailey posted on 6/14/2006 at 12:21 AM

Ray,

I have been using Flash forms (actually, we've been using them EVERYWHERE, and it was a mistake), and we're just starting to move over to AJAX-ified forms instead. Currently we're using CFAJAX, and its...ok....

How difficult was it to integrate SPRY w/ your ColdFusion CFCs?

Comment 7 by Raymond Camden posted on 6/14/2006 at 12:31 AM

I had 2 issues.

First, my CFCs were returning "normal" data. Queries, arrays, etc. Spry wants XML. So I just built a helper function or two to convert queries/arrays to XML. Problem solved.

Second, when you return XML from a CFC, the CFC will still WDDX encode it. You need to ensure you do returnType="xml" in order for the CFC to not WDDX encode stuff. See my zip in the last entry.

Comment 8 by adam posted on 6/14/2006 at 7:35 AM

did you check this http://atlas.asp.net/atlast... it looks pretty good too. Please review for me.

Comment 9 by Raymond Camden posted on 6/14/2006 at 5:37 PM

Heh, well, I can't review everything. :) If you want, check it out and share your thoughts on the blog. I know I wouldn't mind.

Comment 10 by Will posted on 6/16/2006 at 2:16 AM

Hey Ray, does the paging work for you? I tried it on your example, it didn't work and when I tried it on my own code, that also didn't work.

Comment 11 by Raymond Camden posted on 6/16/2006 at 2:29 AM

Try now. I think I forgot to upload one file. It's working for me.

Comment 12 by Will posted on 6/16/2006 at 8:54 PM

Well, I got my paging working now (as did you) but I noticed something else funny... the sorting only applies to what is on screen. so if you sort by entry it sorts the 10 on screen, you then hit next and those were the next 10 regardless of your sorting.... so it isn't sorting the entire data set and then paging those. any ideas? I'm pretty new to this and of course its pretty new itself so there isnt a lot of documentation or examples to go from, but i think yours is the only example whre sorting and paging are being used.

Comment 13 by Mike posted on 7/6/2006 at 11:45 AM

Wow. I was looking for an easy pagination solution in Spry (the documentation is.. you know.. hardly available, or I just didn't spend enough time searching) - and yours seems to be a perfect solution. Thanks for saving me bunch of time. :)

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

Thanks for the compliments. I plan another Spry demo in the next few days that shows a simple Related Selects example.

The Spry team is -very- aware that the documentation needs work. It will happen. Do not forget it is still pre-release software. I tend to forget to remind folks that when I'm gushing about the software.

Comment 15 by Chris posted on 12/12/2006 at 12:22 AM

Hello;
Im new to SPRY and the blog examples have helped me greatly and I thank everyone who's contributed.

I have a situation where Id like to only trigger SPRY/AJAX
queries based on a javascript function but have been unable
to figure out how to implement it.
In specific; Im sending some parameters from an existing
FLASH SWF via the FSCommand with the intent of showing some
record details outside the flash object on the same html page.
Has anyone triggered the SPRY functions from within another
JS Function???

I've tried embedding the Spry.Data.XMLDataset constructor

like...
var dsCerts = new Spry.Data.XMLDataSet("spry_cert_records2.cfm?ID=" + args,"certs/cert");

within the FSCommand reciever function but this doesn't work..

any hints would be greatly appreciated

Chris

Comment 16 by Raymond Camden posted on 12/12/2006 at 7:32 AM

So how exactly did it not work? What error did you get?

Comment 17 by Chris posted on 12/18/2006 at 6:30 PM

Hi;
Im trying to trigger a detail region query from within
the javascript function..

function looks like this:
function myFlash_DoFSCommand(command, args) {
var myFlashObj = InternetExplorer ? myFlash : document.myFlash;
alert (args);

var lccObjs = new Spry.Data.XMLDataSet("spry_lccobj_records.cfm?id=" + args,"objs/obj");
<!--- var dsCerts = new Spry.Data.XMLDataSet("spry_cert_records2.cfm?ID=23","certs/cert"); --->
}

and detail region looks like this

<div id="Layer1">
<div id="Obj_Detail" spry:detailregion="lccObjs" class="bigbox">
<p><span class="style1">Object ID ---- Object Name -- Object Position</span> <br />
{OBJ_ID} - {OBJ_NAME} - {POSITION} <br />
</p>
<p><span class="style1">Comments</span><br />
{COMMENTS}</p>
<p><span class="style1">X Location:{XLOC} Y Location:{YLOC}</span></p>
URL=<a href="{CERT_LINK}" terget="_blank">{CERT_LINK}</a><br />
</div>
</div>

error report is:
Control Room Equipment Viewer

Object ID ---- Object Name -- Object Position
{OBJ_ID} - {OBJ_NAME} - {POSITION}

Comments
{COMMENTS}

X Location:{XLOC} Y Location:{YLOC}

URL={CERT_LINK}
spry:region or spry:detailregion attribute has no data set!
spry:region or spry:detailregion attribute has no data set!

Comment 18 by Raymond Camden posted on 12/18/2006 at 7:27 PM

If you have the DIV on screen pointing to a DS, you must have a DS. If you don't want to _load_ the DS at launch, just make an empty DS:

var dsCerts = new Spry.Data.XmlDataSet("", "");

Comment 19 by Chris posted on 12/19/2006 at 12:22 AM

Thank you... you've pointed me in the right direction..
(im still getting errors from the detail region's field names.. .. like

processTokens(): Value reference has no data set specified: {OBJ_NAME}

but i should be able to figure that out

thank you again ... oh CF/JS Wizzard

Comment 20 by Duane Hardy posted on 3/1/2007 at 4:09 AM

I really appreciate this spry front end example. In this example you filter "Entries" with the selected category and return the xml through your proxy. How would you write the spry data call if the filter was a text box that was returned from a form.

I am trying to do this presently and I am struggling with getting the data back into the dynamic regions. I am presently have a form that sends the form variables (keyword) to xmlproxy.cfc and returns the xml document filtered by the "keyword". The problem is I can't get it to show up in the dynamic regions.

How do I get the xml back into the dymamic regions. I think you in advance for any help you might give.

Comment 21 by Raymond Camden posted on 3/1/2007 at 7:44 AM

There are multiple ways. First - my application here gets filtered data from the back end. It does this by binding to the categories drop down. You can bind instead to the form field as you said.

However - you can also filter on the client side. For that - I'd point you to the docs. :) It is doable and the Spry folks have good docs on it. Oh - a good online example - RIAForge. That search has a text field that filters as well.

Comment 22 by Kalen Gibbons posted on 10/26/2007 at 3:28 AM

The link at the top of the page is broken and needs to be updated. It still points to the ray.camdenfamily.com domain, while the correct path is now: http://www.coldfusionjedi.c...

Comment 23 by Raymond Camden posted on 10/26/2007 at 4:53 AM

I've got quite a few blog entries - so it is no surprise there are still links like this. But you figured it out just fine, so all is well. :)

Comment 24 by Dav R posted on 11/11/2009 at 10:39 PM

Hi Ray,

The demo page http://ray.camdenfamily.com...
is not working. Plz fix :-)

Comment 25 by Raymond Camden posted on 11/12/2009 at 12:39 AM

Sorry - that code is no longer online. (Note that this entry is more than 3 years old now. :)