Skip to Content

Adding some Phonegap Plugin in the Workflow (HWC)

Hi Fellows,

I’ve faced an issue quite interesting regarding Phonegap and Hybrid Web Container. It’s pretty cool to see that there are some adapted js code working with HWC engine. But the main point is ‘There is no available js to work into the HWC when we think about phonegap special plugins’. For exemple:

    • ActionBarSherlockTabBar  
    • Analytics
    • AppBlad        
    • AppPreferences
    • Asset2SD
    • AugmentedReality-Wikitude
    • BackgroundService
    • BarcodeScanner
    • Biblesearch
    • Bluetooth
    • BluetoothPlugin
    • CalendarPlugin
    • ChildBrowser
    • ClipboardManager
    • ContactView
    • DatePicker
    • Diagnostic
    • Downloader
    • EmailComposerWithAttachments
    • ExtractZipFile
    • FacebookConnect
    • FileUploader
    • ForegroundCamera
    • ForegroundGallery
    • FtpClient
    • GPSDetector
    • Globalization
    • HeadsetWatcher
    • Hmac 
    • HttpRequest
    • InAppBilling
    • Instagram
    • LocalNotification
    • LowLatencyAudio
    • MacAddress
    • NFC    
    • OcrApiService
    • PayPalPlugin
    • PhoneListener
    • PowerManagement
    • RemoteSound
    • Resources
    • SMS inbox_sent access       
    • SMSPlugin
    • SMSPluginForCordovaVersion3.2
    • Screenshot
    • Share 
    • ShopGap
    • SoftKeyboard
    • SpeechRecognizer
    • StatusBarNotification         
    • TTS     
    • Torch 
    • Twitter          
    • VideoPlayer
    • WACNapiPaymentPlugin
    • WaitingDialog
    • WebIntent
    • WikitudeCamera
    • YouTube Player API
    • ZeroConf

More and more can come up next.

After reading this post you’ll be able to add in your hybrid app every plugin you need. Ok let’s go!

Our example was developed using the platforms below:

  • Android 2.3.3
  • Phonegap – If you are using PhoneGap 1.5.0 to 1.8.1 please use the 1.8.1 directory. If you are using PhoneGap 2.0.0 to 2.1.0 please use the 2.0.0 directory. If you are using PhoneGap 2.2.0 or greater please use the 2.2.0 directory.
  • SUP 2.2
  • Eclipse Helios

First of all we must recompile the source code of standard HWC having some settings. In this case we’ll add the Scanner plugin.

You can find the source code of the HWC browsing

<UnwiredPlatform_InstallDir>\UnwiredPlatform\MobileSDK<version>\HybridApp\Containers\Android\, and select Android_HWC_<version>.zip.


Now you can import this android project into the eclipse IDE. And then you’ll see something like this:


If you have some problems with language, please edit XML file res/values/strings.xml

<resources xmlns:tools=”” tools:ignore=”MissingTranslation”>

Folow the instructions in

After all the steps above export your app to APK file. If you have some trouble with  gen key, go to the JAVA_HOME/bin and try the command line like that:

keytool -genkey -v -keystore <keyname>.keystore -alias <appname> -keyalg RSA -keysize 2048 -validity 10000

When if you need to debug? Don’t forget to remove the app from your device before debuging. 😉 Otherwise some conflicts about gen key may bother you during this process.

Ok, now you’ve just got your own brand new HWC with Scanner plugin available to use! The next step is to create a new Project in SUP and then choose for ‘Generate Hybrid App API’.

Depending on what kind of change you want to do, some js changes must be done in ‘Generated Hybrid App’ folder but in our case, we just need to add the barcodescanner.js into the /html/js folder.


Now you are able to create a menu item in the Screen Design and set its type as ‘Custom’. So, you add this code in Custom.js:


//Use this method to add custom code after a menu item has been clicked and the default behavior

//has been executed.

function customAfterMenuItemClick(screen, menuItem) {

      if (screen === “<your screen name>” && menuItem === “<your menu item name>”) {

            alert(“Read 1D or 2D code”);

            window.barcodeScanner = new BarcodeScanner();


                  window.plugins.barcodeScanner.scan( function(result) {

                        document.getElementById(“<text field name>”).value = result.text;

                  }, function(error) {

                        alert(“Scanning failed: “ + error);




                  alert( + “\n” + err.message);







That’s all folks!

You must be Logged on to comment or reply to a post.
  • Hi Vagner Cardoso,

    Could you please share your code for the scanner app which you did for HWC , i stuck in the step

    1. Add the ‘LibraryProject’ into Eclipse. File -> New Android Project -> create project from existing source.
    2. In the new project you’ve just added to Eclipse go to the project properties. Select the Android section and at the bottom of the dialog check the “Is Library” checkbox.

    if you have any detailed document please share the same as well

    thanks in advance for your help

      • Hi Vagner Cardoso,

        i have done all the steps but my code is not able to execute

        window.barcodeScanner = new BarcodeScanner();

        it execute the alert on click of scan menu item

        alert(“Read 1D or 2D code”);

        after that no result, any idea on this i am using SUP 2.2.

        Thanks, prem

        • Hello Prem,

          Some questions:

          1 – Have you already installed the new Hybrid Web Container that you’ve just add the phonegap plugin?

          2 – Are you sure about the references libraries?

          3 – Using try{}catch(e){} in you js code is good way to catch some weird errors. Have you tried?

          4 – Have you copied the barcodescanner.js to your SUP project?


    • Even I am stuck in the same line,

      • Add the ‘LibraryProject’ into Eclipse. File -> New Android Project -> create project from existing source.
      • In the new project you’ve just added to Eclipse go to the project properties. Select the Android section and at the bottom of the dialog check the “Is Library” checkbox

      Can you please explain me from where we can get library project?

      Thanks in advance

      • Folks,

        Has anyone been successful with barcode scanner ? I am unable to follow from github instructions.

        If anyone is successful, can you please share the details. I am using SUP 2.2.

        – Suraj

  • Hi Mr. Vagner,

    i am using SUP 2.2.

    I am also getting alert(“Read 1D or 2D code”) further nothing was happening,afterward i placed try catch in custom.js like

            alert(“Read 1D or 2D code”); 

            try {

            window.barcodeScanner = new BarcodeScanner();


                window.plugins.barcodeScanner.scan(function(result) {

                    document.getElementById(“Doc_Num”).value = result.text;

                }, function(error) {

                    alert(“Scanning failed: ” + error);


            } catch (err) {

                alert( + “\n” + err.message);


    then i am getting  one Alert : TypeError Cannot read property ‘barcodeScanner’ of undefined

    this seems a reference issue.

    I have copied the barcodescanner.js in folder asset/www and in generated workflow/html/js too. also placed as per your screenshots.

    now i have no clue how to make reference to barcodescanner.js

    Please help me out.

    Syed Ashkar Rizvi