[Windows Mobile]撰寫 Widget 工具，讀取 MSDN Magazine RSS 文章標題與連結

DAY 6

Windows Mobile系列第 6 篇

windows mobile

chou

2009-10-06 01:14:23

6628 瀏覽

分享至

Widget 是種小工具，提供使用者簡易的介面去執行一些常用的功能，在 Windows Mobile 6.5 內建了 Widget 引擎，可允許自行開發的 Widget 程式利用 Internet Explorer 6 來運作。本文嘗試來撰寫 Widegt 工具，其功能為讀取 MSDN Magazine RSS 文章標題。
更多文章，請到我在點部落所建立的部落格「.NET菜鳥自救會」閱讀
http://www.dotblogs.com.tw/chou/

簡介
Widget 是種小工具，提供使用者簡易的介面去執行一些常用的功能，在 Windows Mobile 6.5 內建了 Widget 引擎，可允許自行開發的 Widget 程式利用 Internet Explorer 6 來運作。本文嘗試來撰寫 Widegt 工具，其功能為讀取 MSDN Magazine RSS 文章標題。
方法
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。
http://msdn.microsoft.com/zh-tw/library/dd721906(en-us).aspx

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

<html xmlns="http://www.w3.org/1999/xhtml"> 
 
    <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>

 
    <div id="main"></div>

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; 
}