[WM 修練]MyStock v1.0 - Windows Mobile 6.5 Widget
[i love dotblogs]
Widget是新版的Windows Mobile 6.5有一個新的功能之一，詳細的功能介紹可以參考bauann大大的Widgets in Windows Mobile 6.5 - 簡介這篇文章，裡面有很詳細又很優的介紹。
在Widget眾多特色中，有一個很好用的就是支援XMLHttpRequest物件操作，就是我們常常說的AJAX啦，在有網路連線的情況下可以允許你的程式非同布的存取網路上資源。有了這個功能，可以使得我們的程式不一定只能顯示自己本機上的資料，還可以透過操作XMLHttpRequest物件將網路上的資料擷取下來，放在我們客制的Widget程式中顯示。
接下來就來示範如果用Widget支援的XMLHttpRequest物件來抓取Yahoo股市的股票資料。
config.xml
<?xml version="1.0" encoding="utf-8" ?>
<widget xmlns="http://www.w3.org/ns/widgets" id="" version="1.0">
<name>MyStock v1.0</name>
<author href="http://www.dotblogs.com.tw/jon/" >jon</author>
<content src="stock.html" type="text/html"/>
<access network="true"/>
<icon src="DotBlogsLogo.gif" />
<description>MyStock v1.0</description>
</widget>
stock.html
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>My Stock v1.0</title>
<script src="setting.js" type="text/javascript"></script>
1:
2: <script src="js.js" type="text/javascript">
1: </script>
2: </head>
3: <body>
4:
5: <div id="divState">
6: </div>
7: <div id="divStock">
8: </div>
9:
10: <script>
11: ReadSetting();
</script>
</body>
</html>
setting.js，原本是用另一個xml檔來設定要抓取的股票代號，但部署到wm 6.5的模擬器測試的時候，發現widget好像抓不到那個xml，所以改用js的寫法。Setting的stock陣列裡面填寫要抓取的股票的代碼，stockUrl是抓取的位置。
var Setting = {
'Stock': ['2303', '2890', '2845'],
'StockUrl': 'http://tw.stock.yahoo.com/q/q?s='
};
js.js，主要的程式都寫在這隻檔案裡面。首先先取得Setting裡面Stock和StockUrl的設定，在用迴圈循序的透過XMLHttpRequest物件取回Yahoo網頁的內容，再parse網頁的內容找到股票名稱、股票代碼、成交價和漲跌資訊顯示在stock.html上。
function ReadSetting() {
var s = document.getElementById("divStock");
s.innerHTML = "";
for (var i = 0; i < Setting.Stock.length; i++) {
GetStock(Setting.Stock[i]);
}
}
function GetStock(num) {
var xmlhttp = new XMLHttpRequest();
xmlhttp.open("GET", Setting.StockUrl + num);
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4) {
var result = xmlhttp.responseText;
var s = document.getElementById("divStock");
var state = document.getElementById("divState");
state.innerHTML = "";
var clr = "#000000"; //平盤黑色
var html = "";
var direction = "";
var val = "";
var regex = new RegExp("△.+"); //上漲
var ar = regex.exec(result);
if (ar != null) {
direction = ar[0];
clr = "#ff0000"//紅色
}
regex = new RegExp("▽.+"); //下跌
ar = regex.exec(result);
if (ar != null) {
direction = ar[0];
clr = "#00ff00"//綠色
}
html = "<font style=\"color:" + clr + "\">";
var regex = new RegExp("name=\"stkid\" value=\".+\""); //股票代碼
var ar = regex.exec(result);
if (ar != null) {
html += ar[0].split('"')[3] + " "
}
regex = new RegExp("name=\"stkname\" value=\".+\""); //股票名稱
ar = regex.exec(result);
if (ar != null) {
html += ar[0].split('"')[3] + " "
}
regex = new RegExp("<b>.+</b>"); //成交價
ar = regex.exec(result);
if (ar != null) {
html += ar[0] + " "
val = ar[0];
}
if (direction == "") //漲跌
html += val//平盤
else
html += direction
html += "</font>"
s.innerHTML += html + "<br />";
delete xmlhttp;
}
else {
var state = document.getElementById("divState");
state.innerHTML = "連結中";
}
};
xmlhttp.send();
}
執行畫面
參考資料
http://msdn.microsoft.com/en-us/library/dd721906.aspx
http://www.dotblogs.com.tw/bauann/archive/2009/06/15/8821.aspx
http://www.dotblogs.com.tw/puma/archive/2009/07/04/mobile-6.5-widget-menu.aspx
http://www.dotblogs.com.tw/puma/archive/2009/07/07/mobile-6.5-widget-javascript-object-menu.aspx
---------------
這是簽名檔，I love Dotblogs