今回は設定画面と設定の保存／読み出し，ドッキング，デバッグについての解説をしていきます。

設定画面と設定の保存と読み出し

天気予報を表示するガジェットなのに予報の地域の指定ができない。そんな不便なガジェットは普通ありません。したがって，ガジェットの設定をユーザが変更できるよう，設定画面を表示する機能をつけたくなることは当然出てくる話です。

必要とされる機能ということで，Windowsサイドバーにはガジェットの設定画面を表示するための仕組みが提供されていますので，その使い方について説明します。

まずは設定画面がどのようなものなのか，Windows Vistaに標準でインストールされていて設定画面を持っている「天気」ガジェットを例に見てみます。設定画面を持っているガジェットは，マウスをホバーしたとき，閉じるボタンの下にスパナマークのボタンが表示されます。

このボタンをクリックすると，アニメーションとともに次のような設定画面が表示されます。

この設定画面の中身もFlyout同様にHTMLです。Flyoutと異なるのは，

• この設定画面がモーダルであること―つまり表示中にガジェット本体を触ることができなくなる―
• 「OK」ボタンと「キャンセル」ボタンが用意されていること
• Flyoutがガジェット側から表示・非表示を行うのに対して，設定画面はユーザのアクションによって表示され，閉じられる

という点があります。

また，設定画面があったとしても，毎度毎度設定するというのは普通に考えてありえませんので，当然設定の保存と読み出しも必要となります。

そこで，設定画面をガジェットで利用する方法について説明します。サンプルとして，設定画面で入力した文字列を覚えておく，というものを作ります。

設定画面

設定画面の表示にあたって必要な手順はHTMLを作り，ガジェットのプロパティにファイル名を指定するだけです。先ほどの説明したとおりFlyoutと違い設定画面はユーザが表示したいときに表示されユーザによって閉じられるので表示を指示する必要はありません。その代わりに閉じれもしないので，設定が完了したことを通知するイベントが用意されています。そのイベントでガジェットに設定を反映します。

まず，設定画面のHTMLの雛形を作ります。ファイル名はsetting.htmlとします（ほかのHTMLと同様に自由につけられます⁠）⁠。内容は以下のようにします。

<title>Settings</title>
<style type="text/css">
body {  margin: 0; padding: 0; width: 240px; height: 140px; border: 1px solid red; }
</style>
<p>入力: <input type="text" name="inputText"></p>

ガジェット本体，FlyoutのHTMLと同様body要素にサイズの指定が必要です。これはサンプルなのでどこが表示領域なのかわかりやすくするためにborderを入れています。

HTMLファイルができたら「ガジェット側のスクリプト」でファイルを指定します。設定画面のHTMLの指定はSystem.Gadget.settingsUIプロパティにファイル名をセットすることで行います。

System.Gadget.settingsUI = "setting.html";

これを書いてガジェットをサイドバーに追加すると，設定ボタンが表示されるようになり，ボタンをクリックすると次の図のような画面が表示されます。

設定画面のイベント

後述する設定の保存・読み込みのためには，設定画面関連のイベントを使う必要があります。設定画面関連のイベントは以下のようなものがあります。

System.Gadget.onSettingsClosingイベント

設定画面が「OK」ボタンまたは「キャンセル」ボタンで閉じられようとしているときに発生します。このイベントは引数にSystem.Gadget.Settings.ClosingEventオブジェクトが渡されます。ClosingEventオブジェクトには以下のプロパティが用意されています。

closeActionプロパティ	設定画面を閉じた理由を取得できます。e.Action.commit（OKボタン）またはe.Action.cancel（キャンセルボタン）が格納されます（引数をeとしています）
cancelプロパティ	設定画面を閉じることをキャンセルするかどうかをbooleanで指定します。trueを指定した場合「OK」ボタンをクリックしても閉じることができなくなります。例えば入力エラーがある場合などに利用します
cancellableプロパティ	ユーザによってキャンセルされたかどうかをbooleanで取得できます。trueの場合，キャンセルされたことを表します
System.Gadget.onSettingsClosedイベント	設定画面が閉じられた際に呼ばれるイベントです。ガジェット側に設定を反映する場合などに利用できます
System.Gadget.onShowSettingsイベント	設定画面が表示された際に呼ばれるイベントです。ガジェットの動作を一時的に止めるなどに利用できます

以下にイベントを利用するサンプルコードを載せます。

// 例
function onSettingsClosing (event) {
  // 閉じようとしているときのイベント
  if (event.closeAction == event.Action.commit) {
    // OK ボタン
    if (!入力内容のチェックメソッドなど) {
      // 入力内容が正しくなかったらキャンセル
      event.cancel = true;
    }
  }
}
function onSettingsClosed () {
  // 閉じられたときのイベント
  ...設定の反映等...
}
function onShow() {
  // 表示されたときのイベント
}
System.Gadget.onSettingsClosing = onSettingsClosing;
System.Gadget.onSettingsClosed = onSettingsClosed;
System.Gadget.onShowSettings = onShow;