Simplify Mobile Application Development Using ColdFusion

Public beta of next versions of ColdFusion Server (code named Splendor) and ColdFusion Builder (code named Thunder) were released yesterday on Adobe Labs. I have been closely involved with implementation of some of the features in both Splendor and Thunder, specifically Mobile features in Splendor and editors in Thunder.

Splendor and Thunder together provide a complete workflow to create HTML5 Mobile applications – you can easily develop, test, debug and package applications for mobile. I have created a short video to explain this workflow with a simple example, and this video is available on adobecoldfusion channel on YouTube.

[On adobecoldfusion channel you might see two videos on mobile – 1. Getting Started with ColdFusion Mobile in Splendor 2. ColdFusion Mobile Workflow in ColdFusion Splendor. The first video is a subset of the second one and does not cover test and debug workflow.]

When you create mobile application using ColdFusion, you write code in CFML. Now we have tow versions of CFML – 1. server side 2. client side. Client side CFML must be enclosed in <cfclient> tag. All the basic CFML language constructs and data types are supported in the client side CFML. Some of the very useful tags are also supported in cfclient –  like cfquery, cfoutput, cfsavecontent etc.

Though client side CFML looks similar to server side CFML, it is processed differently. Server side CFML is translated to Java bytecode and runs in a Java Virtual Machine (JVM) on the server. Client side CFML is translated to JavaScript and run in a web browser. So once client side CFML is packaged as a mobile application, it does not need CF server to run – because it is all JavaScript.

If you  want to quickly try out how all this works, download ColdFusion Thunder (IDE). You will need to sing-in with Adobe ID before you can download the build. Go to ‘ColdFusion Builder Project Thunder’ section towards bottom of the page and download the build for your platform.
Note that ColdFusion Thunder now comes packaged with a default server, so you need not download ColdFusion Splendor separately.

  1. Download the SimpleExpenseTracker project that I explained in the video and unzip it in the wwwroot folder of the detaultServer that is packaged with Thunder. Location of this folder is <thunder_install_folder>/Applications/CFBThunderBeta/ColdFusion/cfusion/wwwroot
  2. In Thunder (CF Builder), go to File->Import menu and in the Import wizard, select ColdFusion->Import existing Projects
  3. Browse to the folder where you unzipped expense tracker project and select that folder e.g. <thunder_install_folder>/Applications/CFBThunderBeta/ColdFusion/cfusion/wwwroot/SimpleExpenseTracker
  4. In the project list you will see expense tracker project selected. Click finish
  5. Once you import the project, you need to associate CF server with it. Make sure ‘defaultLocal’ server (in CF Servers view) is running. If not, click on the server and then click ‘Start Server’ icon.
  6. Right click the project in the Navigator view and select Properties from the pop-up menu. 
  7. Go to ColdFusion Server Settings and select ‘defaultLocal’ from the servers drop down list and click OK.

Because this project does not use any device APIs (like for Contacts, Camera etc.), you can run this application in Chrome/Safari desktop browser. Note that this will not run in browsers that to not support SQLite, e,g, IE.
Open Chrome and browse to SimpleTrackerFolder e.g. http://localhost:8500/SimpleTracker

Note that this example was created simply to get you started with mobile development with ColdFusion. The code in the example is not optimal – in real applications you would want to separate UI code from the remaining. I would post an example of the same app done with better coding practices later.

If you want to follow debug and inspect workflow in the video, then you will need the Shell application. As I explained in the video, this application is a standalone Android/iOS application with web browser embedded in it and created with PhoneGap libraries. So all the PhoneGap APIs would be available to pages opened in this app. It looks like this application is not yet uploaded on Adobe Labs, but you can download it from follow locations –

We cannot distribute packaged application for iOS because of licensing restrictions, so the entire Xcode project for this app is made available.

Give this feature a try and you will find that mobile application development is made a lot more easier by ColdFusion. Both products are still in beta, so also tell us how we can improve them. Go to https://bugbase.adobe.com/ to log bugs or enhancements.

-Ram Kulkarni

15 Replies to “Simplify Mobile Application Development Using ColdFusion”

  1. Hi Ram, first of all thanks for the insight of some of the new features on ColdFusion Builder, great post!
    Second of all, I would like some help (if you can provide) on setting up the Android SDK on the CF Builder.
    Once again, thanks and keep up the amazing job with the Coldfusion family!

    1. If you are going to use Android plugin and CF Builder together, then I suggest you install Eclipse, and then install CFB (plugin installation) and Android plugins into it. I have not tried installing Android plugin to CFB, but standalone CFB may not contain all the plugins that are required by Android plugin (but I am not sure about this).
      If you are not going to do native Android development and need Android SDK only for emulator and Android monitor, then I suggest you install Android SDK only. I had written a blog post sometime back, Installing and configuring Android SDK outside IDE, which you may find useful.

  2. A nice request; please give the samples, as `responsive design` too…
    For the new version of CFBuilder, is there any `working` ORM solution in it?

    1. It may not be possible soon, but I would try to post an example of ‘responsive design’ in future.

      Regarding ORM example, I don’t have a ready example, but if you use ‘Adobe CFC Generator’ extension of CFB, you could create ORM CFCs very quickly. This extension is in extensions folder under CFB installation folder.

  3. I am very happy to be here because this is a very good site that provides lots of information about the topics covered in depth. Im glad to see that people are actually writing about this issue in such a smart way, showing us all different sides to it. Please keep it up. I cant wait to read whats next.

  4. Interesting information about mobile app development and currently I am using android app platform for mobile app but I got a new information about cold fusion for app development and I like this way for development and I would like to learn it. Waiting for your next article. Thanks for sharing this post.

Leave a Reply