Geertjan's Blog
- May 10, 2016
Plugging into Devices with Oracle JET on Cordova (Part 1)
In a previous blog entry, I discussed how to create AngularJS applications that access the native resources on devices, such as the camera on Android, via Cordova. Let's now do the same thing with an Oracle JET application. Start by using Yeoman to scaffold your hybrid (i.e. Cordova-based) Oracle JET application. Now you're good to go with the instructions that follow.
Take the following steps:
- In the "hybrid" folder in your application, you'll find a file named "config.xml", which is the central configuration file for all your Cordova-related work. Underneath the Cordova Whitelist plugin, add the Cordova Camera plugin, as shown below:
<content src="index.html" />
Then build the application, as shown in the earlier YouTube clip on this topic, i.e., "grunt build --platform android" and you'll find the "cordova-plugin-camera" folder has been added for you:
<plugin name="cordova-plugin-whitelist" spec="1" />
<plugin name="cordova-plugin-camera" spec="1" />
<access origin="*" />
- Open the "incidents.html" file, which is in "src/js/views", and add a button that has its "click" event bound to a function named "takePicture":
<button data-bind="click: takePicture">Take Picture!</button>
- Open the "incidents.js" file, which is in "src/js/viewModels", and add the function that you referenced in your HTML file, making use of the Cordova Camera API:
self.takePicture = function () {
navigator.camera.getPicture(
function (imageURI) {
//to be done
},
function (err) {
//to be done
},
{
quality: 50,
destinationType: Camera.DestinationType.FILE_URI
}
);
};
When you serve up the application to the device, using "serve --platform=android --destination=device", you'll be able to click the button and start the camera. After you take a picture, nothing happens, though that's the point of this blog entry—simply to show you how to connect to a resource on a device, subsequent blog entries will show subsequent steps.
Remember that Oracle JET uses Cordovoa right off the shelf without any modifications or wrappers. So if you wanted to use Cordova commands to look up the name for a specific plugin for instance, you can type on the command line:
cordova plugin search <some name like: contact>
and Cordova will open your browser with the results of that search. You can then follow the process that Geertjan describes, or do the normal:
cordova plugin add <plugin name>