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.
Archived Comments
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?
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.
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.
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! =)
Well something needs to make your XML. It need not be dynamic though. Mine was. View source on the demo to see.
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?
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.
did you check this http://atlas.asp.net/atlast... it looks pretty good too. Please review for me.
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.
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.
Try now. I think I forgot to upload one file. It's working for me.
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.
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. :)
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.
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
So how exactly did it not work? What error did you get?
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!
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("", "");
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
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.
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.
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...
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. :)
Hi Ray,
The demo page http://ray.camdenfamily.com...
is not working. Plz fix :-)
Sorry - that code is no longer online. (Note that this entry is more than 3 years old now. :)