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

WebWidget開發(fā)概述

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

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

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

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

什么是WEBWidget開發(fā)

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

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

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

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

體驗Widget

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

　　如下鏈接展示了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本地應用一樣。如果了解S60本地應用的安裝，就可以順利地安裝Widget。現(xiàn)在支持Widget的手機有***版軟件的NokiaN95以及N958G，以及即將上市的所有S603rdEditionFP2手機。

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

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

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

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

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

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

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

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

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

Widget開發(fā)過程

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

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

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

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

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

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

　　關(guān)于Widget開發(fā)的信息還可以訪問鏈接：http://www.forum.nokia.com/...Getting_Started_with_Nokia_Web_Widget_Development.html。該文檔通過一個例子詳細講解了如何開發(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ā)***實踐

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

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

對于有網(wǎng)絡連接的應用，需要對網(wǎng)絡連接進行類似以下的處理，否則無法在瀏覽器中調(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下，然后從模擬器的文件管理中進行安裝。

文件命名和編碼

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

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

CMWAP接入點問題

CMWAP接入點問題是中國特有的問題，一定要了解。

連網(wǎng)時如果選擇CMWAP接入點，需要注意CMWAP的請求確認頁面問題。如果請求方式是GET，則會碰到請求確認頁面，導致內(nèi)容無法獲得。解決辦法是對連接的IP或域名進行一次無效請求。還有一種方式是使用POST方式，這種方式的請求不會被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ù)間&符號隔開");  
 

導航模式設(shè)置

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

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

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

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

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

XpressMusic5800適配問題

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

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

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

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

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

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

　　諾基亞論壇中文討論區(qū)有關(guān)于Web技術(shù)和WebWidget的專題,可以訪問以下鏈接來交流經(jīng)驗,答疑解惑，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)容比較全面，包括概述和一個開發(fā)實例，http://www.forum.nokia.com/info/sw.nokia.com/...=s60platformArticle7CTA。

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