Making jQuery Mobile templates even easier - with ColdFusion

Earlier today I read an interesting blog entry on jQuery Mobile and Rails. Now - let me start off with saying I’m not a huge fan of Ruby’s syntax. I’ve got nothing against it and Rails. I did notice though that some of the template examples in the post seemed unnecessarily complex and verbose when it came to HTML. A few folks on Twitter informed me that was more his use of HAML than Ruby. Fair enough. That being said, the author did some very interesting things with his templates and I thought I’d work on a ColdFusion version. Credit for the coolness though goes squarely to the original author, Ken Collins.

So - creating a ColdFusion custom tag to handle layouts is not something new. You’ve been able to build custom tag wrappers since version 4, approximately 200 years ago. But if you look at Ken’s code, even if you can’t read the Ruby/HAML, you will see two very cool things he is doing with his templates. First - he is simplifying the creation of page IDs. jQuery Mobile requires your pages to use unique IDs. His template makes that automatic. I decided for my code I’d make it automatic, but let you supply one if you wanted. Secondly - jQuery Mobile pages loaded after the initial request do not need to return the entire HTML block. Ie the HTML tag, BODY, etc. His code intelligently checks for Ajax requests and minimizes what is returned when it can. That quick little tweak will add just a bit more speed to your pages and is easy enough to add in our code as well. Here’s my first custom tag, page.cfm.

For the most part I’m going to assume this is easy enough to read. If you’ve never seen a custom tag “wrapper” before, check out this blog entry I wrote back in 2007. Basically ColdFusion passes to your custom tag whether or not the execution is at the beginning or end of the tag. Notice the check for the pageid value. If it doesn’t exist, we create it based on the request path. Again, this is based on Ken’s template. The other interesting part is the isAjaxRequest UDF. It’s taken from code Dan Switzer wrote (and something I blogged about in the past as well). If we detect an Ajax request, we will suppress everything but the code div. Finally - I added support for passing in the URL to a custom script and a theme selection as well. Here’s an example of how you could call this:

<cf_page title="Home Page">
</cf_page>

Or you can use cfimport:

<cfimport prefix="jqm" taglib="jqm">

<jqm:page title=”Home Page”>

</jqm:page>
</code>

Next up - I decided to quickly add support for 3 main jQuery Mobile UI items - header, footer, and content. This allows me to complete a page like so:

I did some quick testing with my Chrome Net panel open, and can confirm that when I requested my second page (and clicked the link back home), the template correctly noted it as an Ajax request and suppressed the unnecessary HTML. If you want to play with these custom tags I’ve included them as a zip to this blog entry.<p>Download attached file.</p>

About Raymond Camden

Raymond is a developer advocate looking for his next gig. He focuses on JavaScript, serverless and enterprise cat demos.
If you like this article, please consider visiting my Amazon Wishlist or donating via PayPal to show your support.