Web Widget概述

以下內容轉自Forum Nokia Wiki

Web Widget概述

目錄
    * 1 移動互連網的興起
    * 2 什麼是WEB Widget
    * 3 體驗Widget
    * 4 安裝Widget
    * 5 Widget的開發過程
    * 6 Widget開發最佳實務
          o 6.1 用Firefox和模擬器進行開發和調試
          o 6.2 檔案命名和編碼
          o 6.3 CMWAP存取點問題
          o 6.4 導航模式設定
          o 6.5 開啟外部網站連結
          o 6.6 介面設計和相容性
          o 6.7 XpressMusic5800適配問題
    * 7 Widget的發展
    * 8 更多資訊

1，移動互連網的興起

　　移動通訊的商業環境正在面臨快速變化。一個重要表現是，人們的工作、生活越來越多地倚賴於Internet，例如大量湧現的Web
2.0網站、網路社區。同時，人們對Internet的需求也越來越多樣化。如何把移動通訊與Internet結合起來，無論對於移動終端製造商還是
網際網路服務提供者，都是一個新的有趣的挑戰。

　　現在在行動裝置上訪問Internet，不如在PC上訪問方便，並且支援的Web能力也有限。針對這個問題，目前有兩種主要的解決方案，即服從於
Web和服從於PC的解決方案。S60的瀏覽技術屬於後者，致力於在行動裝置上提供類似於PC
的瀏覽體驗。而通過PC訪問Internet，則不如通過行動裝置那樣，有方便、快捷的網路接入。此外，統計數字顯示了網站訪問存在的"二八"現象，即人
們頻繁訪問的只有少數網站。針對以上問題，S60 SDK 3rd Edition Feature Pack
2中推出了相應的解決方案----Web Widget（以下簡稱Widget）。

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

2，什麼是WEB Widget

　　Web
Widget是輕量級的Web應用程式，為使用者提供一鍵式的服務。它通常被設計為具有特定的功能，如提供天氣、股票、拍賣等的資訊。它與網頁一樣，使用
標準的Web技術開發，如XHTML，CSS，javascript等。從這方面看，Widget是瀏覽器外用UI啟動並執行網頁。
　　
      與其它S60應用相比，Widget可以通過相同的方式下載、安裝到手機上。這使它非常易於分享。

　　Widget的運行基於Web Run-time（以下簡稱WRT）。WRT是S60 SDK 3rd Edition Feature Pack 2中，新增加的瀏覽器組件。它是一個Web應用開發環境。

　　訪問以下連結可以獲得更多關於Widget的資訊
http://www.forum.nokia.com/main/resources/technologies/browsing/widgets.html

3，體驗Widget

　　Widget的使用方式與S60本地應用一樣。作為Widget的運行平台，WRT設計目標之一就是使Widget與S60平台進行無縫整合，給使用者
一致的使用體驗。例如，每個Widget都可以在應用程式菜單中顯示表徵圖；可被設定為待機狀態下的快速鍵和左右軟鍵；能出現在活動應用列表中；具有與現有
的S60應用一樣的管理方式，如安裝，卸載。

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

4，安裝Widget

　　如上所述，Widget的管理方式與S60本地應用一樣。如果瞭解S60本地應用的安裝，就可以順利地安裝Widget。現在支援Widget的手機有最新版軟體的Nokia N95以及N95 8G，以及即將上市的所有S60 3rd Edition FP2手機

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

　　Widget以安裝包的形式發布。一個安裝包就是一個副檔名為.wgz 的ZIP檔案，包含Widget的所有源檔案以及Widget項目的根目錄。

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

            * 通過藍芽或紅外發送到目標裝置的資訊收件匣中。
            * 通過MMC卡或USB連接埠傳送到目標裝置的記憶體中。
            * 通過S60 Web瀏覽器下載。

　　相應地，根據Widget 部署方式的不同，安裝過程也有所不同：

            * 通過資訊應用程式開啟資訊收件匣中的Widget安裝包，根據提示安裝。
            * 使用手機上的檔案管理工具從MMC卡或從本地C盤上開啟Widget安裝包，根據提示安裝Widget（假定Widget安裝包已經複製到MMC卡或通過USB資料線傳到手機C盤）。
            * 如果在伺服器端配置Widget安裝包的MIME類型為x-nokia-widget，通過S60瀏覽器中下載到手機的Widget安裝包將被瀏覽器識別並自動安裝。

　　安裝好後的Widget出現在"應用程式"菜單中。

　　在S60 3rd Edition
FP2的Emulator中安裝Widget的步驟與上述步驟類似。常用方法是，首先把Widget安裝包複製到檔案夾Symbian/9.3
/S60_3rd_FP2_Beta/epoc32/winscw/c/Data/Others中（以S60 SDK 3rd Edition
FP2為例），然後使用Emulator中的檔案管理工具開啟並安裝。

　　上一節"體驗Widget"中的連結包含了一段示範Widget安裝過程的視頻。

5，Widget的開發過程

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

　　Widget包含兩個必要檔案：HTML檔案和info.plist檔案。以及其它可選檔案：css檔案，javascript檔案，資源檔（標，背景等）。HTML檔案定義了widget的結構和內容。Css檔案定義了widget的版面格式，如字型、顏色等，起修飾作用。 Javascript給widget增加了動態效果，使其具有某些智能。

　　Widget項目表現為檔案系統中的一個目錄。該目錄包含Widget的所有檔案。開發過程中要注意，Widget的必要檔案和表徵圖檔案(icon.png)必須位於widget項目的根目錄下。

　　Widget的開發過程如下：
   1. 用字編輯器或Web IDE編寫widget代碼。
   2. 調試widget。可結合使用Firefox與Firebug，常用的調試功能有設定斷點、逐步執行等，還可以觀察HTML檔案的DOM結構。
   3. 把widget檔案連同目錄打成ZIP包，改副檔名為.wgz，安裝到測試環境。測試widget可使用三種環境：
         1. S60 3rd Edition FP2中的emulator。
         2. 支援WRT的某些手機。當本文寫作時，可用的手機包括具有最新版軟體的諾基亞N95，N95 8G等。即將發布的所有S60 3rd Edition FP2手機也將支援Widget.
         3. 通過RDA（Remote Device Access）測試。RDA是一種通過Internet遠端存取諾基亞S60裝置的服務，有關RDA的資訊位於http://apu.ndhub.net 。
         4. 測試Widget，改正Bug。可重複執行步驟1至4。

　　關於Widget開發的資訊還可以訪問連結：
http://www.forum.nokia.com/...Getting_Started_with_Nokia_Web_Widget_Development.html
        該文檔通過一個例子詳細講解了如何開發widget。關於WRT API參考可訪問連結：http://www.forum.nokia.com/info/sw.nokia.com/id/cf225acf-7efe-4dae-b89f-967578c00f1d/Web_Run_Time_API_Reference.html

6，Widget開發最佳實務

6.1用Firefox和模擬器進行開發和調試
    Widget開發基本可以用Firefox瀏覽器完成，就像開發普通網頁類似。在瀏覽器中調試完成後，如果沒有支援的手機，可以先在S60 SDK的模擬器中進行測試。
    對於有網路連接的應用，需要對網路連接進行類似以下的處理，否則無法在瀏覽器中調試：

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

    S60 3.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下，然後從模擬器的檔案管理中進行安裝。
檔案命名和編碼

關於Widget中的檔案、目錄名稱，以及文字檔和資料介面的編碼格式，請遵循以下原則，以獲得對不同手機的最佳相容性：
    * 所有檔案和目錄名稱不要使用中文
    * 所有包含中文的文字檔(html,javascript,info.plist等)，務必要使用utf-8編碼進行儲存
    * 第三方的API介面返回的xml檔案也要盡量使用utf-8編碼

CMWAP存取點問題
CMWAP存取點問題是中國特有的問題，一定要瞭解。
連網時如果選擇CMWAP存取點，需要注意CMWAP的請求確認頁面問題。如果請求方式是GET，則會碰到請求確認頁面，導致內容無法獲得。解決辦法是對
串連的IP或網域名稱進行一次無效請求。還有一種方式是使用POST方式，這種方式的請求不會被CMWAP網關攔住。兩種方式的樣本如下：

/*無效請求*/
function jumpCMWAP()
{
  if(window.netscape)
  {
    netscape.security.PrivilegeManager.enablePrivilege("UniversalBrowserRead");
  }
  var xmlHttpRequest = new XMLHttpRequest();
  xmlHttpRequest.onreadystatechange = function()
  {
   if(xmlHttpRequest.readyState == 4)
   {
    if(xmlHttpRequest.status == 200)
    {
      /*無效請求結束，這裡可以開始調用正式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("請求參數拼接字串，參數間&符號隔開");

導航模式設定
Widget有指標(cursor)和導航鍵(tab)兩種導航模式，建議統一使用指標模式，否則如果只支援導航鍵模式，在觸控螢幕手機上將無法使用。

開啟外部網站連結
必須使用widget.operUrl()來開啟其它網站連結，而不是使用類似於<a href=”http://www.google.com”>google</a>的方式。後一種開啟檔案將導致無法從開啟頁面中返回widget。

介面設計和相容性
如果設計合理，widget可以自動適應不同螢幕尺寸，包括觸控螢幕和旋轉螢幕。如果有的情況介面不容易處理，也可以為不同機型開發不同的widget。但是任何widget中旋轉螢幕一定要支援，這個無法通過安裝不同版本的widget來解決。
基本的原則就是，不要使用固定大小的圖片做為背景和邊框等，這點和普通網頁設計基本上是一致的。另外在字型選擇上也要合適，否則在高解析度的手機上自會很
小。對於普通240×320的螢幕，字型用13~16號，對於XpressMusic5800的360X640螢幕，需要用24號左右的字型大小。螢幕尺
寸可以通過screen.width和screen.height來獲得。
另外，由於旋轉螢幕時沒有事件觸發，所以有的情況（例如無法用同一張圖片對橫屏進行自適應）旋轉後要進行特殊處理的，可以用定時器來監測是否有螢幕尺寸的變化，從而類比旋轉事件。這樣會有一定的效率問題，因為一直有個定時器程式在不間斷地運行。

XpressMusic5800適配問題
XpressMusic5800是基於S60第五版本的觸控螢幕手機。除了要在介面設計時注意上節所說的問題之外，還有一些其它問題要注意。
    * 常值內容在5800上不會自動換行，需要用如下樣式進行處理：word-break:break-all;
    *
如果介面上有輸入框，輸入內容後，菜單會自動變成”完成”和”取消”，這時，如果頁面上還有另外的按鈕，而使用者沒有點擊”完成”或”取消”而直接點擊那個
按鈕，如果這個按鈕的事件處理中，進行了setRightSoftKey()操作，就會立刻導致widget非正常退出。解決的方案有幾種，一種是不要在
有輸入框的頁面放置其它按鈕和連結，而是將需要的功能放在左鍵選項菜單中，這樣使用者只有點擊”完成／取消”之後，才有機會再點擊其它功能；還有就是不要改
變右鍵菜單，這樣的效果就是完成當前操作後，菜單還是停留在”完成／取消”。

7，Widget的發展

　　Widget 的運行需要WRT支援。現階段的widget只是資訊型的widget，從網路擷取資訊並呈現給使用者。此外，WRT在很多方面支援widget與S60的無縫整合，主要體現在widget的管理和使用方式上，與S60應相比，能夠給使用者一致的使用體驗。
　　下一階段，widget將進一步整合智能手機平台。例如，widget將能夠訪問位置，PIM，媒體等手機裝置資訊，以及其它平台提供的服務。並改進使用者介面，進一步提升使用者的使用體驗。
　　WRT是一個不斷髮展的平台，widget也將擁有更強大的能力和豐富的功能。如果解決了平台安全性問題，widget將能夠通過S60 API來訪問S60平台提供的服務。那時，開發部署widget也許會需要一個類似於Symbian簽名的驗證過程。

8，更多資訊

　　諾基亞論壇中文討論區有關於Web技術和Web Widget的專題,可以訪問以下連結來交流經驗,答疑解惑，http://discussion.forum.nokia.com/forum/forumdisplay.php?f=76
        其中Widget專題收集了Widget文檔、開發工具、Q&A等，可通過以下連結訪問：
http://discussion.forum.nokia.com/forum/showthread.php?t=115609
　　新發布的Widget e-learning資料，內容比較全面，包括概述和一個開發執行個體， http://www.forum.nokia.com/info/sw.nokia.com/...=s60platformArticle7CTA
　　關於S60瀏覽技術的資訊，可以訪問
http://www.forum.nokia.com/browser