Developing html5 mobile applications using cold fusion 11

© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Developing HTML5 Mobile Applications Using ColdFusion 11 (Splendor)
Ram Kulkarni
1
@ram_kulkarni
ramkulkarni.com

Agenda
§  What is CFMobile
§  Typical workflow
§  ColdFusion & CFB Features for CFMobile
§  Tools required for testing and debugging
§  Demos
2

What is CFMobile
§  HTML5 Mobile application development framework using ColdFusion and ColdFusion Builder
§  Advantages
§  Leverage your knowledge of CFML to develop mobile applications
§  Simplifies coding of mobile applications
§  CFMobile debugger : on-device debugging
§  Inspect DOM and console messages
§  Easily package mobile applications
Supports complete workflow for mobile application development
3

What CFMobile is not
§  Develop native mobile application
§  Bunch of UI tags
§  Automatically converts your website to mobile application responsive design
4

CF 11 Mobile Development Workflow
Create a mobile
web project
Write code
Client and
Server
Test
Debug Package Publish
PG-A Weinre
On device
debugging PG-B

CFMobile Features
6

CFMobile : CFML Support
§  Enclose client side CFML in <cfclient> tag
§  CFML code in cfclient is translated to JavaScript
§  Transparently handles Sync->Async API conversion
§  Makes device API access easy
7

Problems of Asynchronous Programming
§  Problems when using asynchronous programming
§  Asynchronous programming can quickly become complicated. Many of the standard JavaScript
APIs rely heavily on callbacks, which are often nested, making them difficult to debug. In
addition, the use of anonymous inline functions can make reading the call stack problematic.
Exceptions that are thrown from within a heavily nested set of callbacks might not be
propagated up to a function that initiated the chain. This makes it difficult to determine exactly
where a bug is hidden.
Source : Asynchronous programming in JavaScript (Windows Runtime apps using JavaScript and
HTML) - http://msdn.microsoft.com/en-us/library/windows/apps/hh700330.aspx
8

Simple Use-case for Async code
§  Get file, given the path – using async function getFile
§  Copy it to a destination folder – using async function fileCopy
§  Do not overwrite file
§  If file with same name exist, create file name by incrementing index
§  Perform actions depending on if file-copy is successful
§  We will compare Async code and equivalent cfclient/sync code
§  It is pseudo-code
§  Not real device APIs for File access
9

Problems of Asynchronous Programming
10
Note
•  File APIs, getFile, fileExists and fileCopy are async.
All are factitious functions but similar to PG File
APIs
•  fileExists and fileCopy are called in a loop
Such code will never work as expected
•  While loop will never give a chance to callback
functions to execute and set boolean flag
- because JavaScript is single-threaded
•  You will need to simulate loop using recursive
function calls

Asynchronous programming made easy in cfclient
11
Note
•  File APIs, getFile, fileExists and fileCopy are async.
All are factitious functions but similar to PG File APIs
•  fileExists and fileCopy are called in a loop
This code in cfclient will work because
•  cfclient translates async loop to equivalent code
using recursive function
•  PG Async functions have corresponding wrapper
functions in cfclient
•  Translated code is still async, so application is not
blocked

Async Vs. cfclient
12
Compare Async code on the left
side with cfclient-sync code on
the right
cfclient is easier to write, read
and maintain

CFMobile : CFML Support Continued …
§  CFML support on client side
§  All data structures and related functions – Struct, List, Array, Date, Query etc.
§  Tag and cfscript style code
§  All basic language tags e.g. cfif, cffunction, cfloop, cfquery etc.
§  Does not support server side tags like cfldap, cfexchange*, cfpresentation etc.
§  Does not support server side functions like getAuthUser, spreadsheet functions etc.
§  Only variables, this and super scopes supported
§  Does not support Application, Server, Client, Session and Arguments scope.
13

CFMobile : CFML Support Continued …
§  OOP using client side CFComponent
§  No CFInterface
§  Easy way to call server side CFCs from cfclient
§  Client side custom tags
§  Wrap client side CFML in <cfclient> and use that file as custom tag
§  Client side (in-browser) database
§  Use cfquery or queryExecute to execute client side SQL
§  Device APIs like Camera, Contacts, Audio etc. supported
§  Using PhoneGap
14

CFMobile : JS and CFML
§  Interoperability between JS and client side CFML
§  Call JS functions from cfclient
§  Call cfclient functions from JS
15

Which functions are asynchronous in cfclient
§  All device APIs are asynchronous
§  cfclient.* , for example, cfclient.camera.getPicture()
§  Any UDF that calls device API is async
§  True for CFCs too
§  Any UDF that calls any other UDF that calls device API is asyc
§  To call async cfclient function from JavaScript, use invokeCFClientFunction
§  invokeCFClientFunction (“function_name”, args …, callback_function() {});
§  Last argument must be callback function. Pass null if callback is not required.
16

Examples of async function
<cfclient>
<cfscript>
function func1()
{
//normal CFML code. No device API called
//This is a synchornous function
}

function func2()
{
cfclient.camera.getPicture();
//Calls device API. This is an async function
}  
 
function func3()
{
func2();
//Does not call device API, but calls func2
//which calls device API
//So this function is async
}
</cfscript>
</cfclient>
17
<script>
func3();
callThisAfterFunc3();
</script>
<script>
invokeCFClientFunction(“func3”,function(){
callThisAfterFunc3();
});
</script>
✔
✗

CFMobile – Support in ColdFusion Builder
§  New Mobile project wizard
§  Complete editor support for client side CFML in cfclient
§  Code assist, Outline, Folding, Code hyperlink etc.
§  Client side CFML debugger
§  Debug code running in desktop browser or on mobile device
§  Breakpoints, Step operations, Variable inspection
§  Package mobile applications
§  Uses PhoneGap Build server
§  Can package application for DOM inspection (using Weinre)
18

HTML5 Mobile Application Deployment Options
19

HTML5 Mobile Application Deployment – Web App
07/01/13
•  Pages are loaded from server
No device API Access
•  Easy web update
Mobile Web Application
HTML/
JS/CSS
Mobile
Web Browser
Device APIs
(Camera, Contacts ..)
Local DB
✗

How cfclient is compiled in Web App
§  Web App – CFML file is loaded in browser from CF server
§  Before output is returned from CF server all <cfclient> blocks translated to <script> block
§  Can mix server side and cfclient code in the same file
§  Cannot use variables/functions declared in server side code in cfclient and vice versa
§  Client side CFCs and <cfinclude> are translated to .js files
21
index.cfm
<html>

<cffunction name=“server_side_func1”>
</cffunction>

<cfclient>

</cfclient>
</html>
Output to Browser
<html>
<!– HTML output -->
<script>

</script>
</html>

HTML5 Mobile Application Deployment – Standalone App
07/01/13
Mobile
Native Mobile
Application
Device APIs
HTML,JS,CSS
Local DB
✔
u  Native app with WebView embedded
All assets loaded locally
u  Access to device APIs
Standalone App
PhoneGap

How cfclient is compiled in Standalone App
§  Standalone App – HTML5 code is loaded from device
§  All cfclient code is translated to JS. .cfm(l) files are renamed to .html
§  Can’t mix server side and cfclient code in the same file. Server side CFML is ignored
§  Client side CFCs and <cfinclude> are translated to .js files
23
index.cfm
<html>

</cfclient>
</html>
Index.html
<html>
<!– HTML output -->
<script>

</script>
</html>
CF 11
Translate
CFB 3
PGB
Server
PackageAPK / IPA

Mobile
HTML5 Mobile Application Deployment – Hybrid App
07/01/13
Native Mobile
Application
Device APIs
Local DB
•  Native app with WebView Embedded
•  Pages loaded from server
Access to device APIs
•  Easy web update
Hybrid Application
✔
HTML/
JS/CSS
PhoneGap

Tools for CFMobile
25

Tools for testing and debugging CFMobile Applications
§  Running CFMobile applications
§  Desktop browser if you are not using any device APIs
§  Client side database supported
§  ColdFusion (PhoneGap) Shell application
§  Supports all device APIs and client side database
§  What is ColdFusion (PhoneGap) Shell application
§  Native iOS or Android app with embedded WebKit browser and PhoneGap libraries
§  Supports all PhoneGap APIs
§  Can be installed on actual device or Simulator/Emulator
§  Need Xcode (IDE by Apple) if you want to install Shell app in iOS Simulator
§  Must <cfinclude template="/CFIDE/cfclient/useragent.cfm" >
§  Account with build.phonegap.com if you want to package app from CFB
§  Android/iOS Emulator/Simulator if you do not have physical device
§  Apple developer/distribution certificate if you want to install app on iOS device
26

Typical workflow
§  Code CFMobile application in ColdFusion Builder
§  Can use any JS libraries like Jquery, Jquery Mobile, Bootstrap etc.
§  Run application
§  Desktop browser if no device APIs
§  Shell app
§  Debug
§  Launch from CFB
§  Run in desktop browser or Shell app
27

Typical workflow - Continues …
§  Inspect
§  Run app in Shell app with ?inspect parameter added to URL
§  Go back to code and make necessary changes
§  Package Application from CFB
§  Install
§  Download APK (Android) and/or IPA (iOS) files from CFB
§  Install on mobile device
28

Demo
29

Resources
30

Downloads
§  See http://blogs.coldfusion.com/post.cfm/slides-of-e-seminar-everything-about-mobile-application-development
converting pptx to PDF does not retain hyperlinks so please visit the link above.
§  ColdFusion 11 & ColdFusion Builder 3
http://www.adobe.com/go/trycoldfusion/ 
http://www.adobe.com/go/trycoldfusionbuilder/
§  Shell apps
§  PhoneGap Shell app for Android (.apk) - 1.7 MB
§  PhoneGap Shell app project for iOS – 14 MB (zip)
§  readme.txt
§  Xcode - iOS Dev Center
§  Android SDK (if you want Android Emulator)
§  See http://blogs.coldfusion.com/post.cfm/slides-of-e-seminar-everything-about-mobile-application-development
31

ColdFusion Documentation
§  See
http://blogs.coldfusion.com/post.cfm/slides-of-e-seminar-everything-about-mobile-application-
development
§  Mobile Application Development
§  Using ColdFusion Builder
§  DevNet Articles
§  Build your first mobile app with ColdFusion 11 (http://www.adobe.com/devnet/coldfusion/
articles/build-your-ﬁrst-mobile-app.html)
§  Overview: Mobile application development with ColdFusion 11 (http://www.adobe.com/
devnet/coldfusion/articles/mobile-application-development-overview.html)
32

CFMobile related Blogs
§  Simplify Mobile Application Development Using ColdFusion
§  Creating database mobile application with ColdFusion Splendor
§  CFMobile Example – Taking picture and uploading to ColdFusion server
§  CFMobile Example – Using Geolocation APIs in ColdFusion Splendor
§  CFClient – Understanding Battery Events
§  CFMobile Example – Record and playback audio using ColdFusion Splendor
§  Why does cfclient file upload API take callback functions?
§  CFMobile Example – Accessing remote data from mobile application
§  CFMobile - How to display CF query data returned from remote CFC
§  ColdFusion Splendor – When to use invokeCFClientFunction
§  New CF Mobile Project – Templates
§  ColdFusion Thunder – It’s all new IDE
33

CFMobile related Videos
§  See
http://blogs.coldfusion.com/post.cfm/slides-of-e-seminar-everything-about-mobile-application-
development
§  ColdFusion Mobile Workflow in ColdFusion Splendor
§  Getting Started with ColdFusion Mobile in Splendor
(shorter version of the first video – does not contain debug and inspect workflow)
34

Thank you
35

Developing html5 mobile applications using cold fusion 11

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to Developing html5 mobile applications using cold fusion 11

Similar to Developing html5 mobile applications using cold fusion 11 (20)

More from ColdFusionConference

More from ColdFusionConference (20)

Recently uploaded

Recently uploaded (20)

Developing html5 mobile applications using cold fusion 11