簡單鬧鈴widget的製作

簡單鬧鈴widget的製作

---

作者：malin  (2007-02-26 17:55:01)

如果你還不知道Yahoo! Widget,那我建議你先看一看http://cn.widget.yahoo.com/中的介紹.如果你想運行widget工具的話,需要先安裝Widget engine.
以下是摘自Yahoo!的網頁http://cn.widget.yahoo.com/download.htm
什麼是Widget Engine?
「Yahoo!Widget Engine」是一種JavaScript應用程序平臺，必須先安裝才能使用各式各樣的Widget工具。

什麼是Widget工具?
「Yahoo!Widget工具」是一種迷你應用程序，可在計算機桌面上通過Yahoo!Widget Engine運行。Widget的功能包羅萬象，例如：查看氣象、閱讀實時新聞、進行網頁資訊搜索，或玩玩小遊戲。Widget工具通常位在計算機桌面上，看起來像是張小圖片或小動畫，和一般的應用程序不同。

一製作前的準備知識
Yahoo! Widget讓我們拒絕單調, 擁有超酷的桌面.如果你想開發一個widget, 其實也很簡單.只需要瞭解下面的內容就可以了:
1. 圖形圖像的製作和處理
2. Html或者xml的語法
3. JavaScript程序設計

如果你以前有過網頁製作的經驗,那對你來說,widget的製作沒有任何門檻.只不過把以前的html的網頁換成了按照widget的類似xml的語法描述的kon文件.對於一個widget來說,它的源程序由三種文件組成:一是圖片文件,還有就是描述這些圖片以及一些圖元的佈局的kon文件,第三就是實現我們的邏輯和功能的JavaScript的js文件.
註釋: .kon
包含 Widget工具的主要代碼。當用戶雙擊 Widget 時 Yahoo!Widget Engine 會首先找到這個文件，讀取其中的內容。 .kon 包含了初始圖片的位置，程序代碼 (XML 或 eXtensible Markup Language)，以及偏好設置等項目。有時候，尤其是在比較複雜的 Widget工具中，JavaScript 會保存在 .js 文件中。

kon的基礎知識
其實kon其實就是一個xml文件,描述的方式都是標準的xml的格式的.下面是一些實際的例子:
文件頭定義了xml的版本和編碼
<?xml version="1.0" encoding="utf-8"?>
接下來就是一個widget的定義.
<widget name="MyAlarmClock" version="3.0" minimumVersion="3.0">
…

在一個widget中可以有多個窗口,可以定義多個window對象

<widget name="MyAlarmClock" version="3.0" minimumVersion="3.0">
<window name="win1">
…
</window>
<window name="win2">
…
</window>
</widget>

另外,image對象既可以直接作爲widget中的元素也可以做個window中的元素
<window name="winMain" visible="1" shadow="1">
<image name="imgBg">
<src>Resources/background.png</src>
<hOffset>0</hOffset>
<vOffset>0</vOffset>
<opacity>200</opacity>
</image>
...
</window>
其中src定義的是image的源文件的位置.通常放在Resources目錄下. hOffset定義的是在父節點winMain中的水平位置.如果我們想爲圖片添加鼠標移上就變樣子的效果,那我們就需要爲image加入三個子元素:
<image name="imgName">
…
<onMouseEnter> imgName _onMouseEnter();</onMouseEnter>
<onMouseExit> imgName _onMouseUp();</onMouseExit>
<onMouseDown> imgName onMouseDown();</onMouseDown>
<onMouseUp> imgName _onMouseUp();</onMouseUp>
</image>
在onMouseEnter, onMouseUp, onMouseDown和onMouseUp時的響應函數中,將該image的src值重新設置一下.如: imgName.src=”new.jpg”;

textarea是文本輸入框對象,可以按照下面的方式定義,至於其中的各個參數的意義,可以參考Yahoo! Widget的參考手冊.
<textarea name="txtTime">
<hOffset>105</hOffset>
<vOffset>60</vOffset>
<lines>1</lines>
<alignment>center</alignment>
<size>14</size>
<bgOpacity>0</bgOpacity>
<editable>true</editable>
<scrollbar>false</scrollbar>
<onKeyPress>txtTime_onKeyPress();</onKeyPress>
</textarea>

這裏要特別提出的是在上面的這個textarea的描述中有一句 txtTime_onKeyPress(); ,這句是定義它在收到鍵盤事件的時候的響應函數爲txtTime_onKeyPress.這個函數的定義是在js文件中.

2.widget的界面效果和素材
首先展示一下鬧鈴的界面:

其中,使用到的圖片如下:


分別是一張背景圖和三個按鈕的不同狀態(正常,鼠標移上時,鼠標按下時)的圖片.這些素材的準備工作我就不在這裏贅述.

3.代碼編寫
首先給出鬧鈴的kon文件內容:


界面方面,主要由四部分組成:一個背景圖imgBg,兩個按鈕圖imgTurn和imgChooseRing,以及一個文本輸入框.另外我們要實現鬧鈴的功能,所以需要加入一個timer對象,控制播放音樂的時間.
現在我們來逐行解析:
第1行:定義xml的版本和編碼
第2行:定義了widget的名字和使用的widget engine的版本
第3行:是否打開調試,這個選項對於我們製作和調試的時候非常有用,在製作過程中可以設置爲on,當我們發佈的時候設置爲off
第4行:定義了widget在載入的時候需要裝載的javascript源文件,也就是實現我們程序邏輯的js文件.
第6行:定義了一個timer對象,用於控制鬧鈴.初始的時候它的ticking設置爲false就說明它並不開始計時,
第8行:timer對象在onTimerFired的時候響應的函數是alarm,也就是震鈴.此事件的意思就是描述timer對象在被激發的時候的響應行數.
第11行:定義了一個window對象,其實在本程序中只是用到一個window,但是出於對以後的擴張的考慮,即使只有一個窗口的時候,也應該定義window.
第12行-17行:定義了image,實際上這個image就是窗體實際上的背景圖.
第19行-29行:定義了用於輸入鬧鐘時間的文本框,它只允許輸入一行,它的onKeyPress的響應事件是txtTime_onKeyPress();
第31行-39行:定義了”打開”/”關閉”鬧鐘的圖片按鈕,實際上就只是一個image對象,通過爲它設置不同的src,就可以達到按鈕的效果.
第31行-39行:定義了”選擇鬧鈴”的圖片按鈕,它也是一個image對象,通過爲它設置不同的src,就可以達到按鈕的效果.點擊它之後的響應事件是ChooseRing(),會彈出一個選擇文件的對話框.可以選擇硬盤上的mp3和wav文件.

下面是funcitons.js中函數的一些摘錄:
var gbAlarmOn = false; // 鬧鈴是否已打開
// 打開/關閉鬧鐘, “打開”被按下以後,會調用setAlarm函數去設置鬧鈴
function Turn() {
gbAlarmOn = !gbAlarmOn;
if (gbAlarmOn) {
imgTurn.src = 'Resources/turnoff-normal.png';
txtTime.editable = false;
txtTime.color = "#ff0000";
setAlarm();
} else {
imgTurn.src = 'Resources/turnon-normal.png';
txtTime.editable = true;
txtTime.color = "#000000";
}
};

// 設置鬧鐘,計算當前時候和文本框中事件的差,如果小於當前事件,那麼就提示出錯.
function setAlarm() {
var time = txtTime.data.split(":");

if (time.length != 2 || time[0].length 2 || time[1].length 2) {
// 時間的輸入格式不正確
alert("Error occurs when input, please input in format: /"hh:mm/".");
} else {
var now = new Date();
var AlarmHour = parseInt(time[0]);
var AlarmMinute = parseInt(time[1]);

// 計算時間
var minus = AlarmHour*60 + AlarmMinute - now.getHours() * 60 - now.getMinutes();
if (minus ':'
|| txtTime.data.length = 5)
{
txtTime.rejectKeyPress();
}
};

// "打開","關閉"的mouseEnter事件
function imgTurn_onMouseEnter() {
if (!gbAlarmOn) {//如果當前是”打開”按鈕
imgTurn.src = 'Resources/turnon-enter.png';
} else {
imgTurn.src = 'Resources/turnoff-enter.png';
}
};

// "打開","關閉"的mouseDown事件
function imgTurn_onMouseDown() {
if (!gbAlarmOn) {//如果當前是”打開”按鈕
imgTurn.src = 'Resources/turnon-down.png';
} else {
imgTurn.src = 'Resources/turnoff-down.png';
}
};

// "打開","關閉"的mouseUp事件
function imgTurn_onMouseUp() {
if (!gbAlarmOn) {//如果當前是”打開”按鈕
imgTurn.src = 'Resources/turnon-normal.png';
} else {
imgTurn.src = 'Resources/turnoff-normal.png';
}
};

目錄結構:



打包方法:


四.運行時的截圖
4.1開動鬧鈴後,文本框中文字變紅並且不可以編輯


4.2關閉鬧鈴後,文本框中文字又恢復爲黑色,並且可以編輯.


4.3選擇鈴聲