Ask Cutter: Calling functions when paging the CF8 DataGrid

Yesterday, Mischa posted the following comment on my post on CF8 Ajax Grid: Renderers and Events:

Hi Steve, thank you for this example and your explanation! Do I understand correctly that init will fire once? Is there a way to fire init or any other function when the user pages through the grid using the page forward button? Thanks! Mischa.

Great question! Yes, to my knowledge the init() method is only called once. And, chances are, you really want it to only be called once. However, when the grid is initialized, and on every paging request, the data store runs it's load() method. The data store object, one of the underlying ExtJS pieces of the data grid, has a publicly available event that you can listen for, 'load'. I would go something like this.

view plain print about
1reportGrid = function(){
2    grid = ColdFusion.Grid.getGridObject('reportsGrid');
3    cm = grid.getColumnModel();
4    ds = grid.getDataSource();
5    cm.setRenderer(2,redBold);
6
7     var gridHead = grid.getView().getHeaderPanel(true);
8 var tb = new Ext.Toolbar(gridHead, [{
9 text: 'Add Art',
10 handler : showRecWin
11 }]);
12
13    grid.reconfigure(ds,cm);
14
15    ds.on('load',function(){alert('it just loaded the Data Store')});
16}

It's that last line that's the kicker. What I've done here is used the data store's on() method to assign an Event Listener to the 'load' event, with my own custom function. This will now kick off with whenever the data store calls the load() method, which happens on initialization, as well as each paging request (forwards or backwards).

There is a wealth of available knowledge, for interacting with these components, that is available in the ExtJS 1.1 API documentation. Looking at their online examples gives you an idea of how these components are built and interact, and knowing that can point you to the API documentation that will help you get the job done.

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.

2007 CFeMmys Voting Begins

The voting has begun on the 2007 CFeMmys. Todd Sharp began the CFeMmys last year, for the ColdFusion community to vote, and recognize, those who made contributions throughout the year. Somehow, someone made a mistake, and submitted Cutter's Crossing in the 'Best Blog' category. While I won't turn down any votes, it's a bit humbling to be included in such prestigious company (man, that's twice in two weeks!)

So, don't forget to head over and vote! Voting is through this Friday at noon. The competition has nothing to worry about, I couldn't bribe anyone even if I wanted too;) Best of luck to all the nominees!

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.

[More]

The Multi-Class BO Debate

Last Week, Peter Bell wrote a post, asking the ColdFusion community "How Many Classes Per Business Object?" The debate that came out of it was very interesting, with a number of people chiming in on the plusses and minuses around multiple classes. Some were in favor of multiple classes, some thought one was enough, a few thought the "OO Purists" were creating too much complexity.

[More]

I'm Speaking At CFManiacs 2008!

I can't be much more humbled than I am today. Last Friday I received an email from Steve Drucker, CEO of FigLeaf Software, inviting me to speak at the new WebManiacs Conference as part of CFManiacs 2008, May 19-23 in Washington, DC. FigLeaf is an Adobe partner, and has heavily been involved with ColdFusion, and the ColdFusion community, for as long as I can remember (Dave Watts, FigLeaf's CTO, at one time held an annual record, for three years in a row, for the most posts to the CF-Talk list [if I remember right]). The 5 day conference has an extemely impressive, and extensive, list of topics. Even more impressive is the caliber of the other speakers who have already committed to this conference. It is extemely humbling to be included in this company, many of whom helped me hone my skillsets along the way.

I'll be presenting Using and Extending the CF 8 AJAX Framework on Day 2, Lecture 4, 12 - 12:50 (date and time subject to change.) Here is a brief synopsis of my topic:

ColdFusion 8 provides a very robust framework for quickly prototyping rich 'ajaxified' applications, once again making 'the hard things easy.' This topic will cover a brief introduction to the new ajax components and functions included with ColdFusion 8, how they can quickly be used to provide very slick application prototypes, and how the use of the ExtJS API can further extend, or replace, that base functionality to create truly rich applications.
I'm very excited about this opportunity, and it looks like this will be a fantastic conference. I look forward to meeting some of you there.

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 PDF Manipulation: Pulling Text Out

So, this morning a friend called me up with a problem. They had received some PDF files from their insurance company, and they needed the data in Word or Excel for manipulation. Now, they could cut and paste the information, but this was time consuming. She went to the Adobe site, trying to find info, and saw 'ColdFusion' on the homepage. This sparked her brain, because she immediately went, "Hey, Cutter does something with ColdFusion! Maybe he can help me!"

Lucky for her, we now have ColdFusion 8, with it's built-in PDF support through the use of the CFPDF tag. I had to do a tiny bit of research on this, because Adobe's CF LiveDocs weren't overly clear, but I eventually found out that I could extract text with some very simple DDX processing directives.

Ray did a series of posts recently about working with PDF documents. Although none of them answered my question directly, he had written one about using the DDX processing directives. This sent me searching the Adobe site for more information, which is where I came upon the Understanding DDX developer documentation. Basically, by rewriting Ray's simple example, I was able to extract all of the DocumentText from the PDF and dump it into an XML file. First I need the DDX, which is just some simple XML:

view plain print about
1<cfsavecontent variable="myddx">
2<?xml version="1.0" encoding="UTF-8"?>
3<DDX xmlns="http://ns.adobe.com/DDX/1.0/" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://ns.adobe.com/DDX/1.0/ coldfusion_ddx.xsd">
4    <DocumentText result="OutXML">
5        <PDF source="Title"/>
6    </DocumentText>
7</DDX>
8</cfsavecontent>
9<cfset myddx = trim(myddx)>

Then, I verify the validity:

view plain print about
1<cfif isDDX(myddx)>
2yes, its ddx
3<cfelse>
4no its not
5</cfif>

Now, a little explanation. Looking at the DDX, you'll notice I've defined a result and a source. I had tried to define my file names here directly, but ColdFusion didn't like that when I hit the CFPDF tag. Apparently, when using the processddx action of the tag, you are required to define your inputfiles and outputfiles. Further study of the LiveDocs shows that ColdFusion is expecting structures for these defininitions. So, the DDX references certain structure keys (OutXML and Title) which you must define prior to processing your pdf.

view plain print about
1<cfset inputStruct = StructNew() />
2<cfset inputStruct.Title = "rptLauncher2.pdf" />
3
4<cfset outputStruct = StructNew() />
5<cfset outputStruct.OutXML = "words2.xml" />

You now have all of the necessary pieces. All that's required is your call to process your DDX directives.

view plain print about
1<cfpdf action="processddx" ddxfile="#myddx#" name="VARIABLES.doc" inputfiles="#inputStruct#" outputfiles="#outputStruct#" />

I CFDump the VARIABLES.doc to see my success or failure, which comes out just fine. I now have a file, words2.xml, sitting in my server's folder, which contains all of the content of the PDF file. Simple and sweet.

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    }
12
13    function showRecWin(){
14     ColdFusion.Window.show('winDetails');
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();
4
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();
4
5        setDetailButtonRenderer(repGrid,repCM,8);
6
7        repGrid.on('cellclick',function(grid,rowIndex,columnIndex,e){
8            if(columnIndex==8){
9                
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(){
2     ColdFusion.Window.show('winDetails');
3 }

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

view plain print about
1repGrid.on('cellclick',function(grid,rowIndex,columnIndex,e){
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
1repGrid.on('cellclick',function(grid,rowIndex,columnIndex,e){
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.

ColdFusion OO Architecture: Get Out Of The Box

For the past two days there has been a very interesting thread being discussed on the Model-Glue mailing list. You have to read through the first few messages in the thread before you really start getting into the meat of the discussion, with some great comments from Sean Corfield and Peter Bell.

It goes back to the ongoing Design Patterns Debate, making it's way around the ColdFusion community. Many have adopted the Table Row Pattern, used by popular ORMs, almost as a standard for development. But is this the right way to go with ColdFusion? Are we writing too much code to accomplish simple tasks?

Sean takes some responsibility for this thought process, believing that some of this has stemmed from his Mach-II Development Guidelines doc while at Adobe. While that may be somewhat true, I think that it probably stems more from the fact that OO is still fairly new to the ColdFusion world. While we've been capable of writing OO code since the introduction of CFCs in 6.1, adoption of the concept has been slow, and only truly picked up major steam over the last two years or more.

In the thread, Sean knocks on the large adoption of the 5:1 business object concept. He doesn't state that it's completely wrong, only that it may be overkill in most cases, and should not be the end-all-be-all. While the Bean-DAO-Gateway paradigm may be great for simple CRUD type operations, and simple table fillers, it's not well suited to complex objects. A Factory approach may be a better option. The primary point is, there is No One Way, and that we shouldn't pigeon hole ourselves into design patterns that are primarily designed for Java, when ColdFusion (being typeless) has more in common with languages like Ruby, Python or Groovy.

There is no One Way, or even Wrong Way, and maybe it's time for all of us to begin thinking outside the box again. We can build great, rapid, OO applications, if we just start doing it.

I've paraphrased some stuff here, so if I've gotten someone's comments wrong, or completely mixed up, I apologize now and please feel free to correct me.

Previous Entries / More Entries