本文和大家重點(diǎn)學(xué)習(xí)一下WebWidget開發(fā)概述，WebWidget開發(fā)是輕量級的Web應(yīng)用程序，為使用者提供一鍵式的服務(wù)。它通常被設(shè)計(jì)為具有特定的功能，如提供天氣、股票、拍賣等的信息。

WebWidget開發(fā)概述

移動(dòng)互聯(lián)網(wǎng)的興起

　　移動(dòng)通訊的商業(yè)環(huán)境正在面臨快速變化。一個(gè)重要表現(xiàn)是，人們的工作、生活越來越多地倚賴于Internet，例如大量涌現(xiàn)的Web2.0網(wǎng)站、網(wǎng)絡(luò)社區(qū)。同時(shí)，人們對Internet的需求也越來越多樣化。如何把移動(dòng)通訊與Internet結(jié)合起來，無論對于移動(dòng)終端制造商還是Internet服務(wù)提供商，都是一個(gè)新的有趣的挑戰(zhàn)。

　　現(xiàn)在在移動(dòng)設(shè)備上訪問Internet，不如在PC上訪問方便，并且支持的Web能力也有限。針對這個(gè)問題，目前有兩種主要的解決方案，即服從于Web和服從于PC的解決方案。S60的瀏覽技術(shù)屬于后者，致力于在移動(dòng)設(shè)備上提供類似于PC的瀏覽體驗(yàn)。而通過PC訪問Internet，則不如通過移動(dòng)設(shè)備那樣，有方便、快捷的網(wǎng)絡(luò)接入。此外，統(tǒng)計(jì)數(shù)字顯示了網(wǎng)站訪問存在的"二八"現(xiàn)象，即人們頻繁訪問的只有少數(shù)網(wǎng)站。針對以上問題，S60SDK3rdEditionFeaturePack2中推出了相應(yīng)的解決方案----WebWidget（以下簡稱Widget）。

　　隨著Widget開發(fā)的推廣，在不久的將來，人們將可以隨時(shí)隨地訪問Internet，就象今天人們打電話一樣容易。

什么是WEBWidget開發(fā)

　　WebWidget開發(fā)是輕量級的Web應(yīng)用程序，為使用者提供一鍵式的服務(wù)。它通常被設(shè)計(jì)為具有特定的功能，如提供天氣、股票、拍賣等的信息。它與網(wǎng)頁一樣，使用標(biāo)準(zhǔn)的Web技術(shù)開發(fā)，如XHTML，CSS，javascript等。從這方面看，Widget是脫離瀏覽器UI運(yùn)行的網(wǎng)頁。

　　與其它S60應(yīng)用相比，Widget可以通過相同的方式下載、安裝到手機(jī)上。這使它非常易于分享。

　　Widget的運(yùn)行基于WebRun-time（以下簡稱WRT）。WRT是S60SDK3rdEditionFeaturePack2中，新增加的瀏覽器組件。它是一個(gè)Web應(yīng)用開發(fā)環(huán)境。

　　訪問以下鏈接可以獲得更多關(guān)于Widget的信息，[url]http://www.forum.nokia.com/main/resources/technologies/browsing/widgets.html。[/url]

體驗(yàn)Widget

　　Widget的使用方式與S60本地應(yīng)用一樣。作為Widget的運(yùn)行平臺(tái)，WRT設(shè)計(jì)目標(biāo)之一就是使Widget與S60平臺(tái)進(jìn)行無縫集成，給用戶一致的使用體驗(yàn)。例如，每個(gè)Widget都可以在應(yīng)用程序菜單中顯示圖標(biāo)；可被設(shè)置為待機(jī)狀態(tài)下的快捷鍵和左右軟鍵；能出現(xiàn)在活動(dòng)應(yīng)用列表中；具有與現(xiàn)有的S60應(yīng)用一樣的管理方式，如安裝，卸載。

　　如下鏈接展示了Widget的安裝和使用的一段視頻，[url]http://www.forum.nokia.com/info/sw.nokia.com/id/4e20baf8-4c58-4d36-be9f-798a168a844d/Web_widget_webinar_zh_Ch.swf.html。[/url]

安裝Widget

　　如上所述，Widget的管理方式與S60本地應(yīng)用一樣。如果了解S60本地應(yīng)用的安裝，就可以順利地安裝Widget。現(xiàn)在支持Widget的手機(jī)有***版軟件的NokiaN95以及N958G，以及即將上市的所有S603rdEditionFP2手機(jī)。

　　通過鏈接http://discussion.forum.nokia.com/forum/showthread.php?t=115609#4，可以下載一些Widget例子。

　　Widget以安裝包的形式發(fā)布。一個(gè)安裝包就是一個(gè)擴(kuò)展名為.wgz的ZIP文件，包含Widget的所有源文件以及Widget項(xiàng)目的根目錄。

　　把Widget部署到手機(jī)上是安裝的***步。Widget可以通過三種方式部署到手機(jī)上：

◆通過藍(lán)牙或紅外發(fā)送到目標(biāo)設(shè)備的信息收件箱中。
◆通過MMC卡或USB端口傳送到目標(biāo)設(shè)備的內(nèi)存中。
◆通過S60Web瀏覽器下載。

　　相應(yīng)地，根據(jù)Widget開發(fā)部署方式的不同，安裝過程也有所不同：

◆通過信息應(yīng)用程序打開信息收件箱中的Widget安裝包，根據(jù)提示安裝。
◆使用手機(jī)上的文件管理器從MMC卡或從本地C盤上打開Widget安裝包，根據(jù)提示安裝Widget（假定Widget安裝包已經(jīng)復(fù)制到MMC卡或通過USB數(shù)據(jù)線傳到手機(jī)C盤）。
◆如果在服務(wù)器端配置Widget安裝包的MIME類型為x-nokia-widget，通過S60瀏覽器中下載到手機(jī)的Widget安裝包將被瀏覽器識(shí)別并自動(dòng)安裝。

　　安裝好后的Widget出現(xiàn)在"應(yīng)用程序"菜單中。

　　在S603rdEditionFP2的Emulator中安裝Widget的步驟與上述步驟類似。常用方法是，首先把Widget安裝包復(fù)制到文件夾Symbian\9.3\S60_3rd_FP2_Beta\epoc32\winscw\c\Data\Others中（以S60SDK3rdEditionFP2為例），然后使用Emulator中的文件管理器打開并安裝。

　　上一節(jié)"體驗(yàn)Widget"中的鏈接包含了一段演示W(wǎng)idget安裝過程的視頻。

Widget開發(fā)過程

　　開發(fā)Widget使用標(biāo)準(zhǔn)的Web開發(fā)技術(shù)，如XHTML，CSS，javascript等。這使得Widget開發(fā)比較容易上手，開發(fā)周期也較短，一般僅需要數(shù)日至數(shù)周。

　　Widget包含兩個(gè)必要文件：HTML文件和info.plist文件。以及其它可選文件：css文件，javascript文件，資源文件（如圖標(biāo)，背景等）。HTML文件定義了widget的結(jié)構(gòu)和內(nèi)容。Css文件定義了widget的版面格式，如字體、顏色等，起修飾作用。Javascript給widget增加了動(dòng)態(tài)效果，使其具有某些智能。

　　Widget項(xiàng)目表現(xiàn)為文件系統(tǒng)中的一個(gè)目錄。該目錄包含Widget的所有文件。開發(fā)過程中要注意，Widget的必要文件和圖標(biāo)文件(icon.png)必須位于widget項(xiàng)目的根目錄下。

　　Widget的開發(fā)過程如下：

1.用字編輯器或WebIDE編寫widget代碼。
2.調(diào)試widget?？山Y(jié)合使用Firefox與Firebug，常用的調(diào)試功能有設(shè)置斷點(diǎn)、單步執(zhí)行等，還可以觀察HTML文件的DOM結(jié)構(gòu)。
3.把widget文件連同目錄打成ZIP包，改擴(kuò)展名為.wgz，安裝到測試環(huán)境。

測試Widget開發(fā)可使用三種環(huán)境：
1.S603rdEditionFP2中的emulator。
2.支持WRT的某些手機(jī)。當(dāng)本文寫作時(shí)，可用的手機(jī)包括具有***版軟件的諾基亞N95，N958G等。即將發(fā)布的所有S603rdEditionFP2手機(jī)也將支持Widget.
3.通過RDA（RemoteDeviceAccess）測試。RDA是一種通過Internet遠(yuǎn)程訪問諾基亞S60設(shè)備的服務(wù)，有關(guān)RDA的信息位于http://apu.ndhub.net。
4.測試Widget，改正Bug。可重復(fù)執(zhí)行步驟1至4。

　　關(guān)于Widget開發(fā)的信息還可以訪問鏈接：http://www.forum.nokia.com/...Getting_Started_with_Nokia_Web_Widget_Development.html。該文檔通過一個(gè)例子詳細(xì)講解了如何開發(fā)widget。關(guān)于WRTAPI參考可訪問鏈接：http://www.forum.nokia.com/info/sw.nokia.com/id/cf225acf-7efe-4dae-b89f-967578c00f1d/Web_Run_Time_API_Reference.html。

Widget開發(fā)***實(shí)踐

用Firefox和模擬器進(jìn)行開發(fā)和調(diào)試

Widget開發(fā)基本可以用Firefox瀏覽器完成，就像開發(fā)普通網(wǎng)頁類似。在瀏覽器中調(diào)試完成后，如果沒有支持的手機(jī)，可以先在S60SDK的模擬器中進(jìn)行測試。

對于有網(wǎng)絡(luò)連接的應(yīng)用，需要對網(wǎng)絡(luò)連接進(jìn)行類似以下的處理，否則無法在瀏覽器中調(diào)試：

try{  
if(window.netscape){  
netscape.security.PrivilegeManager.enablePrivilege("UniversalBrowserRead");  
}  
varhttpRequest=newXMLHttpRequest();  
httpRequest.open("GET",someurl,true);  
httpRequest.send(null);  
}  
catch(e){  
alert(e);  
}  
 

S603.2或者5模擬器下載地址：http://www.forum.nokia.com/info/sw.nokia.com/id/ec866fab-4b76-49f6-b5a5-af0631419e9c/S60_All_in_One_SDKs.html

需要注意的是，5版模擬器目前不支持中文，所以只能大致用來測試UI的適配。主要還是要用3版模擬器。

模擬器上的測試方式是：將wgz文件存在sdk安裝路徑下的\epoc32\winscw\c\Data\Others下，然后從模擬器的文件管理中進(jìn)行安裝。

文件命名和編碼

關(guān)于Widget中的文件、目錄名稱，以及文本文件和數(shù)據(jù)接口的編碼格式，請遵循以下原則，以獲得對不同手機(jī)的***兼容性：

◆所有文件和目錄名稱不要使用中文
◆所有包含中文的文本文件(html,javascript,info.plist等)，務(wù)必要使用utf-8編碼進(jìn)行保存
◆第三方的API接口返回的xml文件也要盡量使用utf-8編碼

CMWAP接入點(diǎn)問題

CMWAP接入點(diǎn)問題是中國特有的問題，一定要了解。

連網(wǎng)時(shí)如果選擇CMWAP接入點(diǎn)，需要注意CMWAP的請求確認(rèn)頁面問題。如果請求方式是GET，則會(huì)碰到請求確認(rèn)頁面，導(dǎo)致內(nèi)容無法獲得。解決辦法是對連接的IP或域名進(jìn)行一次無效請求。還有一種方式是使用POST方式，這種方式的請求不會(huì)被CMWAP網(wǎng)關(guān)攔住。兩種方式的示例如下：

/◆無效請求◆/  
functionjumpCMWAP()  
{  
if(window.netscape)  
{  
netscape.security.PrivilegeManager.enablePrivilege("UniversalBrowserRead");  
}  
varxmlHttpRequest=newXMLHttpRequest();  
xmlHttpRequest.onreadystatechange=function()  
{  
if(xmlHttpRequest.readyState==4)  
{  
if(xmlHttpRequest.status==200)  
{  
/◆無效請求結(jié)束，這里可以開始調(diào)用正式GET請求◆/  
}  
}  
}  
xmlHttpRequest.open("get","http://正式域名地址或IP地址/",true);  
xmlHttpRequest.send(null);  
}  
 
/◆GET請求◆/  
xmlHttpRequest.open("get","接口地址",true);  
xmlHttpRequest.send(null);  
 
/◆POST請求◆/  
xmlHttpRequest.open("post","接口地址",true);  
xmlHttpRequest.setRequestHeader("Content-Type","application/x-www-form-urlencoded;charset=UTF-8");  
xmlHttpRequest.send("請求參數(shù)拼接字符串，參數(shù)間&符號(hào)隔開");  
 

導(dǎo)航模式設(shè)置

Widget開發(fā)中有指針(cursor)和導(dǎo)航鍵(tab)兩種導(dǎo)航模式，建議統(tǒng)一使用指針模式，否則如果只支持導(dǎo)航鍵模式，在觸摸屏手機(jī)上將無法使用。
打開外部網(wǎng)站鏈接

必須使用widget.operUrl()來打開其它網(wǎng)站鏈接，而不是使用類似于<ahref=”http://www.google.com”>google</a>的方式。后一種打開方式將導(dǎo)致無法從打開頁面中返回widget。
界面設(shè)計(jì)和兼容性

如果設(shè)計(jì)合理，widget可以自動(dòng)適應(yīng)不同屏幕尺寸，包括觸摸屏和屏幕旋轉(zhuǎn)。如果有的情況界面不容易處理，也可以為不同機(jī)型開發(fā)不同的widget。但是任何widget中屏幕旋轉(zhuǎn)一定要支持，這個(gè)無法通過安裝不同版本的widget來解決。

基本的原則就是，不要使用固定大小的圖片做為背景和邊框等，這點(diǎn)和普通網(wǎng)頁設(shè)計(jì)基本上是一致的。另外在字體選擇上也要合適，否則在高分辨率的手機(jī)上自會(huì)很小。對于普通240×320的屏幕，字體用13~16號(hào)，對于XpressMusic5800的360X640屏幕，需要用24號(hào)左右的字體大小。屏幕尺寸可以通過screen.width和screen.height來獲得。

另外，由于屏幕旋轉(zhuǎn)時(shí)沒有事件觸發(fā)，所以有的情況（例如無法用同一張圖片對橫屏進(jìn)行自適應(yīng)）旋轉(zhuǎn)后要進(jìn)行特殊處理的，可以用定時(shí)器來監(jiān)測是否有屏幕尺寸的變化，從而模擬旋轉(zhuǎn)事件。這樣會(huì)有一定的效率問題，因?yàn)橐恢庇袀€(gè)定時(shí)器程序在不間斷地運(yùn)行。

XpressMusic5800適配問題

XpressMusic5800是基于S60第五版本的觸摸屏手機(jī)。除了要在界面設(shè)計(jì)時(shí)注意上節(jié)所說的問題之外，還有一些其它問題要注意。

◆文本內(nèi)容在5800上不會(huì)自動(dòng)換行，需要用如下樣式進(jìn)行處理：word-break:break-all;
◆如果界面上有輸入框，輸入內(nèi)容后，菜單會(huì)自動(dòng)變成”完成”和”取消”，這時(shí)，如果頁面上還有另外的按鈕，而用戶沒有點(diǎn)擊”完成”或”取消”而直接點(diǎn)擊那個(gè)按鈕，如果這個(gè)按鈕的事件處理中，進(jìn)行了setRightSoftKey()操作，就會(huì)立刻導(dǎo)致widget非正常退出。解決的方案有幾種，一種是不要在有輸入框的頁面放置其它按鈕和鏈接，而是將需要的功能放在左鍵選項(xiàng)菜單中，這樣用戶只有點(diǎn)擊”完成／取消”之后，才有機(jī)會(huì)再點(diǎn)擊其它功能；還有就是不要改變右鍵菜單，這樣的效果就是完成當(dāng)前操作后，菜單還是停留在”完成／取消”。

Widget開發(fā)的發(fā)展

　　Widget的運(yùn)行需要WRT支持。現(xiàn)階段的widget只是信息型的widget，從網(wǎng)絡(luò)獲取信息并呈現(xiàn)給用戶。此外，WRT在很多方面支持widget與S60的無縫集成，主要體現(xiàn)在widget的管理和使用方式上，與S60應(yīng)相比，能夠給用戶一致的使用體驗(yàn)。

　　下一階段，widget將進(jìn)一步整合智能手機(jī)平臺(tái)。例如，widget將能夠訪問位置，PIM，媒體等手機(jī)設(shè)備信息，以及其它平臺(tái)提供的服務(wù)。并改進(jìn)用戶界面，進(jìn)一步提升用戶的使用體驗(yàn)。

　　WRT是一個(gè)不斷發(fā)展的平臺(tái)，widget也將擁有更強(qiáng)大的能力和豐富的功能。如果解決了平臺(tái)安全性問題，widget將能夠通過S60API來訪問S60平臺(tái)提供的服務(wù)。那時(shí)，開發(fā)部署widget也許會(huì)需要一個(gè)類似于Symbian簽名的驗(yàn)證過程。
更多信息

　　諾基亞論壇中文討論區(qū)有關(guān)于Web技術(shù)和WebWidget的專題,可以訪問以下鏈接來交流經(jīng)驗(yàn),答疑解惑，http://discussion.forum.nokia.com/forum/forumdisplay.php?f=76。其中Widget專題收集了Widget文檔、開發(fā)工具、Q&A等，可通過以下鏈接訪問：http://discussion.forum.nokia.com/forum/showthread.php?t=115609。

　　新發(fā)布的Widgete-learning資料，內(nèi)容比較全面，包括概述和一個(gè)開發(fā)實(shí)例，http://www.forum.nokia.com/info/sw.nokia.com/...=s60platformArticle7CTA。

　　關(guān)于S60瀏覽技術(shù)的信息，可以訪問http://www.forum.nokia.com/browser。