Web Runtime Widget

Mobile Widget [1]是一種執行於手機上的小型應用程式。除了以C/C++/Java技術開發外，近年來也逐漸出現以Web技術建置的做法。Web Runtime Widget就是Symbian[2] 所推出，以Web技術為基礎的Mobile Widget。藉由Web Runtime之助，網頁程式設計師可以利用既有的網頁知識，快速開發出在Symbian手機上運行的程式。可以樂觀預期的是，未來的程式師只要具備網頁程式開發知識，就能迅速開發出可以在手機等移動裝置上執行的應用。

背景
Mobile Widget跟Desktop Widget幾乎是一樣的東西，只是一個執行在PC上，一個執行在手機上。雖然服務提供者一直強調容易上手，但是學起來卻不是這麼回事。個人認為原因在於沒有先給個輪廓，也沒有交代這些技術的演進過程，因此會給一般人既突兀又難以消化的感覺。

Web Runtime (WRT) 是Widget執行引擎的名稱，Web Runtime Widget也因此簡稱為WRT Widget。Symbian是手機大廠Nokia的衍生公司，所以在一些文件上也可以看到以往被稱為Nokia Widget的痕跡。Symbian OS是Symbian公司為手機設計的作業系統，佔有接近 50% 的全球市場。在新興手機步步進逼之下，摩托羅拉、西門子、諾基亞等公司於2008年成立非營利的Symbian基金會，逐步加入Open Source的行列。S60以前稱為Series 60，是Symbian OS的行動電話系統開發平台，目前最新版本是5.0，所對應的Symbian OS 是9.4版。由於在 Symbian 上進行開發的難度與成本都很高，所以2006年S60 SDK 3rd Edition Feature Pack開始提供WRT，希望能誘導應用開發者加入，藉由應用系統的增加，逐步奪回佔有率。

WRT Widget可以看成一個網頁以載入沒有典型介面(地址欄與工具)的瀏覽器的方式執行。與一般網頁不同的是，這個網頁內的程式碼除了可以存取該手機資訊(例如位置) 外，也可以用Ajax的方式取得網站資料(不受同網域的限制) ，取得網際網路上的各項資料：如天氣狀況、股票行情以及新聞讀取。一個典型的應用就是從手機上的GPS取得目前位置，然後從網路上取回該地點的天氣資料。有什麼好處呢？第一、不用輸入地點。第二、跟一般瀏覽網頁不同，WRT Widget不用將氣象預報網頁整個取回，只取回標的的資料就可以了。如果您的用戶合約是以下載量計價的話，節省您可觀的下載費用、時間、電力與儲存空間。
Nokia所提供的開發套件(SDK)主要包含手機模擬器、工具程式與Aptana開發環境。筆者在校園網路下載該套件曾經花了5個多小時，所以建議還是先確認一下您的環境是否可以安裝再進行下載。由於個人在使用最新的SDK Nokia N97 0.5並不順利，所以我們還是以5th Edition進行說明。

開發套件安裝與使用

• 確定你的系統符合需求

- Windows XP SP2
- CPU > =1 GHz, 記憶體 >= 1G
- 磁碟可用空間>= 2 GB

• 下載安裝 SDK

[1] 連線到Nokia 論壇: http://www.forum.nokia.com/
(如果看簡體中文還習慣的話，可以在從右上角的region切換到china)
[2] 註冊帳號
[3] Home > Devices, Docs & Tools > Tools > Platform > S60 Platform SDKs
或者直接輸入網址:
http://www.forum.nokia.com/Resources_and_Information/Tools/Platforms/S60_Platform_SDKs/
[4] Download all-in-one S60 SDKs
[5] 選擇5th Edition

模擬器與相關工具程式的使用

• 啟動模擬器：開始/程式集/S60 Developer Tools/5th Edition SDK/v1.0/Emulator (2’20”)
• 瀏覽網頁確認瀏覽器與網路連線狀態：
File/Open Url您可以用拖拉的方式看到網頁的其他部分
• 換成中文，請先關掉模擬器，然後執行v1.0下的工具Language/English to Chinese

以Aptana開發環境建立WRT widget
1. 啟動Aptana Studio: 開始/程式集/Aptana/Aptana 1.2
2. 新增WRT Project: File/New Project/Select Wizard

Figure 1 Select a type of project

Figure 2 Select a type of project

在Widget 導引下，一般應該可以很快地Next到底，產生您的第一個WRT Widget Project，檢示一下專案內容可以發現真的就是HTML+CSS+JavaScript。如果你和我一樣用mywidget當專案與CSS/JS檔案的預設檔名，您會看到以下檔案

打包與安裝
您可以自行zip專案檔案再改名為wgz，或者就在Aptana專案Package Widget就可以了。在模擬器上安裝也很簡單，File/Open 選取該wgz。但若是要安裝到手機上的話，則必須先對該wgz簽章，請自行參考相關資料。想安裝別人寫的也可以用File/Open或File/Open Url進行安裝。

 
Figure 5 mywidget in Applications

Figure 6 Execution

預覽功能
打開index.html後，您可以在WRT Widget(S60) 頁簽看一下在手機上可能的樣子，有趣的是還可以選不同的設備。以下示範的是以RSS Reader Widget Project 製作的NTU epaper reader widget。
　

Figure 7 N78, Portrait
　

Figure 8 N78, Landscape