Touchkit + PhoneGap Plugins

Flow
1

Hello.
I have problem with integration
BarcodeScanner PhoneGap plugin
 into Vaadin Touchkit application. I need to get scanned code into Vaadin logic from this plugin. Is it possible and how?

PS:
Here is example of implementation
 but only with html. I don’t know how implement the same function in Vaadin.

2

The correct way to implement this would be to create a custom client side widget with GWT. In this particular case, it might be easier to just create a JS widget, though… See the Book of Vaadin for details:
https://vaadin.com/book/vaadin7/-/page/gwt.javascript.html
, ‘Defining a JavaScript Connector’.

The idea in both approaches is that you need to create the server-side component (or extension) class, as well as the interfaces for sending the result back to the server when a code has been scanned. Then you need a Connector (either GWT or JavaScript), that runs on the client and connects to the PhoneGap API.

I’d say that it is definitely doable, but it will require some deeper knowledge of Vaadin components and communication mechanisms. And, of course, the phonegap/barcode APIs. Don’t be alarmed though, those are not particularly difficult :slight_smile:

3

I tried to do this, but the javascript connector has not access to corodova (“window.cordova” is undefined).

How can I access cordova and its plugins outside the index.html file?

4

Do you found a solution for your problem, because i have the same problem.

5

I solved the problem for me.

I added server-side a javascript function like “getScannedValue(scanvalue)”. This function now would be called by my client-side plugin, so the server get’s the new scanned barcode.
It worked very well.
For barcode-scanning we use the best, but commercial plugin, scandit.

6

Can you please share the actual code, process the way you achieved the barcode scanning

7

Hello Niranjan,

i solved my problem like this:
i have a JavaScript-Callback Method in my UI:

public void addMessagingForCordova() { logger.log( Level.INFO, "MobileUI.addMessagingForCordova" ); // Informiere Vaadin über einen neuen Scan // JavaScript.getCurrent().addFunction( "de.itavero.sendMessageCordovaToVaadin", new JavaScriptFunction() { @Override public void call( JsonArray arguments ) { if( getScanValueReceiverList() != null ) { for( int i = 0; i < (scanValueReceiverList.size()); i++ ) { scanValueReceiverList.get( i ).receiveScanValue( arguments.getString( 0 ) ); } } } } ); }

/*And this method would be called by my Cordova Framework (a simple javascript call)
My Scan-Lib calls the success-Method and then i call the sendMessageCordovaToVaadin-Method with the barcode.
*/


 <script type="text/javascript">
            // On Windows, the alert function doesn't exist, so we add it.
            window.alert = window.alert !== undefined ? window.alert : function (message) {
                var alertBox = new Windows.UI.Popups.MessageDialog(message);
                alertBox.showAsync();
            };
            function success(session) {

                var scanwert = document.getElementById("scanwert");
                //scanwert.innerHTML  = session.newlyRecognizedCodes[0]
.data;
                // Nachricht an IFrame (Vaadin)
                var iframe = document.getElementById('app');
                //iframe.style.border="none";
                sendMessageCordovaToVaadin(session.newlyRecognizedCodes[0]
.data);


                //sendMessage("SCAN");
                //                alert("Scanned " + session.newlyRecognizedCodes[0]
.symbology
                //                        + " code: " + session.newlyRecognizedCodes[0]
.data);
            }
            function sendMessageCordovaToVaadin(message) {
                var iframe = document.getElementById('app');
                // Diese JS-Funktion wird mittels Cordova dynamisch zum Client übermittelt
                iframe.contentWindow.de.itavero.sendMessageCordovaToVaadin(message);
            }