快过年回家了,为了不阉割phonegap开发的介绍,在今天完成phonegap的最后一个介绍,在上一篇中提到过的如何开发phonegap的插件。
目前PhoneGap虽然提供了很多的API,但是我们也很容易发现,他有很多地方不能满足我们的需求,比如发短信。我也将介绍如何开发一个针对PhoneGap发短信的Plugin。(Android 版本)。
1、创建一个Android工程,创建之后的目录结构如图:
2、把PhoneGap的android版jar包、javascript和xml文件夹加入工程。(参照上一篇中的做法)目录结构:
3、新增一个类MessagePlugin
这个类就是负责发送短信功能的具体类,可以调用发送短信的android API,当然如果是其他功能,则调用相应的API,但是当使用这个API时记得申请权限。
具体代码:
package com.phonegap.kiddyu.plugin; import org.json.JSONArray; import org.json.JSONException; import org.json.JSONObject; import android.telephony.SmsManager; import com.phonegap.api.Plugin; import com.phonegap.api.PluginResult; public class MessagePlugin extends Plugin { private static final String SEND = "send"; @Override public PluginResult execute(String action, JSONArray data, String callbackId) { PluginResult result; if (SEND.equals(action)) { try { JSONObject jsonObj = new JSONObject(); String target = data.getString(0); String content = data.getString(1); SmsManager sms = SmsManager.getDefault(); sms.sendTextMessage(target, null, content, null, null); jsonObj.put("target", target); jsonObj.put("content", content); result = new PluginResult(PluginResult.Status.OK, jsonObj); } catch (JSONException ex) { result = new PluginResult(PluginResult.Status.JSON_EXCEPTION); }catch(IllegalArgumentException ex){ result = new PluginResult(PluginResult.Status.ERROR); } } else { result = new PluginResult(PluginResult.Status.INVALID_ACTION); } return result; } }
4、为phonegap增加一个javascript的API
在工程目录www/js下面增加一个javascript文件:phonegapPlugin.js,然后加入代码:
var Message = function(){}; Message.prototype = { send: function(success, error, target, content){ PhoneGap.exec(success, error, "MessagePlugin", "send", [target, content]); } }; PhoneGap.addConstructor(function() { PhoneGap.addPlugin("message", new Message()); });
关键的方法是PhoneGap.exec(success, error, "MessagePlugin", "send", [target, content]);
做一下简单的介绍:
success:方法执行成功时调用该函数;
error:方法执行失败时调用该函数;
"MessagePlugin":类名,最好与前面创建的Java类一个样;
"send":插件类中的参数String action;
[target, content]:一个数据,插件类中的参数JSONObject data;
PhoneGap.addPlugin("message", new Message());中的"Message"是你调用send方法时的实例名称。(不知道这样叫是否准确)
5、将自己的插件加入到PhoneGap的配置中
打开目录中res/xml/plugins.xml文件,在最后面加上
<plugin name="MessagePlugin" value="com.phonegap.kiddyu.plugin.MessagePlugin"/>
注意name要和你的插件类名一致! value是类的包名.类名。
插件到这里就算完成了,让我们测试一下到底能不能工作吧。
加入一个简单的html页面(上一篇已经介绍怎么开发,这里不做重复介绍),代码参照下面:
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script type="text/javascript" charset="utf-8" src="/js/jquery_1_6_4.js"></script> <script type="text/javascript" charset="utf-8" src="/js/phonegap-1.2.0.js"></script> <script type="text/javascript" charset="utf-8" src="/js/phonegapPlugin.js"></script> <script type="text/javascript"> $(function(){ var onSend = function(){ var success = function(data){ alert("tel : " + data.target + ', and content : ' + data.content); }; var error = function(e){ alert(e); }; var tel = $('#tel').val(); var content = $('#content').val(); window.plugins.message.send(success, error, tel, content); }; $('#send').bind('click', onSend); }); </script> </head> <body> <div id="messageDiv"> <input type="tel" id="tel" value="5556" /> <textarea rows="20" cols="25" id="content"></textarea> <button type="button" id="send">Send Me</button> </div> </body> </html>
注意在页面中加入你自己的phonegapPlugin.js,而且顺序必须在phonegap.js之后。
其他的都参照上一篇中,修改自己的Activity就开始测试吧!一下是测试截图:
通过itunes同步到设备时会发现实际上下载到设备的图片是做过缩小的。类似的,保存图片到相册时(UIImageWriteToSavedPhotosAlbum),如果图片太大,模拟器上会出现<Warning>: Unable to get object ID的警告,保存成功,但是一般缩小的太厉害,看不了。真机ipad1上则报告保存失败。理论上图片可以保存在本地文件中,但是无法直接保存到相册。
书名 作者
用户体验的要素 Jesse James Garrett
Designing Interfaces中文版 Jenifer Tidwell
關鍵設計報告 比爾.摩格理吉 Moggridge, Bill
简单法则 John Maeda / 前田约翰
创新的艺术 汤姆・凯利 / 乔纳森・利特曼
人本界面 (美)拉斯基(Jef Raskin)
赢在用户 [美]Steve Mulder / [美]Zivv Yarr
瞬间之美 [美] 霍克曼(Robert Hoekman,Jr)
一目了然 ROBERT HOEKMAN
点石成金 [美] 史蒂夫·克鲁克
软件观念革命 [美] Alan Cooper / [美] Robert M. Reimann
交互设计之路 (美)库帕(Coper.A.) 著,(美)丁(Ding.C.) 等译
About Face 3 交互设计精髓 Alan Cooper / Robert Reimann / David Cronin
简约至上 [英] Giles Colborne
设计沟通十器 Daniel M. Brown
应需而变——设计的力量 Peter Merholz / Brandon Schauer / David Verba / Todd Wilkens
设计的法则 威廉·立德威尔 / 克里蒂娜·霍顿 / 吉尔·巴特勒
设计心理学 (美国)唐纳德﹒A﹒诺曼
用户体验草图设计 比尔·巴克斯顿(Bill Buxton)
Web表单设计 [美] Luke Wroblewski
用户体验面面观 [美] 库涅夫斯基(Mike Kuniavsky)
GUI设计禁忌2.0 Jeff Johnson
Web界面设计 Bill Scott / Theresa Neil
情感化设计 [美] 唐纳德·A·诺曼
移动设备交互设计 琼斯
好用型设计 唐纳德·A·诺曼
可用性工程 (美)尼尔森(Nielsen.J)著,刘正捷 等译
体验与挑战产品交互设计 李世国
众妙之门 Smashing Magazine
妙手回春 (美)Steve Krug
UCD火花集 UCDChina
Effective UI:软件用户体验艺术 安德森(Jonathan Anderson)
锦绣蓝图:怎样规划令人流连忘返的网站 沃德科