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 ;

<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

Hiç yorum yok:

Yorum Gönder