今回は設定画面と設定の保存/
設定画面と設定の保存と読み出し
天気予報を表示するガジェットなのに予報の地域の指定ができない。そんな不便なガジェットは普通ありません。したがって,
必要とされる機能ということで,
まずは設定画面がどのようなものなのか,
このボタンをクリックすると,
この設定画面の中身もFlyout同様にHTMLです。Flyoutと異なるのは,
- この設定画面がモーダルであること―つまり表示中にガジェット本体を触ることができなくなる―
- 「OK」
ボタンと 「キャンセル」 ボタンが用意されていること - Flyoutがガジェット側から表示・
非表示を行うのに対して, 設定画面はユーザのアクションによって表示され, 閉じられる
という点があります。
また,
そこで,
設定画面
設定画面の表示にあたって必要な手順は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>
ガジェット本体,
HTMLファイルができたら
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;