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.