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.
2 if(document.filterForm != null) {
3 if(document.filterForm.filter.value == '') return row;
4 else {
5
6 var regExpStr = document.filterForm.filter.value;
7 var regExp = new RegExp(regExpStr, "i");
8 if (row["NAME"].search(regExp) != -1) return row;
9 else return null;
10 }
11 } else return row;
12 }
13
14 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:
2 myObserver.onDataChanged = function(dataSet, notificationType) {
3 setNote('');
4 };
5
6 dsUDFs.addDataChangedObserver("myObserverName", myObserver);
7
8 function setNote(str) {
9 var noteRegion = document.getElementById('notification');
10 noteRegion.innerHTML = str;
11 }
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.
Comment 1 written by Nick Tong on 23 June 2006, at 11:01 AM
Comment 2 written by noname on 23 June 2006, at 1:03 PM
Comment 3 written by Charles on 23 June 2006, at 1:48 PM
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?
Comment 4 written by Neil Bailey on 23 June 2006, at 2:20 PM
Comment 5 written by Aaron Roberson on 23 June 2006, at 2:28 PM
Neil, Ajax is not DHTML. It is a common misconception, but AJAX takes it one step further with XML and the httpxmlrequest.
Comment 6 written by Neil Bailey on 23 June 2006, at 2:36 PM
Comment 7 written by Raymond Camden on 23 June 2006, at 2:39 PM
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.
Comment 8 written by Teddy R Payne on 23 June 2006, at 3:27 PM
I know this was a quick proof of concept, but just trying to make the demo more legible. =)
Comment 9 written by Raymond Camden on 23 June 2006, at 3:35 PM
Comment 10 written by Raymond Camden on 23 June 2006, at 3:43 PM
Comment 11 written by John Farrar on 24 June 2006, at 4:53 PM
Comment 12 written by Bruce on 24 June 2006, at 6:59 PM
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
Comment 13 written by Raymond Camden on 24 June 2006, at 8:26 PM
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. :)
Comment 14 written by Bruce on 25 June 2006, at 7:57 PM
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
Comment 15 written by Raymond Camden on 26 June 2006, at 8:31 AM
[Add Comment] [Subscribe to Comments]