[Touchkit]: Phonegap, cordova not defined

General
1

We are testing Touchkit for a potential framework for our mobile application.

We managed to wrap it into phonegap just fine, it loads up as expected. But as soon as we call andy function on cordova, the ui blocks.

After further investigation it appears that cordova is not defined if called from the vaaind application.

We tried to use native javascript calls:

Page.getCurrent().getJavaScript().execute("alert('we have ' + window.cordova)")

And also inside teh Javascript component (based on the example of MyComponent from this Vaadin Book entry:


https://vaadin.com/book/-/page/gwt.javascript.html

And just added an alert to verify if cordova is available.

In both cases cordova appears to be unavailable, except inside the
vaadinMobile.js
 file.

So how is it possible to call a native phonegap plugin function if cordova is not available anywhere outside the vaadinMobile file?

Any help would be appreciated.

2

So you are using the TouchKit archetype? By default, it puts a the Vaadin application into an iframe, Cordova is not accessible inside the iframe. There are two options:

  1. Disable iframe (a parameter in index.html). Not sure which issues there might be, but apparently it was created to solve some problems with offline-mode.
  2. Use web messages to delegate PhongGap calls from and to iframe.

Some more info here:
https://vaadin.com/wiki/-/wiki/Main/Using+PhoneGap+Build+with+Vaadin+TouchKit

3

Thank you for your reply.

I tried the 1) option, but unfortunatley due to cordova changes this triggers infinite refreshing of the page. The vaadin team is aware of the issue and is working on a solution.

How exactly would 2) work? What I require to do is for example activate the Barcode scanner of cordova while the app is running.

If you could give me a simple example on how to call a cordova function on a button press it would be very helpfull!

4

There is an example in the article that I linked in the previous post. Messages to iframe:

function sendMessage(msg) { iframe.contentWindow.postMessage("cordova-" + msg, "*"); } Then you have to set a listener inside the iframe to listen to message events. You can also send messages to the main window.

$wnd.parent.postMessage(msg,'*'); It’s not complex, but requires some coding. Not optimal if you need to access a lot of phonegap’s functionality, but sometimes there’s no other choice.