phonegap与sencha touch互相传值显示

时间：2014-11-16 00:30:28 阅读：567 评论：0 收藏：0 [点我收藏+]

标签：android style blog http io color ar 使用 sp

本文使用的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‘
        }]
    }
});

效果图：

bubuko.com,布布扣　

编写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插件的前面哦。

bubuko.com,布布扣

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=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){}
             );
        });
    }
});