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 –

• PhoneGap Shell app for Android (.apk) – 1.7 MB
• PhoneGap Shell app project for iOS – 14 MB (zip)
• readme.txt

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