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

Hi Ray - now i'm no expert on either but as you're starting to pass around large amounts of data would it not be better to use JSON to move the data about?
# Posted By Nick Tong | 6/23/06 11:01 AM
what?
# Posted By noname | 6/23/06 1:03 PM
Ray,
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?
# Posted By Charles | 6/23/06 1:48 PM
I only took a VERY cursory look at SPRY, so if I am incorrect, please just let me know (politely, if possible :) - it LOOKS to me like SPRY is only a framework for creating dynamic tables? No? I mean, obviously, passing data to and from a backend app (CFC, obviously), but the front end it just a dynamic HTML table...
# Posted By Neil Bailey | 6/23/06 2:20 PM
cfQuickDocs using AJAX, now CFLib. I think I will use CFLib much more often now with the spry version. Great job!

Neil, Ajax is not DHTML. It is a common misconception, but AJAX takes it one step further with XML and the httpxmlrequest.
# Posted By Aaron Roberson | 6/23/06 2:28 PM
I know precisely what AJAX is; however, after looking over the SPRY documentation, it looks like it has some....tags, I guess... that are very table specific.... again, I took a VERY quick look at it...
# Posted By Neil Bailey | 6/23/06 2:36 PM
I would not say table specific - but rather display specific. My demos also show drop downs and simple html areas that are bound to remote data. So don't just think of it as data.

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.
# Posted By Raymond Camden | 6/23/06 2:39 PM
Wouldn't make more aesthetic sense to put teh filter area under the libraries box, so the execute block is purely on the right. This would increase legibility. Just make the columns more narrow or reduce the font. having to scroll down and over to see the data will bother folks.

I know this was a quick proof of concept, but just trying to make the demo more legible. =)
# Posted By Teddy R Payne | 6/23/06 3:27 PM
For the person who talked about sending stuff back - no simple support for that yet.
# Posted By Raymond Camden | 6/23/06 3:35 PM
Some libraries have a LOT of udfs. Putting the filter box on top keeps it more available.
# Posted By Raymond Camden | 6/23/06 3:43 PM
Good work... your proof of concept is nice!
# Posted By John Farrar | 6/24/06 4:53 PM
Ray:

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
# Posted By Bruce | 6/24/06 6:59 PM
Bruce, awesome!

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. :)
# Posted By Raymond Camden | 6/24/06 8:26 PM
Ray:

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
# Posted By Bruce | 6/25/06 7:57 PM
Not a problem. The whole point of this blog is for me to share what I think is cool. :)
# Posted By Raymond Camden | 6/26/06 8:31 AM