How I Got Started In ColdFusion

By all accounts, I’m not supposed to be a CF developer.  You see as an undergrad, I majored in biological sciences and was focused to the point of tunnel vision on a career as a doctor.  There’s a saying that goes, “If you want to make God laugh, tell him your plans.”  That certainly holds true in my case.  After 2 unsuccessful attempts at applying to med school, I had to look elsewhere for my career path.  I was working as a lab tech and hated it because I wasn’t doing research and it certainly didn’t pay what I at the time thought was a decent salary.

I made a switch in 1995 to telecom and worked my way up from customer service to revenue assurance and became a software quality assurance analyst.  In this position, I found myself butting heads constantly with developers.  A few of them were nice enough to teach me a thing or two.  In 1998 I got my first taste of developing my own personal web site.  I tore my ACL in a touch football game and decided to document my surgery and recovery in what we now call a blog.    I started getting emails from people asking questions about my injury and telling stories about their recovery.  I was hooked.  I would check the site each day to see how many hits I’d gotten.  I updated the site nearly daily with some new story or picture.

Web development remained just a hobby for me until 2001.  Like a lot of IT workers, I was laid off just after the September 11 attacks and spent quite some time unemployed.  During this time I learned of a free state program that would train people in web application development.  After completing the program, they would secure an internship which would lead to a 1 year job at a very small salary as a way to repay the free training.  I learned HTML, ASP, SQL, and just enough ColdFusion to be dangerous and completed the program in August 2002.  It took a few months but I landed my first paying ColdFusion job in October 2002 with the National Association of  Secondary School Principals (NASSP), in Reston, VA.  There I maintained principals.org as well as the sites for the National Honor Society and the National Association of Student Councils.  We ran CF 4.5 and migrated up to CFMX, before they implemented an ASP.NET content management.  I learned so much in those 2 years and had a lot of fun.  I have gone on to work in ColdFusion as a government contractor and now as a federal government employee with the Archives of American Art at the Smithsonian Institution.

Accessing the Flickr API from our CFWheels-powered site

Recently at work, I was tasked with adding a one-off page to our site.  Normally, I hate these kinds of assignments. They tend to break any rules you already have established for the site architecture and style; and once you say “yes” to one such project, you open the floodgates for others.  However, I jumped at the opportunity since this was slightly new territory for me.  For this page I was asked if there was a way to display pictures from our Flickr page on a page in our site for an exhibition about snapshots.  Without thinking for too long, I answered yes.  I remember way back when I was exploring Ruby on Rails, one of the first demos I saw was the one where the speaker accessed the Flickr api to pull in images that matched a given tag he passed in.  I knew it was possible and fairly simple to do this.  What I didn’t know at the time was how to do it and stay within the conventions of the CFWheels framework.

The Requirement

Create a page for the exhibition that displays 4 or 5 thumbnail images from selected sets from our Flickr account.  Each image should be a link to the full image on the Flickr web site.  Under each group of images should be a link to the full set of images on the Flickr site. The page should list the set title and description, along with its thumbnails, followed by a link to the set on Flickr.  The selected photo set id’s would be provided.

My Solution

I decided that since the photoset id’s would be provided, I could make them a list.  I would then loop over the list and pass that it into the api to get the data I needed.  I could then loop over the resultsets to create the display.  Sounded simple enough.

Proof of Concept Prototype

After studying the Flickr public api, I settled on the flickr.photosets.getInfo() and flickr.photosets.getPhotos() methods to provide the data for the page.  First, I hit the flickr.photosets.getInfo() method to get the title and description of each photoset.  It looks something like this:

<cfset photosetList = “photosetID1, photosetID2, photosetID3, photosetID4”/>

<cfloop list = “#photosetList#” index=”x”>

<cfhttp url=”http://www.flickr.com/services/rest/” result=”photoSetResult”>

<cfhttpparam type=”url” name=”api_key” value=”myAPIKey”/>

<cfhttpparam type=”url” name=”method” value=”flickr.photosets.getInfo”/>

<cfhttpparam type=”url” name=”photoset_id” value=”#x#”/>

</cfhttp>

<!—Convert xml text response into an XML document—>

<cfset photosetXMLDoc = xmlParse(photosetResult.fileContent)/>

<cfset photosetNodes = xmlSearch(photosetXMLDoc, ‘//photoset’)/>

<!—Now grab the photos for this photoset—>

<cfhttp url=”http://www.flickr.com/services/rest/” result=”photosResult”>

<cfhttpparam type=”url” name=”api_key” value=”myAPIKey”/>

<cfhttpparam type=”url” name=”method” value=”flickr.photosets.getPhotos”/>

<cfhttpparam type=”url” name=”photoset_id” value=”#x#”/>

</cfhttp>

<cfset photosXMLDoc = xmlParse(photosResult.fileContent)/>

<cfset photosNodes = xmlSearch(photosXMLDoc, ‘//photo’)/>

<!—Loop over photosets to output photoset information—>

<cfloop from=”1” to=”#arrayLen(photosetNodes)#” index=”i”>

<cfset photosetsXML = xmlParse(photosetNodes[i]/>

<h2>#photosetsXML.photoset.title.xmlText</h2>

<p>#photosetsXML.photoset.description.xmlText</p>

<!—display 5 thumbnail images from each photoset—>

<cfloop from=”1” to=”5” index=”y”>

<cfset photosXML = xmlParse(photosNodes[y])/>

<div class=”flickrThumbs”>

<a href=”http://www.flickr.com/photos/user_id/#photosXML.photo.xmlAttributes.id#/” target=”_blank”><img src=”http://farm#PhotosXML.photo.XMLAttributes.farm#.static.flickr.com/#PhotosXML.photo.XMLAttributes.server#/#PhotosXML.photo.XMLAttributes.id#_#PhotosXML.photo.XMLAttributes.secret#_m.jpg” alt=#PhotosXML.photo.XMLAttributes.title#”/></a>

</div>

</cfloop>

<br class=”clear”/>

<a href=”” target=”_blank”>View all snapshots in this set</a>

</cfloop>

</cfloop>

The above code works just fine and honestly, my internal client is satisfied with it.  But I have a couple of problems with it.

1. All this code is in the view file.
2. If they decide they like this and want another similar page, I have to code an entirely new page with similar calls to the api.
3. Logic and display all mixed together.
4. It’s a lot of code ~50 lines.

A Better Way

There had to be a better way to separate logic and display and a way to make the api calls available to any view that needs it in the future.  I knew there were CF scripts available for the Flickr api, but they aren’t ready made for CFWheels.  I figured there would be a Flickr plugin and I was right.  I downloaded the SimpleFlickr plugin and got to reading the documentation.

I was able to determine the plugin would do most of what I needed so I set about tweaking it a bit to get the rest.  Turns out it was fairly simple and enabled me to separate out the logic from the display and make the api available across the site.  Craig Kaminsky created the plugin which provided a great starting point for me.  I contacted Craig to let him know I was using the plugin and wanted to tweak it a bit and he offered to integrate my changes into the full plugin.  The SimpleFlickr plugin is installed in the plugins folder in my site and I modified the SimpleFlickr.cfc a bit to get the additional information needed for my display.  So now my display code looks something like this.

<cfloop list=”#photosetList#” index=”x”>

<cfloop from=”1″ to=”#arrayLen(photosets)#” index=”i”>

<cfif x EQ “#photosets[i].id#”>

<h2>#photosets[i].title# (#photosets[i].id#)</h2>

<p>#photosets[i].description#</p>

<cfset photos = getFlickrPhotoSetPhotos(#photosets[i].id#)/>

<cfloop from=”1″ to=”6″ index=”y”>

<div>

<a href=”#photos[y].link#” target=”_blank”><img src=”#photos[y].url#” alt=”#photos[y].title#”/></a>

</div>

</cfloop>

<br class=”clear”/>

</cfif>

</cfloop>

<a href=”http://www.flickr.com/photos/#application.flickr_user_id#/sets/#Trim(x)#/” target=”_blank”><strong>View All Snapshots in this Theme</strong></a>

</cfloop>

Ahh, that’s much better.  Less code. No logic in the display.  And any page in the future can call the api.  Of course the result is identical to the client.  I can live with that.

Nearly all of my modifications to the plugin were to the private methods that deal with manipulating the resultset from Flickr.  Chiefly, I worked on the $getPhotosFromJSON() method to build the link url that would be used in my display.  This also required me to add the photoset.owner and photoset.id into my return array.  I have to thank Craig again for building the plugin in the first place which allowed me to tweak it to my needs.  I really think this plugin is useful for those who need some basic functions from Flickr in their CFWheels apps.

Sketchup – Modeling the Kaweah Falls House

I’ve blogged in the past about my Google Sketchup hobby. One resource I’ve found very useful is the Sketchup: A 3D Toolbox video podcast.  Cameron Scott guides viewers through lots of techniques and projects to improve modeling skills.  To mark the 50th episode, a new project modeling the Kaweah Falls house was kicked off.  Using a floorplan, the project will model the house.  This is pretty cool to me.  I’ve always been interested in architecture so I’m really curious to see how to use Sketchup to model this interesting home.

In the first part of the exercise, we imported the floorplan so that we could begin modeling. Because this structure has some parts on different axes we use the axis tool to change the axis so that our lines can be drawn correctly.  We then proceed to model the walls from the floorplan.  This was followed by using the offset tool to add thickness to the walls.  Before we use the push/pull tool to extrude the walls up to 8 feet, we first use the tool to extrude an 8 inch slab.  Now we use the push/pull again to pull up walls to 8 feet in height.  I made it sound so simple in just a few sentences, but it took me about an hour to get it right.  Check out the project as it stands now.  Looking forward to the next steps.

Kaweah Falls exercise

CFWheels Forum and Calculated Properties

Continuing with my CFWheels powered Forum application, I had a desire to include a thread count and a post count for each forum listed on the main forum page.  In my old spaghetti coding days, I would first have used a retrieveForums query.  Then in my display code, while looping over the retrieveForums recordset, I would then query the threads table passing in the forumID foreign key to obtain a thread count for each forumID.  In a similar fashion, I would get a post count for each forumID.  The code below illustrates this scenario.

<cfquery name="getForums" datasource="myDSN">

 

SELECT * FROM forums

<cfquery>

<cfloop query="getForums">

<cfquery name="getThreadCount" datasource="myDSN">

SELECT COUNT(*)

FROM threads

WHERE threads.forumID = #getForums.id#

</cfquery>

 

</cfloop>

While this is not the CFWheels way, I found out that it is very easy to convert this code into CFWheels syntax with the same results.

Enter Calculated Properties.  Searching the CFWheels blog and documentation, I was able to find this little gem which allows me to assign additional properties to a given object based on a SQL query.  In this manner, property then becomes part of that object without the need to loop over a query to retrieve it as in the above code block.  This property can then be called just like any other property of that object.  Honestly, I’m not entirely sure I worded that correctly, but the bottom line is the result is the same as my spaghetti code example.  Let’s look at the new code in my forum model.


<cfcomponent extends="Model" output="false">

<cffunction name="init">

<!--- Associations --->

<cfset hasMany("threads")/>

<!--- Properties --->

<cfset property(name="postCount", sql="(SELECT COUNT(posts.id) FROM posts INNER JOIN threads ON posts.threadid = threads.id WHERE threads.forumID = forums.id)")/>

<cfset property(name="threadCount", sql="SELECT COUNT(threads.id) FROM threads WHERE threads.forumID = forums.id")/>

<!--- Validations --->

<cfset validatesPresenceOf(property="forumName", message="Forum name is required.")/>

<cfset validatesPresenceOf(property="forumDescription", message="Description is required.")/>

</cffunction>

</cfcomponent>

And the new display code.

<tbody>

<cfoutput query="forums">

<!--- Here we are outputting the forums query.  The forums query will return every forum with a post count --->

<tr height="35" <cfif currentRow MOD 2>bgcolor="##ebebeb"</cfif>>

<td><br/></td>

<td> #linkTo(text="#forumName#", controller="forums", action="viewForum", key="#id#")#<br/> #ParagraphFormat(forumDescription)# </td>

<td><br/></td>

<td>#val(threadCount)#</td>

<td align="center">#val(postCount)#</td>

</tr>

</cfoutput>

</tbody>

My new calculated properties–threadCount and postCount are now part of the forums object and can be used just like any other field/property in that object.

I hope my explanation makes sense.  Calculated properties will come in handy as I move forward with this project. CFWheels makes another programming task so much simpler.

Late to the game. CFWheels 1.1x

I know I’m really late, but I’m just now getting around to switching to CFWheels 1.1. I guess being over forty, I’ve become set in my ways.  I love CFWheels already.  Why does it have to change?  Enough already.  I’m taking the plunge.  A while back I had started on a very simple forum application for work.  The forum is based on an old tutorial project I had worked through on EasyCFM.com.  I thought it would be a good idea to do it using CFWheels.  Due to legacy code issues, I had to abandon that effort and use spaghetti CF code, but I kept the work I had completed in CFWheels 1.0 thinking I could come back to it later one day.  That day is here, but I think before I resume, I will update to CFWheels 1.1 and then work to finish the forum.

Forum Application Built on CFWheels 1.0

First up, download the new framework code.  Simple enough. Visit http://cfwheels.org and download the files.  I notice that I’m so late, they’re already up to 1.1.2.  I’ve got some catching up to do.  They also have provide an Upgrading to Wheels 1.1.x guide which states that all that is really necessary to upgrade is “replace the wheels folder with the new one from the 1.1 download.”

My first step will be to upgrade the application to CFWheels 1.1.2.  Once I have it back up and running, I will then continue with development.  The goal is to create a forum with many of the common features we have come to expect in a forum application.  I hope to learn about the new features of CFWheels as well as to create a useful application.  I’ll add new blog posts throughout development.