zz,簡(jiǎn)單鬧鈴widget的制作

windson

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

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

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

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

如果你以前有過(guò)網(wǎng)頁(yè)制作的經(jīng)驗(yàn),那對(duì)你來(lái)說(shuō),widget的制作沒(méi)有任何門檻.只不過(guò)把以前的html的網(wǎng)頁(yè)換成了按照widget的類似xml的語(yǔ)法描述的kon文件.對(duì)于一個(gè)widget來(lái)說(shuō),它的源程序由三種文件組成:一是圖片文件,還有就是描述這些圖片以及一些圖元的布局的kon文件,第三就是實(shí)現(xiàn)我們的邏輯和功能的JavaScript的js文件.
注釋: .kon
包含 Widget工具的主要代碼。當(dāng)用戶雙擊 Widget 時(shí) Yahoo!Widget Engine 會(huì)首先找到這個(gè)文件，讀取其中的內(nèi)容。 .kon 包含了初始圖片的位置，程序代碼 (XML 或 eXtensible Markup Language)，以及偏好設(shè)置等項(xiàng)目。有時(shí)候，尤其是在比較復(fù)雜的 Widget工具中，JavaScript 會(huì)保存在 .js 文件中。

kon的基礎(chǔ)知識(shí)
其實(shí)kon其實(shí)就是一個(gè)xml文件,描述的方式都是標(biāo)準(zhǔn)的xml的格式的.下面是一些實(shí)際的例子:
文件頭定義了xml的版本和編碼
<?xml version="1.0" encoding="utf-8"?>
接下來(lái)就是一個(gè)widget的定義.
<widget name="MyAlarmClock" version="3.0" minimumVersion="3.0">
…
</widget>
在一個(gè)widget中可以有多個(gè)窗口,可以定義多個(gè)window對(duì)象
<widget name="MyAlarmClock" version="3.0" minimumVersion="3.0">
    <window name="win1">
…
</window>
<window name="win2">
…
</window>
</widget>
另外,image對(duì)象既可以直接作為widget中的元素也可以做個(gè)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é)點(diǎn)winMain中的水平位置.如果我們想為圖片添加鼠標(biāo)移上就變樣子的效果,那我們就需要為image加入三個(gè)子元素:
<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í)的響應(yīng)函數(shù)中,將該image的src值重新設(shè)置一下.如: imgName.src=”new.jpg”;

textarea是文本輸入框?qū)ο?可以按照下面的方式定義,至于其中的各個(gè)參數(shù)的意義,可以參考Yahoo! Widget的參考手冊(cè).
        <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>
這里要特別提出的是在上面的這個(gè)textarea的描述中有一句<onKeyPress>txtTime_onKeyPress();</onKeyPress>,這句是定義它在收到鍵盤事件的時(shí)候的響應(yīng)函數(shù)為txtTime_onKeyPress.這個(gè)函數(shù)的定義是在js文件中.

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

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

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

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

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

下面是funcitons.js中函數(shù)的一些摘錄:
var gbAlarmOn = false; // 鬧鈴是否已打開(kāi)
// 打開(kāi)/關(guān)閉鬧鐘, “打開(kāi)”被按下以后,會(huì)調(diào)用setAlarm函數(shù)去設(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";
    }
};

// 設(shè)置鬧鐘,計(jì)算當(dāng)前時(shí)候和文本框中事件的差,如果小于當(dāng)前事件,那么就提示出錯(cuò).
function setAlarm() {
    var time = txtTime.data.split(":");
   
    if (time.length != 2 || time[0].length > 2 || time[1].length > 2) {
        // 時(shí)間的輸入格式不正確
        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]);

        // 計(jì)算時(shí)間
        var minus = AlarmHour*60 + AlarmMinute - now.getHours() * 60 - now.getMinutes();
        if (minus <= 0) {
            alert("Wrong time inputed!");
            Turn();
        } else {
            // 鬧鐘設(shè)置為 AlarmHour : AlarmMinute
            timerAlarm.interval = minus*60;
            timerAlarm.ticking = true;
        }
    }
};

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

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


// 當(dāng)在輸入框中鍵入字符時(shí),輸入框只接受數(shù)字以及冒號(hào),并且總長(zhǎng)度不能超過(guò)5
function txtTime_onKeyPress() {
    var key = system.event.key;
    if ( key.charCodeAt(0) < '0'
        || key.charCodeAt(0) > ':'
        || txtTime.data.length >= 5)
    {
        txtTime.rejectKeyPress();
    }
};

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

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

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

目錄結(jié)構(gòu):

圖4
按照widget的目錄格式規(guī)范,將kon文件放在Contents目錄之下.資源文件則放在Contents/Resources目錄下

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

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

圖6
4.2關(guān)閉鬧鈴后,文本框中文字又恢復(fù)為黑色,并且可以編輯.

圖7
4.3選擇鈴聲

圖8

結(jié)束語(yǔ)
widget的制作就是這么簡(jiǎn)單,快點(diǎn)動(dòng)手吧!如果你對(duì)JavaScript不是很熟悉,推薦你看《JavaScript Bible》.如果你對(duì)xml不熟悉,推薦瀏覽w3schools.com