generic custom plugin for Windows 8 Phone can't find entry js object

Question

I need to create and install a custom, cordova plugin into a cordova-based Windows 8 phone app. At present, the button click handler in the app cannot see the js object which makes the call to cordova.exec

That object, with the function that calls cordova.exe is called dlScanner It has a function, scanBarcode which calls cordova.exec

The click handler is this:

        $(document).ready(function () {
        $('#cmdOne').click(function () {
            dlScanner.scanBarcode(
                function (results) {
                    alert(results);
            }), function (err) {
                    alert(err);
            }, 'lowercaseworld'
        });
    });

The error message is this:

        TypeError: Cannot read property 'scanBarcode' of undefined

Context: I used the Microsoft plugin generator, PluginGenerator, found here. Then I used the View Designer, on the app's config.xml file, in Visual Studio Community 2015, to install that plugin into the generic cordova Windows 8 phone app which VS had created for me earlier.

That plugin install process put this in the app's config.xml file

<vs:plugin name="com.contoso.dlScanner" version="0.1.0" src="C:\Users\TestAndDemo\dlScanner" />

In the dlScanner directory (referenced above) there are src and www directories and a plugin.xml file

In that plugin.xml file is this:

        <js-module src="www/dlScanner.js" name="dlScanner">
        <clobbers target="dlScanner" />
    </js-module>

    <!-- wp8 -->
    <platform name="wp8">
        <config-file target="config.xml" parent="/*">
            <feature name="dlScanner">
                <param name="wp-package" value="dlScanner"/>
            </feature>
        </config-file>

        <source-file src="src/wp/dlScanner.cs" />

The www/dlScanner.js file contains this:

            var dlScanner = {
            scanBarcode: function (successCallback, errorCallback, strInput) {
                cordova.exec(successCallback, errorCallback, "dlScanner", "scanBarcode", [strInput]);
            }
        }
module.exports = dlScanner;

What do I have to do to enable the click handler to see the dlScanner object?

Thanks

Bimonthly

I notice that in other Win8 cordova projects there is a www/cordova_plugins.js file which runs this: cordova.define('cordova/plugin_list', function(require, exports, module) { module.exports = [ my BlankApp that VS created does not have that. So I think I either need that file or I need to make my www/dlScanner.js file run. Both do module.exports Ideas? – Bimonthly

Answer 1

Try to call the plugin after Cordova has initialised and the deviceready event has been emitted. See more about this event here: http://docs.phonegap.com/en/3.5.0/cordova_events_events.md.html#deviceready.

Asia

I don't know what you mean by "call the plugin" I don't see or know of an initialization method for the plugin, just a click handler method. Please explain. – Bimonthly

Cordova plugins that expose native functionality to the JavaScript environment are not ready as early as the document is loaded. That is why when you try to access the methods exposed by the plugin you get that undefined error. Try to replicate the full example from the deviceready documentation. You should add your code after "// Now safe to use device APIs" line. – Asia

I was never getting to device functionality and this tip was not the solution. The deviceReady event did help me w another issue though. – Bimonthly

Answer 2

There were several problems:

The View Designer, auto-plugin-installer in VS never added a reference to the dlScanner.js file in my index.html file. So I had to move that file to the scripts directory and add this in index.html

<script src="scripts/index.js"></script>

That made cordova.exec run and my click handler started hitting the dlScanner code. Then I started getting this error

module is undefined

That told me (I think) that cordova was not ready when the module.exports line ran, so then I put the module.exports thing in onDeviceReady

function onLoad() {
 document.addEventListener("deviceready", onDeviceReady, false);
   }

function onDeviceReady() {
      module.exports = dlScanner;
  }

thanks @Vlad

Bimonthly