Using Cordova plugins in Worklight: Native barcode scanning for iOS
timdp 2000003V97 Comments (14) Visits (32025)
Worklight allows us to create hybrid apps, using modern web technology to create most of our UI elements and logic, whilst still offering the ability to drop down to native code for either UI or logic when necessary. One easy way of stepping down to native code is by using Cordova plugins. In this walkthough, you'll create a Worklight application which can scan barcodes using the camera on an iOS device.
This post was written against Worklight Studio 5.0.5 and Xcode 4.5.2 on OSX 10.8.2.
If you're using Worklight Studio 6, please check the comments at the bottom of the article.
Step 1: Create your Worklight project, add some UI and behaviour
Grab a barcode icon, and pop it into your common/images folder. Drag it onto the page, and then give it an id of scanButton using the Properties > All view. Also add a RoundRectList widget and give it an id of scanList:
If you've followed the above, your HTML should now look like this:
Here's my resulting BarcodeScanner.js file:
Step 2: Add an iOS environment and the Cordova plugin
In this step, you will add an iOS environment to your Worklight project, and then add the files and configuration required to use the barcode scanner plugin. Start by adding an environment (I chose iPhone):
Now you need to update the Cordova configuration so make the plugin available. Open the Cordova.plist file in <iOS envi
Step 3: Configure the Xcode project
In this step, you will modify the Xcode project created by Worklight so that it includes the required libraries. Start by right-clicking <iOS environment> and then Open as Xcode project:
Once you've added them all, you should have:
. From the pop-up select overlayView:
Next, we need to connect the cancel button to the correct IBAction method in the backing class. Drag the Sent actions selector circle onto File's Owner, and select cancelButtonPressed from the pop-up.
Now that everything is correctly wired, you can add a new Image View object and configure it to use your overlay image:
HTTP Adapter to integrate with a backend service? I have a lot of records on vinyl, so I might try hooking into discogs.com.
With thanks to Sean Bedford (@bedfordsean) for his help with the above, particularly Xcode.