Entries Tagged as “Mobile”

Slides of e-seminar - Everything about Mobile Application Development

April 11, 2014 / Ram Kulkarni

  Thunder | Adobe ColdFusion | Adobe ColdFusion Builder | e-seminar | Mobile | Splendor

I presented an e-seminar, Everything about Mobile Application Development, on 10th April. Some of the attendees had asked me to share the presentation and source code of the application. So here are the links

I had added a few useful links at the end of the presentation, but the PDF (linked above) of slides does not show those links. So here they are - 

Downloads

ColdFusion Documentation

CFMobile related Blogs

CFMobile related Videos

Recently PhoneGap Build made some changes in the way they pick up PhoneGap plugins. Because of this if you package the application (CFMobileExpenseTracker) using Public Beta builds, then image attachement feature would not work. We have fixed this issue post public beta. However there is a work around in public beta build- In the PhoneGap project properties of ColdFusion Thunder, select 'Load the configuration from XML' option and use this config.xml.




You can find the recording of this e-seminar here.

-Ram Kulkarni

CFMobile - How to display CF query data returned from remote CFC

March 29, 2014 / Ram Kulkarni

  Adobe ColdFusion | ColdFusion | Mobile | Splendor

In my last blog post, CFMobile Example – Accessing remote data from mobile application, I explained how to access data returned by a remote CFC. The CFC queried a database table, but returned array of struct/object to cfclient. 

In a comment on that blog post, Tayyab posted a problem, where in he returned a query object from CFC and tried to access it from cfclient. I thought instead of posting the answer as a comment, it deserved a separate post.
This is what he asked - 

These are the 2 most simplest coldfusion files. One is a cfc and the other a CFM but when I wrap the cfm into <cfscript> tag I get a blank page.

I think he meant wrapping CFML code in <cfclient>. The code in two files he posted were -

listCustomers.cfm

<cfinvoke component="customer" method="retrieveCustomers" returnvariable="allCustomers">
</cfinvoke>
<table width="100%" border="1" cellspacing="0" cellpadding="3">
	<tr>
		<td>
			First Name
		</td>
		<td>
			Last Name
		</td>
		<td>
			Email
		</td>
	</tr>
	<cfoutput query="allCustomers">
		<tr>
			<td>
				#firstName#
			</td>
			<td>
				#lastName#
			</td>
			<td>
				#email#
			</td>
		</tr>
	</cfoutput>
</table>

customer.cfc

<cfcomponent displayname="Customer" hint="ColdFusion Component for Customers">
	<cfset this.dsn = "books">
	<!--- This function retrieves all customers from the database --->
	
	<cffunction name="retrieveCustomers" hint="Gets all customer from the database" returntype="query" 
	            access="remote">
		<cfquery name="getCustomers" datasource=#this.dsn#>
			select * from Customers
		</cfquery>
		<cfreturn getCustomers>
	</cffunction>
	
</cfcomponent>

If you just wrapped code in listCustomers.cfm in <cfclient> block then nothing would be displayed.

The reason is that when you return CF Query from server to cfclient, it is serialized to a JavaScript Object, which is not really a CF Query object. This is also in fact different object than the query object that you get by executing client side query (see Creating database mobile application with ColdFusion Splendor) .


Loop iteration and query column access would not work on this object the way it works on the server side, or on the client side query object. You can see the structure of deserialized query object by logging the object to JavaScript console - insert <cfset console.log(books)> just after <cfinvoke> in listCustomers.cfm, run the page with JavaScript console of the browser open and observe its value.

So you need to access query rows and columns differently for CF query returned from the server. I have created a similar example as above - not using Customer database, but using cfbookclub data source that is shipped with Splendor. I have two files now - book.cfc and listBooks.cfm.

book.cfc

<cfcomponent displayname="Book" hint="ColdFusion Component for Books">
	<cfset this.dsn = "cfbookclub">
	<!--- This function retrieves all books from the database --->
	
	<cffunction name="getBooks" hint="Gets all books from the database" returntype="query" 
	            access="remote">
		<cfquery name="books" datasource=#this.dsn#>
			select * from books
		</cfquery>
		<cfreturn books>
	</cffunction>
	
</cfcomponent>

listBooks.cfm

<script >
	//Helper function to get value at given row and column of the query object
	function getQueryColumnValue (queryObj, rowNum, colName)
	{
				var defaulValue = "";
				
				if (typeof queryObj.__QUERY__ == 'undefined')
					return defaulValue;
				
				rowNum--;
				if (rowNum >= queryObj.length)
					return defaulValue;
					
				var row = queryObj.DATA[rowNum];
				
				var index = queryObj.COLUMNS.indexOf(colName);
				
				if (index < 0)
					return defaulValue;
					
				
				return row[index];
	}	
</script>

<cfclient>
	<cfinvoke component="book" method="getBooks" returnvariable="books">
	</cfinvoke>
	
	<table width="100%" border="1" cellspacing="0" cellpadding="3">
		<tr>
			<td>
				Title
			</td>
			<td>
				Description
			</td>
		</tr>
		<cfoutput >
			<cfloop index="i" from="1" to="#books.recordCount#">
				<tr>
				<td>
					#getQueryColumnValue(books,i,"TITLE")#
				</td>
				<td>
					#getQueryColumnValue(books,i,"BOOKDESCRIPTION")#
				</td>
				</td>
			</cfloop>
		</cfoutput>
	</table>
</cfclient>

Notice that I have created a helper function in JavaScript block to get value from query object at given a row and column. Also cfloop does not treat the value returned by CFC as query; it now iterates it using index. And lastly, query column names are all in upper case, because column names are upper-cased on the server.

We could probably simplify it a bit, but as of now this is how you can access server side CF query data in cfclient. If you are going to run the above example, make sure that cfbookclub data source is created on the server.

-Ram Kulkarni


CFMobile Example – Accessing remote data from mobile application

March 25, 2014 / Ram Kulkarni

  Thunder | Adobe ColdFusion | Adobe ColdFusion Builder | CFBuilder | ColdFusion | Mobile | Splendor

This post is reproduced from my post at my personal blog ramkulkarni.com.

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

 

Read More


CFClient – Understanding Battery Events

March 19, 2014 / Sandeep Paliwal

  ColdFusion 11 | Mobile

Adobe ColdFusion 11 public beta allows users to develop mobile applications using CFML language. In my blog post I have explained about the different battery events which are fired on mobile devices. The post covers

  1. What are battery events and when are they fired
  2. How to register callback events for these
  3. How to get battery info when these callbacks are fired.

 

You can read the full post here


CFMobile Example – Record and playback audio using ColdFusion Splendor

March 18, 2014 / Ram Kulkarni

  Thunder | Adobe ColdFusion | Adobe ColdFusion Builder | CFBuilder | ColdFusion | ColdFusion 11 | Mobile | Splendor

This post is reproduced from my post at my personal blog ramkulkarni.com.

In this post I am going to show how easy it is to record audio and play it back in a mobile application using ColdFusion Splendor. If you haven't already, you can download it from Adobe Labs.

I have tried to keep the application simple. There are two buttons, Record and Play. When you click Record button, the recording starts and the Stop button is displayed. Speak into the phone microphone to record your voice. When done, click Stop button. You can play back the audio by clicking Play button. You can also stop playback any time by clicking Stop button.

Here are the screen shots - 


Read More


Blue Mango Theme Design By Mark Aplet

Super Powered by Mango Blog