As I mentioned earlier this week, building AIR applications using HTML and JavaScript is pretty simple (arguably easier than doing so in MXML/AS for those of us with a web background). But how do you port a ColdFusion powered web app to be an AIR app?
One simple solution is not to. After all, you could create a simple AIR app that just invoked the URL of your ColdFusion app (perhaps in a frame if using HTML/JS, or in an HTML control if using Flex). But that’s cheating, all you’ve really done is turned your AIR app into a custom browser.
To truly turn your ColdFusion web app into an AIR app you need to keep in mind the following:

  • AIR can’t process CFML, but it can process the HTML generated by CFML.
  • Within an AIR application, all required external files (for example, JavaScript files) should be local, within the AIR app itself.
  • Within an AIR application, relative paths will point within the AIR application, not back to the server.

With that said, here is a simple example (based on the two related Ajax controls that I posted months ago):

  1. Create a new project or site for your new AIR application.
  2. Execute the ColdFusion app (the .cfm for the two related controls) in your browser to make sure it is working.
  3. Use the browser View Source option to see the ColdFusion generated source.
  4. Save the source as a file in to your AIR project or site (you’ll probably want to use a .htm extension, instead of .cfm).
  5. Check the newly saved file for any relative URLs (both in your own code, as well as ColdFusion generated JavaScript) and edit those URLs so that they are fully qualified. In the two related controls example, the only paths you need to worry about are the two JavaScript calls back to the art.cfc (passed to ColdFusion.Bind.register).
  6. If the generated code refers to ColdFusion JavaScript files /CFIDE/scripts (the two related controls example obviously does) then you’ll want to copy that folder into your your AIR project. You can copy the entire /CFIDE/scripts folder, or just the required files (the latter is preferred, but requires a bit more effort on your part).
  7. Now just run the app (in Dreamweaver you can right click, and then Preview In Adobe AIR, or Package As Adobe AIR Application).

Obviously, this process is far from perfect. But, until we implement native AIR integration in ColdFusion, this is a workable solution.

5 thoughts

  1. I’ve been fooling around with little experiments with this for a little while, and you can also use a combination of either cfsavecontent or cfhttp to automate some of this.

  2. In case anybody hasn’t noticed, the new pricing has come in for Flex Builder.
    Can I just congratulate Adobe on getting it right for once. FB = $250 and would you believe they’ve set the price at £125 (exc VAT) in the UK.
    If they can do the same for FB3, you will have a UK customer come Q1 🙂
    Adam

  3. Ben, correct me if i’m wrong. The application source is html, so if we run it as Air app, it is still simple html code. Its not going to be dynamic right?
    Also, if it is simple html, where can we use it in a real world?

  4. Syed, yes, it is client side HTML, but it can indeed be dynamic. The client-side can be Ajax, and it can make calls to CF on the server. The example I described here does just that, it is essentially a desktop client-server app, the client is CF generated HTML and JavaScript, and the server is CF which is called from the client as needed.
    — Ben

  5. Ben, I talked to Ray regarding this, he recommanded to use CFC’s with Ajax to accomplish this for simple data retrival, but i dont want to end up making custom browser, like you said.
    I hope coldfusion team can implement Air with coldfusion in v 9 :).

Leave a Reply