首页 > 代码库 > 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互相传值显示