I was going to cover a use-case of taking picture in a mobile app and uploading it to ColdFusion Server in this post, but I found some issues in packaging an app that used Geolocation APIs when helping someone and thought that I would cover geolocation first.
This sample application is very simple – it gets your current location and displays a marker at that location on the Goole Map APIs. Here is how the application looks –
BTW, the screen shot is of this application running in iOS PhoneGap Shell application that I had talked about in Simplify Mobile Application Development Using ColdFusion. And it is not showing my location, but the default location that iOS Simulator returns in response to calling geolocation.getCurrentPosition function of PhoneGap.
However on an actual device it returns real location.
The code (CFML) is very simple and looks very much like JS code using PhoneGap APIs –
The page contains two divs (on line# 32 & 34), one for displaying messages (at the top of the page) and the other one displays Goole Map. On line# 38 we have
This statement tells ColdFusion that the application uses PhoneGap device APIs and all PG related JS file should be included in the generated code. It also creates an event handler for PG’s deviceready and puts all the code in cfclient in this event handler. So this setting (tag cfclientsettings) must precede any cfclient code that use device APIs.
I have initialized a variable, mapEnableHighAccuracy, to false on line# 41. This variable will be used to tell geolocation API to use mobile network to get current location. If set to true, then GPS would be used to get current location.
From line# 45-51 I create Google Map and Marker objects and initialize them.
On line#53 I call getCurrentLocation function. This function takes three arguments – the first one is callback function which is called when device API returns current location, the second one is total time elapsed since our first attempt to get position, and the last argument is maximum time to wait. If the last argument is 0, then we till try indefinitely. This would be useful if there is delay in getting current position.
Once I get current location, on line# 55 I call displayMap function to display marker at that location and then on line# 58 I start watching for change in current location i.e. if you move carrying your mobile. And when the current location changes, I update the marker by calling displayMap again.
In getCurrentPosition function (starts at line# 86), I call cfclient.geolocation.getCurrentPosition, on line# 101, after setting a few options. If this call times out, it throws an exception. In catch block I then retry – from line# 112-114. If I get location successfully then I invoke callback function passed to this function on line#105, which will execute function passed as argument on line#53.
If you open this application in Shell application (Android or iOS) then everything should work fine, because Shell application is created with all PG plugins and user access flags. But it did not work when I packaged the app in Thunder and opened it on my mobile.
Here is how I had packaged the app –
- Right click on the project in Navigator and select Properties.
- Click “ColdFusion Mobile Project” from the list on the left side
- Select “Resource Selection” tab and select only index.cfm and jqeury file. Do not select Application.cfm
- Select PhoneGap tab. We need to add PhoneGap features that this application is using. So click New button. PG option dialog shows up.
- Select Feature from the list on the left side. From the drop-down list select name of the feature. For this application I selected http://api.phonegap.com/1.0/network and http://api.phonegap.com/1.0/network.
Note that this UI is not very friendly and we have modified it post public beta.
- Click OK to close options dialog and then click OK to close Project properties.
- I had already set PhoneGap build server details in Preferences (Window->Preferences->ColdFusion->PhoneGap)
- Then right-click on the project in the Navigator view and select Generate PhoneGap Build
Many of the above steps (except steps to add features) are explained in the video in my post Simplify Mobile Application Development Using ColdFusion.
When the build was ready, I installed it on my mobile and got a blank page. So obviously there is a bug in packaging and we are fixing it.
But can you get it working with a few additional settings – add media feature (http://api.phonegap.com/1.0/media) and gap:plugin for geolocation. I have already explained how to add a feature. Adding gap plug-in is also easy.
Again open up project properties and select ColdFusion Mobile Project. Select PhoneGap tab and click New button. Select plug-in from the list on the left. Then add name of the plugin, for this application it is org.apache.cordova.geolocation
After above changes, the application worked fine on my mobile.
As I said before, we have made configuration of features and plugins easier in Thunder post public beta release.