Chasing an mobile web vision

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

統計

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

常用鏈接

留言簿(10)

隨筆檔案

搜索

閱讀排行榜

評論排行榜

2009年3月9日 #

移動互聯網時代--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 @ 2009-03-14 16:16 勤勞的蜜蜂閱讀(5487) | 評論 (6) | 編輯收藏

移動互聯網時代--忽如一夜春風來，web花開各終端

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

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

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

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

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

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

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

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

移動互聯網時代的終端--暫時遺忘OSGi，讓我們去品味一杯android磨出的移動互聯網咖啡吧

1年多前，揣著在移動終端推廣OSGi的夢想，我離開了原來的公司，來到了一個自認為更利于osgi的地方，在我看來osgi擁有eRCP這樣的粉絲，應該會給它在移動終端上提供廣闊的舞臺。然而半路殺出個程咬金，google android！第一次見到它時，我不相信osgi會輸，于是就廢寢忘食的研究它，結果我沒有進行太多的抵抗，很快就被Android收編了。我得承認它在某些關鍵的因素，確實比osgi更適合移動終端。對此，我只能感嘆google開源的偉大，以及摒棄jcp的雷厲風行！但是，更為重要的是，在移動互聯網時代即將到來的時刻，Android為我們打開了一扇方便之門，這到底為何？

通過對Android的（java）源碼進行掃描后，我看到了像jsr211，MVM這些老朋友的影子，嗯，我可不想再炒這些舊飯了。還有啥？網上熱炒android用了webkit作為其瀏覽器的引擎，和iphone的safari使用的引擎一樣，這個東西應該不錯，因為我一直覺得eRCP沒有很好的web控件，使得它在移動平臺上遜色不少，于是我翻到了android.webkit這個java包，wow! Google給webkit封裝了很多java的接口，這真是java開發人員的福氣，（聽說很多java開發人員對sun的javafx期待度最高的就是一個傳說中的JWebView控件，但是不知道出來沒，算了，我懶得查證了，因為俺現在不想浪費太多在sun java上，呵呵），不過我覺得這更是廣大互聯網應用開發人員的福氣！想想！用html + css + javascript就能編寫android的類似電話簿，日歷甚至手機桌面的應用，這難道不讓您浮想聯翩嗎？所以，如果說Android為移動終端進入互聯網開了一扇門，那么android.webkit.WebView就是這扇門的金鑰匙，而webkit就是通向互聯網的康莊大道！

其實android的webview是一個極端復雜的控件，而我個人認為它是可以實現現在熱炒的RIA/webos等概念的基石！雖然我進入這個領域不長，但覺得它非常有意思，很有前途，所以我打算寫一個系列，分享對它的理解，強烈歡迎各位高手指點！

怎么開始說呢？不知道大家有沒有注意，年初Palm公司在CES上palm pre的基于webkit的webos驚艷之秀，十足掉起了大家的胃口，這是我聽到第一個冠以webos的移動終端，這是不是意味著目前由palm來唱這個webos的獨角戲呢？答案當然不是，其實很多終端廠家以及平臺廠商很早就率領大部隊兵臨webos的城下了，相信很快一場硝煙彌漫的戰爭就要開始了......

欲知端的，敬請關注移本系列第二篇--忽如一夜春風來，web花開各終端

posted @ 2009-03-09 22:53 勤勞的蜜蜂閱讀(3449) | 評論 (7) | 編輯收藏