Last night I updated the mobile version of ColdFusionBloggers. If you aren't on a mobile device, you can view it in your desktop by going to http://www.coldfusionbloggers.org/mobile. I'm using the 3rd Alpha of jQuery Mobile and what you see represents approximately 30 minutes of work. That certainly isn't a testament to my awesomeness, but more a testament to the power of jQuery Mobile, jQuery, and of course, ColdFusion. It isn't quite perfect yet. On the home screen you may notice this icon to the right...

The idea I had was - clicking on the title shows the summary (which could be short or long depending on the RSS feed). Clicking the icon takes you right to the "right" entry, bypassing the need to load the summary and click the show full article button...

For the most part, things just worked. I'll paste the entire code base below. The only real issue I ran into was formatted. Some RSS feeds included HTML that broke jQuery Mobile a bit. I do some string manipulation to a) replace HTML breaks with real line breaks and b) remove HTML and c) return the line breaks back into HTML. I got some help from Scott Stroz on this as well. But to be honest, that was the biggest technical issue. Check out how short the code is below. First, the home page.

<cfif structKeyExists(url, "page") and isNumeric(url.page)> <cfset url.start = (url.page-1) * request.perpage + 1> </cfif>

<cfparam name="url.start" default="1">

<cfif not isNumeric(url.start) or url.start lte 0 or url.start neq round(url.start)> <cfset url.start = 1> </cfif> <cfset data = application.entries.getEntries(url.start,request.perpage)> <cfset entries = data.entries> <!DOCTYPE html> <html>

<head> <title>CFBloggers Mobile</title> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.css" /> <script src="http://code.jquery.com/jquery-1.5.min.js"></script> <script src="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.js"></script> </head>

<body>

<div data-role="page" id="intro">

<div data-role="header"> <h1>CFBloggers Mobile</h1> </div>

<div data-role="content"> <ul data-role="listview" data-split-icon="gear"> <cfoutput query="entries"> <cfset myurl = listFirst(entries.url)> <li> <a href="display.cfm?entry=#id#">#title#</a> <a href="/click.cfm?entry=#id#&entryurl=#urlEncodedFormat(myurl)#" data-rel="dialog" rel="external">View Full Entry</a> </li> </cfoutput> </ul> </div>

<div data-role="footer"> <h4>Created by Raymond Camden, coldfusionjedi.com</h4> </div>

</div>

<cfif not application.dev> <script type="text/javascript"> var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www."); document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E")); </script> <script type="text/javascript"> var pageTracker = _gat._getTracker("UA-70863-11"); pageTracker._initData(); pageTracker._trackPageview(); </script> </cfif> </body> </html>

And this is the display page.

<cfif isDefined("url.entry") and isNumeric(url.entry) and url.entry gte 1 and round(url.entry) is url.entry> <cfset entry = application.entries.getEntry(url.entry)> </cfif>

<cfscript> /**

  • An &quot;enhanced&quot; version of ParagraphFormat.
  • Added replacement of tab with nonbreaking space char, idea by Mark R Andrachek.
  • Rewrite and multiOS support by Nathan Dintenfas.
  • @param string The string to format. (Required)
  • @return Returns a string.
  • @author Ben Forta (ben@forta.com)
  • @version 3, June 26, 2002 */ function ParagraphFormat2(str) { //first make Windows style into Unix style str = replace(str,chr(13)&chr(10),chr(10),"ALL"); //now make Macintosh style into Unix style str = replace(str,chr(13),chr(10),"ALL"); //now fix tabs //str = replace(str,chr(9),"&nbsp;&nbsp;&nbsp;","ALL"); str = replace(str,chr(9),"   ","ALL"); //now return the text formatted in HTML return replace(str,chr(10),"<br />","ALL"); } </cfscript>

<cfif structKeyExists(variables, "entry") and entry.recordCount is 1>

<div data-role="page"> <cfset portion = reReplace(entry.content, "<p[[:space:]]/>", "#chr(10)#", "all")> <cfset portion = reReplace(portion, "<br[[:space:]]/>", "#chr(10)#", "all")> <cfset portion = reReplace(portion, "<.*?>", "", "all")> <cfset portion = trim(portion)>

<cfoutput> <div data-role="header"> <h1>#entry.title#</h1> </div>

<div data-role="content"> #paragraphFormat2(portion)#

<p> <a href="#entry.url#" data-role="button">Go to Blog Entry</a> </p> </div>

<div data-role="footer"> <h4>Created by Raymond Camden, coldfusionjedi.com</h4> </div> </cfoutput>

</div>

<cfelse>

<div data-role="page">

<cfoutput> <div data-role="header"> <h1>CFBloggers Mobile</h1> </div>

<div data-role="content"> Invalid entry! </div>

<div data-role="footer"> <h4>Created by Raymond Camden, coldfusionjedi.com</h4> </div> </cfoutput>

</div>

</cfif>

There is more I'd like to do - specifically pagination, maybe search as well. Any suggestions would be welcome!