Add Custom Cordova Plugin to Ibm Worklight 6.1

Add custom cordova plugin to IBM Worklight 6.1

Worklight 6.1.0.x does not yet support adding pre-made Cordova 3.x plug-ins using plugman or any other procedure you would do in a pure Cordova application, including trying to edit the file you're trying to edit. This is a known limitation in current versions of Worklight.

What I would do is read the training material of creating Cordova plug-ins in Worklight, and then take the source of the plug-in you want to add and copy it over.

There are probably other ways to do it, but none is convenient at this time.

Worklight 6.1 and Cordova 3 plugins

There is currently no built-in support for pre-existing Cordova 3 plug-ins.

The way around it until proper plugman-like support is added, is to create a new Cordova plug-in by following the instructions in the Worklight Getting Started training materials and copying over the logic of the plug-in into yours.

Related question:

• Add custom cordova plugin to IBM Worklight 6.1

IBM Worklight 6.1 - Unable to play a local media file using Cordova

The sample code provided at Cordova's website works, however it looks like the URL they point to is broken. I've replaced it with another and then it worked.

As for playing a local media file, you need to provide the full path to the media file's location where it'll be in the generated Android project. For example, if you create a common\audio folder in the Worklight application and place a .mp3 file in it, you need to use the following path (in the HTML or JavaScript, or however you'd like...):

<a href="#" onclick="playAudio('/android_asset/www/default/audio/myMediaFile.mp3');">Play Audio</a>

This is because in Worklight, every application is considered a "skin". There is the "default" skin, and if you add another, it will have its own folder in the www folder.

Sample project: Android Cordova Media API

---

P.S., I do not find it a good practice to copy-paste an example as-is from Cordova to a Worklight project.

• There is no cordova.js to link to.
• It is redundant to listen to deviceready as this is handled internally. Putting it this way: if you've reached wlCommonInit(), you're good to go.
• There is no need to add extra permissions, unless you want what those permissions offer...

IBM Worklight 6.1 - Questions about upgrading Cordova in a project

How the auto-upgrade is carried out in worklight?

After you install/upgrade to a new Worklight Studio version in Eclipse, if you have existing Worklight project already in the workspace then Worklight utilizes internal, custom-written, upgraders to check for the project version and will replace all old files (not just Cordova, but also other Worklight framework files) with new files.

How do I know whether my Cordova library is updated?

For the iPhone environment, for example, there is a version file:
yourProject\apps\yourApp\iphone\native\CordovaLib\version

But not all environments have this file so IMO the easiest way would be to use the device.cordova API method:

1. Put the following code snippet in your common\js\main.js > wlCommonInit() function.
2. Build & deploy the project

3. Preview the desired environment in Worklight Console or in a device or simulator/emulator, doesn't matter. You will see an alert with the used Cordova version:

   alert ("Used Cordova version is: " + device.cordova);
   

If the update is not carried automatically how to manually update it?

• You cannot yet manually change the used Cordova version in a Worklight application. Again, the upgrade process of a Worklight project is more than just replacing the used Cordova version in the application
  

• If that happens there will be errors involves. Lets tackle these if and when you'll encounter any issues...

IBM Mobilefirst foundation 6.3 - Image caching solution

Cordova CLI is not supported at this time, so there is no easy way to integrate existing Cordova plug-ins. However there are many questions on this same issue with procedures to follow.

Another thing you can use is IBM MobileFirst Platform JSONStore - encode the image to base64 and then save that data in the store. When you need it, decode the string and use it where required.

Include Ionic Keyboard Plugin in MobileFirst

In order to add IonicKeyboard to MobileFirst 6.3 (in a supported manner), follow the instructions in the documentation:

1. Declare the plug-in in the config.xml file.

   <feature name="Keyboard">
       <param name="ios-package" onload="true" value="IonicKeyboard"/>
   </feature>
   

2. Use the cordova.exec() API in the JavaScript code.

   // added the cordova plugin definition in wlCommonInit(), as recommended by other answers I read (can't remember where),
   // because the cordova event `deviceready` is fired and handled internally by MobileFirst
   function wlCommonInit() {
   
     // copied module id from https://github.com/driftyco/ionic-plugin-keyboard/blob/master/plugin.xml
     cordova.define("com.ionic.keyboard.keyboard", function(require, exports, module) { 
       // copied code from https://github.com/driftyco/ionic-plugin-keyboard/blob/master/www/keyboard.js
       var argscheck = require('cordova/argscheck'),
         utils = require('cordova/utils'),
         exec = require('cordova/exec');
   
       var Keyboard = function() {
       };
   
       Keyboard.hideKeyboardAccessoryBar = function(hide) {
         exec(null, null, "Keyboard", "hideKeyboardAccessoryBar", [hide]);
       };
   
       Keyboard.close = function() {   
         exec(null, null, "Keyboard", "close", []);
       };
   
       Keyboard.show = function() {
         exec(null, null, "Keyboard", "show", []);
       };
   
       Keyboard.disableScroll = function(disable) {
         exec(null, null, "Keyboard", "disableScroll", [disable]);
       };
   
       /*
       Keyboard.styleDark = function(dark) {
         exec(null, null, "Keyboard", "styleDark", [dark]);
       };
       */
   
       Keyboard.isVisible = false;
   
       module.exports = Keyboard;
     });
     // Manually-register custom plugin
     if (window.cordova && !window.cordova.plugins) {
       window.cordova.plugins = {};
     }
     // Do this instead of `clobbers` definition in native/www/default/worklight/cordova_plugins.js
     window.cordova.plugins.Keyboard = cordova.require('com.ionic.keyboard.keyboard');
   
   }
   

3. Create the plug-in class that will run natively in iOS.
   The plug-in performs the required action and calls a JavaScript callback method that is specified during the call to cordova.exec().

   1. Copy the files found in https://github.com/driftyco/ionic-plugin-keyboard/tree/master/src/ios
      
      
      • IonicKeyboard.h
      • IonicKeyboard.m
      • UIWebViewExtension.h
      • UIWebViewExtension.m
   2. Place them into the directory YourProject/apps/yourAppName/iphone/native/Classes/

From where is the worklight folder inside the wlapp file copied from when we perform a Mobilefirst build?

These files are used during build-time by the Worklight Build Engine. They are located in the TMPDIR of your OS. Since you're using OS X you can open Terminal and run the command open $TMPDIR/wlBuildResources (> your-WL-version\jslibexpanded).

I am guessing you are asking this because you are thinking of altering these files pre-build time? You must not do that as it may generate a faulty application (it does not go only to the wlapp file but also to the generated native project of any mobile environment you may have added to your application).

These resources are also deleted and re-created on each launch of Eclipse (with Worklight Studio installed).

This will of course also void any support requests.

Since this is probably related to your other question about using the Ionic Keyboard Cordova plug-in, note that in the upcoming MobileFirst Platform Foundation 7.1 there is Cordova application support, enabling you to create either an iOS or Android application with MPF as a plug-in like any other, thus you can also leverage any Cordova plug-in that you would like. More on this, soon, once 7.1 is released.

---

Related Topics