Chasing an mobile web vision

闖蕩在移動互聯(lián)網(wǎng)的世界中

統(tǒng)計

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

常用鏈接

留言簿(10)

隨筆檔案

搜索

閱讀排行榜

評論排行榜

2009年3月10日 #

移動互聯(lián)網(wǎng)時代--Android上的一個例子

我們來演示一個獲取聯(lián)系人，并用網(wǎng)頁展現(xiàn)出來的簡單例子。

首先，我們在eclipse環(huán)境中創(chuàng)建一個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控件。

接下來，創(chuàng)建一個簡單的java類來描述一個聯(lián)系人的信息，它包含聯(lián)系人姓名和號碼。

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不執(zhí)行js腳本

web.addJavascriptInterface(this, "phonebook");//把RIAExample的一個實例添加到js的全局對象window中，

//這樣就可以使用window.phonebook來調用它的方法

web.loadUrl("file:///android_asset/phonebook.html");//加載網(wǎng)頁

}

/**

* 該方法將在js腳本中，通過window.phonebook.getContacts()進行調用

* 返回的JavaArrayJSWrapper對象可以使得在js中訪問Java數(shù)組

* @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的數(shù)據(jù)。這樣，JS的粉絲就可以使用Dojo，JQuery，Prototy等這些知名的js框架來搭建android應用程序來展現(xiàn)它們很酷很玄的效果！但是，目前addJavascriptInterface還不夠靈活強大，為什么呢？敬請關注第四篇“what next?”

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

移動互聯(lián)網(wǎng)時代--忽如一夜春風來，web花開各終端

自從Apple在safari上使用webkit并移植到iphone后，webkit就仿佛是獲得了選秀第一名似的，吸引了眾多眼球。

其實，我最早聽說webkit是在iphone出來前一兩年，當時有報道說Nokia正在采用webkit為它下一代的Symbian平臺做一個引擎，而且還有專門的社區(qū)，但比較封閉，很難進入那個圈子，讓人一點感覺沒有。不過，至少說明Nokia很早就盯上這一塊了。

iphone發(fā)布后，Apple似乎就接管webkit了，從此，webkit社區(qū)就有了巨大變化。Apple把能開放的東西都放到了webkit社區(qū)里面，速度還相當?shù)目欤ㄓ肁pple自己的話說，他們貢獻了81%的力量，看看webkit社區(qū)的主力開發(fā)人員，有多少來自Apple！）現(xiàn)在，我們時不時的可以看到webkit的更新，比如對html5的跟進，css的特效等新功能！其中不得不重點提出的是2008年6月2日，webkit社區(qū)發(fā)布了高性能javascript引擎SquirrelFish！9月3日google chrome發(fā)布，采用了V8 javascript引擎，號稱比SquirrelFish還快，兩個禮拜后webkit就發(fā)布了SquirrelFish Extreme給予正面還擊。巨頭們牟足了勁爭先把javascript引擎油門踩到底！我不想猜測他們賣力的真正原因，但是，我覺得隨著移動終端能力加強，javascript大面積攻進終端已經(jīng)指日可待了，iphone和android已經(jīng)實現(xiàn)了。

這期間，由于Apple的快速組合拳，Nokia經(jīng)營的webkit專區(qū)很快就倒閉了。但他并沒有放棄對webkit的投入，2008年1月28日Nokia宣布收購了Trolltech公司。現(xiàn)在Trolltech lab作為Nokia的代表仍然活躍在webkit社區(qū)之中。就前兩天，他們還在http://planet.webkit.org/發(fā)布了一篇標題極其引人的博文“Creating a Google chat client in 15 minutes”，為QWebView做了一把廣告，相信qt的粉絲肯定不會錯過。而本月初發(fā)布的qt4.5中，明確指出qt加強了對webkit諸如SquirrelFish等新功能的整合。那么就讓我們期待一下Nokia的新款機器吧。

到此，我們已經(jīng)看到Google, Apple, Nokia, Palm等移動終端的領頭羊們所采取的行動，然而，不要忘記軟件廠商！Adobe就是杰出的代表。作為RIA的強烈倡導者，他也選擇把webkit整合到其AIR平臺，你可以想象這個webkit+flash的威力有多強大！而Adobe發(fā)起的openscreen項目，更是表明了他要在RIA上爭奪王位的野心！

好了，不啰嗦那么多了，總之呢，webkit已經(jīng)成為移動互聯(lián)網(wǎng)這出大戲的主角了，回歸到我在上一篇中提到的主題，讓我們來研究一下android.webkit.WebView的功能，來看android上的RIA。

敬請關注下一篇--使用WebView的小例子。

posted @ 2009-03-10 22:39 勤勞的蜜蜂閱讀(2288) | 評論 (0) | 編輯收藏