iKnowKung(Foo).Blog();

ArrayCollection.cfc, a custom JSON renderer for ColdFusion queries

Fri, 11 May 2012 19:50:00 -0500

There's been a few recent blogs posts covering how to convert the JSON returned by ColdFusion's serializeJSON function to a more standard pattern in order to use data with various grids or JavaScript templates. Those posts covered client-side conversions, here's how to generate the JSON on the server.

ColdFusion and JSON

Let's use this function, with a simple query:


	
	
	
		SELECT DISTINCT
			bookid,
			title,
			genre
		FROM
			books
		WHERE
			title LIKE 
		ORDER BY
			genre, title

This is using the (case sensitive) Embedded Apache Derby database "cfbookclub" that comes with the base install of ColdFusion. If I make this call:



If I change the function's return to <cfreturn serializeJSON( rs.q, true ) />

{
	"ROWCOUNT":2,
	"COLUMNS":["BOOKID","TITLE","GENRE"],
	"DATA":{
		"BOOKID":[8,2],
		"TITLE":["Apparition Man","Shopping Mart Mania"],
		"GENRE":["Fiction","Non-fiction"]
	}
}

But what we really want is an array of structs. Each struct is an object representation of a row in the query.  This is what I've known from Flex development as an ArrayCollection.

{	
	"data":[
		{"bookid":8,"genre":"Fiction","title":"Apparition Man"},
		{"bookid":2,"genre":"Non-fiction","title":"Shopping Mart Mania"}
	]
}

Client-side Conversion

Here's a few blog posts that cover how to convert ColdFusion's standard JSON to this more standard JSON format:


Steve Cutter created the jQuery plugin serializeCFJSON
Ray Camden shows the function cfQueryNormalize to do the same without needing jQuery.


But we want to serve up our data is this JSON format directly from the server.

Server-side Conversion

The day after Ray put up his first Handlebars demo, I got to work using Handlebars in an internal application I'm building. Handlebars is a drop-dead simple JavaScript template engine which I'll talk more about it later.

A few days ago, Julian Halliwell put up a post on this same approach, but his returns both the original CF JSON and the converted JSON. 

The ArrayCollection.cfc only returns the converted JSON and allows you to convert any query on the fly.

ArrayCollection.cfc

Here's the CFC, which should always be created as a singleton. Props to Ben Nadel for giving me a place to start.



	
		
		
		
		
	

	
		
		
		
		
		
			
			
				
			
			
		
		
		
			
		
			
		
		
	

	
		
		
	

	
		
		
	
	
		
	

	
		
		

	
	
		
	

	
		
		
	
	
		
	



Converting a Query

Let's go back to my original function and change it to return an ArrayCollection.





You've already seen the results:

{	
	"data":[
		{"bookid":8,"genre":"Fiction","title":"Apparition Man"},
		{"bookid":2,"genre":"Non-fiction","title":"Shopping Mart Mania"}
	]
}

So let's change the data handle:






which returns

{	
	"foo":[
		{"bookid":8,"genre":"Fiction","title":"Apparition Man"},
		{"bookid":2,"genre":"Non-fiction","title":"Shopping Mart Mania"}
	]
}

And if we just want the array without a data handle:






will give us just the array

[
	{"bookid":8,"genre":"Fiction","title":"Apparition Man"},
	{"bookid":2,"genre":"Non-fiction","title":"Shopping Mart Mania"}
]

Teaser

I'll post this CFC to github later on, but soon I'll post an example of using this with Handlebars AND I'll tell you why I chose the name $renderdata() instead of renderdata().



Upgrading ColdFusion: CFGRID has an inconsistent width attribute
Thu, 10 May 2012 19:30:00 -0500
I'm in the process of moving a massive, years-old application from ColdFusion 8 to ColdFusion 9. I'm also testing on ColdFusion 10 (currently in beta). I've run into a few issues and will document them here. First up: Setting the width of a CFGRID.What is CFGRID?

Write a query, pass it to CFGRID and you get a grid of data rendered in either Flash (Flex?) or in HTML/JavaScript via Ext.js. Here's an example straight from the documentation:



	SELECT Course_ID, Dept_ID, CorNumber,
	CorName, CorLevel
	FROM CourseList
	ORDER by Dept_ID ASC, CorNumber ASC


cfgrid Example
Currently available courses


	
	



Documentation

Documentation for ColdFusion 8.


Documentation for ColdFusion 9.


Documentation for ColdFusion 10.


Regardless of version, for width: 

"In HTML format, can be in any valid CSS measurement unit, and a numeric-only value specifies pixels."

LIES!

Some of the CFGRIDs currently in use are set to width="100%" and they've been working for years.



	font="Tahoma" fontsize="12"
	query = "GetCourses">



Run that code in ColdFusion 9 or 10 and BOOM!


Attribute validation error for the CFGRID tag.


height/width attribute cannot be a percentage value.


Is a percentage value a "valid CSS measurement unit"? Yes it is! Was this a CF8 bug that was fixed in CF9? An oversight in documentation? Either way it's a PITA.

Solution

I tried redefining the classes on the DIVs that make up the grid, but they all have inline definitions, so those <style> entries get overridden. Then I tried using jQuery with setTimeout() to replace the inline CSS values after the page has completed loading, to little effect.



This didn't affect the width of the column headers (if you set autowidth="true", the columns scale to the width of their content and then to the width of the grid container). If you resize the browser, an onResize() function kicks in and the DIVs are reset to their original width.

I'm sure we can replace these grids with something like DataTables or a direct implementation of an Ext JS Grid, but that would incur a lot of regression testing, so that has to wait.

The solution I implemented was to set the width to a static value and move on. If anyone has figured out a way to get these grids to 100% width, I'd love to hear it.


Check All Checkboxes with jQuery - Revisited
Wed, 18 Apr 2012 08:00:00 -0500
Nearly 4 years ago, I showed how to "check all checkboxes" using jQuery 1.2.6. In this post, I'm going to show a more advanced, but still simple way to handle checkboxes with jQuery that accounts for changes made as of version 1.6.1. I'll even answer the bracketed field name question that haunts PHP developers.jQuery version 1.6 introduced a new function, .prop(), for which changes were also made to the .attr() function. The changes to .attr() were reverted in version 1.6.1 due to a backlash related to backwards compatibility. Basically, it broke everything that was already using .attr(). You can read the documentation for the full details but it boils down to this:


Use .attr() to read the HTML attribute of an element.
Use .prop() to set and read a property of an element. "Properties generally affect the dynamic state of a DOM element without changing the serialized HTML attribute." (emphasis mine)


Here's an example, straight from the jQuery site:


jQuery .attr() vs. .prop()


.attr()
Proper .prop() usage




$(window).attr...
$(window).prop...


$(document).attr...
$(document).prop...


$(":checkbox").attr("checked", true);
$(":checkbox").prop("checked", true);


$("option").attr("selected", true);
$("option").prop("selected", true);




In my previous post, I used .attr() and .is() as those were the best available functions at the time.


Old and busted

 $("form#" + id + " INPUT[@name=" + name + "][type='checkbox']").attr('checked', false);

$('#checkAllAuto').is(':checked');



Specifications!

This post is going to cover the following:


Check and Uncheck all checkboxes related to a particular "check all" checkbox.
Manage the "check all" box
Uncheck the "check all" box when a related checkbox is un-checked.
Select the "check all" box when all related checkboxes are selected.
Handle the PHP naming convention <input type="checkbox" name="foo[]" />


The end goal is to write generic process to handle ALL of the "check all" functionality throughout your application.

The examples in this post should run on any version of jQuery 1.7 or greater. Also, I tend to switch between "check all" and "select all" quite a bit. Deal with it. :)

Generating the HTML

Let's create a simple column with two columns of checkboxes and a "Select All" checkbox for each column. While this example uses ColdFusion to dynamically generate the HTML, it can be easily translated to PHP, .NET or any other server-side language.


	
		
		
	
	
		
		
					
						
			
				
					 
					name="foo"
					name="bar"
				
			
			
				
							#i#
							
							
						
					
				
			
			
				
					Select All
					
					
				
			
			
		
		
	


Here's the generated table:

Doing the "check all" thing




 
name="foo"
name="bar"



0


1


2


3


4


5


6


7


8


9




Select All






Avoid inline event handlers.

We all learned to use onclick="this();" and onchange="that();" in form fields to call some JavaScript function or other. In my opinion, we should stop doing this when possible. I build a lot of applications where the goal is reuse of code and if you write everything inline, you can't reuse a group of form fields across multiple forms.

I believe that the rules of how a form functions (and that's what we're doing here, writing rules) should be moved to an external JavaScript file. Doing so means that you don't have to go digging into the final HTML to figure out how a form works. This also lets you reuse groups of fields across multiple forms, but gives you the flexibility to easily change how they function.

*steps off the soapbox*

Specification 1: The "check all" checkbox

Let's take a look at the checkboxes in the name="foo" column:



Using "i" as the index of my loop, 


Each checkbox has a unique ID.
Each has the same NAME.
The unique ID is tied to the VALUE.
The related "check all" checkbox is specified using and HTML "data-" attribute. In this case data-select-all="sa_foo".
Every non-"check all" checkbox has the CLASS "checkme".


As of jQuery 1.4.3, we can read the value of any "data-" attribute using the function .data(). Yes, "data-" is an HTML5 attribute, but this works for non-HTML5 browsers (although your validator might pitch a fit).

Now here's the "check all" checkbox for the name="foo" column:



If you look at the name="bar" column, you'll see the same setup using "bar" instead of "foo".


checkall.js (v1)


$(document).ready(function(){ // 1
	// 2
	$(':checkbox.selectall').on('click', function(){
		// 3
		$(':checkbox[name=' + $(this).data('checkbox-name') + ']').prop("checked", $(this).prop("checked"));
		
	});
	
});



This code 


Does not run until the document is ready to go ( using $(document).ready(); ).
 
Uses the jQuery ":checkbox" selector, restricted to those with the class of "selectall" and adds a CLICK event to them using the jQuery 1.7 .on() function. (Previous to 1.7, you can use .click().)
 
The closure (anonymous function) assigned to the "select all" checkbox

Selects all of the ":checkbox" form elements with a NAME matching its "data-checkbox-name" attribute,
then calls the .prop() function and assigns to each of them the same "checked" property it has.




So if the "check all" checkbox has a property of checked="true", then so do all of its related checkboxes. If it's "false", they're all checked="false".

Specification 2: Manage the "check all" checkbox.

Now that you can check all of the individual checkboxes at once, what happens when one of them is unchecked? The "check all" box should be unchecked too. Also, if all of the individual checkboxes are manually checked, then the "check all" should be checked as well.

By relating the individual checkboxes to the "check all" checkbox using a "data-" attribute, this is also pretty straight forward:


checkall.js (v2)

$(document).ready(function(){
	
	$(':checkbox.selectall').on('click', function(){
		$(':checkbox[name=' + $(this).data('checkbox-name') + ']').prop("checked", $(this).prop("checked"));
	});
	// Individual checkboxes
	$(':checkbox.checkme').on('click', function(){ // 1

		var _this = $(this); // 2
		var _selectall = _this.prop("checked"); //3

		if ( _selectall ) { // 4
			// 5
			$( ':checkbox[name=' + _this.attr('name') + ']' ).each(function(i){
				// 6
				_selectall = $(this).prop("checked");
				return _selectall; // 7
			});

		}
		
		// 8
		$(':checkbox[name=' + $(this).data('select-all') + ']').prop("checked", _selectall);
	});
	
});



This code also waits until the document is ready to go. Then, 


It uses the jQuery ":checkbox" selector, restricted to those with the class of "checkme" and adds a CLICK event to them using the .on() function.
Inside the closure, for sake of this example, I've created a private variable "_this" equal to $(this), which is a pointer to the current $(':checkbox') object.
Next, create a private variable "_selectall" and assign it the value of the "checked" property (true or false) of the current checkbox.
If this checkbox has a property of "checked" equal to true
then loop through all checkboxes with the same NAME (using another closure; within this closure, $(this) refers to the $(':checkbox') object on the previous line.)
Set "_selectall" to the "checked" property of the current checkbox.
By returning "_selectall" (true or false) in each iteration of the .each() loop, if the current individual checkbox has a property of "checked" that is false, we break out of the loop and continue
Finally, use the value of "data-select-all" in the current "checkme" checkbox to find its related "check all" checkbox and set its "checked" property. If any or the related individual checkboxes is unchecked, then so should be the "check all" box.


Specification 3: PHP and form field names using brackets.

If a form has a group of fields with the same name, when it is submitted, the values of those fields are sent as multiple parameters to the server. For example, if we selected all name="foo" fields and submitted them to foo.htm using a GET, this is the result:


foo.htm?foo=0&foo=1&foo=2&foo=3&foo=4&foo=5&foo=6&foo=7&foo=8&foo=9&sa_foo=on


If the ACTION on the form was foo.cfm, the query string would be the same, but the ColdFusion parser can reference a URL variable "foo" whose value would be "0,1,2,3,4,5,6,7,8,9".

Now, if the ACTION was foo.php, the PHP parser would set the value of the variable "foo" to that the last instance of "foo" in the query string. So in this case, PHP would say that foo = 9.

HOWEVER, if we changed the NAME of the individual checkboxes from name="foo" to name="foo[]", the square brackets tell PHP that foo is an ARRAY with 10 elements in it, ranging from values 0 through 9.







But this causes a problem with JavaScript and in this case jQuery. Defining a jQuery selector using name="foo[]" causes an error (message from Chrome):


$(':checkbox[name=' + $(this).data('checkbox-name') + ']');


Uncaught Error: Syntax error, unrecognized expression: [name=foo[]]

The above code is equivalent to this:


$(':checkbox[name=foo[]]');


which throws an "unrecognized expression" error because the JavaScript parser thinks that foo[] is a JavaScript variable of type array which has not yet been defined.

So this is an easy fix:


$(':checkbox[name="' + $(this).data('checkbox-name') + '"]');


can you see that? It's fixed by using double quotes around your attribute value. The code is now equivalent to this:


$(':checkbox[name="foo[]"]');


to which the JavaScript parser says (in a very "Alan Rickman as Marvin the Robot" style voice), "Wow. Another string value. How very boring."

Final checkall.js

Here's the final version of checkall.js with "_this" and blank lines removed.


$(document).ready(function(){
	$(':checkbox.selectall').on('click', function(){
		$(':checkbox[name="' + $(this).data('checkbox-name') + '"]').prop("checked", $(this).prop("checked"));
	});
	$(':checkbox.checkme').on('click', function(){
		var _selectall = $(this).prop("checked");
		if ( _selectall ) {
			$( ':checkbox[name="' + $(this).attr('name') + '"]' ).each(function(i){
				_selectall = $(this).prop("checked");
				return _selectall;
			});
		}
		$(':checkbox[name="' + $(this).data('select-all') + '"]').prop("checked", _selectall);
	});
});


In conclusion . . .

The "check all" checkbox is a standard user interface widget. It is easy to define similar widgets using jQuery to access standard attributes & properties, along with common (if not yet standard) HTML5-style data attributes, of common elements throughout your application. By defining an application-wide library of widgets, it is possible to shorten your development time lines.

I'll be posting more jQuery examples soon. If there's anything you'd like to see, please let me know via the Contact page.


Looking for ColdFusion, Java, JavaScript, UI and SQL Developers
Fri, 17 Feb 2012 17:53:00 -0500
I have been at Equator for 2.5 years, currently a Senior Enterprise Architect and I'm having a blast working here. We have multiple openings in Los Angeles, Irvine, Plano, and Seattle. In addition to developers, we also need Business Analysts and Technical Project Managers. If you're interested in working with a leader in the Real Estate and Financial Services Industry, please read on."Equator provides a Platform that automates and connects the Default Servicing industry. Mortgage Lenders, Mortgage Insurers, Servicers, Vendors, Real Estate Professionals and Government Entities use the Platform to automate their daily process and connect to transact in a safe and transparent environment."

Our application stack (core):


ColdFusion 8 on IIS
ColdBox MVC framework
jQuery and jQueryUI
JBoss SOA stack
SQL Server 2008


Our offices are located in Los Angeles (headquarters), Irvine (CA), Plano (TX) and we just opened in Seattle (WA). Many of these positions are contract only; telecommuting is available for all full-time employees and for contractors on a case-by-case basis. However, you must be based in California, Texas or Washington.

The following positions are open at any of our offices unless noted otherwise.

For more information and to apply for any position, visit Equator.com. On the application form, where it says "Where did you hear about us?", please put "Adrian Moreno". :)

ColdFusion Developers

The Developer's main goal is to implement the application as specified within the planned timeframe. The Developer is also expected to help specify the features of physical design, estimate time and effort to complete each feature, build or supervise implementation of features, prepare product for deployment, and provide technology subject-matter expertise to the team.

Considered a plus: Experience with Java, MVC frameworks and object oriented programming

Java Developers (LA, Irvine or Dallas)

Implements software development projects within planned time frames using Java technologies. Specifies features of physical design, estimates time and effort needed to complete each feature, builds or supervises implementation of features, prepares product for deployment, and provides technology subject matter expertise to the development team.

Considered a plus: Experience with the JBoss SOA stack, Tomcat, Rules Engine, BPM, ESB, Spring, Hibernate and related technologies.

UI / JavaScript Developers

Contribute to the development of Equator's HTML5 mobile application; Improve website and application usability through the use of AJAX and advanced JavaScript functionality; Establish and maintain HTML/CSS/JS mobile standards documentation; Ensure compliance with best practice coding standards.

We need both a UI Designer and a UI Developer (a.k.a. JavaScript Rock Star).

SQL Developers

These developers will not deal with the administration of SQL Servers. Instead, they will be writing stored procedures and functions to be used by the application developers.

Business Analyst (Dallas)

The Business Analyst works with client to analyze, identify, assess and document business requirements. This role supports internal and external clients with the discovery, approval, specification, creation and testing of projects.

Technical Project Manager

The Project Manager is responsible for effectively managing multiple projects simultaneously, with a focus on launching systems, infrastructure and operational projects. This position will directly support all Equator departments providing project leadership for large, cross-functional, new product and support deployments as well as various special projects, while leveraging existing Equator PMO methodologies and procedures.



Again, for more information and to apply for any position, visit Equator.com. On the application form, where it says "Where did you hear about us?", please put "Adrian Moreno". :)


Attention recruiters: please don't contact me about these positions. We're already working with selected agencies. Thank you.


ColdFusion 10 Beta is here!
Fri, 17 Feb 2012 16:48:00 -0500
Go get it!.


D-Flex is hosting Ted Patrick from Sencha Feb 16, 2012
Fri, 10 Feb 2012 17:34:00 -0500
The DFW ColdFusion User Group normally meets the 2nd Tuesday of each month. We'd planned to avoid Valentine's day and meet on the 16th with a 2nd presentation on Ext.js. However, the guys at the Dallas Flex User Group informed me that they will be hosting Ted Patrick from Sencha (the owners of Ext.js) on the same night. Check out the details and note that this is NOT at our normal meeting location at Paladin's offices.Special Guest @ D-Flex - Take a look at Sencha with Ted Patrick!

Date and Time: February 16, 2012 07:00 PM - 09:00 PM

Please RSVP @ D-Flex.org.

1st Floor Conference Room

12001 North Central Expressway

Dallas, TX 75243

Parking is available in the Garage north of the building.

*** Avoid spaces marked reserved.  


View Larger Map

Speaker

Ted Patrick currently holds the position of Director of Developer Relations at Sencha. He works with developers to create applications using web technologies including HTML5, JavaScript, and CSS. Prior to Sencha, Ted worked at Barnes and Noble on NOOK Apps and on Flash & Flex at Adobe Systems. Along the way, he founded 4 companies as an entrepreneur, raised vc funding, and sold 1. Ted loves to write software. No, He really, really, loves to write software. So much he can hardly think of it as work. Ted especially loves to help solve the hard strategy problems in combining business and software. The past 2 years have been filled with learning the ins and outs of the Android Operating System and how best to write software for phone-tablet form factor devices (IOS/Android). Lately, Ted dove head first into building apps using HTML5. When he is not writing code, you will find him either spending time with his family or scuba diving.

Agenda

This month we thought we'd take a look at something a little different than our usual. We'll be welcoming Ted Patrick who will walk you through Sencha's frameworks for building mobile and desktop applications using web technologies including HTML5, JavaScript, and CSS. We will cover the framework's foundation (OOP+MVC), standard libraries, containers, components, xtype rendering, and most importantly cross-browser support. Bring an open mind and a laptop, we will be building applications from scratch; feel free to follow along. Sencha provides frameworks, tools, and services for building professional applications with HTML5.


7:00pm - 7:15pm : Announcements
7:15pm - 8:30pm : Hello Sencha: HTML5 Applications
8:45pm - 9:00pm : Open Question and Answer


Drinks and meet up afterwards!


OpenCF Summit and ColdBox Training Discount
Fri, 10 Feb 2012 17:22:00 -0500
The first CFML conference of the year is almost here. Come on down to Dallas and hang out with one of the largest ColdFusion / CFML communities in the US."[The] OpenCF Summit is a community gathering focused exclusively on advancing free and open source software in the CFML community.

If you're interested in diving into the free software CFML engines,  learning more about the free software movement, and interacting with the most progressive thinkers in the CFML community, OpenCF Summit is for you!" 

http://opencfsummit.org

The conference is only $72. If you have the means, I highly recommend checking it out. 

Luis Majano, the author of the ColdBox MVC framework for ColdFusion will be in town and he's offering a discount for ColdBox Training (training is separate from conference fees). 

You can register for training here. Training will be on Feb. 20 and 22, 2012.


iKnowKungFoo is Evolving
Tue, 29 Nov 2011 00:57:00 -0500
It's been a year and a half since my last post and over two years since my last truly technical post. I promised myself I'd get back to writing this year, but life and work kept getting in the way. Fortunately, I've been able to get a number of things back on track over the last few months. This blog is one of them.Blogging in the Cloud

My blog is now on a Rackspace Cloud server, running ColdFusion 9 on CentOS 5.5. I basically spun up one of their LAMP images, then consulted Aaron West's excellent guide, made a few adjustments for ColdFusion Standard and was up and running in short order.

Upgrading BlogCFC

Previously, I was running BlogCFC version 5.9.001. There have been a number of upgrades since then related to both security and functionality. I exported the MySQL database from my previous host, then installed the latest version of BlogCFC locally, including the latest MySQL schema.

Thankfully, most columns in the BlogCFC database have default values set. Once I had the newest version of the database, I just ran the INSERT scripts from the MySQL dump file in order to populate the database. After that, I updated the single record in "tblusers", changing the username to that from my live site.

If you've run the blog application before making all of these data changes, you'll not see your data correctly. Re-initializing the blog application won't help, you'll have to restart the CF server. At least, that's what I had to do.

Twitter Bootstrap

At this year's Adobe MAX conference, I gave a presentation at the ColdFusion Unconference. The presentation was titled, "Laying the Foundation for Modern ColdFusion Applications". Really, it continued, "using HTML5, BluePrintCSS, jQuery, jQueryUI, jQuery Validate" and so on, but I only had 50 minutes.

After the presentation, someone (and I apologize for not recalling your name) came up and asked if I'd looked at Twitter Bootstrap, "a toolkit from Twitter designed to kickstart development of webapps and sites." I'd heard of it, but never used it. Until now.

It's very easy to get started with Twitter Bootstrap if you're worked with other CSS Grids. Using one of their example layouts, I had the blog styled within a few minutes. Currently, TB is not "reactive", meaning it doesn't use CSS Media Queries to re-size itself to whatever device is viewing it. Therefore, you'll have to switch out layouts programmatically to adjust to smaller displays.

Moving on up, to HTML5 . . .

While I was working on all of this, Adobe made their announcements about focusing on HTML5. I've been working with the HTML5BoilerPlate as a template for some other recent applications, so i decided to integrate pieces of it with Twitter Bootstrap in order to create my modern application foundation.

I was given a review copy of Hello! HTML5 and CSS3 by Rob Crowther from Manning Publishing a few months ago. I'll post a detailed review shortly, but I'll say now that after a quick read-through, it was a breeze to pick up on the parallels between how we've traditionally laid out HTML4 vs HTML5.

Evolution

I've got a couple of years' worth of blog posts rattling around in my head as well as a few books. If there's anything you'd like me to cover, please use the Contact form and I'll do my best to respond quickly.

If you happen to see anything odd with the layout, please send me a note and include which browser you're using. I only tested this layout in Chrome, FireFox 3.6.x and MSIE 9.

During a Fishbowl session at the ColdFusion Unconference this year, Scott Stroz brought up the fact that as developers, we need to constantly evolve. I couldn't agree more.

I have been very fortunate to have worked in a wide range of industries. At each employer, I've learned concepts which I then applied as needed at subsequent employers. This has allowed me to evolve and, I hope, help others evolve. By getting this blog back up and running, I hope to do both again.


Adobe ColdFusion Anthology - a new ColdFusion book!
Mon, 03 May 2010 14:21:00 -0500
Thanks to Michael and Judith Dinowitz, there is a new ColdFusion book on the market, Adobe ColdFusion Anthology, and I'm glad to have had a hand in it.

I've been sitting on this for over a year now it's finally here! The book is an anthology of articles from Fusion Authority magazine. Chapter 11 of the book is my contribution, "You Might Have a Performance Bottleneck If". Written in the mood of Jeff Foxworthy, I outline 12 common problems in web applications (not just CF applications) that can be easily solved by the proper use of a database.

What are you waiting for? Pick up your copy of Adobe ColdFusion Anthology today! :)


DFW CFUG presents Head First Design Patterns for ColdFusion
Tue, 09 Mar 2010 14:09:00 -0500
The Dallas/Ft. Worth ColdFusion User Group has been working through the book Head First Design Patterns, taking the Java-centric code examples in the chapters and implementing them in ColdFusion to see how they may apply to us as ColdFusion developers. Click here for a continually updated list of presentations.

Keep updated with ColdFusion in the DFW area by following @dfwcfug on Twitter.


Special DFW CFUG ColdFusion Builder event March 24th
Tue, 09 Mar 2010 13:59:00 -0500
The Dallas / Fort Worth ColdFusion User Group is proud to announce that Adobe Evangelist Terry Ryan will be making a special stop in Dallas on March 24th to present ColdFusion Builder, the new eclipse based IDE for developing ColdFusion applications.PLEASE RSVP ASAP!!! at http://groups.adobe.com/posts/a1d79161c4. The location is TBD based on RSVP numbers, but will either be in the Paladin offices or another venue in the same building.

Keep updated with ColdFusion in the DFW area by following @dfwcfug on Twitter.


Presenting The Template Pattern at the DFW CFUG tonight
Tue, 09 Mar 2010 13:49:00 -0500
Tonight at the Dallas/Fort Worth ColdFusion User Group meeting, I'll be continuing our series on design patterns with a presentation on The Template Pattern. The meeting will be begin at 6:30 with a training topic. The main presentation will be presented using Adobe Connect, so you can join us live or view the recording later. Keep updated with ColdFusion in the DFW area by following @dfwcfug on Twitter.


FAQU 3.2 is out! The Things You Didn't Know You Needed to Know
Thu, 17 Dec 2009 13:22:00 -0500
Sorry I've been off the radar for so long, but I've had a heck of a year. I'll be posting a few things shortly, but in the meantime you can take a look at what started out as a blog post and ended up as a published article. My article, "You Might Have a Performance Bottleneck If . . ." has just been published in the latest Fusion Authority Quarterly Update. Yes, you read that correctly. There's a new FAQU and you can read it right now.


Screwy issue when defining a string. (cfif within a cfset)
Fri, 13 Mar 2009 17:51:00 -0500
I was browsing through some tickets in Jira today when I found a couple of bugs related to tables not displaying correctly in MSIE. When I found an example, it basically looked like a <TR> tag had not been closed correctly. When I viewed the source HTML, imagine how surprised I was to find a <cfif> statement gumming up the works.Disclaimer

I inherited this code.

The Problem

The report I was looking at pulls from a few different tables, including a Notes table. Some notes are entered manually and others are automatically created by the system. When I checked the table, I found quite a few notes that contained the same  statement.

The Code

This is the line of code in question:

Let's make a string









(#Left(foo.phone,3)#) #Mid(foo.phone,4,3)#-#Mid(foo.phone,7,4)# | (#Left(foo.fax,3)#) #Mid(foo.fax,4,3)#-#Mid(foo.fax,7,4)# (f)]">



The actual code gets data from a query, not a struct, but the effect is the same. If you were to render this CFML, you'd get this output:


<cfoutput>
Firefox:

Adrian Moreno [(555) 123-4567 | (555) 123-4568 (f)]

MSIE:

Adrian Moreno [(555) 123-4567 | (555) 123-4568 (f)]


If you do a View Source, you'll see that the actual rendered value of the CFML variable str is: 

Picture Kyle's mom going, "What, what, what?!?"
Adrian Moreno [(555) 123-4567 | (555) 123-4568 (f)]


WTF?

It's this string that's stored in the Notes table. MSIE is getting to </cfif> and then pitches a fit. Firefox doesn't know what a CFIF tag is, so it just skips over it and displays the text alone.

If you'll notice, the opening cfif tag was checking if foo.phone was an empty string:



but the rendered string only has the one double quote:



So why didn't ColdFusion throw an error here?

Testing

Let's create another string that doesn't contain any CF variables:




#strb#


And the output:

Hello there my name is not an empty string " it's Adrian. 

Ok, that makes sense. The outer double quotes define the string, so any pair of double quotes next to each other like this are replaced with a single double quote, which is the expected functionality.

So maybe losing the pair of double quotes within the CFIF tag causes ColdFusion to skip over parsing it?

Let's change the original code to use single quotes in the CFIF:


(#Left(foo.phone,3)#) #Mid(foo.phone,4,3)#-#Mid(foo.phone,7,4)# | (#Left(foo.fax,3)#) #Mid(foo.fax,4,3)#-#Mid(foo.fax,7,4)# (f)]">


And the rendered HTML source: 

Adrian Moreno [(555) 123-4567 | (555) 123-4568 (f)]

Allllllllrighty then.

Conclusion

I think it's safe to say that ColdFusion can parse variables within a string definition, but it won't parse tags. In order to get the intended output from this code, it needs to be updated like this:




	




Rendered HTML source:

Adrian Moreno [(555) 123-4567 | (555) 123-4568 (f)]

In conclusion, I think this shows that you can't just write your code and assume it will work as expected, even when no errors are thrown. Test, test and again test your output to make sure it's correct.

Now if you'll excuse me, I have to go update ~3 years of records in that table. 


SQL approach to Showing Every Nth Record
Fri, 20 Feb 2009 13:19:00 -0500
Earlier today, Ray Camden posted a quick ColdFusion-centric solution to showing only the Nth records of a query. His solution is fine, but I wonder how it would perform for large queries on a site under high load. Here's a database-centric solution that pulls back every Nth record, allowing CF to just display the final record set.This example uses SQL Server 2005.

Step 1

There's a table in the database named "Districts". Let's get all the Districts for Texas.


SELECT 
	Name
FROM 
	Districts 
WHERE 
	state = 'TX' 
ORDER BY 
	Name


This brings back 1,063 rows. 



Step 2

Let's use the ROW_NUMBER() function to get a record count within the results.


SELECT 
	Name,
	ROW_NUMBER() OVER ( ORDER BY Name ) AS 'RowNumber'
FROM 
	Districts 
WHERE 
	state = 'TX' 


Notice that the ORDER BY clause is no longer needed at the end of the query. It's now called from within ROW_NUMBER(). We still have 1,063 records, but now we can start manipulating the results.



Step 3

We'll go ahead and select * from the results we just returned (now aliased as EXPR1), but we'll also get the MOD of each RowNumber using 5 as the divisor.


SELECT 
	Name, 
	RowNumber,
	(EXPR1.RowNumber % 5) AS ROW_MOD
FROM
	(
	SELECT 
		Name,
		ROW_NUMBER() OVER ( ORDER BY Name ) AS 'RowNumber'
	FROM 
		Districts 
	WHERE 
		state = 'TX' 
	) EXPR1


Still 1,063 rows, but we're getting close.



Step 4

Now we just select * from the last record set (aliased as EXPR2) WHERE ROW_MOD = 0 and we're done.


SELECT 
	EXPR2.*
FROM 
	(
	SELECT 
		Name, 
		RowNumber,
		(EXPR1.RowNumber % 5) AS ROW_MOD
	FROM
		(
		SELECT 
			Name,
			ROW_NUMBER() OVER ( ORDER BY Name ) AS 'RowNumber'
		FROM 
			Districts 
		WHERE 
			state = 'TX' 
		) EXPR1
	) EXPR2
WHERE 
	EXPR2.ROW_MOD = 0




Conclusion

The final result? 212 records where RowNumber MOD 5 = 0. This is every 5th row of the original query. 

Traditional ColdFusion approach: Bring back 1,063 records from the database, then either (a, cfoutput) iterate over the entire record set, checking if the currentrow MOD 5 = 0 or (b, cfloop) iterate over the entire record set, stepping by 5.

ColdFusion with smart SQL approach: Bring back the 212 records we need and display them.

I know which way I prefer. :)

Related Links

Jules Gravinese has posted how to Select Every Nth Record with MySQL.

.attr()	Proper .prop() usage
$(window).attr...	$(window).prop...
$(document).attr...	$(document).prop...
$(":checkbox").attr("checked", true);	$(":checkbox").prop("checked", true);
$("option").attr("selected", true);	$("option").prop("selected", true);