Another Spry demo
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.
Comments
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.
# Posted By Scott Stroz
| 6/13/06 12:36 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.
# Posted By Raymond Camden
| 6/13/06 12:42 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! =)
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.
# Posted By Raymond Camden
| 6/13/06 12:52 PM
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 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?
# Posted By Neil Bailey
| 6/13/06 3:21 PM
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.
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.
# Posted By Raymond Camden
| 6/13/06 3:31 PM
did you check this http://atlas.asp.net/atlastoolkit/ it looks pretty good too. Please review for me.
# Posted By adam
| 6/13/06 10:35 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.
# Posted By Raymond Camden
| 6/14/06 8:37 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.
# Posted By Will
| 6/15/06 5:16 PM
Try now. I think I forgot to upload one file. It's working for me.
# Posted By Raymond Camden
| 6/15/06 5:29 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.
# Posted By Will
| 6/16/06 11:54 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. :)
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.
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.
# Posted By Raymond Camden
| 7/6/06 6:41 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
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
# Posted By Chris
| 12/11/06 1:22 PM
So how exactly did it not work? What error did you get?
# Posted By Raymond Camden
| 12/11/06 8:32 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!
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!
# Posted By Chris
| 12/18/06 7:30 AM
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("", "");
var dsCerts = new Spry.Data.XmlDataSet("", "");
# Posted By Raymond Camden
| 12/18/06 8:27 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
(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
# Posted By Chris
| 12/18/06 1:22 PM
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.
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.
# Posted By Duane Hardy
| 2/28/07 5:09 PM
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.
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.
# Posted By Raymond Camden
| 2/28/07 8:44 PM
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.com/spry/blog3.cfm
# Posted By Kalen Gibbons
| 10/25/07 6:28 PM
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. :)
# Posted By Raymond Camden
| 10/25/07 7:53 PM
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?