First Use Guide

Overview

svyPhonegap is a service to provide native mobile functionality from a Servoy application. This guide will help you integrate and build your first mobile app using the service.

Getting Started

Once you've gotten your main Servoy solution created, install the Phonegap Module. This is available under the Servoy Package Manager. Alternatively you can also download this module directly from our github repository.

Initialize the module

Select your main solution and hook up the onOpen event to a new scope method.

You can also hook up a callback method if you need access to native functionality as soon as the device is ready. Your code might look like below

function onSolutionOpen(arg, queryParams) {
//initialize phonegap module
scopes.phonegap.onSolutionOpen(arg,queryParams, onReadyCallback);

}	

function onReadyCallback(){
//device is ready, get information from a plugin
application.output(plugins.svyphonegapDevice.getDeviceInfo());
}

Integrating with your first plugin

In this example we will integrate with the phone's native camera application. To get started first build a new form and add a label and a button. The button will start the phone's camera app and the label will be used to preview the image captured.

Hook up the button to an onAction event.

/**
 * Hook up to a button or element with an onAction event to start the camera
 * @properties={typeid:24,uuid:"371DB1F8-16AE-456C-AA85-8B56FE80D280"}
 */
function onAction$takePicture() {
    plugins.svyphonegapCamera.getPicture(getPicSuccess, getPicFail, options);
}

Notice that we are using the plugins.svyphonegap to access the API for this specific integration. For more detail please review our reference guide here.

This specific API requires you to have options and callback functions hooked up. In the code below we specify options such as which camera source (front/back) to use and also the quality of the image.

var options = {
  quality: 50,
  destinationType: 0,
  sourceType: 1,
  correctOrientation: true
}

/**
 * Hook up to a button or element with an onAction event to start the camera
 * @properties={typeid:24,uuid:"8EEAFB0D-133F-4009-9C41-83B8A890D19B"}
 */
function onAction$takePicture() {
    plugins.svyphonegapCamera.getPicture(getPicSuccess, getPicFail, options);
}

/**
 * Callback when picture received successfully
 * @properties={typeid:24,uuid:"8EEAFB0D-133F-4009-9C41-83B8A890D19B"}
 */
function getPicFail(err) {
	//failed to get picture	
}

 /**
 * Callback when picture received successfully
 * @properties={typeid:24,uuid:"8EEAFB0D-133F-4009-9C41-83B8A890D19B"}
 */
function getPicSuccess(res) {
	//display the image.
	elements.contact_photo.imageURL = '';
	elements.contact_photo.text = '<img src="data:image/png;base64,' + res + '"/>'
}

After you've captured the image, we have a callback (getPicSuccess) that will update our specific label (contact_photo). Using some HTML markup and the base64 data (res) received from the camera, we can then show a preview of the image to the user.

Building a mobile binary

Once you are satisfied with the main solution and code. We will want to be able to export and run this app on a mobile device. First deploy the Servoy solution to a web server. Then follow the Building Native Binary guide.