Code, and Process, and Frameworks, Oh My!

Wow, I can't believe it's been two weeks! I am sorry, dear readers, but I've been fairly busy. Our office is migrating into an enterprise development team, instituting new (as a team) tools and processes within our development environment. So, upcoming (yes, I'm committing to this) posts will include topics like setting up multi-instance ColdFusion (7 or 8) on Apache, using Windows UNC paths in an Apache VirtualHost configuration, Apache + SSL (once I get around my JRun errors), and Subversion + Ant for deployment. This should be interesting, as I compiled everything from dozens of blog posts, dev center and trade mag articles, and a ton of trial and error. Stay tuned for that.

I also wanted to give a big shout out to the ColdFusion Weekly Podcast. Catching up the other day I was listening to their 2.20 episode, which reminded me that I should check out Brian Rinaldi's Illudium PU-36 Code Generator. Brian's tool, crafted over years of work and refinement, is a truly class act tool for any developer's toolbox. By introspecting your datasource tables, the generator can automagically create a complete set of basic object persistence 'objects', to include Bean/DAO/Gateway cfc's, coldspring config xml, and a lot more. And, it's configurable and extendable. Very sweet, and can save hours and hours of tedious repitition.

An additional shout to Matt and Peter for bringing up the LitePost project (and kudos to Chris Scott for his work on the project as well). For anyone diving into Object Oriented CF and frameworks, this little blog project is a great study. The core library of objects and services are written in such a way that they can be used by any of the major frameworks, with the only differences being at the view and controller layers (and their differences are pretty minimal). A must look sample project, and totally undocumented, that you must download from the Subversion repository, reviewing each of the individual layers can really put some pictures together for you. It's also a good study in building upon the different frameworks (Fusebox, Mach II, and Model Glue) as well, though the code does pre-date all of the recent update releases.

Release Day Is Upon Us

So, the flood has begun. Model Glue: ColdFusion (also known as 2.0, formerly Unity), as well as Model Glue: Flex, have been released, along with a brand new website.


J.J. Merrick Calling In

J.J., ColdFusion developer extrordinaire and strong member of the Nashville ColdFusion User Group, has been convinced to join the 21st Century, and is now blogging about Life, Love, and the never ending pursuit of that Perfect Line of Code. J.J. is a wealth of developer information, who has helped me out on too many occasions to count, so make sure to follow the ramblings of this mad-man. Be careful, you're liable to learn something;)

Call For Input: Document Revision Comments

A little over a year ago we instituted a new policy within our dev team: placing a comment header at the top of every new (or revised) template. This comment header states what the template is, what it is used for, who originally created the file (if known) and a 'revision' listing. Every time a template is revised a notation was added to this header, with initials and date stamp, as to the purpose of the revision. This didn't replace line level comments to explain blocks of code, only augmented the process so that a total document change overview was available in an easy to review location.


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):


Updated JQuery Nested Tab Set with Demo

Ok, there have been some changes, but I'll try to keep it easy, with an example, and there will be an included .zip file. First, you'll need the latest JQuery build, as well as the latest version of the Tabs Plugin. Pay attention to the pathing I have created in my code snippets here.


The ColdFusion 8 AJAX Components Debate

A debate rages on across the ColdFusion development community about the inclusion, and use, of the AJAX driven components and accompanying tags that have been included in the Beta Release of ColdFusion 8. Many examples of their use and benefit have already been posted by the likes of Ray Camden, Ben Nadel, and Ben Forta. No surprise there, as they all are huge proponents of the product, and, like so many of us, are very excited about the upcoming release of our favorite web programming platform.

But there are others still that think that the inclusion of these tags and components don't necessarily belong in the core language set of CFML. Many of these folks are also diehard JavaScripters, who took up writing AJAX early in it's infancy, fashioned their own components, or even contribute to open source libraries like JQuery. They argue that maybe the tags should have been separate CFCs available through the Adobe Developer's Exchange, or that the JavaScript rendered by the ColdFusion engine is too fat, taking up unnecessary bandwidth.

Can't we all just get along?


The 91st Indianapolis 500

Wow! Ok, I'm not a big race fan. Races have two real moments of big excitement, the start and the finish. Other than the occasional wreck it's a bunch of cars going around in circles. Well, that's how I thought.


My First ExtJS DataGrid Pt 6: The Grid

Alright, rolling right along. Last tutorial (see the bottom of this post for a complete listing) we covered the initial setup of our ColumnModel, which is telling our DataGrid what the basic layout of our grid columns will be and to which fields of our DataStore each column will be mapped to. Now it's time to actually instantiate our grid.

So, the first thing we have to do is create our Grid object and tell it which html element will be our grid within our page. Basically we'll tell the function the ID of the div element, what DataStore object to use, and which ColumnModel object to use.

view plain print about
1// create the editor grid
2var grid = new Ext.grid.Grid('topic-grid', {
3 ds: ds,
4 cm: cm
5 });

This is it in it's most basic form. We're going to stay away from any fancy stuff for now, and get to selection models and stuff in a later post. Let's add to it a little bit by stating that the grid may be resizable.

view plain print about
1// make the grid resizable, do before render for better performance
2var rz = new Ext.Resizable('topic-grid', {
3    wrap:true,
4    minHeight:100,
5    pinned:true,
6    handles: 's'
8rz.on('resize', grid.autoSize, grid);

That will make the grid resizable, and should be declared prior to rendering the grid. Rendering the grid is our next step, and way simple.

view plain print about
1// render it

Can't get much easier than that. Going back to the resizable for a second, don't ask, I don't know. Easiest one for me to figure on sight is the minHeight attribute, but I haven't reviewed the API enough to know what all is going on. If you figure it out before I do then leave a comment. Next we'll need to add the paging tool bar to the footer. We'll get the footer, then add the paging toolbar.

view plain print about
1var gridFoot = grid.getView().getFooterPanel(true);
3// add a paging toolbar to the grid's footer
4var paging = new Ext.PagingToolbar(gridFoot, ds, {
5 pageSize: 25,
6 displayInfo: true,
7 displayMsg: 'Displaying users {0} - {1} of {2}',
8 emptyMsg: "No users to display"

Notice the arguments of the PagingToolbar() function, the footer object, the DataStore object, and a JSON object with attributes of the pageSize (number of records), whether to display data set info, the message of the count, and a message to display should no records be returned.

The final step here is to load the DataStore. Once this is done you will have a complete, basic DataGrid for display.

view plain print about
1// trigger the data store load
2ds.load({params:{start: 0, limit: 25}});

Notice here the 'params'. These are name/value pairs that are passed, via post, whenever you request the next page of your data, with these values being your initial request (starting at row 0, returning 25 records). If you go back and look at your pagingService.cfm (included in the download) you'll see where these values are used.

So, that's the end of this post. You now have a basic DataGrid. In our next tutorial we'll start to style some things, and show you how to implement a custom 'renderer' for a specific column's data.

Where is Cutter?

Well, It's good to be back (so to speak). I had a nice bout of the stomach flu, and it was no fun. But now I'm back in the saddle and ready to go. I should post the next phase of my EXT UI DataGrid tutorial within the next few days, and I hope to get back to my Creating The View tutorial very shortly (next stop: Mach II).

This very minute, though, I'm sitting in the Nashville International Airport preparing to fly out for the weekend. My stepfather has been asking me, for half a decade now, to join him for the Indy 500. No reason to say no this year, so I'm waiting on a flight to Charlotte, North Carolina where I'll catch a connection to Dayton, Ohio. We're going to check out a few things in John's hometown before making the trip in Sunday for the race. I personally have never been a huge racing fan, but the Indy 500 is an event. It would be kind of like turning down a trip to the Kentucky Derby, the World Series, or the Super Bowl. So, I'm in for the new experience and little time with my step dad.

Which is interesting in regards to my DataGrid tutorial. is highlighted on the home page of Jack Slocum's Ext JS UI library as a site that uses the javascript components extensively, sporting a cool AJAXified interface that provides real time racing data during Indy races.

So, I'll try to knock out the next installment of my DataGrid tutorial while I wait around in airports. See if I can get this train moving again. I'll also fill you in on the fun of the weekend as I go along.

Previous Entries / More Entries