Include Ionic Keyboard Plugin in MobileFirst

Question

I am trying to include the Ionic Keyboard plugin in my application. I went through a few posts on Stack Overflow and as per Idan in one of the answers he has suggested to add the Ionic Keyboard Plugin Classes directly into the IBM MobileFirst Platform Foundation 6.3 project, like we do while adding plugins.

Has anyone done that yet? I tried doing it once but it didn't work.

Things I did:

1. Added the class files IonicKeyboard.h, IonicKeyboard.m, UIWebViewExtension.h and UIWebViewExtension.m files to the classes folder.

2. Added the following entry to my config.xml file in iOS environment.

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

3. Tried using the class hide-on-keyboard-show.

   <div class="hide-on-keyboard-open">
       <div id="google-map"></div>
   </div>
   

But it didn't work so I am assuming that the keyboard plug-in has not worked correctly.

Answer 1

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/

Answer 2

The only way I could do this was by using the solution given by Chris in the question. Link attached. (Its a hack in a way) Add custom cordova plugin to IBM Worklight 6.1.

But there is a severe drawback to this solution. It overwrites the cordova_plugins.js file and plugins folder everytime the mfp build happens.