Vaadin-Phonegap Integration

Previous week, I was scretching phonegap then I thought that instead of using pure html and js I can use phonegap within Vaadin .

After that idea enlightment, I found myself developing Phonegap Components for  Vaadin.  Finally phonegap camera component revealed.

Phonegap  camera component can be downloaded from here . (But you need to download phonegap-0.0.1.jar from the same site).

Or you can define dependency in Maven ;

<dependency>

   <groupId>com.devside</groupId>

   <artifactId>phonegap-camera</artifactId>

   <version>0.0.1</version>

</dependency>

<repository>

   <id>vaadin-addons</id>

   <url>http://maven.vaadin.com/vaadin-addons</url>

</repository>

Or Ivy ;

<dependency org="com.devside" name="phonegap-camera" rev="0.0.1" />

<ibiblio name="vaadin-addons" usepoms="true" m2compatible="true" root="http://maven.vaadin.com/vaadin-addons" />

After retrieving dependency , you can start development.First create a phonegap project.

You should add your site's url to whitelist on phonegap project.You can find detailed  information from here.

Now rest of work is on Vaadin side. Create a Vaadin 7 project. 

package com.devside.vaadin.example;

import com.vaadin.ui.CustomLayout;

import com.devside.vaadin.addon.pgcamera.PhonegapCamera;

import com.devside.vaadin.addon.phonegap.Phonegap;

import com.vaadin.ui.Button;

import com.vaadin.ui.Button.ClickEvent;

import com.vaadin.ui.TextField;

import com.vaadin.ui.UI;

public class CamPage extends CustomLayout {

public CamPage() {

// the Phonegap component should be added in order to include phonegap basic js libraries.

addComponent(new Phonegap(true));

PhonegapCamera camera = new PhonegapCamera();

camera.getCameraState().setButtonStyle("width:100%");

camera.getCameraState().setImageStyle("width:95%;");

// if you want to view the captured image on page this should be true. But some can only get base64 value of image in PictureCaptureListener.

camera.getCameraState().setViewEnabled(true);

// if viewEnabled is true, viewImageAfterCapture provides to hide image when there is no source . After capturing image , image on page will be shown.

camera.getCameraState().setViewImageAfterCapture(true);

addComponent(camera);

}

}

if you open this url (that include layout above) you will see "Capture Photo" button. If you click it ,  camera will be activated.

There is one PictureCapturedListener , it invoked when a photo is taken so you get base64 image data