Spry Demo: CFLib
Ok, so I bet folks may be tired of hearing me rave about Spry, but I wanted to share another demo I created this morning:
http://www.cflib.org/spry/
This is pretty much a clone of my blog demo, but I did add two interesting things here.
First - note the use of the filter. This is pretty easy to do in Spry. You create a filter function, and then assign it to the data set. You can do both destructive and non-destructive filtering. I did non-destructive so folks could remove the filter as well. Here is the code behind the filter. I cribbed a bit from Simon Horwith's example and the Spry demos.
function MyFilterFunc(ds, row, rowNumber) {
if(document.filterForm != null) {
if(document.filterForm.filter.value == '') return row;
else {
var regExpStr = document.filterForm.filter.value;
var regExp = new RegExp(regExpStr, "i");
if (row["NAME"].search(regExp) != -1) return row;
else return null;
}
} else return row;
}
dsUDFs.filter(MyFilterFunc);
As you can see, I don't do anything too complex. The filter function is passed the ds, row, and rownumber attributes, and I just examine the row and compare it to my form data. Pretty easy, eh? I had more trouble with the regex stuff (which is why I ... 'borrowed' a bit from Simon) then I did with the Spry stuff.
The second change was to add a simple loading message. I did this by using an observer function. This function waits for changes from the dataset. I don't actually check the result, which is kind of bad, but it does clear the "Loading" message. Here is the code behind the notification logic:
var myObserver = new Object;
myObserver.onDataChanged = function(dataSet, notificationType) {
setNote('');
};
dsUDFs.addDataChangedObserver("myObserverName", myObserver);
function setNote(str) {
var noteRegion = document.getElementById('notification');
noteRegion.innerHTML = str;
}
As with the other Spry demos, if you want to see the full code behind it, just view source. The CFLib proxy CFC isn't anything different from the BlogCFC one, just different methods. I'm going to break out my Spry "helper" methods into it's own CFC so that next time, my proxy can be even more light weight.
Comments
Spry does look really promising. One of the easiest AJAX frameworks I have tried yet. I have not seen in any of the demos any examples of being able to use it to submit data to another page (cfc) from a text field (for example comments). All the demos are focused on presenting (which it does really well). Do you know of anyplace that shows how or if it can be done at all?
Neil, Ajax is not DHTML. It is a common misconception, but AJAX takes it one step further with XML and the httpxmlrequest.
There is also work being done in other areas. Remember this is still in early development. I can't comment on the other areas, but will blog more later when I can.
I know this was a quick proof of concept, but just trying to make the demo more legible. =)
Thanks for posting the filter example. I've adopted your example to output our member listing and let people type in the first part of a member's last name and the table filters out the rows that don't match.
I changed your filter function to just search for the filter at the start of the last name.
The filter works great and it a quick way for users to drill down to the data they want.
Bruce
Oh - and when i said there wasn't support for sending stuff back - i was wrong. The adobe engineer I'm working with sent me a simple example. I'm trying to convince him to post it since I want him to get the credit. :)
I modified your loading message. I use a div tag that initially is hidden using this CSS:
div#notification {width: 400px; background: yellow;
padding: 10px; font-size:medium;
position:absolute;left:50px;top:200px;z-index:1;
visibility:hidden;}
Note the z-index and absolute positioning.
Then I have this JavaScript function to toggle the visibility from hidden to visibile and from visible to hidden
function setNoticeVisibility( isVisible ) {
var noteRegionStyle = document.getElementById('notification').style;
if ( isVisible == true )
noteRegionStyle.visibility = 'visible';
else
noteRegionStyle.visibility = 'hidden';
}//end function setNoticeVisibility
Then in the select's onchange I added this function call:
setNoticeVisibility(true); so that when the user selects an item the div tag will be visible with a nice message. Instead of using a text message you could also have an animated GIF image.
Then I just call setNoticeVisibility(false) inside my OnDataChanged function:
var myObserver = new Object;
myObserver.onDataChanged = function(dataSet, notificationType) {
setNoticeVisibility(false);
};
So when the table get fully populated based on the user's selection the div tag with the notice becomes hidden again.
Ray - thanks again for your postings on Spry. You really helped me get going on it and applying it to our company intranet.
Bruce

