sorted by: recent | see : popular

Content Tagged with coldfusion + Ajax

I have been working on a little AJAX application using jQuery and ColdFusion using JSON to communicate with the page through components. One of the first things I needed to do was to maximize scroll position of a DIV element each time it was updated. Digging around I finally found what I was looking for.....

Adobe adding the Ext framework to ColdFusion 8 was a great idea as it allowed CF developers to leverage some of the best UI components out there. The main downside is that it's using Ext v1.0, two releases past what's currently available. With Ext 2.0 out and tearing it up, it's no wonder that CF developers are trying to find ways of leveraging it via their favorite server-side language, CFML.

Dan Vega, has started this effort by wrapping the Ext window class within a tag that can be used within CFML:

So all of your friends are on ColdFusion 8 and you're jealous of them. I don't blame you at all because CF8 is awesome but like you our production servers are still on 7. One of the cool new things about ColdFusion 8 is all the new Ajax UI stuff. One new feature I really like is cfwindow. CFWindow allows you to create a popup like dialog without actually creating a browser popup window. To me this is a more effective and stylish way of displaying popup content.

Apart from the fact that creating these wrappers will allow you to use Ext v2.0, it also provides CF developers who have not upgraded to ColdFusion 8 a path to use these same UI controls. No more CF envy!!

Dan has created a nice document and demo page for all to use as a starting point.

Hopefully we'll see more wrappers from Dan soon.

Ext.CFC isn't about the greenhouse gasses, but instead abstracts out Ext components into the land of CFML:

“The Ext library is packed with tons of cool features, but like most CF programmers, I was initially interested in the Grid Panel. The Grid panel is implemented in ColdFusion 8 using the <cfgrid>, <cfgridcolumn>, and <cfgridrow> tags. Since I started this long before <cfgrid> was a thought, this code will obviously work in CF7.”

Currently the only abstraction is the Grid component, which allows you to do the following in CFML to create a rich grid:

which creates:

Ah, now I can feel a little less guilty about how little we post on Coldfusion.... at least until Rey joined the fun!

When Ian Smith launched Joe's Goals back in June, 2006, it was an instant hit due to it's simplicity, excellent UI, and it's excelllent ability to handle the task of managing your goals. By leveraging YUI, the FamFamFam icon library and ColdFusion, Ian created one of most recognizable Ajax-based applications out today.

Ian just announced a major update to the Joe's Goals site, putting JG v2.0 into private beta and releasing a host of new features which are sure to make his users very happy. Performance was a big focus in this release as well as improving usability and reducing page refreshes:

1. Speed Speed Speed! 2.0 is a full Ajax application, no more waiting around for page refreshes.
2. Improved stats including a longest chain stat for positive goals and longest gap stat for negative goals.
3. Lighter design means there are less links to deal with and better clarity. Goals can now be edited by clicking on their name instead of on the options link.
4. Customizable display options means you can pick which stats you want to watch for each goal.
5. Printable tracker for those who like to work on a hard copy during the week and update their tracker on the weekend.
6. You can also switch back and forth between 2.0 and the classic version until everyone gets ported over.

In trying out version 2.0, it's definitely an improvement overall to the previous version. The interface is substantially less cluttered and the use of Ajax does give the appearance of improved performance, mainly due to the lack of a page refresh. This is immediately apparent when scrolling back and forth between days which is noticeably snappier due to the partial page refresh versus the full page refresh found in the previous version.

I had a chance to chat with Ian about this new release:

How many users are actively using JG v2.0 and what's been the response?

Our active user count various but it is between 3000 and 5000 users during most of a given month.

JG leveraged YUI from the get-go. Did you introduce any new technologies in this release (eg: new libs)?

Since JG 1.0 there have been a lot of improvements made to the YUI. I've tried to rely as heavily as possible on those components this time around and cut out a lot of my own hacked together code. I'm taking better advantage of the panel and animation libraries as well as their connection library. With the connection library I benefit greatly from the ability to tag Ajax calls with specific arguments so I can capture the call backs and programmatically make page changes based on which requests succeeds or fails. The connection library is the best example of this I've seen of any Ajax Toolkit.

I'm not sure what version of CF you're using but CF8 now includes Ajax tags that leverage Ext, YUI & Spry. Did you use any of that?

I'm sitll using CF 7. An upgrade will probably happen in the the next few months but I'll still probably code the JavaScript by hand though.

What contributed to the speed improvements? Was it the Ajax functionality, under-the-hood updates?

There were several changes that helped (including a rewrite of the backend code). I also develop some techniques for better handling the data in the web browser and pushing as much of the processing to the user's computer and away from the server.

How did you go about deciding how Ajax would be expanded in JG v2.0? I think readers would be interested in knowing the UI rationale for their own work.

Yahoo Mail and Google Docs have both set the bar really high in my opinion and they both show that users are willing to adopt web applications that functional a little differenlt that your traditional page based approch. A big part of the Ajax enhancements for JG 2.0 was moving to JSON for handling the data layer and converting most of the original functionality to Ajax calls instead of page refreshes. You can now move back and forth between days, skip to a particular day using the calendar, add/edit/delete goals, filter the goals by tags, and watch your goal status update in realtime. All without a page refresh. A key part of the redesign was to shift away from HTML and to use HyperScript (http://blog.joesgoals.com/2007/07/16/3-must-read-javascript-articles/) to create the actual goal tracker grid.

Any plans for an API where people can grab the data for other apps?

Absolutely. I'm very excited about the possibilities opened up by adding an API and I'm also watching closely to see what happens in the social networking space (hint hint).

Now that ColdFusion 8 has a bit of built-in Ajax and UI controls, its time to show CF developers some love by dropping a quick set of tutorials into the hopper for them. Something that a lot of CF developers don't know is that many of these new UI controls are based on the Ext framework and thus, are substantially more powerful than what Adobe has outlined in their documentation.

Raymond Camden and Todd Sharp are both keenly aware of this and have started churning out some nice postings which discuss techniques for extending past the canned functionality.

We'll start this off with Raymond's nice post about adding custom renderers to ColdFusion's CFGRID control.

Well imagine you have data being fed into the grid that you do not have control over. For example - perhaps you have price information that isn't formatted nicely. Turns out Ext has a set of built in formatters that you can apply to grid columns, one of them being a money formatter. What if you have some other logic? Maybe you want to flag a price that is lower than 10 dollars? Again, using the Ext API, you can write your own formatter just for this purpose.

Raymond leverages Ext's built-in "usMoney" renderer to format one of the columns in currency format while applying a custom renderer to the second column for more granular control of the data's appearance.

myf = function(data,cellmd,record,row,col,store) {
if(data == "Product 4") return "" + data + "";
else return data;
}
testgrid = function() {
mygrid = ColdFusion.Grid.getGridObject('data');
cm = mygrid.getColumnModel();
cm.setRenderer(0, Ext.util.Format.usMoney);
cm.setRenderer(1,myf);
mygrid.reconfigure(mygrid.getDataSource(),cm);
}

For a quick peak at the end result, take a look at the demo.

Next up, Todd Sharp shows how to easily filter CFGRID results by leveraging the tag's data binding capabilities to dynamically refresh the data via Ajax.

Grids are very nice - especially the new Ajax grid in ColdFusion 8. But they can be a bit difficult to quickly get at something that you may know exists. Here is one method to do filtering.

The code below shows the call to bind the grid with the getSearchString() method which returns the value of the input field:

<cfinput name="searchString" />
<cfinput type="button" name="searchBtn" value="Search" onclick="ColdFusion.Grid.refresh('artGrid', false);" />
<cfgrid
format="html"
name="artGrid"
pagesize="5"
sort="true"
bind="cfc:art.getArt({cfgridpage},{cfgridpagesize},{cfgridsortcolumn},{cfgridsortdirection}, getSearchString())">

<cfgridcolumn name="artid" header="ID" />
<cfgridcolumn name="artname" header="Name" />

</cfgrid>

The demo for Todd's tutorial can be seen here and the source code is available here.

It's really great to see the ColdFusion community looking past the basic Ajax and UI capabilities built into ColdFusion 8 and actually taking advantage of the horsepower provided under the hood by the Ext framework.

A lot of folks may not know this but Adobe ColdFusion's recently released, version 8, has quite a bit of easy-to-use Ajax capabilities under the hood. By leveraging YUI, Ext and Spry and implementing certain functionality from these libraries in a nice wrapper, Adobe has made it fairly easy to build applications that can include sortable and dynamic grids, layout controls, and make use of Ajax with very little coding.

Take for example Raymond Camden's recent post for creating a filtering and Google Suggest type of functionality:

You can enter a term and either click outside the box or hit the button. (Don't hit Return/Enter.) While that works, an even slicker version is this:

<form>Search: <input type="text" name="search"></form>

<cfdiv bind="url:results.cfm?search={search@keypress}">

I've removed the button and notice now my bind is based on search@keypress. The @ symbol means I'm defining an event to listen to. Instead of onChange, I've used keypress (when using this format, drop the "on"). Now you get "filter as you type" search, all in 2 lines of code without a line of JavaScript. You can see this demo here:

http://www.coldfusionjedi.com/demos/ajaxsearch

While obviously a very simplistic demo, it is interesting that one line of could can do the data binding legwork and produce reasonable functionality.

Click here to see a demo in action.