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=”http://schemas.android.com/tools” tools:ignore=”MissingTranslation”>

Folow the instructions in

https://github.com/phonegap/phonegap-plugins/blob/master/Android/BarcodeScanner/README.md

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();

            try{

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

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

                  }, function(error) {

                        alert(“Scanning failed: “ + error);

                  }

                  );

            }catch(err){

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

            }

      }

}

————————-

Running

That’s all folks!