Jump to content
petermm

PhoneGap / Cordova: How to use PlugIns?

Recommended Posts

I was able to succesfully build an andoid APK from a simple SMS project, that doesn't use PhoneGap/Cordova plugins :)    

Now I have an application that is using file access (see http://forums.smartmobilestudio.com/index.php?/topic/4106-filewriter/) that I also want to deploy using phonegap/cordova. Cordova has an matching plugin called "cordova-plugin-file".

My config.xml file is:

<?xml version="1.0" encoding="UTF-8" ?>
    <widget xmlns   = "http://www.w3.org/ns/widgets"
        xmlns:gap   = "http://phonegap.com/ns/1.0"
        xmlns:android   = "http://schemas.android.com/apk/res/android"  
        id          = "de.sycon.MyPGTest"
        versionCode = "10" 
        version     = "0.0.1" >
    <!-- versionCode is optional and Android only -->
    <name>MyPGTest</name>
    <description>
        TEST PhoneGapAPI - File. 
    </description>
    <author  email="pmm@sycon.de">
        Peter MM 
    </author>
  <content src="index.html" />
  <plugin name="cordova-plugin-file" />
  <feature name="http://api.phonegap.com/1.0/device" />
</widget>

I’ve include the line:

{$R 'file:phonegap.js'}

to my project. PhoneGap build service accepts my project and builds an android APK successfully. However, if I try to install/run the app on an android device, the app crashes without further notice  :( 

Whats to do? Are there any example available showing how to use PhpneGap/Cordova PlugIn?

Share this post


Link to post
Share on other sites

It is possible to target the browser as platform. However it can not go beyond the security limits of a browser. So it might be of limited use.

 

In order to use Cordova you have to indeed link to the Cordova API. However, the cordova libraries are typically copied by Cordova itself. The code below should be satisfying to link the Cordova library (if present):

uses
  W3C.HTML5;

// load Cordova library asynchronous
var CordovaScript := JHTMLScriptElement(Document.createElement('script'));
CordovaScript.&type := 'text/javascript';
CordovaScript.async := true;
CordovaScript.src := 'cordova.js';
Document.body.appendChild(CordovaScript);
After you have checked the 'Generate Cordova config.xml' option in the Linker Options of your project you can already easily use Cordova directly.

 

The following commands are needed. Run them in a console in the root directory of your project:

npm i -g cordova
to install Cordova globally.

cordova add platform android
to add the Android platform

cordova build
to build your Cordova app.

 

Eventually you also need to add plugins to the project like this:

cordova plugins add cordova-plugin-file

Share this post


Link to post
Share on other sites

OK, tried to do so: 

cordova platfrom add android

gives the following error: 

Microsoft (R) Windows Script Host, Version 5.8
 Copyright (C) Microsoft Corporation 1996-2001. Alle Rechte vorbehalten.


 E:\DLSExtensions\DBExtensions\3Tier\WEB\TEST_FilePlugIn\www\cordova.js(1974, 1)
 Laufzeitfehler in Microsoft JScript: 'window' ist undefiniert

Questions: by " root directory of your project:" you mean the folder where the index.html is located or the .sproj one? 

Isn't what you descripe above that what the PhoneGap build service already has done? Inside my APK I can see the folder:

....\www\plugins\cordova-plugin-file\www\

with all the *.js files I would expect.

 

Share this post


Link to post
Share on other sites

Sorry, I didn't want to confuse you with my suggestions. Typically it's either to us PhoneGap (which is based on Cordova, but made simple) or Cordova directly. The latter is a bit more down to the metal as opposed to PhoneGap.

 

One advantage of Cordova over the PhoneGap build service is the fact that you can run it locally on your machine (PhoneGap itself will run locally as well, but still might access to the cloud). This makes working with Cordova potentially faster and more independent.

 

This said, both are more or less controlled by the same config.xml, which should reside in the same directory of the .sproj file (after you have enabled to generate that file, if missing).

 

Judging from the error, it seems that either Cordova or Node.js might not be available in the latest version or might have not setup properly, so maybe the PhoneGap build service is a better alternative here. It's just that I'm not experienced with it, so I might not help further in this regards.

 

Either way, I would recommend to remove the {$R cordova.js} and the library from the www folder. It will be added by Cordova / PhoneGap at the build stage. What needs to remain however is the link to the file (even if it's not present). The above (async) snippet might cause a warning if the loading fails, but should also work fine in the browser. If the file is present however, it will load the library and fire the 'deviceready' event.

Share this post


Link to post
Share on other sites
Txs for your suggestions and for your patients Christian. :)  I hope someone else will benefit from that as well.
 
I’ll look if my nodes/cordova is up to date later on, but since I’ve done a fresh install (following your suggestions) yesterday, I think it is.
If removed cordova.js/phonegap.js from my project and the {$R cordova.js} line as well. (BTW: what do yo mean by “What needs to remain however is the link to the file…” Where should that link be?)
 
I was able to run your code “load Cordova library asynchronous” in the SMS internal browser / chrome browser with activated developer tools.
Result:
 
Console output shows “Serving file [pathtofile\www\cordova.js]
a pop up message window showing “gap_init:2” – click OK leads to:
Serving file [….] messages for lots of cordova plugin files
a pop up messages:
gap:[null,"CoreAndroid","messageChannel","CoreAndroid1795065768"]
gap:[null,"CoreAndroid","show","CoreAndroid1795065769"]
gap:[null,"File","requestAllPaths","File1795065770"]
and then a loop of:
Error in line #1081 cordova.js    
that is:  
console.log("processMessage failed: invalid message: " + JSON.stringify(message)); 

with an empty message that crashes the browser..

 
Do you have minimalistic running example so I can compare what I’ve got to what it should look like?
 
Edited:
What I did'nt know was, that the cordova.js is streamlined for the target platform and since mine was coming from the PhoneGapBuilder android APK was an android only one. Tried the one coming from the PGB windows XAP package and the strange messages mentioned above are gone :)

Share this post


Link to post
Share on other sites

That's what I meant. The Cordova.js file is nothing you have to take care for (hence the need to remove the {$R ..} line).

 

You only need to have a link in your HTML file or script that link in with the snippet I posted earlier. In my case I have added this somewhere in the .spr file.

Share this post


Link to post
Share on other sites

Do you have minimalistic running example so I can compare what I’ve got to what it should look like?

Not for PhoneGap. However, I can send you a file for Cordova though (I have no permissions to attach it to this post).

 

Also you might want to read more here.

Share this post


Link to post
Share on other sites

However, I can send you a file for Cordova though..

Very kind. You can reach my by: pmm (at) sycon dot de

 

With asynchrounus load (as you suggested) the android version (created with PhongGap-Builder) no works fine.  :)

However I had to add:

  <plugin name="cordova-plugin-blob-constructor-polyfill" /> 

to my config.xml to make 

 asm
   aBlob = new Blob(["some text"], {type: "text/plain"});
 end;

work. 

 

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×