我们来演示一个获取联系人，并用网页展现出来的简单例子。
首先，我们在eclipse环境中创建一个Android project，我们的Activity名称是com.example.RIAExample，并且修改界面的layout文件如下：
<?
xml version="1.0" encoding="utf-8"
?>
<
LinearLayout
xmlns:android
="http://schemas.android.com/apk/res/android"
android:orientation
="vertical"
android:layout_width
="fill_parent"
android:layout_height
="fill_parent"
>
<
WebView
android:id
="@+id/web"
android:layout_width
="fill_parent"
android:layout_height
="fill_parent"
>
</
WebView
>
</
LinearLayout
>
可以看到，界面中仅仅包含一个WebView控件。
接下来，创建一个简单的java类来描述一个联系人的信息，它包含联系人姓名和号码。
package
com.example;
import
java.util.Vector;
import
android.app.Activity;
import
android.os.Bundle;
import
android.webkit.WebView;
public
class
RIAExample
extends
Activity
{
private WebView web; //模拟号码簿 private Vector<Person> phonebook = new Vector<Person>();
/** Called when the activity is first created. */ @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.main); this.initContacts(); web = (WebView)this.findViewById(R.id.web); web.getSettings().setJavaScriptEnabled(true);//开启javascript设置，否则WebView不执行js脚本 web.addJavascriptInterface(this, "phonebook");//把RIAExample的一个实例添加到js的全局对象window中， //这样就可以使用window.phonebook来调用它的方法 web.loadUrl("file:///android_asset/phonebook.html");//加载网页 
} /** * 该方法将在js脚本中，通过window.phonebook.getContacts()进行调用 * 返回的JavaArrayJSWrapper对象可以使得在js中访问Java数组 * @return */ public JavaArrayJSWrapper getContacts(){ System.out.println("fetching contacts data"); Person[] a = new Person[this.phonebook.size()]; a = this.phonebook.toArray(a); return new JavaArrayJSWrapper(a); } /** * 初始化电话号码簿 */ public void initContacts(){ Person p = new Person(); p.name = "Perter"; p.phone_number = "8888888"; phonebook.add(p); p = new Person(); p.name = "Jack"; p.phone_number = "777777"; phonebook.add(p); } /** * 通过window.phonebook.debugout来输出js调试信息。 * @param info */ public void debugout(String info){ System.out.println(info); }
}
下面是html文件，它非常简单。
<
html
>
<
head
>
<
script
type
="text/javascript"
src
="fetchcontacts.js"
/>
</head><body> <div id = "contacts"> <p> this is a demo </p> </div></body></html>
而主角就是我们的javascript脚本fetchcontacts.js
window.onload
=
function
()
{ window.phonebook.debugout("inside js onload");//调用RIAExample.debugout var persons = window.phonebook.getContacts();//调用RIAExample.getContacts() if(persons){//persons实际上是JavaArrayJSWrapper对象 window.phonebook.debugout(persons.length() + " of contact entries are fetched"); var contactsE = document.getElementById("contacts"); var i = 0; while(i < persons.length()){//persons.length()调用JavaArrayJSWrapper.length()方法 pnode = document.createElement("p"); tnode = document.createTextNode("name : " + persons.get(i).getName() + " number : " + persons.get(i).getNumber());//persons.get(i)获得Person对象，然后在js里面直接调用getName()和getNumber()获取姓名和号码 pnode.appendChild(tnode); contactsE.appendChild(pnode); i ++; } }else{ window.phonebook.debugout("persons is undefined"); } }
例子很简单，我加了注释希望有助大家理解，其他我就不深入解释了。
我把例子的源代码放上来，你可以下来试一试。
这个例子说明通过WebView.addJavascriptInterface方法，我们可以扩展JavaScript的API，获取Android的数据。这样，JS的粉丝就可以使用Dojo，JQuery，Prototy等这些知名的js框架来搭建android应用程序来展现它们很酷很玄的效果！但是，目前addJavascriptInterface还不够灵活强大，为什么呢？敬请关注第四篇“what next?”
扫一扫
841
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
