Developing html5 mobile applications using cold fusion 11

© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. Agenda §  What is CFMobile §  Typical workflow §  ColdFusion & CFB Features for CFMobile §  Tools required for testing and debugging §  Demos 2

© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 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

© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. What CFMobile is not §  Develop native mobile application §  Bunch of UI tags §  Automatically converts your website to mobile application responsive design 4

© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 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

© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 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

© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 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

© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 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

© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 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

© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 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

© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 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

© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 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

© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 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

© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. CFMobile : JS and CFML §  Interoperability between JS and client side CFML §  Call JS functions from cfclient §  Call cfclient functions from JS 15

© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 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

© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 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> ✔ ✗

© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 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

© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 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 ✗

© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 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>

© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. HTML5 Mobile Application Deployment – Standalone App 07/01/13 Mobile Native Mobile Application Device APIs (Camera, Contacts ..) HTML,JS,CSS Local DB ✔ u  Native app with WebView embedded All assets loaded locally u  Access to device APIs Standalone App PhoneGap

© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 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

© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. Mobile HTML5 Mobile Application Deployment – Hybrid App 07/01/13 Native Mobile Application Device APIs (Camera, Contacts ..) Local DB •  Native app with WebView Embedded •  Pages loaded from server Access to device APIs •  Easy web update Hybrid Application ✔ HTML/ JS/CSS PhoneGap

© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 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

© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 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

© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 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

© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 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

© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. ColdFusion Documentation §  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. §  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

© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 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

© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. CFMobile related Videos §  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 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

Developing html5 mobile applications using cold fusion 11

More Related Content

Similar to Developing html5 mobile applications using cold fusion 11

More from ColdFusionConference

Recently uploaded

Developing html5 mobile applications using cold fusion 11