IBM Worklight PhoneGap BarcodeScanner + QR Code Scanner

In this article we will learn how to integrate IBM Worklight 5.0.6 + PhoneGap BarcodeScanner functionality,Following steps are given.

Make sure downloading iOS/ChildBrowser
 download the ChildBrowser Plugins from https://github.com/phonegap/phonegap-plugins/tree/master/iOS/BarcodeScanner
 or
 download folder phonegap-plugins-master and locate
 phonegap-plugins-master\phonegap-plugins-master\iOS\BarcodeScanner(recommended).

1)Create Worklight Project + app like



2) In common/WLBarcodeApp.html add code
<button onclick="barcodeScan();">Barcode Scan</button>
 <div id="mydiv">
  
 </div>

3)In common/js/WLBarcodeApp.js add following function

function barcodeScan()

{
 $('#mydiv').html('');
 window.plugins.barcodeScanner.scan(
      function(result) {     
       $('#mydiv').html('Barcode: '+result.text);    
 });
}

  

4)After creation of  Worklight Project and application locate Project/apps/common and right click New Worklight Environment checked iPhone and finish.
From the downloaded files
a)Copy barcodescanner.js into common/js/
b)Copy 1)CDVBarcodeScanner.mm 2)scannerOverlay.xib 3)zxing-all-in-one.cpp 4)zxing-all-in-one.h into iPhone/native/Classes/ it will looks like

5)In IBM Worklight 5.0.6 version provide config.xml file, Located in  iPhone/native/config.xml add the following entries

<plugin>

<plugin name="BarcodeScanner" value="CDVBarcodeScanner" />
<plugin name="org.apache.cordova.barcodeScanner" value="CDVBarcodeScanner" />
</plugin>

After </plugin> head insert below code

<platform name="ios"> <plugins-plist key="BarcodeScanner" string="CDVBarcodeScanner" />  

       <resource-file src="scannerOverlay.xib" />
       <header-file src="zxing-all-in-one.h" />
        <source-file src="CDVBarcodeScanner.mm" />
         <source-file src="zxing-all-in-one.cpp" /> 
        <framework src="libiconv.dylib" />
         <framework src="AVFoundation.framework" />
        <framework src="AssetsLibrary.framework" />
        <framework src="CoreVideo.framework" />
</platform>.

6) Now its time to playing in xcode environment just right click the iPhone Generated environment and select run as Xcode project

7)After successfully imported Worklight project  in Xcode environment select the top of the project and select add to

select classes from window 1)CDVBarcodeScanner.mm 2)scannerOverlay.xib 3)zxing-all-in-one.cpp 4)zxing-all-in-one.h then press add button.

8.Another most important step is to add library files into project for this Select Project Targets Build Phases Link Binary with Libraris and locate + sign and add following four libraries one by one

AssetsLibrary.framework, AVFoundation.framework, CoreVideo.framework, libiconv.dylib.

Its time to run on device here are the screens that show the running

run time screen

Final Screen

Thank You,

Best Regards,

Sajjad Hussain

sajjad.hussainsa@gmail.com