CFML, Basic HTML/JS
28 April 2014
Adobe ColdFusion 11 allows you to develop hybrid mobile apps using CFML language. ColdFusion makes it very easy for a developer to create mobile applications that can access the device native functionalities using CFML. Not only this makes writing mobile apps easy, it allows developers who are not very comfortable with HTML/JS to create hybrid apps.
Hybrid apps are just like native apps that can run on device, but are written using web technologies (HTML5/JS/CSS) instead of native code. This makes them portable across various platforms like Android, IOS etc. These hybrid apps generally use libraries like Apache Cordova to call device native APIs. Adobe ColdFusion 11 helps to create these hybrid mobile apps using CFML without having developers to know the technologies required to create the hybrid app. Adobe ColdFusion 11 simplifies the mobile app development by allowing users to write code in familiar synchronous model as opposed to using asynchronous model with callbacks for every API call.
Now, let’s start with creating a mobile app in ColdFusion. We will first start with a very basic hello world app that just prints hello World. We will then use certain device APIs to add more functionalities to the app.
To create your first Hello World App, all you need to do is to write a simple Hello World text within the cfoutput tag and then wrap this code with a cfclient tag. So the final code will look like:
<cfclient> <cfoutput>Hello World</cfoutput> </cfclient>
This is your first mobile app, which would print Hello World on screen when you package and run it on your mobile device.
Note: Check this article for more information on how to use Adobe ColdFusion Builder 3 to build and package your mobile app.
Now, in the previous section, we built a very basic app which just prints Hello World. We would like our app to do more than that for some real world applications. This means you will need a way to use the device functionality through your code so that your app can do something substantial like write a file to the device file system or take a picture or add entry to device’s contact list.
To access this device functionality, we first need to enable the device API in our code. To do this, add the following piece of code at the start of your page:
This instructs the ColdFusion server to include the necessary code to help you call the device APIs.
Now that we have enabled the device API, let’s try a few of them. We start with very basic camera APIs and as we go on we will use more APIs and create an app that can do more than just print Hello World.
All the device APIs are available under the cfclient object that will be available on the client runtime.
So, to use the device’s camera to take picture, we wiil use the getPicture() API under cfclient.camera (use Adobe ColdFusiob Builder 3 to get content assist for all device APIs).
Now, our code looks like:
<cfclientsettings enabledeviceapi="true"> <cfclient> </cfclient>
The cfclient.camera.getPicture() API returns the temp file path of the image captured through the camera. Let’s try to move this image from this temp location to a directory of our choice. First, we will check if the directory with the given name exists or not. If it doesn’t exist, we will create one. Then we will move the image file captured from the camera to this directory. File API present under cfclient.file allows users to access the device File system.
Here is the code snippet to accomplish the mentioned file operations:
<cfif not cfclient.file.directoryExists(myGallery)> <cfset cfclient.file.createDirectory(myGallery)> </cfif> <cfset cfclient.file.move(picture, myGallery & "/testpic.jpg")>
Now, once we have our image file at the right place, let’s try to read it as Base64 String and display it. Here, we will make use of file API, readAsBase64() to read image file content as a Base64 String. The following snippet shows the API usage:
<cfset picContent = cfclient.file.readAsBase64(myGallery & "/testpic.jpg")>
Here is how the full code will look like:
<cfclientsettings enabledeviceapi="true"> <cfclient> <cfset picture = cfclient.camera.getPicture()> <cfset myGallery = "mygallery"> <cfif not cfclient.file.directoryExists(myGallery)> <cfset cfclient.file.createDirectory(myGallery)> </cfif> <cfset cfclient.file.move(picture, myGallery & "/testpic.jpg")> <cfset picContent = cfclient.file.readAsBase64(myGallery & "/testpic.jpg")> <cfset document.getElementById("img").src = picContent > </cfclient> <div> <img id="img" height="50%" width="50%" alt="Test Pic Here"> </div>
To run the above code on the device, you need to build and package the app using Adobe ColdFusion Builder 3 or alternatively use the PhoneGap Shell App.
Refer to the code samples to get the full code for the example mentioned here along with the code sample for working with the device contacts.
Now, we have seen how to access the device API using cfclient and create mobile applications that can access native functionality. Here is a list of native device functionality accessible via cfclient:
- Device Events
- File system
- Media (audio and video recording)
To get detailed information on mobile device API, please check the online documentation.
Here are some useful links:
Now that you have got an idea about how to create mobile applications that can access device native functionality, a good way to move forward would be to take a look at what all APIs are available and build some awesome apps using that. Also, check the online documentation and blogs around building and packaging apps using Adobe ColdFusion Builder 3. It also offers ways to debug and troubleshoot your apps which will help you a lot to create more complex and amazing apps.
Share your feedback about this page or the Adobe Developer Connection in general by using Adobe forums