iKnowKung(Foo).Blog();

Code and Video from my ColdBox Developers Week 2013 Presentation

Tue, 02 Jul 2013 22:59:00 -0500

I gave this talk at cfObjective() 2013 using an application built with no MVC framework. In "Better UI Means Better UX", I rebuilt the Kung Foo Gallery application using the ColdBox MVC framework. I was able to get a bit more in depth during this presentation (and all of my examples worked).

Slides

The slides are the same ones I showed at cfObjective(). You can find them here on Dropbox.

Recording

The recording via Adobe Connect.

Kung Foo Gallery

The application code can be found in this repository on GitHub. The readme file contains links to the JavaScript & CSS resources for the application, as well as a link to the separate data repository that contains the database in (eventually) different formats.

Thank You

Thanks to everyone that attended live and to those that view the recording. Please let me know if you have any questions.

Better UI Means Better UX at ColdBox Developers Week 2013

Tue, 04 Jun 2013 23:16:00 -0500

On June 20, 2013 at 3pm CST, I'll be presenting a ColdBox version of my KungFoo Gallery application during ColdBox Developers Week. This online conference runs from June 17-21, 2013. 5 days & 19 sessions on ColdBox, ContentBox, WireBox, PhoneGap, REST, ORM and more.The name of my presentation is "Better UI means Better UX" and I'll show how you can ditch ColdFusion's built-in UI controls and easily build interactive user interfaces using Twitter Bootstrap, jQuery DataTables and HandlebarsJS. Code and slides will be available after the presentation.

Slides and Code from my cfObjective() 2013 Presentation

Tue, 04 Jun 2013 22:26:00 -0500

Slides and code are available via DropBox and Github. I've posted links on my Twitter account @iKnowKungFoo already, but here they are for those not following me (and why aren't you?). :)

Slides

The slides are located in a shared folder for all of the cfObjective() presentations. You can download them here as a PDF.

KungFoo Gallery

The application is a new take on the CFArtGallery. The code is broken up into multiple repositories.

Application Code

The code for the simple CF application that I showed can be found here. This repository links to a separate one that contains just the static resources. When you pull down a copy of this repo, any linked repos come with it. However, the linked repos are not available in the ZIP download via github. Note: In order to run the handlebars example on the individual artist page, you'll have to get your web server to present the file extension ".handlebars" as text/html.

JavaScript and CSS

The KungFooGallery Resources repository contains copies of jQuery, Twitter Bootstrap, jQuery DataTables and Handlebars that work with the application. When I update the application code, this repository will be updated as needed.

Images

All of the images for the KungFoo Gallery are also contained in the KungFooGallery Resources repository. They are used under various Create Commons licenses and I claim no ownership whatsoever.

Data

The KungFooGallery Data repository contains the data for the gallery application. As of this post, I only have an Apache Derby Embedded database available. This is to allow any CF developer to play with the code and data, regardless of OS or preferred DB. I intend to provide versions for MySQL, PostgreSQL, SQL Server, Oracle and MongoDB. If anyone would care to help, feel free to send a pull request. If you'd like to browse the Apache Derby DB, try out DbVisualizer. It's free and very easy to use with multiple databases. Just know that with an Apache Derby Embedded database, only one application can "start" the database at a time. So you'll have to shut off your CF server to connect with DBV and vice-versa.

Thank You

Thank you to everyone that attended my presentation, if you have any questions, please let me know. I'll be blogging about various parts of the application in the coming weeks. You can see a ColdBox version of this application at my presentation, "Better UI means Better UX" on June 20, 2013, 3pm CST during ColdBox Developers Week. Also, keep an eye out for another presentation with the Online ColdFusion Meetup group. Finally, join the DFW ColdFusion User Group on Meetup.com to keep up with monthly presentations on various topics. Meetings are the 2nd Tuesday of each month and we will have an Adode Connect session available for anyone that can't attend in person.

Ditching ColdFusion's UI Controls at cfObjective

Thu, 16 May 2013 13:18:00 -0500

Saturday at 3pm, I'm presenting at cfObjective(). The title in the schedule says, "Building Modern ColdFusion Applications", but I should have asked them to update it to say, "Ditch ColdFusion's UI Controls". In this session, I'll cover why and how you can replace the native UI controls with HTML5 and some modern JavaScript and CSS libraries. I'm also running a Birds of a Feather session about Coding Standards and will be giving a Lightning Talk on my multi-monitor standing desk.

Installing ColdFusion 10 on OSX 10.8 Mountain Lion

Wed, 27 Feb 2013 07:00:00 -0500

While setting up my Macbook Pro for web development, I was flummoxed by the issues reported by many people trying to setup ColdFusion 10 on OSX 10.8 Mountain Lion, as well as Window 8. Adobe even has a pre-release program to test new installers for both. I can understand having problems with Windows 8, but installing on OSX 10.8 couldn't have been easier.

Stop that, do this: OSX

Other than my iPhone 4S and iPad (the first one), I haven't had an Apple computer since my brother and I shared an Apple IIe back in grade school. BTW, that computer still works. I know some people have issues using OSX when they've been in the Windows world for so long. One comment I saw told the poster to "stop thinking in Windows and start thinking in Unix." Best advice you can get. I've used BSD, Unix and Linux (CentOS, Red Hat, Ubuntu) for around 15 years, so OSX can't be to difficult, right?

Install Java

This was probably the easiest time I've ever had installing Java. I'd installed a 256 GB SSD and a fresh install of Mountain Lion. The original hard drive had a previous version of OSX and Java was already installed. I wasn't sure if OSX came with Java pre-installed, so I opened up a Terminal, typed "java -version" and hit enter. OSX responded like Crush from Finding Nemo: "Yo dude, I know you want to see which Java I have. Sorry bro, don't have it. I could, you know, get it for you if that's cool. Yeah? Awesome. Just hang loose a minute." And then, BAM! Java's installed.

Get Apache up and running

OSX ships with Apache pre-installed. With Mountain Lion, Apple changed how Apache is controlled through the System Preferences. Having never used a previous version of OSX, who cares? Let's proceed. Apache can (and should) be controlled via the command line, same as with any *nix operating system, by using "sudo" commands. The first time you call one of these commands, you'll get prompted for your password.


// Start
sudo apachectl start

// Stop 
sudo apachectl stop

// Restart
sudo apachectl restart

You'll get used to using "sudo" as you get more familiar with Unix. Even when you're not actually using Unix. (Image courtesy of http://xkcd.com/.) One Apache is started, you can go to http://localhost or http://127.0.0.1 and you should see the message "It works!".

Installing ColdFusion 10

If you haven't installed ColdFusion before, it's pretty simple. Simon Free has some excellent instructions and videos over on "Learn CF in a Week". I also tried Wil Genovese's instructions for CF10 on Mountain Lion, but he uses a "non-Apple way", which I couldn't get to work. For a moment, I considered installing CF10 on MAMP, but I saw something shiny out of the corner of my eye and got distracted. What was I talking about? Oh yeah. You can download the ColdFusion installer from the Adobe website. You'll have to create an account if you don't already have one to get the installation file. Simon's instructions tell you to use the built in web server, but we want to use Apache. Also, don't set CF to start automatically when OSX starts. You only want CF running when you want it running.

Open Finder > Downloads > double-click the ColdFusion_10_WWEJ_osx10.dmg file.
Introduction: Next
License Agreement: Accept : Next
Install Type: Developer : Next
Subcomponent Installation: Uncheck "Start ColdFusion on system init" : Next
Enable Secure Profile: Not for local development : Next
Remote Admin Credentials: Meh, not for local development : Next
Select Installation Directory: Use the default, "/Applications/ColdFusion10" : Next
Earlier Versions of CF: BORED! : Next
Configure Web Servers: Click on Add
The configuration directory for Apache on Mountain Lion is "/private/etc/apache2". This is key!
You should now see this configuration listed : Next
Configure Open Office: I tried to configure Libre Office, but it didn't work. Skip this unless you need Open Office.
Admin Password: Something simple for local development : Next
Enable RDS: Only if you want to integrate with ColdFusion Builder and other remote access. Not for Production servers. : Next
Server Updates: Yes, please! : Next
Current User Password: This was surprising, but should have been expected. I've never seen this on any Linux installation before. Since I'm not using the built in webserver, I think CF needs to "sudo" to alter the Apache configuration file. This would also have been needed if I had elected to start CF when OSX starts.
Admin Password: Something simple for local development : Next
Pre-installation summary: Next
Installation Complete: Launch the Configuration Wizard @ http://127.0.0.1/CFIDE/administrator/index.cfm

This will finish configuring ColdFusion and log you into the CF Admin.

Manage ColdFusion from the Terminal

Starting and stopping ColdFusion from the terminal is very similar to Apache.


// Start
/Applications/ColdFusion10/cfusion/bin/coldfusion start

// Stop
/Applications/ColdFusion10/cfusion/bin/coldfusion stop

// Restart
/Applications/ColdFusion10/cfusion/bin/coldfusion restart

Chris Simmons shows a few more helpful commands in this blog post.

OSX Sites

Referring back to the cnet article, you can configure a Sites directory in your Home folder in order to develop multiple web sites/applications.

Open the OS X Terminal utility (/Applicaitions/Utilities/)
Create and edit an Apache user configuration file named after your user account by running the following command:
sudo pico /etc/apache2/users/`whoami`.conf
Copy the following text into the Terminal editor that opens, but be sure to change the "username" text to the short name of your user account:
Options Indexes MultiViews AllowOverride All Order allow,deny Allow from all
Save and close the editor by pressing Control-O followed by Control-X.
Stay in Terminal and go to your home directory. Create a folder named "Sites", then create an "index.htm" file in that folder with the contents "I fight for the Users!".
Start or re-start Apache to pick up these changes.
You should be able to visit "http://localhost/~username/index.htm" and see the contents of the file you just created.
Now create an "index.cfm" file in your Sites folder with this simple content:
#now()#
Visit "http://localhost/~username/index.cfm" and you should see the current time.

Now you have a web root folder for your development efforts and you've verified that ColdFusion can parse CFML files in your Sites directory.

Apache Virtual Hosts

Often you'll want to use a local domain like "http://test.site" instead of "http://localhost/~username/test.site". By enabling Virtual Hosts in Apache, you can create multiple websites with their own domain, pointing to different folders inside the Sites folder. Rather than write the details here, I'll just point to this simple example I found which is a breeze to implement.

Start coding

Now that I have Apache, ColdFusion and ColdFusion Builder (see related entry) installed on OSX Mountain Lion. I just need some data stores. MySQL and MongoDB will be a good start. If you have any questions, feel free to contact me via this website or on Twitter @iknowkungfoo.

Always install ColdFusion Builder 2 as an Eclipse plugin

Tue, 26 Feb 2013 07:00:00 -0500

I recently picked up a 17" Macbook Pro and am in the process of setting it up as my primary development machine. I'm a long time user of Eclipse and moved from CFEclipse to ColdFusion Builder when version 2 arrived. I've heard a number of users complain about performance. Other than opening massive legacy files that contain thousands of lines of code, I haven't had many issues myself. The trick is to not install CF Builder as a stand-alone IDE. Here's why and how.

Why install as a plug-in?

Why should you install CF Builder as a plug-in? Because in order to distribute a single installation file, the stand alone version of CF Builder installs on a 32-bit version of Eclipse. This is why you've had performance problems.

Installing Eclipse

Eclipse Indigo (3.7) is the latest version of Eclipse that is supported by CF Builder. You can download it here. Personally, I use the "for Jave EE Developers" package, grab whichever version you prefer.

Windows	OSX (Mountain Lion)
Download the 64-bit .ZIP file.	Download the 64-bit .TAR.GZ file.
When you open the compressed file, you should see an /eclipse/ folder.
Copy this folder to C:\Program Files\eclipse	Drag this folder to your Applications directory.
Open the /eclipse/ folder to access the application.
Pin eclipse.exe to your Start Menu.	Drag the eclipse app to the dock.
At this point you can start Eclipse. You'll be prompted to select a workspace for Eclipse when it first starts up.
Default: My Documents/workspace	Default: /Users/{username}/Documents/workspace
You can change the JVM used by Eclipse and alter the memory allocation settings by editing the eclipse.ini file. Increasing memory allocation is good for dealing with those pesky, massive legacy files.
	References: Eclipse on OSX.

Installing ColdFusion Builder

Download ColdFusion Builder using the "Try" link in the sidebar. These screenshots are from an OSX Mountain Lion installation. 1. Double-click the installation file to get started. 2. Accept the License Agreement. 3. Select install type "plugins witin Eclipse". 4. Select installation folder. Instead of choosing the default folder "/Applications/Adobe ColdFusion Builder 2 Plugins", I recommend installing in a sub-folder of the Eclipse folder. 5. Select Eclipse Installation Folder 6. Confirm the Installation settings. Click "Install" if everything's ok. 7. Wait a few minutes (on an SSD, this is faaaaaaast). 8. Finish the installation. 9. When you first open Eclipse, you'll be presented with the Adobe ColdFusion Builder Trial screen. Enter a serial number if you have one, otherwise click "Start Trial". 10. Once you're past this screen, you'll see a rather cluttered layout. This is due to the being on the default "Java" perspective. 11. In the upper right hand corner, click on the "Java EE" perspective icon and select "other". 12. Select the "ColdFusion" perspective option at the top of the menu. 13. Now you should see the default ColdFusion perspective (layout). 14. The next time you start Eclipse, you should see the ColdFusion Builder start page.

Tweak the installation

Windows: Window > Preferences OSX: Eclipse > Preferences OSX (alternate): ⌘,

1. Set ColdFusion Builder as the default perspective.

> General > Perspectives > Select ColdFusion Builder > click on the Make Default button.

2. Turn off the ColdFusion Builder welcome screen.

> ColdFusion > Setup > Uncheck "Show welcome page"

3. Change fonts and font size (useful for presentations).

> General > Appearance > Colors and Fonts > Basic > Text Font

4. Change your workspace.

File > Switch Workspace > other. Once you've created multiple workspaces, you'll see them in this menu item. You might create multiple workspaces to group similar projects together.

5. Show the current workspace location in the title bar. Open up eclipse.ini, add "--showlocation" and save.

Start coding

I've been using Eclipse since 2002 or so. It's been my primary IDE for web development since then. I use so many integration points to various systems and programming languages that I just can't get as much done in a day using other IDEs. At first, I had two installs of Eclipse: one with CFEclipse and one with CFBuilder. It took some getting used to the keyboard shortcuts in CFB over CFE. While you can changes CFB to use the same shortcuts as CFE, I got used to default set and made it my primary CFML editor. If you've had problems with CFBuilder due to a stand alone installation, I recommend giving it another try as a plug-in. You might be pleasantly surprised.

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

.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);