In my previous blog articles I had explained how to create CFMobile applications using JQuery, Bootstrap/JQueryMobile. Here are links to sample (CFMobileExpenseTracker) applications using the two UI frameworks –
I wanted to create the same application using AngularJS. It had been on my ‘to learn’ list for sometime now. So I spent the last weekend learning it. If you already know concepts of MVC and Dependency Injection, then understanding AngularJS is not difficult. The well documented tutorials also helped.
I decided to re-write CFMobileExpenseTracker using AngularJS and JQueryMobile. Since AngularJS provides very easy way to manipulate DOM, you really don’t need JQuery. But I had to include it in the application anyway because JQueryMobile depends on it. I also used JQuery for basic event handling.
Earlier in my application I had used client side custom tag (expenseList.cfm) to display expense items by calling JQuery APIs to modify DOM and update UI. I could get rid of this custom tag entirely after using AngularJS, because of templating features and automatic synchronisation between model and view provided by Angular JS.
Here are the screen shots of the application –
Though I said that I re-wrote the application, it was not a complete re-write. I could reuse CFCs and made small modifications to index_include.cfm. I added a new JS file (angular_app.js) to crate AngularJS application and controllers – Continue reading “Creating CFMobile Application using AngularJS”
I have seen some confusion when it comes to using invokeCFClientFunction. I have been asked this question a few times, more recently on LinkedIn, so I thought explaining it in a blog post might be a good idea.
cfclient also makes calling asynchronous functions of PhoneGap easy by providing synchronous access to them. All device APIs are asynchronous in nature, but in cfclient block you call then as synchronous functions and ColdFusion translates them to asynchronous PhoneGap functions. All function starting with ‘cfclient.’, e.g. cfclient.camera.getPicture(), are asynchronous. In addition to device APIs, data access function, executeQuery and tag, cfquery, are also asynchronous in cfclient.
So far I have posted CFMobile examples that were mostly standalone applications (except a photo application that uploaded image to server). However many mobile applications may need to interact with server, for example to show data from a remote database, to modify data or for many other purposes.
CFMobile features in ColdFusion Splendor make accessing remote CF server very easy. I will demonstrate this using a simple example – I will build a mobile app that displays employee records fetched from a remote CF server. The client side (cfclient) code calls a CFC on the server side which fetches data and returns result to the calling page. You will see that creating and accessing a server side CFC is as easy as it is in a completely server side CFML code – you don’t need to worry about writing code to make AJAX calls. cfclient does that for you transparently. I should mention here that this feature to call server CFCs from cfclient is not limited to mobile application, you can even use it for any web application.
Here is a screenshot of the application –
Continue reading “CFMobile Example – Accessing remote data from mobile application”
The day 1 of CFSummit2013 was great. It started with Ben Forta’s keynote. It was, as expected, excellent. He talked about the history of CF, how it’s goal is still the same (productivity) and which features have worked really well and which ones did not work. It was followed by Rakshith’s demos of some of the new features in the next release of ColdFusion (code named Splendor). He touched upon language enhancements, improvements in PDF generation and Mobile features. My demos of mobile features followed Rakshith’s demos. Unfortunately by the time I walked up to the stage to present demos, we had almost ran out of time. So I had to rush through my demos. I had planned to show a demo of debugging mobile application running on a device using ColdFusion Builder, but could not do so. I was told that there were a few issues with audio and display screen during the keynote.
Adobe had set up a table where CF developers could meet and talk to CF team members. Many attendees came there and showed interest in the mobile work flow that we had presented. I also attended Simon Free’s session on Mobile development features in Splendor. He did an excellent job of explaining what cfclient is and some of its features. In the limited time that we had in keynote, we probably could not explain what cfclient was, but I think after Simon’s session people got pretty good idea of what it is. I am looking forward to the second part of Simon’s talk today.