DockはWidget Engine4.0以降につけられた機能で、MacOS Xのように稼働中のウィジェットのアイコンと若干の情報を画面の端に出しっぱなしにするというユーザーインターフェースです。

別にdockは作らなくても動作するのですが、体裁としてやはり欠かせません。
dockの表示のためには、xml1個と画像1個、JavaScriptを少々追加します。

画像は72.70PixelのJPEG,PNG,GIFで作ります。ここではdock.png とします。
さらに、上に電源と電波状態のアイコンを表示させます。それぞれ初期はAC.png, wifiOut.pngとします。

dock.xml#

<?xml version="1.0" encoding="utf-8"?>
<dock-item version="1.0">
  <image id="img" src="Resources/dock.png"/>
  <image id="imgBatt" src="Resources/AC.png"      hOffset="7" vOffset="50" />
  <image id="imgWifi" src="Resources/wifiOut.png" hOffset="48" vOffset="50" />
 </dock-item>

ここでは、ベースの画像dock.pngの上にアイコンを2つ重ねています。<?xml>と<dock-item>の部分はおまじないなのでこのまま使ってください。

yKayo.konの追加部分#

<action trigger="onLoad">
    dockDoc = XMLDOM.parse(filesystem.readFile("dock.xml"));
    yKayoApp.setMyDockInfo();

yKayoが起動した直後にdock.xmlを読み込んで、dockのXMLドキュメント「dockDoc」を作ります。
このdockDocのエレメント（部品）の文字や画像を後から入れ替えて、ウィジェットの動作情報を簡潔に表示させます。

dockDocに表示させたい情報を仕込んで、setDockItem(dockDoc)することで表示をアップデートさせます。

setMyDockInfo()の実装#

/** dockの表示情報 */
yKayoApp.setMyDockInfo = function(dockDoc){
    var imgBatt = dockDoc.getElementById("imgBatt");
    imgBatt.setAttribute("src", this.getBattImage());
    widget.setDockItem(dockDoc);
}

えーと、これは何でしたっけ。

dockDocには,<image id="imgBatt">という命令を書きました。
ここでは「imgBatt=dockDoc.getElementById(someID)」と書くことで、imgBattがImageオブジェクトになります。

<image ID="imgBatt" name="imgBatt" src="Resources/AC.png" />

と書いたような感じです。

imgBatt.setAtrribute("src"=xxx);

というところで、AC.png を表示していたのを battery3.png などに書き換えます。
ここでは、"src"=this.getBattImage()
という命令にして、ファイル名を関数で決定しています。
戻ってくる値は"Resources/xxx.png" などになります。

最後に

widget.setDockItem(dockDoc);

という命令を実行させることで、実際にDockの表示が更新されます。

ついでなので関数も出しておきます。

getBattImage関数#

/**
 * バッテリ残量の画像を決める
 * とりあえずバッテリーは1個目だけを見る
 */
yKayoApp.getBattImage = function(){
    if (system.batteryCount == 0) {
        return ("Resources/AC.png");
    }
    else {
        if (system.battery[0].powerSourceState == "AC Power") {
            return ("Resources/AC.png");
        }
        
        else 
            if (system.battery[0].currentCapacity >= 80) {
                return ("Resources/battery3.png");
                
            }
            else 
                if (system.battery[0].currentCapacity >= 50) {
                    return ("Resources/battery2.png");
                }
                else 
                    if (system.battery[0].currentCapacity >= 30) {
                        return ("Resources/battery1.png");
                    }
                    else {
                        return ("Resources/battery0.png");
                    }
    }
}