あいつの日誌β

働きながら旅しています。

How to create android plugin into PhoneGap 3.0

Enviroments

% npm version
{ http_parser: '1.0',
  node: '0.10.18',
  v8: '3.14.5.9',
  ares: '1.9.0-DEV',
  uv: '0.10.15',
  zlib: '1.2.3',
  modules: '11',
  openssl: '1.0.1e',
  npm: '1.3.8' }

% phonegap -v
3.0.0-0.14.3

Prepare

create skelton.

% phonegap create hello com.example.hello HelloWorld
% cd hello
% phonegap local build android

install application into android device.

% adb install bin/HelloWorld-debug.apk

and run it.

Add touchable button for testing

Edit: hello/test/index.html

         <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, heig
         <link rel="stylesheet" type="text/css" href="css/index.css" />
         <title>Hello World</title>
+        <style>
+.btn {
+    border-radius:4px;
+    -webkit-border-radius:4px;
+    color:#FFFFFF;
+    font-size:12px;
+    margin:15px 30px 0;
+    padding:4px 0px;
+    background-color:#333333;
+    display:block;
+}
+        </style>
     </head>
     <body>
         <div class="app">
@@ -31,6 +43,7 @@
             <div id="deviceready" class="blink">
                 <p class="event listening">Connecting to Device</p>
                 <p class="event received">Device is Ready</p>
+                <p id="hello" class="btn">Hello</p>
             </div>
         </div>
         <script type="text/javascript" src="phonegap.js"></script>

Edit: www/js/index.js

     // function, we must explicity call 'app.receivedEvent(...);'
     onDeviceReady: function() {
         app.receivedEvent('deviceready');
+        
+        var helloButton = document.getElementById('hello');
+
+        helloButton.addEventListener("touchstart", function touchHandler(e) {
+            console.log("touched helloButton");
+            e.preventDefault();
+        }, false);
+
     },
     // Update DOM on a Received Event
     receivedEvent: function(id) {       

build this.

% phonegap local build android

install again.

% cd hello/platforms/android
% adb install -r bin/HelloWorld-debug.apk

Run it. And check console.log

% adb logcat | grep Console

Create Echo plugin

Edit: platforms/android/res/xml/config.xml

     <feature name="App">
         <param name="android-package" value="org.apache.cordova.App" />
     </feature>
+    <feature name="Echo">
+        <param name="android-package" value="com.example.hello.plugin.Echo" />
+    </feature>
     <access origin="http://127.0.0.1*" />
     <preference name="useBrowserHistory" value="true" />
     <preference name="exit-on-suspend" value="false" />

Create: src/com/example/hello/plugin/Echo.java

package com.example.hello.plugin;

import org.apache.cordova.CordovaPlugin;
import org.apache.cordova.CallbackContext;

import org.json.JSONArray;
import org.json.JSONException;
import org.json.JSONObject;

/**
 * This class echoes a string called from JavaScript.
 */
public class Echo extends CordovaPlugin {

    @Override
    public boolean execute(String action, JSONArray args, CallbackContext callbackContext) throws JSONException {
        if (action.equals("echo")) {
            String message = args.getString(0);
            this.echo(message, callbackContext);
            return true;
        }
        return false;
    }

    private void echo(String message, CallbackContext callbackContext) {
        if (message != null && message.length() > 0) {
            callbackContext.success(message);
        } else {
            callbackContext.error("Expected one non-empty string argument.");
        }
    }
}

Edit: www/index.html

     onDeviceReady: function() {
         app.receivedEvent('deviceready');
         
+        var success = function(result) { 
+            console.log('success'); 
+            console.log(result); 
+        }
+        var failure = function(err) { 
+            console.log('failure'); 
+            console.log(err); 
+        }
+
         var helloButton = document.getElementById('hello');
 
         helloButton.addEventListener("touchstart", function touchHandler(e) {
             console.log("touched helloButton");
             e.preventDefault();
+            cordova.exec(success, failure, "Echo", "echo", ["World!!"]);
+
         }, false);
 
     },

Edit: www/js/index.js

     onDeviceReady: function() {
         app.receivedEvent('deviceready');
         
+        var success = function(result) { 
+            console.log('success'); 
+            console.log(result); 
+        }
+        var failure = function(err) { 
+            console.log('failure'); 
+            console.log(err); 
+        }
+
         var helloButton = document.getElementById('hello');
 
         helloButton.addEventListener("touchstart", function touchHandler(e) {
             console.log("touched helloButton");
             e.preventDefault();
+            cordova.exec(success, failure, "Echo", "echo", ["World!!"]);
+
         }, false);
 
     },

build & install

% ant debug
% adb install -r bin/HelloWorld-debug.apk

Thank you.