The Year In Review

2007, The Year Of The Scorpio, was a fantastic year to be a ColdFusion developer. The release of ColdFusion 8 marked a new age in web application development, with so many new features and enhancements that should see some truly outstanding next generation applications in the years to come. As a community, the CF crowd has really been flourishing, with new releases in several major frameworks, the introduction of the RIAForge open source repository for Adobe related technologies, widely publicized adjunct technologies like Flex 3 and AIR approaching final release (spawning a new conference in 2008, showcasing all three technologies together), and the premier of our own developer's social networking site, ColdFusion Community. We saw the loss of the CFDJ albatross, while the Fusion Authority Quarterly, introduced at CFUnited 2006, has truly come out as an excellent ColdFusion developer's resource. And we can't forget our very own, ColdFusion specific, blog aggregator, ColdFusion Bloggers, introducing us to so many other great developers willing to share their knowledge and experiences, like the creative, and very colorful, examples provided by Ben Nadel.

I've always felt that a day without learning is a day that your dead from the neck up.I spent quite a bit of time this year learning new things, and sharing most. I've been slowly picking up Flex, put a little research into AIR, adopted JQuery heavily, run series of posts on developing on Apache and utilizing the outstanding components of the ExtJS library (the most trafficed posts on this blog). I tried to share some of the things I had learned about the new functionality of ColdFusion 8, started posting some General Coding Guidelines I've been writing for our company, and even got some first hand experience looking at the Current ColdFusion Job Market.

I look forward to sharing more in the year to come. I always look for, and appreciate, all of the feedback you readers send my way. I think the future for ColdFusion is extremely bright, and I can't wait to see what 2008 holds for us all.

ExtJS 2.0: Extending The RowExpander Plugin

Back on the 4th of December, the ExtJS team announced the official release of ExtJS 2.0. Sorry I'm a bit late to get to this, but I've been a little busy with a move, and other fun things. I had the excellent opportunity to preview the 2.0 release in advance, and I have to tell everyone that it is outstanding, a true work of art. The team has gone out of their way to pay attention to community feedback, gather information on the features that were most needed, and writing a truly elegant implementation of this library.


CF8 Grid Renderers and Events Source

I had several people ping me for some sample code for my CF8 Ajax Grid: Renderers and Events posting, on (what else) custom cell renderers and event listeners. I have just uploaded a zip of commented source code to that post. Just click the 'Download' link at the base of the post for all the source code goodness:)

CF8 Ajax Grid: Renderers and Events

So, I was doing a real quick, down and dirty form and results app for something internal. Way temporary, with little scale-out, I wrote a form and processor, then used the CF8 DataGrid for the results display. Problem was, two of the fields were textareas that could contain a lot of info, so I needed a quick way to show and expanded details set. Now, had I been using ExpanderRow plugin, but this was just quick implementation prototyping type stuff.

What I needed was a column of icons that I could then link to a CFWindow with the total display. Now, I have to use a Cell Renderer to place the image in the empty column, but first I need the column.

view plain print about
1<cfgridcolumn name="Details" header="" width="25" display="true" />

After that, I create a basic Cell Renderer:

view plain print about
1setDetailButtonRenderer = function(grid,cm,col){
2        cm.setRenderer(col,function(value,p,r,ind){
3            var retVal = "<img src='/resources/images/icons/book_link.gif' width='16' height='16' alt='Details' />";
4            return retVal;}
5        });
6        grid.reconfigure(grid.getDataSource(),cm);
7    }

This didn't entirely work out, as it placed the image in every row, even if there wasn't a record. So, time to improvise. I adjust to see if there's value for a cell in this row's 'record', to determine whether I need the image.

view plain print about
1setDetailButtonRenderer = function(grid,cm,col){
2        cm.setRenderer(col,function(value,p,r,ind){
3            var ds = grid.getDataSource();
4            var theRecord = ds.getAt(ind);
5            if(theRecord.get('TS') != null){
6                var retVal = "<img src='/resources/images/icons/book_link.gif' width='16' height='16' alt='Details' />";
7                return retVal;
8            }
9        });
10        grid.reconfigure(grid.getDataSource(),cm);
11    }
13    function showRecWin(){
15 }

Alright, to call the renderer into play I have an init method that is fired by the CF ajaxOnLoad() method.

view plain print about
1init = function(){
2        var repGrid = ColdFusion.Grid.getGridObject('reportsGrid');
3        var repCM = repGrid.getColumnModel();
5        setDetailButtonRenderer(repGrid,repCM,8);
6    }

Now we're halfway there. Next I need to get a 'click' on the image cell. You do this by accessing the underlying Ext functions of the Grid object itself, for which you already have a reference (repGrid).

view plain print about
1init = function(){
2        var repGrid = ColdFusion.Grid.getGridObject('reportsGrid');
3        var repCM = repGrid.getColumnModel();
5        setDetailButtonRenderer(repGrid,repCM,8);
7        repGrid.on('cellclick',function(grid,rowIndex,columnIndex,e){
8            if(columnIndex==8){
10            }
11        });
12    }

We are configuring an on cellclick function here, which is really a listener on the row itself. We further narrow it to only perform action if the column that the cursor was in 'on click' was our Details column, which is the 9th column of our grid, including hidden columns (remember that this uses a JavaScript array, which starts with zero, so the column you reference is always column count minus one).

Next thing we need is a quick modal pop-up for our 'Details.' CFWindow makes a great candidate for this.

view plain print about
1<cfwindow name="winDetails" title="Details" draggable="false" resizable="false" initShow="false" height="600" width="600" />

It's invisible when initialized, because we only want to show it 'on click'. We need a quick method for 'showing' the window.

view plain print about
1function showRecWin(){
3 }

We can now reference this in our 'on click' function.

view plain print about
2        if(columnIndex==8){
3            showRecWin();
4        }
5    });

OK, we get our window, but now we need some data. Now, I could do an ajax call for the data, but it's already in my cell. It's just too long to easily display in the grid. Rather than do another server call, I'll just query the grid's Data.Store for the information.

view plain print about
2        if(columnIndex==8){
3            showRecWin();
4            // This empties out any previously displayed content
5            document.getElementById("winDetails_body").innerHTML = "";
6            var ds = grid.getDataSource();
7            var theRecord = ds.getAt(rowIndex);
8            var valPurpose = theRecord.get('FEATUREPURPOSE');
9            var valFunction = theRecord.get('FEATUREFUNCTION');
10            document.getElementById("winDetails_body").innerHTML = "<b>Purpose:</b><br />" + valPurpose + "<br /><br /><b>Function:</b><br />" + valFunction;
11        }
12    });

Really simple, as long as you remember that ColdFusion's creation of the grid's ColumnModel will uppercase all of your cfgridcolumn's name attributes.

That's it. Really doesn't take a whole lot. A little digging in the documentation for the 1.1.1 version of the ExtJS library will give you a ton of information.

Ext 2.0 Alpha Public Release

OK, many of you know that I've become a fan of the Ext JavaScript library. I really started looking at it heavily just before Ben Forta told us about the new Ajax widgets in ColdFusion 8. Good thing for me, since most of those widgets are built using the Ext library.

Well, the Ext team has done it again. Or, rather, they've outdone themselves. Rey Bengo popped me an IM this afternoon, with the link to the Ext blog posting about the public release of Ext 2.0 Alpha. I've already had the opportunity to preview some of this outstanding new stuff, and it is way above the bar. The Ext crew has been hard at work, mulling over thousands of forum entries, emails, etc, enhancing and refining this excellent toolset. The samples page showcases some of the new features and enhancements, and is now separated from the API Browser, which is a thing of beauty in it's own right.

There are some heavy changes under the hood, with migration documentation soon to be released to ease the transitions. I wouldn't expect to see the new stuff built into ColdFusion anytime soon, but it would be tremendous if Adobe made that happen in an upcoming update (NOTE: Adobe has said no such thing, I just wish they would;). And anyone interested in client side JS code should read through the 'source' files that are included in the download. Simply amazing.

It's very expandable too. I've already added to the RowExpander Plugin, for the DataGrid, to take a function reference argument in it's config, so that I could populate the 'expanded' area with Ajax fed content, basically in the same vain of setting a custom cell renderer but only 'onclick'.

So, looks like I'll have to write some new DataGrid articles, which I've also begun to crosspost onto the Ext site in their Learning Center. I'm already envisioning some of the killer apps that will be fronted by this (can you say 'AIR'?) Big kudos to Jack and the guys for a stellar v2.0.

My First ExtJS DataGrid Pt 7: Custom Cell Renderers

So, it's been awhile. No, I haven't forgotten you, I've just been busy with a lot of things. One of which has been implementing a new ExtJS DataGrid in a project I'm working on. Sure, there's a lot more going on, but that's becoming a nice front end piece. As previously promised, I want to look at a renderer.


ExtJS Nested Tab Set with Demo

Ok, following up on my last entry, here is the same nested tab set done with the ExtJS UI Library. I went the the "Build Your Own" section within "Downloads" and built a script for JQuery with the ExtJS Core and the TabPanel. I also downloaded the whole library so that I had all of the example scripts, css, and images. After this I included the following files in my document header (notice the pathing changes):


Previous Entries