Chasing an mobile web vision

闖蕩在移動互聯網的世界中

統計

隨筆 - 16
文章 - 0
評論 - 61
引用 - 0

常用鏈接

留言簿(10)

隨筆檔案

搜索

閱讀排行榜

評論排行榜

移動互聯網時代--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>

</head>

<body>

</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?”

posted on 2009-03-14 16:16 勤勞的蜜蜂閱讀(5487) 評論(6) 編輯收藏

# re: 移動互聯網時代--Android上的一個例子 2009-03-16 10:20 kingLv

# re: 移動互聯網時代--Android上的一個例子 2009-03-16 10:22 kingLv

# re: 移動互聯網時代--Android上的一個例子 2009-03-16 10:35 勤勞的蜜蜂

# re: 移動互聯網時代--Android上的一個例子[未登錄] 2009-03-19 16:41 javaeye

# re: 移動互聯網時代--Android上的一個例子 2009-03-19 21:19 勤勞的蜜蜂

# re: 移動互聯網時代--Android上的一個例子 2009-04-13 16:26 mxx