Yahoo!ウィジェット の作り方と注意点 (2) - 設定画面の作成

widgets

ノートPCのハードディスクが逝ってしまって鬱……
まあ気を取り直して id:n_shuyo:20070413:widgets の続き。


Yahoo! Widgets では、前回紹介した *.kon ファイルで画面の要素を定義しつつ、ロジックは JavaScript で記述する。
スクリプト本体は *.kon ファイル内にも記述することが出来るが、特にメリットがあるようには思えないので（不等号を含む場合には CDATA にしないといけない、とか気を遣うことも増える）、素直に外部ファイルに記述して include するようにしよう。
外部 JavaScript ファイルは、前回の Hello World! サンプルにてもコメントアウトで記述しておいたとおり、 onLoad アクションにて include すればよい(パスは *.kon の置いてあるディレクトリからの相対パスで指定)。というわけで再掲。

<?xml version="1.0" encoding="UTF-8"?>
<widget version="0.1" minimumVersion="3.0" debug="on">
  <window name="mainWindow" title="タイトル" width="320" height="240" visible="true">
    <text name="myText" data="Hello World!" hOffset="0" vOffset="30"
          size="18" color="#000000" bgColor="#ffffff" bgOpacity="255" />
  </window>
  <action trigger="onLoad">
    // 外部 js ファイルがある場合は、ここで読み込み指定
    // include("main.js");
  </action>
</widget>


各オブジェクトごと、あるいはシステムにはイベントハンドラを指定できるようになっているので、上述の JavaScript ファイル内で定義しておいた関数を指定する。こんな感じ。

<!-- ボタン画像がクリックされたときに click(); を呼び出す -->
<image name="btn" src="Images/button.png" hOffset="5" vOffset="5" onMouseDown='click();' />

<!-- 設定が変更されたときに init() を呼び出す -->
<action trigger="onPreferencesChanged">
  init();
</action>


こうして簡単なロジックを記述できるようになると、次はユーザＩＤやパスワードなどの設定値を保持して、サービスと連携などしたくなる。
Yahoo! Widgets では、タグを記述するだけで、設定値を入力・編集する画面を用意し、保存も勝手にやってくれる仕組みがある。設定の管理はまじめに作るととても面倒なので、個人的にはとてもポイントが高い。


例えば *.kon に次のように記述すると、以下の設定画面が自動的に生成される。

<preference name="userAccount" title="Username:" type="text" description="Enter your Twitter Username" />
<preference name="userPassword" title="Password:" type="text" secure="yes" description="Enter your Twitter Password" />
<preference name="refreshInterval" title="Interval:" type="slider" description="Enter Interval time for refresh (min)" minLength="60" maxLength="600" defaultValue="120" ticks="9">
  <tickLabel>1</tickLabel>
  <tickLabel>minutes</tickLabel>
  <tickLabel>10</tickLabel>
</preference>

スクリプト内からこの設定値にアクセスするには "preferences.userAccount.value" と記述すればよい。