Widget引擎編程應用

摘要:Widget是近年來較為流行的概念，通過Widget引擎用戶可以編制豐富多彩的自定義桌面工具。該文通過對Widget引擎編程工具的研究，引導讀者迅速進入Widget引擎編程的精彩世界。該文假定讀者對于XML及JavaScript腳本有一定的了解，因此不詳細對XML及JavaScript腳本進行講解，重點在使用Widget引擎創建桌面應用。

關鍵詞:WIDGET;XML;JavaScript

中圖分類號:TP311 文獻標識碼:A 文章編號:1009-3044(2010)11-2620-04

Widget Engine Application Programming

HUANG Jin-xue

(Department of Computer Science， Zengcheng College of South China Normal University， Guangzhou 511363， China)

Abstract: Widget is a more popular concept in recent years， Widget Engine users can be prepared by a variety of custom desktop tools. In this article， programming tools for Widget Engine Research to guide the reader quickly into the wonderful world of programming. This article assumes that the reader XML and JavaScript scripts have some knowledge. Therefore not go into detail on the XML and JavaScript scripts to explain. Focus on to create desktop applications using the Widget engine.

Key words: WIDGET; XML; JavaScript

「Yahoo!Widget Engine」是一種基于JavaScript的應用程序平臺的桌面引擎，讀者必須先安裝Widget引擎后才能使用、和編制各式各樣的Widget工具。

「Yahoo!Widget Engine」是由雅虎推出的免費并開放源碼的桌面應用程序平臺。它由Widget引擎和Widget工具兩部分組成。同過Widget引擎讀者可以自己動手編制強大的桌面網絡應用程序，以及桌面小程序。同樣也可以通過網絡下載各式各樣的Widget工具來強化自己的桌面，完善您的桌面應用。

「Yahoo!Widget Engine」引擎提供了一個Ajax應用程序平臺，在Windows和Mac OS X的操作系統環境下都可以使用。安裝引擎后就能在兩個平臺上運行各式各樣的Widget工具了。

本文對通過對「Yahoo!Widget Engine」引擎詳細講解，引導讀者通過簡單程序編制創建屬于自己的精美桌面工具。

1 Widget引擎展示

1.1 開始體驗Widget的魅力

Widget到底可以給我們帶來多么優美的桌面應用呢，下面先向讀者展示以下Widget自帶的一些精美工具。(如圖1、2所示)精美的時鐘、系統資源利用情況、筆記本電池電量等等，這些僅僅是所有Widget工具的一些簡單應用。本文將介紹如何定制屬于自己的個性化Widget工具。

1.2 工具準備

在開始進行Widget精彩世界之前，需要準備以下工具:

1)Yahoo!Widget Engine 3.x

Widget 程序引擎(可以從 http://cn.widget.yahoo.com/ 下載)。

2)文本編輯器

NotePad 或者其他任何支持 Unicode 的文字編輯器。

3)圖形編輯器

任何一款具有圖形編輯功能的軟件。為了我們的工具更加靚麗進行一些圖形編輯還是必須的。

1.3 目錄結構

安裝完Widget引擎后，就可以開始體驗Widget 所帶來的精彩世界了。每一個Widget 應用都是以. Widget 結尾。雙擊就可以打開Widget應用了。

如圖3所示，HJ.widget是我們制作的Widget應用。

現在我們來揭開Widget應用的神秘面紗:

Widget是以「包」的形式出現的，可以將“包”想象成一個文件夾，里面包含該 Widget 運行需要的一切內容。

如圖4所示，在一個Widget包中基本上存在兩個文件夾:

Images文件夾:用于存放應用所用到的圖像文件;

Source文件夾:用于存放應用所用到的腳步文件。

HJ.kon 可以說是應用的主控，根本上來講.kon是一個XML文件

文件類型說明:

.kon

包含 Widget工具的主要代碼。當用戶雙擊 Widget 時 Yahoo!Widget Engine 會首先找到這個文件，讀取其中的內容。可以把.kon文件看出是整個Widget 應用執行的入口主程序。

.kon 包含了初始圖片的位置，程序代碼 (XML、JavaScript)，以及偏好設置等項目。有時候，尤其是在比較復雜的 Widget工具中，JavaScript 會保存在 .js 文件中。

.js

包含大部分Widget 應用執行所需要的 JavaScript 代碼。這個文件中不能包含 XML 標簽。

當然還有其它一些文件類型，它們通常是各類圖片。

2 Widget應用編程

2.1 HJ.Widget效果

在進行應用編程之前我們先看一下HJ.Widget應用執行效果，如圖5所示。

可以看到通過這個簡單的 Widget應用，我們可以很方便的在桌面顯示現在紙黃金實時報價。當然刷新頻率，顯示設置都可以根據你的需要動態調整。

2.2 HJ.Widget主程序編程

HJ.kon為主控腳步，其本身就是一個XML文件，我們使用NotePad打開進行程序編制，首先看一看整個XML文件的結構，如圖6所示。所有屬性均包括在的根標簽中。

常用標簽說明:

:表示 Widget 編碼開始的強制標簽。

:開啟與關閉調試功能。

:定義 Widget 版本信息。

:定義 Widget 執行所需要的 Yahoo!Widget Engine 的版本。

:定義 Widget 的顯示區域。窗口范圍之外的任何內容都會被裁減掉。

:允許在 Widget 中使用圖片。

:允許在 Widget 中使用文本。

與對象關聯的程序代碼標簽。

定義偏好設置以及相關屬性的標簽。

定義定時器的標簽。

主程序腳本編程:

XML文檔開始

Widget應用程序強制標簽

on調試開關，不要忘記了發布正式版本要OFF哦

largePlanet

15

25

255

800

Image在主窗口中顯示的圖片信息，使用相對路徑。

Text 在主窗口中顯示的文本信息

include(\"./Source/onload.js\");

Action 主程序裝載后的應用腳本，使用相對路徑

doGetHJ();

Timer 設置定時裝置，定時觸發需要操作，在本實例中通過定時刷新賬戶金的顯示。當然這個定時的設置可以動態的進行改變。

2.3 HJ.Widget腳本編制

如何將主應用程序同腳本關聯起來，關鍵點主要有兩個:

1)主控程序開始調用的腳本，已經初始執行語句。

include(\"./Source/onload.js\");

主控程序通過在裝載的時候調用onload.js腳本文件，執行相關的初始化動作。

GetHj.interval = preferences.updateFrequency.value;

--得到刷新間隔時間，此時間可以通過參數設定

doGetHJ();

--初始執行腳本，得到初始要顯示的內容

mainWindow.visible = true;

--將窗口設置為可見

當然你還可以做更多的操作。

2)初始任務完成后，定時裝置自發的定時腳本執行。

doGetHJ();

定時任務每隔300秒進行自動出發，調用onload.js腳本文件中的doGetHJ函數來刷新顯示。

function doGetHJ()

{

var urll = new URL();

創建URL連接，實時從網絡動態獲得顯示信息

urll.location =\"http://www.xxx.com/hj.html\";

完整的網站地址

urll.fetchAsync(url_do);

}

function url_do(url)

{

URLdata = url.result;

取得獲取地址結果，對結果進行分析，提取自己關心的關鍵點。

if (URLdata.length == 0 || URLdata == \"Could not load URL\")

{

print(\"連接失敗，請檢查代理設置\");

return 0;

}

var reg1 = new RegExp(\"]*?(?:>|\\ {1}[^>]*?)([^\\]*?)\"，\"gi\");

quoteLines = URLdata.match(reg1);

var reg2 = new RegExp(\"([\\u672c\\u5e01\\u91d1])+.*([^\\]*)\"，\"gi\");

使用正則表達式對網頁內容進行分析，提取相關內容

var str2=\"\";

for (line in quoteLines)

{

quoteParts = quoteLines[line].match(reg2);

ss=String(quoteParts);

對得到的每一行信息進行分析

}

mrj.data=\"買入價: \"+vmcj;

mcj.data=\"買出價: \"+vmrj;

提取到顯示值進行顯示

}

通過這些程序段，我們可以看出整個.Widget腳本，是由JavaScript語句所編寫的函數集合，通過調用不同的函數達到用于顯示的目的，下面列舉一些常見的Widget用到的對象及函數。

1)openURL() 在默認網頁瀏覽器中打開指定的 URL

使用此函數來啟動 URL 將會使 URL 以在用戶的「聯網設置」中設定的適當應用程序來啟動。如果自變量為正確格式的 URL，此函數將會返回 true，否則將會返回 1。

2)play( ) 播放音效文件

支持的格式有 MP3、AIFF、AU、WAV 與 SND。調用將會立即返回且會異步播放聲音。

3)print()在調試窗口中打印字符串

常用于調試。請注意，將需要在 Widget 的 XML 中指定:

on

才能看到輸出結果。

4)filesystem

filesystem 對象可提供 Widget 將在其上執行的對于系統基礎文件及目錄的存取。請注意，在 3.1 版及更高版本中，Windows 引擎將不允許 filesystem 對象改變 C:\\Windows (或者設定為任何名稱的 Windows 目錄) 中的任何內容。

3 制作發布

在完成所有程序編制后，就可以將自己制作的工具進行發布給好友一同分享。在舊版本的Widget中，發布只需要使用WINRAR之類的壓縮工具，將整個文件進行壓縮，然后將后綴修改為.Widget就可以。

新引擎引入了新的發布格式，通過新的Widget打包工具，可以直接打包出.Widget的文件，同時保護代碼。

打包操作如圖7，圖8所示。

執行widget_convert.widget 打開Widget轉換工具，進行打包轉換操作，直接將需要打包文件拖入工具中，點擊convert，就可以看到本文的HJ.Widget 文件了，發布時只需要發布HJ.Widget文件就可以了，而不需要發布一個目錄，這樣很方便了很多。

4 結束語

通過研究，筆者希望可以快速引導讀者進入Widget的多彩世界，通過不斷豐富Widget工具，讓我們的桌面變得更加的完善。Widget所涉及到的內容有很多，包括XML、JavaScript等多種語言，工具支持。

參考文獻:

[1] Yahoo!Widget Engine 3.1.1 版中文技術手冊[EB/OL].http://download.csdn.net/source/1769940.