移动互联网时代--Android上的一个例子

我们来演示一个获取联系人，并用网页展现出来的简单例子。

首先，我们在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");
    }

}

例子很简单，我加了注释希望有助大家理解，其他我就不深入解释了。
我把例子的源代码放上来，你可以下来试一试。

RIADemo

这个例子说明通过WebView.addJavascriptInterface方法，我们可以扩展JavaScript的API，获取Android的数据。这样，JS的粉丝就可以使用Dojo，JQuery，Prototy等这些知名的js框架来搭建android应用程序来展现它们很酷很玄的效果！但是，目前addJavascriptInterface还不够灵活强大，为什么呢？敬请关注第四篇“what next?”

移动互联网时代--Android上的一个例子

移动互联网时代--Android上的一个例子

你可能感兴趣的:(移动互联网时代--Android上的一个例子)