Using Cordova Plugins: Difference between revisions
(Created page with "This Technote explains how to use the PhoneGap API from NS Basic/App Studio programs. PhoneGap provides some function calls which are not available from NS Basic/App Studio. H...") |
No edit summary |
||
Line 19: | Line 19: | ||
<script src="phonegap.js"></script> | <script src="phonegap.js"></script> | ||
If you are using PhoneGap API, you also need to download the latest version of PhoneGap, rename phonegap-1.x.x.js to phonegap.js and put it in your project folder. | If you are using PhoneGap API, you also need to download the latest version of PhoneGap, rename phonegap-1.x.x.js to phonegap.js and put it in your project folder. | ||
Device Information | |||
=== Device Information === | |||
PhoneGap adds a new runtime object called device which holds useful information about the device. The elements of it are: | PhoneGap adds a new runtime object called device which holds useful information about the device. The elements of it are: | ||
Line 41: | Line 42: | ||
Here is some sample code: | Here is some sample code: | ||
<pre> | |||
Function butGetInfo_onclick() | Function butGetInfo_onclick() | ||
s="Device Name:" & device.name & vbCRLF | s="Device Name:" & device.name & vbCRLF | ||
Line 49: | Line 51: | ||
Textarea1.value=s | Textarea1.value=s | ||
End Function | End Function | ||
</pre> | |||
PhoneGap has additional documentation here. Be sure to read what quirks each device has. | PhoneGap has additional documentation here. Be sure to read what quirks each device has. | ||
Camera | |||
=== Camera === | |||
The Camera API will return a picture from the camera, the photolibrary, or a saved photo album. It can return the picture as a file URI or as a base64 encoded string. | The Camera API will return a picture from the camera, the photolibrary, or a saved photo album. It can return the picture as a file URI or as a base64 encoded string. | ||
Line 70: | Line 74: | ||
You will also need to define a function to be called when the operation is complete, as well as a function in case the call fails. In the following sample, we set up the options, then call navigator.camera.getPicture. Following that, we have the functions for successful and unsuccessful returns. | You will also need to define a function to be called when the operation is complete, as well as a function in case the call fails. In the following sample, we set up the options, then call navigator.camera.getPicture. Following that, we have the functions for successful and unsuccessful returns. | ||
<pre> | |||
Function butTakePicture_onclick() | Function butTakePicture_onclick() | ||
options={quality : 75, _ | options={quality : 75, _ | ||
Line 85: | Line 90: | ||
MsgBox "Failed because " & message | MsgBox "Failed because " & message | ||
End Function | End Function | ||
</pre> | |||
PhoneGap has additional documentation here. Be sure to read what quirks each device has. | PhoneGap has additional documentation here. Be sure to read what quirks each device has. | ||
Contacts | |||
=== Contacts === | |||
With PhoneGap, you can find or create contacts. This sample will look up everyone in the Contacts list named "Bob". | With PhoneGap, you can find or create contacts. This sample will look up everyone in the Contacts list named "Bob". | ||
Line 94: | Line 101: | ||
The call to .find will return an array with 1 element for each name that matched. You can see how many matches there were in contacts.length. Here is how the code looks: | The call to .find will return an array with 1 element for each name that matched. You can see how many matches there were in contacts.length. Here is how the code looks: | ||
<pre> | |||
Function butContacts_onclick() | Function butContacts_onclick() | ||
options = new ContactFindOptions() | options = new ContactFindOptions() | ||
Line 114: | Line 121: | ||
MsgBox "Failed because " & message | MsgBox "Failed because " & message | ||
End Function | End Function | ||
</pre> | |||
PhoneGap has additional documentation here. Be sure to read what quirks each device has. | PhoneGap has additional documentation here. Be sure to read what quirks each device has. | ||
Plug Ins | |||
=== Plug Ins === | |||
PhoneGap is designed so third party plugins can be added which add additional API functions. These can be called from NS Basic/App Studio. Use Google to find what is available. Let us know which ones work for you so we can make a list of them here. | PhoneGap is designed so third party plugins can be added which add additional API functions. These can be called from NS Basic/App Studio. Use Google to find what is available. Let us know which ones work for you so we can make a list of them here. |
Revision as of 21:25, 9 November 2012
This Technote explains how to use the PhoneGap API from NS Basic/App Studio programs. PhoneGap provides some function calls which are not available from NS Basic/App Studio. Here are some of the functions which can be done with PhoneGap. The full list is here.
Depending on platform, these can include:
Camera Compass Contacts Device Information Files The easiest way to compile your app using PhoneGap is to use the Build Native App on the Run menu. For more information on installing and compiling with PhoneGap, see these two tutorials:
Using PhoneGap to create an iOS App Using PhoneGap to create an Android .apk App In the Technote, we'll look at sample code for 3 of these areas. That should be enough to get you started on the others. You can only do limited testing on the desktop for these API functions, since they are are not available on the deaktop. Use "Start in Desktop Browser" to check the layout of your form, but do not expect any of the PhoneGap API functions to work.
If you are using the PhoneGap, add this line to your project's extraheaders property.
<script src="phonegap.js"></script>
If you are using PhoneGap API, you also need to download the latest version of PhoneGap, rename phonegap-1.x.x.js to phonegap.js and put it in your project folder.
Device Information
PhoneGap adds a new runtime object called device which holds useful information about the device. The elements of it are:
device.name | The name of the device, i.e. "Bob's iPhone". |
device.phonegap | The version of PhoneGap. |
device.platform | The type of device, i.e. "iPhone" |
device.uuid | The unique number of the device. |
device.Version | The version of the OS that is running. |
Here is some sample code:
Function butGetInfo_onclick() s="Device Name:" & device.name & vbCRLF s=s & "PhoneGap Version:" & device.cordova & vbCRLF s=s & "Platform:" & device.platform & vbCRLF s=s & "UUID:" & device.uuid & vbCRLF s=s & "OS Version:" & device.version Textarea1.value=s End Function
PhoneGap has additional documentation here. Be sure to read what quirks each device has.
Camera
The Camera API will return a picture from the camera, the photolibrary, or a saved photo album. It can return the picture as a file URI or as a base64 encoded string. Start by setting the options:
quality | Integer from 0 to 100. |
destinationType | 0: base64 encoded string, 1: file URI |
sourceType | 0: Photo Library, 1: camera, 2: Photo Album |
allowEdit | Allow simple editing. true or false. |
You will also need to define a function to be called when the operation is complete, as well as a function in case the call fails. In the following sample, we set up the options, then call navigator.camera.getPicture. Following that, we have the functions for successful and unsuccessful returns.
Function butTakePicture_onclick() options={quality : 75, _ destinationType : 1, _ sourceType : 1, _ allowEdit: true} navigator.camera.getPicture(onPictureReturned, onPictureError, options) End Function Function onPictureReturned(ImageURI) Image1.firstChild.src=ImageURI End Function Function onPictureError(message) MsgBox "Failed because " & message End Function
PhoneGap has additional documentation here. Be sure to read what quirks each device has.
Contacts
With PhoneGap, you can find or create contacts. This sample will look up everyone in the Contacts list named "Bob". First, we need to set up our options. We'll create a ContactFindOptions object, then set its filter property to "bob". Next, we specify which fields we want to look for in the fields variable. The list of fields is here.
You will also need to define a function to be called when the operation is complete, as well as a function in case the call fails. We can then call navigator.contacts.find.
The call to .find will return an array with 1 element for each name that matched. You can see how many matches there were in contacts.length. Here is how the code looks:
Function butContacts_onclick() options = new ContactFindOptions() options.filter="bob" 'nothing will return if you don't have a bob. options.multiple=True fields = ["displayName", "name"] navigator.contacts.find(fields, onContactsFound, onContactsError, options) End Function Function onContactsFound(contacts) s="" For i = 0 To contacts.length -1 s=s & contacts[i].name.formatted & vbCRLF Next Textarea1.value=s End Function Function onContactsError(message) MsgBox "Failed because " & message End Function
PhoneGap has additional documentation here. Be sure to read what quirks each device has.
Plug Ins
PhoneGap is designed so third party plugins can be added which add additional API functions. These can be called from NS Basic/App Studio. Use Google to find what is available. Let us know which ones work for you so we can make a list of them here.