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

07/01/13 5

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


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>  </cfclient> </html>

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

CF 11

Translate CFB 3

PGB Server

Package APK / IPA


Mobile

HTML5 Mobile Application Deployment – Hybrid App

07/01/13

Native Mobile Application


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


§  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-first-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


§  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

Software

Developing html5 mobile applications using cold fusion 11