{"id":1195,"date":"2014-03-25T14:30:45","date_gmt":"2014-03-25T09:00:45","guid":{"rendered":"http:\/\/ramkulkarni.com\/blog\/?p=1195"},"modified":"2014-03-25T14:30:45","modified_gmt":"2014-03-25T09:00:45","slug":"cfmobile-example-accessing-remote-data-from-mobile-application","status":"publish","type":"post","link":"http:\/\/ramkulkarni.com\/blog\/cfmobile-example-accessing-remote-data-from-mobile-application\/","title":{"rendered":"CFMobile Example – Accessing remote data from mobile application"},"content":{"rendered":"

So far I have posted CFMobile examples that were mostly standalone applications (except a photo application<\/a> 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.<\/p>\n

CFMobile features in ColdFusion\u00a0Splendor<\/a> 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 –\u00a0you 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.<\/p>\n

Here is a screenshot of the application –<\/p>\n

\"2014_03_25_image5\"<\/a><\/p>\n

I will start with building the server side application. We need to create a database and a table on the server. I am going to use Embedded Apache Derby database for this application. Using ColdFusion Administrator, you can create both database and datasource for Embedded Apache Derby. Open up the administrator and go to ‘Data & Services’->Data Sources page and add a new data source, called EmployeeDS –<\/p>\n

\"2014_03_25_image1\"<\/a><\/p>\n

Click Add button, and you will see details page –<\/p>\n

\"2014_03_25_image2\"<\/a><\/p>\n

Specify database folder and select ‘Create Database’ option. I have created the database in cfusion\/db\/EmployeeDS folder. Derby database driver creates the last folder, so make sure EmployeeDS folder does not already exist in cfusion\/db, otherwise Derby throws error.<\/p>\n

We now need to create employee table. I have created a simple cfml file, db_scripts.cfm with functions to create database, list and delete \u00a0records.<\/p>\n

\n
<!--- Functions to create Employee databsase, display employees <\/span>\n\tand delete all employees from the table ---><\/span>\n\n<!--- Comment call to function createTable after table is successfully created ---><\/span>\n<cfset<\/span> createTable<\/span>()><\/span>\n\n<!---<cfset deleteAll()>---><\/span>\n\n<!---<cfset listEmployees()>---><\/span>\n\n<br><\/span>Script Executed.\n\n<cffunction<\/span> name<\/span>=<\/span>\"createTable\"<\/span> ><\/span>\n\n\t<cfquery<\/span> datasource=<\/span>\"employeeDS\"<\/span>><\/span>\n\t\tcreate table employee (\n\t\t\tid integer not null generated always as identity,\n\t\t\tfirst_name varchar(20),\n\t\t\tlast_name varchar(20),\n\t\t\taddress varchar(100))\n\t<\/cfquery><\/span>\n<\/cffunction><\/span>\n\n<cffunction<\/span> name<\/span>=<\/span>\"deleteAll\"<\/span> ><\/span>\n\t<cfquery<\/span> datasource=<\/span>\"EmployeeDS\"<\/span> ><\/span>\n\t\tdelete from EMPLOYEE\n\t<\/cfquery><\/span>\n<\/cffunction><\/span>\n\n<cffunction<\/span> name<\/span>=<\/span>\"listEmployees\"<\/span> ><\/span>\n\t<cfquery<\/span> datasource=<\/span>\"employeeDS\"<\/span> name=<\/span>\"rs\"<\/span>><\/span>\n\t\tselect * from EMPLOYEE order by FIRST_NAME\n\t<\/cfquery><\/span>\n\n\t<table<\/span> ><\/span>\n\t\t<tr><\/span>\n\t\t\t<th><\/span>First Name<\/th><\/span>\n\t\t\t<th><\/span>Last Name<\/th><\/span>\n\t\t\t<th><\/span>Address<\/th><\/span>\n\t\t<\/tr><\/span>\n\t\t<cfoutput query=\"rs\"><\/span>\n\t\t\t<tr><\/span>\n\t\t\t\t<td><\/span>#first_name<\/span>#<\/td><\/span>\n\t\t\t\t<td><\/span>#last_name<\/span>#<\/td><\/span>\n\t\t\t\t<td><\/span>#address<\/span>#<\/td><\/span>\n\t\t\t<\/tr><\/span>\n\t\t<\/cfoutput><\/span>\n\t<\/table><\/span>\n<\/cffunction><\/span><\/pre>\n<\/div>\n
Run this page and it will create employee table with fields id, first_name, last_name and address.<\/p>\n
Next I will create a server side CFC, EmployeeDBManager.cfc with two functions – getEmployees and addEmployee –<\/p>\n
\n
<cfcomponent<\/span> ><\/span>\n\t<cfset<\/span> this.ds<\/span> =<\/span> \"employeeDS\"<\/span>><\/span>\n\n\t<cffunction<\/span> name<\/span>=<\/span>\"getEmployees\"<\/span> returntype<\/span>=<\/span>\"Array\"<\/span> access<\/span>=<\/span>\"remote\"<\/span> returnformat<\/span>=<\/span>\"JSON\"<\/span>\n\t\thint<\/span>=<\/span>\"Fetches employee rows from Employee table and returns array of EmployeeTO components\"<\/span>><\/span>\n\n\t\t<cfset<\/span> result<\/span> =<\/span> ArrayNew<\/span>(1<\/span>)><\/span>\n\n\t\t<cfquery<\/span> datasource=<\/span>\"#this.ds#\"<\/span> name=<\/span>\"empRs\"<\/span>><\/span>\n\t\t\tselect * from EMPLOYEE order by FIRST_NAME\n\t\t<\/cfquery><\/span>\n\n\t\t<cfloop<\/span> query<\/span>=<\/span>\"empRs\"<\/span>><\/span>\n\t\t\t<cfset<\/span> var<\/span> empStruct<\/span> =<\/span> {\"id\"<\/span>:id<\/span>, \"firstName\"<\/span>:first_name<\/span>,\n\t\t\t\t\t\t\t\t\t\"lastName\"<\/span>: last_name<\/span>, \"address\"<\/span>:address<\/span>}><\/span>\n\t\t\t<cfset<\/span> arrayAppend<\/span>(result<\/span>,empStruct<\/span>)><\/span>\n\t\t<\/cfloop><\/span>\n\n\t\t<cfreturn<\/span> result<\/span>><\/span>\n\n\t<\/cffunction><\/span>\n\n\t<cffunction<\/span> name<\/span>=<\/span>\"addEmployee\"<\/span> access<\/span>=<\/span>\"remote\"<\/span> returntype<\/span>=<\/span>\"numeric\"<\/span>\n\t\thint<\/span>=<\/span>\"Inserts a new employee record in the able\"<\/span>><\/span>\n\t\t<cfargument<\/span> name<\/span>=<\/span>\"emp\"<\/span> type<\/span>=<\/span>\"struct\"<\/span> ><\/span>\n\n\t\t<cfquery<\/span> datasource=<\/span>\"#this.ds#\"<\/span> result=<\/span>\"newEmpResult\"<\/span>><\/span>\n\t\t\tinsert into EMPLOYEE (FIRST_NAME,LAST_NAME,ADDRESS) values (\n\t\t\t\t<cfqueryparam<\/span> cfsqltype=<\/span>\"cf_sql_varchar\"<\/span> value=<\/span>\"#emp.firstName#\"<\/span>><\/span>,\n\t\t\t\t<cfqueryparam<\/span> cfsqltype=<\/span>\"cf_sql_varchar\"<\/span> value=<\/span>\"#emp.lastName#\"<\/span>><\/span>,\n\t\t\t\t<cfqueryparam<\/span> cfsqltype=<\/span>\"cf_sql_varchar\"<\/span> value=<\/span>\"#emp.address#\"<\/span>><\/span>\n\t\t\t)\n\t\t<\/cfquery><\/span>\n\n\t\t<cfreturn<\/span> newEmpResult.generatedKey<\/span>><\/span>\n\t<\/cffunction><\/span>\n\n<\/cfcomponent><\/span><\/pre>\n<\/div>\n
Note that both the functions are marked remote (because they will be called from a cfclient block).
\ngetEmployee returns Array in JSON format. It returns array of Struct with fields id, fistName, lastName and address.
\naddEmployee takes Struct argument with the same fields as above, except id. It returns id of the newly added employee.
\nWe are done with the server side code for this application.<\/p>\n
Let’s now create the client side application. In index.cfm of the client app, I first create HTML UI and write some JavaScript event handlers.<\/p>\n
\n
<DOCTYPE html><\/span>\n\n<script <\/span>src=<\/span>\"jquery-2.0.3.min.js\"<\/span> ><\/script><\/span>\n\n<script ><\/span>\n\t$(document<\/span>).ready(function<\/span>(){\n\n\t\t$(document<\/span>).on(\"click\"<\/span>,\"#addBtn\"<\/span>, function<\/span>(){\n\t\t\tvar<\/span> firstName =<\/span> $(\"#fnTxt\"<\/span>).val();\n\t\t\tvar<\/span> lastName =<\/span> $(\"#lnTxt\"<\/span>).val();\n\t\t\tvar<\/span> city =<\/span> $(\"#cityTxt\"<\/span>).val();\n\n\t\t\tif<\/span> (firstName.trim().length ==<\/span> 0<\/span>)\n\t\t\t{\n\t\t\t\talert(\"First name is required\"<\/span>);\n\t\t\t\treturn<\/span>;\n\t\t\t}\n\n\t\t\taddEmployee(firstName,lastName,city);\n\t\t});\n\t});\n<\/script><\/span>\n\n<style ><\/span>\n\tth<\/span>,<\/span>td<\/span> {\n\t\ttext-align<\/span>:<\/span>left<\/span>;\n\t}\n<\/style><\/span>\n\n<h2><\/span>CFMobile Demo:<\/h2><\/span>\nThis application calls a CFC on the server side to get all employee records from a database table on the server.<br><\/span>\nYou can add an employee by filling up following details and clicking Submit button.\nThis again makes call to a server CFC to add employee to the table.\n\n<h3><\/span>Add Employee:<\/h3><\/span>\n<form><\/span>\n\t<table<\/span> ><\/span>\n\t\t<tr><\/span>\n\t\t\t<td><\/span>First Name:<\/td><\/span>\n\t\t\t<td><input<\/span> type=<\/span>\"text\"<\/span> id=<\/span>\"fnTxt\"<\/span>><\/span>\n\t\t<\/tr><\/span>\n\t\t<tr><\/span>\n\t\t\t<td><\/span>Last Name:<\/td><\/span>\n\t\t\t<td><input<\/span> type=<\/span>\"text\"<\/span> id=<\/span>\"lnTxt\"<\/span>><\/span>\n\t\t<\/tr><\/span>\n\t\t<tr><\/span>\n\t\t\t<td><\/span>City:<\/td><\/span>\n\t\t\t<td><input<\/span> type=<\/span>\"text\"<\/span> id=<\/span>\"cityTxt\"<\/span>><\/span>\n\t\t<\/tr><\/span>\n\t\t<tr><\/span>\n\t\t\t<td<\/span> colspan=<\/span>\"2\"<\/span>><\/span>\n\t\t\t\t<button<\/span> type=<\/span>\"button\"<\/span> id=<\/span>\"addBtn\"<\/span>><\/span>Add<\/button><\/span>\n\t\t\t\t<button<\/span> type=<\/span>\"reset\"<\/span>><\/span>Reset<\/button><\/span>\n\t\t\t<\/td><\/span>\n\t\t<\/tr><\/span>\n\t<\/table><\/span>\n<\/form><\/span>\n<hr><\/span>\n\n<h3><\/span>Employees:<\/h3><\/span>\n<table<\/span> id=<\/span>\"empTable\"<\/span> width=<\/span>\"100%\"<\/span>><\/span>\n\t<tr><\/span>\n\t\t<th><\/span>First Name<\/th><\/span>\n\t\t<th><\/span>Last Name<\/th><\/span>\n\t\t<th><\/span>City<\/th><\/span>\n\t<\/tr><\/span>\n<\/table><\/span>\n\n<cfclient><\/span>\n<\/span>\n    <cfscript><\/span>\n    <\/cfscript><\/span>\n<\/cfclient><\/span><\/pre>\n<\/div>\n
In the cfscript block in cfclient, I first instantiate the server side CFC, EmployeeDBManager, and then call getAllEmployees function.<\/p>\n
\n
try<\/span>\n{\n\tempMgr =<\/span> new<\/span> EmpServerApp.EmployeeDBManager();\n}\ncatch<\/span> (any e)\n{\n\talert(\"Error : \"<\/span> +<\/span> e.message);\n\tcfabort ();\n}\n\n\/\/get all employees from the server and display in the above HTML table<\/span>\ngetAllEmployees();<\/pre>\n<\/div>\n
empMgr is a global variable. You can create page level variable also using variables prefix, i.e variables.empMgr.
\nNotice that you instantiate server CFC from cfclient block just as you would do it in server side code.<\/p>\n
In getAllEmployees, I call\u00a0getEmployees method of the server CFC. But before calling the server CFC, I set callback handler (function) which will be called when server function returns.<\/p>\n
\n
\/\/Fetch employees data from server and display in the HTML table<\/span>\nfunction<\/span> getAllEmployees()\n{\n\ttry<\/span>\n\t{\n\t\t\/\/Set callback function on the server CFC, which will be<\/span>\n\t\t\/\/called with the result<\/span>\n\t\tempMgr.setCallbackHandler(function<\/span>(callbackResult){\n\t\t\tvar<\/span> employees =<\/span> callbackResult.result;\n\t\t\tvar<\/span> empCount =<\/span> arrayLen(employees);\n\t\t\tfor<\/span> (var<\/span> i =<\/span> 1<\/span>; i <=<\/span> empCount; i++<\/span>)\n\t\t\t{\n\t\t\t\taddEmpToHTMLTable(employees[i]);\n\t\t\t}\n\t\t});\n\n\t\tempMgr.getEmployees();\n\t}\n\tcatch<\/span> (any e)\n\t{\n\t\talert(\"Error : \"<\/span> +<\/span> e.message);\n\t\treturn<\/span>;\n\t}\n\n}<\/pre>\n<\/div>\n
If you do not set the callback handler, remote CFC function would be called synchronously, which will block application UI till the CFC function returns. So make sure you set callback handler when invoking remote CFC function from cfclient.<\/p>\n
Argument to the callbakc handler is an object with result field. This field actually contains result returned by the remote CFC function. getEmployee function of the CFC returns array (of struct\/object), so I iterate over it and call addEmpToHTMLTable function for each employee struct.<\/p>\n
\n
<!--- Append employee data in the HTML table ---><\/span>\n<cffunction<\/span> name<\/span>=<\/span>\"addEmpToHTMLTable\"<\/span> ><\/span>\n\t<cfargument<\/span> name<\/span>=<\/span>\"emp\"<\/span> ><\/span>\n\n\t<cfoutput ><\/span>\n\t\t<cfsavecontent<\/span> variable<\/span>=<\/span>\"rowHtml\"<\/span> ><\/span>\n\t\t\t<tr><\/span>\n\t\t\t\t<td><\/span>#emp.firstName<\/span>#<\/td><\/span>\n\t\t\t\t<td><\/span>#emp.lastName<\/span>#<\/td><\/span>\n\t\t\t\t<td><\/span>#emp.address<\/span>#<\/td><\/span>\n\t\t\t<\/tr><\/span>\n\t\t<\/cfsavecontent><\/span>\n\t<\/cfoutput><\/span>\n\n\t<cfset<\/span> $<\/span>(\"##empTable\"<\/span>).append<\/span>(rowHtml<\/span>)><\/span>\n<\/cffunction><\/span><\/pre>\n<\/div>\n
There is one more function in the cfscript block of cfclient, to add new employee<\/p>\n
\n
\/\/Add a new employee.<\/span>\nfunction<\/span> addEmployee(firstName, lastName, city)\n{\n\ttry<\/span>\n\t{\n\t\tvar<\/span> newEmp =<\/span> {\"firstName\"<\/span>:<\/span>firstName, \"lastName\"<\/span>:<\/span>lastName, \"address\"<\/span>:<\/span>city};\n\n\t\t\/\/Set callback function on the server CFC, which will be<\/span>\n\t\t\/\/called with the result<\/span>\n\t\tempMgr.setCallbackHandler(function<\/span>(callbackResult) {\n\t\t\tnewEmp.id =<\/span> callbackResult.result;\n\t\t\taddEmpToHTMLTable(newEmp);\n\t\t});\n\n\t\tempMgr.addEmployee(newEmp);\n\t}\n\tcatch<\/span> (any e)\n\t{\n\t\talert(\"Error:\"<\/span> +<\/span> e.message);\n\t\treturn<\/span>;\n\t}\n}<\/pre>\n<\/div>\n
addEmployee (in cfclient) takes three arguments – \u00a0firstName, lastName and city (address). I create a new struct using these arguments and pass it to addEmployee method of the remote CFC (EmployeeDBManager). Here also I set the callback handler because I don’t want call to a server function blocking the application.
\naddEmployee function on the server side returns id of the new employee. I get this as result field of the argument to callback handler. Then I call\u00a0addEmpToHTMLTable (see above) to append new employee to the HTML table.<\/p>\n
This completes code for the application. You can open index.cfm of the client application in Chrome\/Safari and see how the application works. You can also test it on mobile as a standalone application using PhoneGap Shell app that we have built (see links in my earlier post –\u00a0Simplify Mobile Application Development Using ColdFusion<\/a>).<\/p>\n
However if you package the client application and install it on mobile device, you will find that application does not work – no data is fetched from the server.
\nWhen resolving URL of remote CFC in cfclient, the framework tries to resolve it from the URL of the client page. If client page and server CFC are loaded from the same server, which is what happens when you run the application in desktop browser or in the Shell application, cfclient is able to resolve the server CFC. But it cannot resolve it in a packaged application, because the client page is loaded locally from the device and server side CFC does not exist on the device.<\/p>\n
To help resolve server CFCs (used in cfclient), you need to provide base URL of the server when packaging the application. You do that by going to project properties (right click the project in the Navigator view of ColdFusion Thunder and select Properties menu option)->ColdFusion Mobile Project->\u00a0Miscellaneous page and specifying ‘Application Base URL’<\/p>\n
\"2014_03_25_image4\"<\/a><\/p>\n
 <\/p>\n
When you right click on the project and select ‘Generate PhoneGap Build’ menu option, the above URL will be used in the generated code to resolve server side CFCs.<\/p>\n
You also need to provide access to the external server from your mobile application. To do that, go to PhoneGap tab (in Mobile Project Properties) and click \u00a0New button. Go to Access page and type IP of the external (CF 11) server or * to allow access to any external server.<\/p>\n
\"2014_03_25_image6\"<\/a><\/p>\n
Download CFBuilder projects for this application<\/a>. EmpMobileApp folder in this zip contains client side application and EmpServerApp folder contains server side app. I am not providing Android APK file for this app because my server side CFC will not be accessible from this APK when you install it on you device.<\/p>\n
Though I showed you how to access remote database from CFMobile application in this post, the\u00a0technique\u00a0is not limited to database access. Server CFC can get data from any source and return to cfclient.<\/p>\n
-Ram Kulkarni<\/p>\n
Update :<\/span> Final build of ColdFusion 11 has a bug because of which access to CFC on the server does not work. To fix this issue, copy cfclient_main.js<\/a> to wwwroot\/CFIDE\/cfclient folder of the server. Make sure you keep back-up of the old file before you overwrite it.<\/p>\n","protected":false},"excerpt":{"rendered":"
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\u00a0Splendor make accessing remote … <\/p>\n
Continue reading “CFMobile Example – Accessing remote data from mobile application”<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","enabled":false}}},"categories":[32,23,78,1],"tags":[100,85,94,22,24],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/p2g9O8-jh","jetpack-related-posts":[],"_links":{"self":[{"href":"http:\/\/ramkulkarni.com\/blog\/wp-json\/wp\/v2\/posts\/1195"}],"collection":[{"href":"http:\/\/ramkulkarni.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/ramkulkarni.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/ramkulkarni.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/ramkulkarni.com\/blog\/wp-json\/wp\/v2\/comments?post=1195"}],"version-history":[{"count":0,"href":"http:\/\/ramkulkarni.com\/blog\/wp-json\/wp\/v2\/posts\/1195\/revisions"}],"wp:attachment":[{"href":"http:\/\/ramkulkarni.com\/blog\/wp-json\/wp\/v2\/media?parent=1195"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/ramkulkarni.com\/blog\/wp-json\/wp\/v2\/categories?post=1195"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/ramkulkarni.com\/blog\/wp-json\/wp\/v2\/tags?post=1195"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}