首页 > 代码库 > phonegap与sencha touch互相传值显示
phonegap与sencha touch互相传值显示
本文使用的phonegap版本为2.9.0,sencha touch为2.4.0,phonegap jar包可以去官网下载。
以android toast作为例子:
首先在st项目中建一个view
Ext.define(‘HelloWorld.view.Main‘, { extend: ‘Ext.form.Panel‘, xtype: ‘main‘, requires: [ ‘Ext.field.Text‘,‘Ext.form.Panel‘ ], config: { fullscreen: true, items:[{ xtype:‘fieldset‘, title:‘输入显示内容‘, items:[{ xtype:‘textfield‘, label:‘内容‘, name: ‘content‘ },{ xtype:‘button‘, itemId:‘ST_TO_PG_BTN‘, text:‘确定‘ }] },{ xtype:‘button‘, text:‘显示pg传过来的数据‘, itemId:‘pg_TO_PG_BTN‘ }] }});
效果图:
编写phonegap插件
package com.tonghui.toast;import org.apache.cordova.api.CallbackContext;import org.apache.cordova.api.CordovaPlugin;import org.apache.cordova.api.PluginResult;import org.json.JSONArray;import org.json.JSONException;import org.json.JSONObject;import android.widget.Toast;public class ToastPlugin extends CordovaPlugin{ private static final String ST_TO_PG="atoast"; private static final String PG_TO_ST="btoast"; private String message=""; private int toastLength=0; CallbackContext callbackContext; private Toast toast=null; private JSONObject s=new JSONObject(); @SuppressWarnings("unused") private PluginResult result = null; public boolean execute(String action, JSONArray args, CallbackContext callbackContext) throws JSONException{ this.callbackContext=callbackContext; if(action.equals(ST_TO_PG)){ message=args.getString(0); toastLength=args.getInt(1); showToast(message, toastLength); return true; } if(action.equals(PG_TO_ST)){ s.put("PG_TO_ST", "我是从phonegap传递过来的数据"); result = new PluginResult(PluginResult.Status.OK, s); ToastPlugin.this.callbackContext.success(s); return true; } return false; } private void showToast(final String message, final int length) { cordova.getActivity().runOnUiThread(new Runnable() { @Override public void run() { toast = Toast.makeText(cordova.getActivity(), message, length); toast.show(); } }); }}
execute方法是与js交互的接口,参数action是phonegap与js要执行的动作。
st传值到phonegap主要参数:JsonArray参数是接收st传过来参数的容器集合。
phonegap传值到st主要参数:JsonObject为传给st的参数集合,put是加入要传的值,st通过获取put方法参数里的key来获取对应value。通过PluginResult来传参数,PluginResult.Status.OK表示传递成功,然后进行callbackContext回调。
phonegap插件注册:
在config.xml中加入相对应插件的路径。
js插件编写:
在st项目根目录下创建一个toastplugin.js文件。
打开toastplugin.js,加入插件代码
cordova.define("cordova/plugins/toastplugin", function(require, exports, module) {/*global cordova, module*/ var exec = require("cordova/exec"); var ToastPlugin = function() {}; ToastPlugin.prototype. atoast=function (message,length,successCallback, errorCallback) { exec(successCallback, errorCallback, "ToastPlugin", "atoast",[message,length]); }; ToastPlugin.prototype. btoast=function (successCallback, errorCallback) { exec(successCallback, errorCallback, "ToastPlugin", "btoast",[]); }; var toastplugin = new ToastPlugin(); module.exports = toastplugin;});var ToastPlugin = cordova.require(‘cordova/plugins/toastplugin‘);if(!window.plugins) { window.plugins = {};}if (!window.plugins.toastplugin) { window.plugins.toastplugin = cordova.require("cordova/plugins/toastplugin");}
atoast方法为st向phonegap传值----方法中的message,length就是phonegap插件中JsonArray需要获取的参数。
btoast方法为phonegap向st传值。
exec参数:第一个参数为传递成功方法,第二个为传递失败方法,第三个为phonegap插件的类名,第四个为插件执行的动作,第五个为st传给phonegap的参数。
注册js插件:
先把官网下载的cordova.js放到st根目录下。
在app.json中加入注册,cordova.js一定要放在phonegap的js插件的前面哦。
st调用插件:
Ext.define(‘HelloWorld.view.Main‘, { extend: ‘Ext.form.Panel‘, xtype: ‘main‘, requires: [ ‘Ext.field.Text‘,‘Ext.form.Panel‘ ], config: { fullscreen: true, items:[{ xtype:‘fieldset‘, title:‘输入显示内容‘, items:[{ xtype:‘textfield‘, label:‘内容‘, name: ‘content‘ },{ xtype:‘button‘, itemId:‘ST_TO_PG_BTN‘, text:‘确定‘ }] },{ xtype:‘button‘, text:‘显示pg传过来的数据‘, itemId:‘pg_TO_PG_BTN‘ }] }, initialize:function(){ var me=this; var textfeld=me.down(‘textfield‘); var ST_TO_PG_BTN=me.down(‘button[itemId=ST_TO_PG_BTN]‘); var pg_TO_PG_BTN=me.down(‘button[itemId=pg_TO_PG_BTN]‘); ST_TO_PG_BTN.on(‘tap‘,function(){ var textfieldValue=http://www.mamicode.com/textfeld.getValue(); window.plugins.toastplugin.atoast(textfieldValue,1); }); pg_TO_PG_BTN.on(‘tap‘,function(){ window.plugins.toastplugin.btoast(function(data){ alert(data.PG_TO_ST) }, function(error){} ); }); }});
当初始化view时加入按钮监听事件以及调用方法。
window.plugins.toastplugin.atoast(textfieldValue,1);为向phonegap传递textfield里输入的内容。
window.plugins.toastplugin.btoast(function(data){
alert(data.PG_TO_ST)
function(error){})});
此为phonegap传给js参数成功后的返回成功的回调方法,data为传过来的数据,PG_TO_ST为phonegap插件JsonObject传过来的key。
最后打包测试。
最终效果图:
点击第一个按钮:
点第二个按钮:
phonegap与sencha touch互相传值显示