Tuesday, January 8th, 2008
Category: ColdFusion
, Ext
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!!
LANGUAGE:
<cfimport prefix="ext" taglib="cfext">
<ext :window title="My Window" width="500" height="350">
html content here
</ext>
<a href="##" id="btnShow" onclick="openWindow();">Open Window</a>
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.
Monday, December 10th, 2007
Category: ColdFusion, Ext
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:
JAVASCRIPT:
-
-
extobj = createobject("component",extcfc).init();
-
extobj.initGrid(title="messages",path='http://'&cgi.server_name&cgi.script_name&'?
-
action=getData',root='messages',id='id',defaultSortColumn=form.sort,defaultSortOrder=form.dir);
-
extobj.initGridFooter();
-
//extobj.setGridCol(header='Subject',width=200,name='subject',render="String.format('{0}‘, value)â€,detailRender=â€String.format(’{0}
-
{1}’, value, record.data[’body’])â€);
-
extobj.setGridCol(header=’Subject’,width=200,name=’subject’);
-
extobj.setGridCol(header=’Sender’,width=150,name=’sender’);
-
extobj.setGridCol(header=’Sent’,width=150,name=’datetime’);
-
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!
Thursday, November 29th, 2007
Category: Adobe, Ajax, ColdFusion
Scott Bennett put up two nice postings which demonstrate how to extend ColdFusion 8's built-in Grid control. I've mentioned before that CF8 uses Ext v1.0 and as such offers a ton of flexibility not generally mentioned in the CF documentation.
Grid Validation
In his first post, Scott shows how to implement validation of CFGrid data. Leveraging Ext's validateedit event, which fires after a cell is edited but before the value is actually saved, Scott was able to include code that validated the data prior to being saved:
Now whenever the validateedit event fires, it will call the dataValidator() function. The dataValidator() function checks to see if the field that is being edited needs validation, and then validates the data if necessary. In this example, I added validation for the Expiration Date, and the numeric Sponsor ID for the coupon record. If the data fails validation an alert is thrown and the edit event is canceled(reverting the data back to it's original value).
<html>
<head>
<title>CFGird Custom Date Validator</title>
<!--- import the Ext date package --->
<cfajaximport tags="cfinput-datefield">
<!--- create javascript function for rendering dates --->
<script language="JavaScript" type="text/javascript">
setDateRenderer = function(){
mygrid = ColdFusion.Grid.getGridObject('CouponsGrid');
cm = mygrid.getColumnModel();
cm.setRenderer(3, Ext.util.Format.dateRenderer('m/d/Y'));
mygrid.reconfigure(mygrid.getDataSource(),cm);
}
dataValidator = function(editEvent){
//Date Field Validation
if (editEvent.field == "EXPIRATIONDATE"){
if (isNaN(Date.parse(editEvent.value))){
alert("Please enter a date in this field.");
editEvent.cancel = true;
}
else {
data = new Date(Date.parse(editEvent.value));
editEvent.value = data.dateFormat("m/d/Y");
}
}
//Numeric Field Validation
if (editEvent.field == "SPONSORID"){
if (isNaN(editEvent.value)){
alert("Please enter a numeric value in this field.");
editEvent.cancel = true;
}
}
}
addValidator = function(){
mygrid = ColdFusion.Grid.getGridObject('CouponsGrid');
mygrid.on('validateedit',dataValidator);
}
init = function(){
setDateRenderer();
addValidator();
}
</script>
</head>
<body>
<!--- Set up the Grid --->
<cfform id="CouponForm" name="CouponForm">
<cfgrid name="CouponsGrid"
format="html"
pagesize="10"
striperows="yes"
selectmode="edit"
bind="cfc:coupons.getCoupons({cfgridpage},{cfgridpagesize},{cfgridsortcolumn},{cfgridsortdirection})"
onchange="cfc:coupons.editCoupon({cfgridaction},{cfgridrow},{cfgridchanged})">
<cfgridcolumn name="Couponid" display="false" />
<cfgridcolumn name="SPONSORID" header="Sponsor" width="100"/>
<cfgridcolumn name="COUPON" header="Coupon" width="100"/>
<cfgridcolumn name="EXPIRATIONDATE" header="Exp Date" width="200"/>
</cfgrid>
</cfform>
<!--- use AjaxOnLoad to call the init() function --->
<cfset ajaxOnLoad("init")>
</body>
</html>
Custom Date Renderer
In his second post, Scott again takes advantage of Ext's capability and shows how to create a custom date renderer:
One of the coolest things about the ColdFusion 8 implementation of the CFGrid tag is that you can do a lot of customization, if you know your way around the Ext objects. I have found several blog entries about using custom renderers with the CFGrid tag. However, could not find a working example of one for date fields, so I decided to build one.
CouponForm.cfm
<html>
<head>
<title>Custom Date Renderer</title>
<!--- import the Ext date package --->
<script src="/CFIDE/scripts/ajax/ext/package/date.js" type="text/javascript"></script>
<!--- create javascript function for rendering dates --->
<script language="JavaScript" type="text/javascript">
setDateRenderer = function(){
mygrid = ColdFusion.Grid.getGridObject('CouponsGrid');
cm = mygrid.getColumnModel();
cm.setRenderer(3, Ext.util.Format.dateRenderer('m/d/Y'));
mygrid.reconfigure(mygrid.getDataSource(),cm);
}
</script>
</head>
<body>
<!--- Set up the Grid --->
<cfform id="CouponForm" name="CouponForm">
<cfgrid name="CouponsGrid"
format="html"
pagesize="10"
striperows="yes"
selectmode="edit"
bind="cfc:coupons.getCoupons({cfgridpage},{cfgridpagesize},{cfgridsortcolumn},{cfgridsortdirection})"
onchange="cfc:coupons.editCoupon({cfgridaction},{cfgridrow},{cfgridchanged})">
<cfgridcolumn name="Couponid" display="false" />
<cfgridcolumn name="SPONSORID" header="Sponsor" width="100"/>
<cfgridcolumn name="COUPON" header="Coupon" width="100"/>
<cfgridcolumn name="EXPIRATIONDATE" header="Exp Date" width="200"/>
</cfgrid>
</cfform>
<!--- use AjaxOnLoad to set the date renderer --->
<cfset ajaxOnLoad("setDateRenderer")>
</body>
</html>
</html>
The secret sauce in this code is the following line:
cm.setRenderer(3, Ext.util.Format.dateRenderer('m/d/Y'));
That's the built-in Ext method that allows you to define your custom date renderer. Again, this is not something that's actively promoted by Adobe, most likely since they're trying to abstract the intricacies of the Ext framework via a cozy HTML-centric syntax. This, in my opinion, is not a bad thing as it eases new developers into client-side development while still allowing experienced developers to extend their apps via the framework's actual API.
Friday, November 23rd, 2007
Category: Announcements, ColdFusion, Yahoo!
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:
- Speed Speed Speed! 2.0 is a full Ajax application, no more waiting around for page refreshes.
- Improved stats including a longest chain stat for positive goals and longest gap stat for negative goals.
- 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.
- Customizable display options means you can pick which stats you want to watch for each goal.
- Printable tracker for those who like to work on a hard copy during the week and update their tracker on the weekend.
- 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).
Saturday, September 8th, 2007
Category: Ajax, ColdFusion, Ext
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.
Tuesday, August 28th, 2007
Category: Adobe, ColdFusion
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.
Thursday, December 21st, 2006
Category: ColdFusion, JavaScript, Library
We don't mention Coldfusion enough. Sorry guys. Rey Bango told us about a JavaScript version of cfdump:
The Dump method is based on one of the tags available in Coldfusion ( <cfdump>) providing the ability to display simple and complex variables in a user friendly way that is perfect for debugging/inspecting data. There is no way to do this with javascript and often I had wanted a method to do this. This method will do just that allowing for an infinite amount of data nesting complete with color coding for different data types, the ability to show/hide the data's type (String/Number/Boolean/Object/Array/Function), expandable and collapsible tables/keys and cross browser support.
Download the dump function
Wednesday, February 15th, 2006
Category: Ajax, ColdFusion, Programming, Toolkit
On DevArticles today, there's a new article posted that looks a a seldom mentioned branch of the Ajax development family tree - ColdFusion integration - and a package that makes it possible, CFAjax.
This is for ColdFusion aficionados who want to use Ajax. Ajax is implemented in such a way that ColdFusion method calls on the server gets executed using JavaScript a la Ajax. This tutorial shows you where to get the code and how to implement it on your local server.
As you would expect, I will also describe an (extremely simple) to show how the code works. After this the reader may experiment with other samples provided by the CFAjax site. Some of the examples may not work immediately unless the virtual directory for testing is set up in a certain way.
The tutorial explains how to get the CFAjax package all set up on a Windows IIS server, including a screenshot step-by-step of what you'll see along the way. From there, they give you the sample code you'll need for both sides of the equation - the server script and the client-side Javascript to make the request. There are also a few other external Javascript libraries that you'll have to include to get things up and running.
Finally, they cover the creation of the HTML file to work with the code already created. The end result? Two text fields that perform the math needed to add together the square roots of the two inputted values.
Wednesday, November 30th, 2005
Category: ColdFusion, Examples, Showcase
John Theis has built a demo ajaxian contact manager, using ColdFusionMX and SQL Server. The demo ties Ajax calls to select, insert, update, delete and search, and the widget itself is dragable, and minimizable.
The demo comes along with source code for CF heads.
Friday, November 18th, 2005
Category: Articles, ColdFusion
Rob Gonda has written a series of Ajax articles in the ColdFusion Developer Journal.
He starts at the beginning, with So what is AJAX? and by the end of the article you'll be able to set up AJAX, a ColdFusion model, make basic calls, and exchange simple data. As the applications grow and become more complex, the AJAX engine will remain the same, and the CF model will have more functions, but your JavaScript will have to manipulate more and more objects and that's where it's really at.
Part two is AJAX: Making the HTML User Experience Almost As Pleasant as Flash and goes through examples on how to update the experience for login, content, tables, and related options.
