phonegap插件:android toast显示以及phonegap与js互相传值

本文使用的phonegap版本为2.9.0,sencha touch为2.4.0,phonegap jar包能够去官网下载。javascript

以android toast做为例子:java

首先在st项目中建一个viewandroid

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'
        }]
    }
});

效果图:apache

 

 

编写phonegap插件json

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须要获取的参数。api

btoast方法为phonegap向st传值。app

exec参数:第一个参数为传递成功方法,第二个为传递失败方法,第三个为phonegap插件的类名,第四个为插件执行的动做,第五个为st传给phonegap的参数。ide

注册js插件:测试

先把官网下载的cordova.js放到st根目录下。ui

在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=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。

 

最后打包测试。

最终效果图:

点击第一个按钮:

点第二个按钮:

相关文章
相关标签/搜索