23 Ağustos 2013 Cuma

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 ;



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();
// 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.
// if viewEnabled is true, viewImageAfterCapture provides to hide image when there is no source . After capturing image , image on page will be shown.


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