westerndogの小屋

諸事情でYウィジェットを作ることになりそうなので、製作過程のメモを作ることにしました。

準備

1. Yウィジェットエンジンをダウンロードしてインストール。
2. 次に、ウィジェットコンバータをダウンロード。ウィジェットコンバータは、コマンドラインツールとウィジェットバージョンがあるが、コマンドラインバージョンはVistaでうまく動かないので、ウィジェットバージョンを使うことにする。
3. ウィジェットクリエイションチュートリアルに従い、CPUポータルを解凍し、ソース(XML)が見られた状態になったことを確認。

HelloWorld

<?xml version="1.0" encoding="UTF-8"?>
<widget minimumVersion="4.5">
//デバッグモードの設定
  <settings> 
    <setting name="debug" value="on"/>
  </settings>
//ウィンドウの生成
  <window title="mainWindow" name="mainWindow" height="100" width="100" >
//テキストの生成
    <text data="Hello World!" size="16" anchorStyle="topLeft"/>
  </window>
</widget>

1. helloWorld.konファイル(UTF-8、改行LF)を作成。
2. helloworldフォルダの中にContentsフォルダをつくり、Contentsフォルダの中にhelloWorld.konを入れて、helloworldフォルダをウィジェットコンバータウィジェットにドラッグアンドドロップ。
3. 変換する形式flat-fileを選び、変換するとhelloworld.widgetができるので、ProgramFilesのウィジェットエンジンのWidgetsフォルダにコピー。ダブルクリックしてインストールすると、ウィジェット一覧にhelloworldが現れ実行可能になる。

時計

<?xml version="1.0" encoding="UTF-8"?>
<widget minimumVersion="4.0">
<window title="TestClock">
<name>mainWindow</name>
<width>500</width>
<height>50</height>
<shadow>0</shadow>
<alignment>left</alignment>
<visible>0</visible>
<onFirstDisplay>
mainWindow.hOffset = screen.availWidth / 2 + screen.availLeft - 250;
mainWindow.vOffset = screen.availHeight / 2 + screen.availTop - 25;
</onFirstDisplay>

<image src="Images/bg.png">
<name>body</name>
<hOffset>0</hOffset>
<vOffset>0</vOffset>
</image>

<text name="window" data="時間" alignment=right hOffset=488 vOffset=36 size=28 color="#ffffff" />
</window>

<timer name="Ticker" interval="1" ticking="true">
<onTimerFired>
doCalc();
</onTimerFired>
</timer>

<action trigger="onLoad">
<![CDATA[
function doCalc(){
var now = new Date();

var year = now.getFullYear();
var month = now.getMonth()+1;
var date = now.getDate();
var hour = now.getHours();
var min = now.getMinutes();
var sec = now.getSeconds();
var day = now.getDay();

if ( day == 0 ) { day = "日" }
if ( day == 1 ) { day = "月" }
if ( day == 2 ) { day = "火" }
if ( day == 3 ) { day = "水" }
if ( day == 4 ) { day = "木" }
if ( day == 5 ) { day = "金" }
if ( day == 6 ) { day = "土" }

if ( month < 10 ) { month = "0" + month }
if ( date < 10 ) { date = "0" + date }
if ( hour < 10 ) { hour = "0" + hour }
if ( min < 10 ) { min = "0" + min }
if ( sec < 10 ) { sec = "0" + sec }

window.text = year + "年" + month + "月" + date + "日(" + day + ")　"+ hour + "時" + min + "分" + sec + "秒";
}
]]>
</action>
</widget>

1. TestClock.konファイル(UTF-8、改行LF)を作成。
2. TestClockフォルダの中にContentsフォルダをつくり、Contentsフォルダの中にTestClock.konを入れて、TestClockフォルダの中にImagesフォルダをつくり、bg.png(横500px縦50px)に入れる。
3. 通常通り変換。