zz,簡單鬧鈴widget的制作

windson

如果你還不知道Yahoo! Widget,那我建議你先看一看http://cn.widget.yahoo.com/中的介紹.如果你想運行widget工具的話,需要先安裝Widget engine.

以下是摘自Yahoo!的網(wǎng)頁http://cn.widget.yahoo.com/download.htm
什么是Widget Engine?
「Yahoo!Widget Engine」是一種JavaScript應用程序平臺，必須先安裝才能使用各式各樣的Widget工具。

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

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

如果你以前有過網(wǎng)頁制作的經(jīng)驗,那對你來說,widget的制作沒有任何門檻.只不過把以前的html的網(wǎng)頁換成了按照widget的類似xml的語法描述的kon文件.對于一個widget來說,它的源程序由三種文件組成:一是圖片文件,還有就是描述這些圖片以及一些圖元的布局的kon文件,第三就是實現(xiàn)我們的邏輯和功能的JavaScript的js文件.
注釋: .kon
包含 Widget工具的主要代碼。當用戶雙擊 Widget 時 Yahoo!Widget Engine 會首先找到這個文件，讀取其中的內(nèi)容。 .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>
在一個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定義的是在父節(jié)點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時的響應函數(shù)中,將該image的src值重新設置一下.如: imgName.src=”new.jpg”;

textarea是文本輸入框?qū)ο?可以按照下面的方式定義,至于其中的各個參數(shù)的意義,可以參考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的描述中有一句<onKeyPress>txtTime_onKeyPress();</onKeyPress>,這句是定義它在收到鍵盤事件的時候的響應函數(shù)為txtTime_onKeyPress.這個函數(shù)的定義是在js文件中.

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

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

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

3.代碼編寫
首先給出鬧鈴的kon文件內(nèi)容:

圖3
界面方面,主要由四部分組成:一個背景圖imgBg,兩個按鈕圖imgTurn和imgChooseRing,以及一個文本輸入框.另外我們要實現(xiàn)鬧鈴的功能,所以需要加入一個timer對象,控制播放音樂的時間.
現(xiàn)在我們來逐行解析:
第1行:定義xml的版本和編碼
第2行:定義了widget的名字和使用的widget engine的版本
第3行:是否打開調(diào)試,這個選項對于我們制作和調(diào)試的時候非常有用,在制作過程中可以設置為on,當我們發(fā)布的時候設置為off
第4行:定義了widget在載入的時候需要裝載的javascript源文件,也就是實現(xiàn)我們程序邏輯的js文件.
第6行:定義了一個timer對象,用于控制鬧鈴.初始的時候它的ticking設置為false就說明它并不開始計時,
第8行:timer對象在onTimerFired的時候響應的函數(shù)是alarm,也就是震鈴.此事件的意思就是描述timer對象在被激發(fā)的時候的響應行數(shù).
第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中函數(shù)的一些摘錄:
var gbAlarmOn = false; // 鬧鈴是否已打開
// 打開/關閉鬧鐘, “打開”被按下以后,會調(diào)用setAlarm函數(shù)去設置鬧鈴
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 <= 0) {
            alert("Wrong time inputed!");
            Turn();
        } else {
            // 鬧鐘設置為 AlarmHour : AlarmMinute
            timerAlarm.interval = minus*60;
            timerAlarm.ticking = true;
        }
    }
};

// 選擇鈴聲的音樂,調(diào)用widget engine的系統(tǒng)函數(shù)chooseFile
function ChooseRing() {
    // 顯示選擇文件的對話框
    file = chooseFile(new Array(".mp3", "wav"));
    if (file)
        gstrRing = file;
};

// 鬧鈴,播放音樂
function ring() {
    // 停止timer
    timerAlarm.ticking = false;
   
    // 關閉鬧鐘
    Turn();
   
    if (gstrRing) {
        // 播放鈴音
        play(gstrRing, true);
    }
    else {
        // 如果沒有設置鈴聲,那就蹦出個alert
        alert("Time out!");
    }
};


// 當在輸入框中鍵入字符時,輸入框只接受數(shù)字以及冒號,并且總長度不能超過5
function txtTime_onKeyPress() {
    var key = system.event.key;
    if ( key.charCodeAt(0) < '0'
        || key.charCodeAt(0) > ':'
        || 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
按照widget的目錄格式規(guī)范,將kon文件放在Contents目錄之下.資源文件則放在Contents/Resources目錄下

打包方法
首先你需要安裝有winzip或者winrar軟件.打包的過程其實就是一個創(chuàng)建壓縮包的過程.本文中,我使用的winrar,方法如下:在MyAlarmClock.widget目錄的圖標上右鍵,選擇菜單中的”添加到檔案文件”,然后將檔案文件類型選擇為zip,然后確認即可.

圖5
打包完成之后,將zip文件移到另外的地方,然后把后綴.zip去掉后的文件MyAlarmClock.widget就是我們做成的widget的了
四.運行時的截圖
4.1開動鬧鈴后,文本框中文字變紅并且不可以編輯

圖6
4.2關閉鬧鈴后,文本框中文字又恢復為黑色,并且可以編輯.

圖7
4.3選擇鈴聲

圖8

結束語
widget的制作就是這么簡單,快點動手吧!如果你對JavaScript不是很熟悉,推薦你看《JavaScript Bible》.如果你對xml不熟悉,推薦瀏覽w3schools.com