撰寫 Widget 於 Windows Mobile 6.5 模擬器上，功能為讀取與顯示 MSDN Magazine RSS Feeds 文章標題與連結
1. 簡介
Widget 是種小工具，提供使用者簡易的介面去執行一些常用的功能，在 Windows Mobile 6.5 內建了 Widget 引擎，可允許自行開發的 Widget 程式利用 Internet Explorer 6 來運作。
關於 Widget 的部份請參考 [ bauann 的文章 Widgets in Windows Mobile 6.5 - 簡介 ]，本文嘗試來撰寫 Widegt 工具，其功能為讀取 MSDN Magazine RSS 文章標題。
2. 方法
2.1 Widget 架構
Widget 最主要分成三個檔案
(1) HTML file : Widget 的主體網頁檔
(2) config.xml file : Widget 的 Metadata file
(3) ico file : Widget 安裝時，與程式執行時的圖示，支援的類型包含 ico, png, jpg
視情況可有
(4) js file : Widget 執行時所需的 JavaScrip。
(5) CSS file : CSS (Cascading Style Sheets) 是一種結構化文件，用以增加網頁樣式（字體、間距和顏色等）。
*註 : 可參考在 Developing Widgets for Windows Mobile 6.5 內的 Providing Widget Files。
2.2 config.xml file
在 config.xml 的撰寫上，參考在 Developing Widgets for Windows Mobile 6.5 內的 Creating the Manifest File 撰寫或直接修改即可。
<?xml version="1.0" encoding="utf-8" ?>
<widget xmlns="http://www.w3.org/ns/widgets" version="1.0">
<name>My first widget</name>
<content src="ou.htm" type="text/html" />
<access network="true" />
<icon src="icon.jpg"/>
<description>This is my first widget.</description>
</widget>
2.3 HTML file
Widget 是以 HTML 的形式作為使用者介面，其中使用了 javascript 作資料處理，流程為
(1) 取得 MSDN Magazine RSS ，網址為 http://msdn.microsoft.com/en-us/magazine/rss/default.aspx?z=z&iss=1
(2) 透過正則表達式取得 title 與 link 部份
(3) 將取得的資料，顯示於 HTML 中
以下為程式碼，其中 HTML file 檔名為 ou.htm，而使用 javascipt 做取得網頁原始碼與正則表達式取 title 與 link 的部份，則在 httprequest.js 中
ou.htm file
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>MSDN Magazine RSS Feed</title>
<script src="lib/jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="lib/httprequest.js" type="text/javascript"></script>
<script language="javascript" type="text/javascript">
$(document).ready(function() {
try {
var pageData = CheckHttpRequest("http://msdn.microsoft.com/en-us/magazine/rss/default.aspx?z=z&iss=1");
var title = GetElement('title', pageData);
var link = GetElement('link', pageData);
for (i = 1; i < link.length; i++) {
var divs = "<div style='display:marker;text-decoration:none;font-size:14pt;'> <a href='" + link[i] + "' style='display:marker;text-decoration:none;font-size:10pt;'> " + title[i] + "</a></div>";
$("#main").append(divs);
}
}
catch (e) {
var divs = "<div style='display:marker;text-decoration:none;font-size:14pt;'>Error!></a></div>";
$("#main").append(divs);
}
});
</script>
</head>
<body>
<div id="main"></div>
</body>
</html>
httprequest.js
function CheckHttpRequest(url)
{
var text;
var req=new XMLHttpRequest();
req.open("GET", url, false);
req.send(null);
if(req.status==200)
{
text = req.responseText;
}
else
{
text = "";
}
return text;
}
function GetElement(ele,text)
{
var reg = new RegExp("<"+ele+">.*<\/"+ele+">","g");
var show=text.match(reg);
//replace the element
for(i=0;i<show.length;i++)
{
show[i] = show[i].replace("<"+ele+">","").replace("</"+ele+">","");
}
//return now array
return show;
}
3. 結果
請參考以下影片，影片內容是接續 2.2 程式撰寫完成後，如何把 Widget 包裝後，安裝到 Windows Mobile 6.5 中，並且執行，相信對初學者會有幫助。
移除 Widget 工具的方式可參考此段影片，跟移除一般程式作法相同。
4. 參考
