The goal for this tutorial is to write a native (iOS) plugin for PhoneGap 3.0.0. The documents about native plugins a bit unclear to me. If you want to use a custom native plugin, you need to create a plugin project.
I used an existing plugin as start, stripped it down and created a plugin skeleton with the strange name wurst.
The plugin descriptor file plugin.xml of my example plugin:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 | <?xml version="1.0" encoding="UTF-8"?> <plugin xmlns="http://apache.org/cordova/ns/plugins/1.0" id="com.neophob.cordova.core.wurst" version="0.1.0"> <name>Wurst</name> <description>Cordova Plugin Sekelton</description> <license>Apache 2.0</license> <keywords>cordova,plugin,skeleton</keywords> <!-- ios --> <platform name="ios"> <config-file target="config.xml" parent="/*"> <feature name="Wurst"> <param name="ios-package" value="Wurst"/> <param name="onload" value="true" /> </feature> </config-file> <js-module src="www/Wurst.js" name="Wurst"> <clobbers target="wurst" /> </js-module> <header-file src="src/ios/Wurst.h" /> <source-file src="src/ios/Wurst.m" /> </platform> </plugin> |
The option “onload” define, that the wurst plugin should started as soon as the application starts (default: lazy loading). This makes the debugging easier.
The JS part, which export its functionality (module.export). Note: this js code gets injected by the PhoneGap framework to your application, so you don’t need to include it manually.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | var exec = require('cordova/exec'); /* constructor */ function Wurst() {} Wurst.prototype.dummy = function() { exec( function(result){ alert('ok: '+reply); }, function(err){ alert('Error: '+err); } , "Wurst", "echoTest", ['dummy']); } <..> var wurst = new Wurst(); module.exports = wurst; |
Thats about it, now create a new project that uses the wurst plugin:
1 2 3 4 5 | # phonegap create MyProject1 # cd MyProject1 # phonegap local plugin add https://github.com/neophob/cordova-plugin-wurst [phonegap] adding the plugin: https://github.com/neophob/cordova-plugin-wurst [phonegap] successfully added the plugin |
Edit the file “www/index.html” and add a call to the native plugin:
1 | <button onclick="wurst.dummy();">dummy</button> |
And reference the plugin in the www/config.xml file:
1 2 3 | <feature name="Wurst"> <param name="ios-package" value="Wurst" /> </feature> |
Now deploy the application to the iOS simulator “phonegap local run ios” and check the logfile (Console application) for log entries of the native plugin:
1 2 3 4 5 | 9/1/13 1:30:47.502 PM HelloWorld[15291]: Hello World Wurst, init 9/1/13 1:30:47.503 PM HelloWorld[15291]: [CDVTimer][wurst] 0.651002ms ... 9/1/13 1:32:55.905 PM HelloWorld[15610]: Wurst, command 9/1/13 1:32:55.905 PM HelloWorld[15610]: Wurst, parameter <dummy> |
Link to Source of the plugin: https://github.com/neophob/cordova-plugin-wurst
