Monday, 25 November 2013

Oracle APEX - Native Mobile Applications With Access to OS Functionality

A lot of you will have at some point created a mobile application using Oracle APEX. Like all APEX development it is intuitive and easy to produce working results. However, the applications sometimes fall short in terms of functionality compared to native mobile applications, which are able to easily access the phone's native operating system functionality.

To install your APEX applications natively on your mobile and gain access to your phone's features you can use PhoneGap, an application container technology that allows you to create natively-installed applications for mobile devices using HTML, CSS, and JavaScript. Its core engine is also 100% open source, under the Apache Cordova project.

PhoneGap provides an application programming interface (API) that enables you to access native operating system functionality using JavaScript. You build your application logic using JavaScript, and then its API handles communication with the native operating system. In short, it allows you to install your APEX application on your mobile and access functionality such as the camera, the contact book, the accelerometer and a range of other features which are listed here.

In order for an APEX application to be able to access these features there a few steps you must follow. By far the easiest method is to use build.phonegap.com, a cloud based service that allows you to quickly build mobile applications and easily compile them without SDKs, compilers or hardware.

Archive an Index.html file to a zip containing the following code:

<!DOCTYPE html>
<html>
  <head>
  <title>APEX DEMO</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no;" />
<meta charset="utf-8">
  </head>
  <body onload="window.location.href='http://apex.oracle.com/pls/apex/f?p=INSERT_APP_ALIAS_HERE';">
    </body>
</html>

After signing up for an account or logging in with your GitHub account you can then upload this file and it will build your application, injecting the necessary files in the process.

You then choose which platform you would like, we chose android. The app that has been created does nothing apart from open your APEX application in a "chrome-less" web browser window and bridge the gap between your phone's features and the web application you created in APEX.

Download the app in the relevant format (ie .apk) and then use your preferred software to unzip this file in order to retrieve its contents. Specifically you are looking for a file named "phonegap.js".  You will need to include this file in your APEX application.  Click here to see our guide to including JavaScript files in APEX.

We referenced the file in the JavaScript | File URLs field of our application's page template:


Before you can begin using PhoneGap to access features on your phone you must add an event listener for the "deviceready" event that fires when PhoneGap is ready. This is to avoid your application calling a PhoneGap function before the JavaScript has loaded. See the documentation for more information.

document.addEventListener("deviceready",onDeviceReady,false);

When PhoneGap is finished initialising, it calls the "onDeviceReady" function. This could be called anything you like and do anything you like. It is simply a callback function to handle the event, but it needs to be defined somewhere on your page or application i.e:

function onDeviceReady(){
     alert('Ready')
}

This will pop an alert up to let you know that it has initialised and you are now ready to safely make calls to PhoneGap function.

There is a lot you can do with PhoneGap and they are constantly updating their features and support for various devices. If you want to know what to do now that you have handled the "deviceready" event, you can browse through their API documentation which contains some very clear instructions for each feature.

1 comment:

  1. Pretty nice post. I just stumbled upon your blog and wished to say that I've really enjoyed surfing around your blog posts. After all I’ll be subscribing to your feed and I hope you write again very soon!
    Native Apps Development

    ReplyDelete