-
[Cordova 3.0] 사용자 플러그인 만들기카테고리 없음 2014. 9. 25. 15:03
사용자 플러그인 만드는 방법에 대해 알아보자.
안드로이드 플러그인 만드는 방법에 대해선
http://cordova.apache.org/docs/en/3.5.0/guide_platforms_android_plugin.md.html#Android%20Plugins
여기를 참고하자.
여기 나와있는 Echo 플러그인은 html 페이지에서 이벤트를 전송 하면
android 단에서 해당 이벤트를 되돌려 주는 방식이다.
이걸 응용해서 텍스트 내용을 전송하면 안드로이드로 Toast 메시지를 띄워 보도록 하자.
Toast 를 사용하기 위해 Aplication Class 를 하나 선언하고. (Context 를 얻기위해..)
Echo.java
public class Echo extends CordovaPlugin {
@Override
public boolean execute(String action, JSONArray args, CallbackContext callbackContext) throws JSONException {
Toast.makeText(EpoNgApplication.getInstance(), action.toString(), Toast.LENGTH_LONG).show();
// if (action.equals("echo")) {
String message = args.getString(0);
this.echo(message, callbackContext);
// return true;
// }
return true;
}
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.");
}
}
}
내용을 이런식으로 바꾸고..Script 작성은.window.echo = function(str, callback) {cordova.exec(callback, function(err) {callback('Nothing to echo.');}, "Echo", str, [str]);//플러그인 이름 / action / callback};이런식으로 하면 된다.
그다음으론. 안드로이드에 플러그인을 등록하자.
res > xml > config.xml 안에
지금 만든 Echo.java 를등록 해 주고.
<?xml version='1.0' encoding='utf-8'?>
<widget id="com.test.epong" version="0.0.1" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
<preference name="loglevel" value="DEBUG" />
<preference name="AndroidLaunchMode" value="singleTop" />
<feature name="App">
<param name="android-package" value="org.apache.cordova.App" />
</feature>
<name>EpoNg</name>
<description>
A sample Apache Cordova application that responds to the deviceready event.
</description>
<author email="dev@cordova.apache.org" href="http://cordova.io">
Apache Cordova Team
</author>
<content src="index.html" />
<access origin="*" />
<feature name="Device">
<param name="android-package" value="org.apache.cordova.device.Device" />
</feature>
<feature name="Echo">
<param name="android-package" value="com.test.epong.plugin.Echo" />
</feature>
</widget>
인덱스 화면을 좀 바꿧다. 입력 값을 넣을 수 있게..
그리고 Jquery 를 추가 한후에~
바디만 참조..
<body>
<div class="app">
<h1>Apache Cordova</h1>
<div id="deviceready" class="blink">
<p class="event listening">Connecting to Device</p>
<p class="event received">Device is Ready</p>
</div>
<div>
<p id="deviceProperties">Loading device properties...</p>
</div>
<p>
<label for="">에코테스트</label>
<input type="text" id="txt"/>
</p>
<button type="button" id="btn">전송</button>
</div>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<script type="text/javascript">
window.echo = function(str, callback) {
cordova.exec(callback, function(err) {
callback('Nothing to echo.');
}, "Echo", str, [str]);
//플러그인 이름 / action / callback
};
$("#btn").unbind("click").click(function(){
window.echo($("#txt").val(), function(echoValue) {
console.log(JSON.stringify(echoValue));
});
});
</script>
<script type="text/javascript">
app.initialize();
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
var element = document.getElementById('deviceProperties');
console.log("> platform : " + device.platform );
element.innerHTML = 'Device Name: ' + device.name + '<br />' +
'Device Cordova: ' + device.cordova + '<br />' +
'Device Platform: ' + device.platform + '<br />' +
'Device UUID: ' + device.uuid + '<br />' +
'Device Model: ' + device.model + '<br />' +
'Device Version: ' + device.version + '<br />';
}
</script>
</body>
자 셋팅 끝 돌려 보면~~
댓글
