チュートリアル  »  ガジェットの作り方  »  ガジェット設定ダイアログ

ガジェット設定ダイアログ

ガジェット設定ダイアログは、一般的なタグで設定項目を指定したHTMLドキュメントで作成します。 作成したHTMLドキュメントはガジェットフォルダに同梱することで使用できます。

HTMLドキュメント作成のポイント

ダイアログのサイズを指定する

ウィンドウのサイズを指定する非表示の要素が必要となります。 指定したサイズになるのはウィンドウのサイズではなくドキュメント表示領域のサイズになります。

▼幅を200pixel、高さを150pixelとする場合の指定

<input type="hidden" name="DLG_WIDTH" value="200" />
<input type="hidden" name="DLG_HEIGHT" value="150" />

config.xmlに保存される内容

ガジェット設定ダイアログで設定を変更した時、config.xmlはフォーム部品のname属性とvalue属性の値を反映する形でデータが保存されます（後述のサンプル参照）。

ページの先頭へ

設定確定、キャンセルボタン

ガジェット設定ダイアログでユーザーが行った変更は設定確定ボタンをクリックした際に保存されます。 設定キャンセルボタンをクリックした場合は設定を変更せずにガジェット設定ダイアログを閉じます。

▼設定確定ボタンの指定

<button style="WIDTH:70" id="ButtonOK">OK</button>

▼設定キャンセルボタンの指定

<button style="WIDTH:70" id="ButtonCancel">キャンセル</button>

設定内容の保存先

ガジェット設定ダイアログで設定内容が確定されると、ガジェット フォルダ内に自動でconfig.xmlが生成されます。 すでにconfig.xmlが存在する場合は更新されます。 設定内容の保存後、Gizmoコンポーネントでは次のイベントが配信されます。

リストで複数選択は不可

<select>タグでmultiple属性は使用できません。 multiple属性を有効にした状態で複数選択してもリスト内で上にある項目のみが保存されます。

チェックボックスでcheckedは不可

チェックボックスでchecked属性は使用しないでください。 checked属性を有効にした場合、ユーザーがチェックをはずしても次回ガジェット設定ダイアログを開いたときユーザーの設定の状態に関わらずチェックされた状態で開きます。

スタイルシート／JavaScriptも使用可能

ガジェット設定ダイアログはInternet Explorerの機能を使用してレンダリングするので、CSSやJavaScriptなども使用できます。

サンプル

▼HTMLソース

<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=shift_jis">
    <title>設定</title>
    <style type="text/css">
      body{
        font-size:12px;
        line-height:16px;
      }
    </style>
  </head>
  <body bgcolor="lightgrey">
    <input type="hidden" name="DLG_WIDTH" value="370" />
    <input type="hidden" name="DLG_HEIGHT" value="320" />
    <form>
      <table width="350" border="0" cellspacing="0" cellpadding="0">
        <tr>
          <td valign="top">
            <p>■テキストフィールド<br>
            シングル<br>
            <input name="singlefield" type="text" value="" size="20"><br>
            マルチ<br>
            <textarea name="multifield" cols="20" rows="5"></textarea><br>
            パスワード<br>
            <input name="pwfield" type="password" value="" size="20"></p>
            <p>■チェックボックス<br>
            <input name="check" type="checkbox" value="1">チェック</p>
          </td>
          <td valign="top">
            <p>■ラジオボタングループ<br>
            <input type="radio" name="radiogroup" value="0">ラジオ0<br>
            <input type="radio" name="radiogroup" value="1">ラジオ1</p>
            <p>■メニュー<br>
              <select name="menu">
                <option value="item1">メニュー１</option>
                <option value="item2">メニュー２</option>
                <option value="item3">メニュー３</option>
              </select>
            </p>
            <p>■リスト<br>
              <select name="list" size="3">
                <option value="item1">リスト１</option>
                <option value="item2">リスト２</option>
                <option value="item3">リスト３</option>
              </select>
            </p>
          </td>
        </tr>
        <tr>
          <td colspan="2" align="right">
            <p><br>
              <button style="WIDTH:70" id="ButtonOK">OK</button>&nbsp;
              <button style="WIDTH:70" id="ButtonCancel">キャンセル</button>
            </p>
          </td>
        </tr>
      </table>
    </form>
  </body>
</html>

表示イメージ表示イメージ

▼確定時に生成されるconfig.xml（実際は改行、インデントは入りません）

<?xml version="1.0" ?>
<data>
  <check>1</check>
  <list>item3</list>
  <menu>item1</menu>
  <multifield>マルチ</multifield>
  <pwfield>gizmo</pwfield>
  <radiogroup>1</radiogroup>
  <singlefield>シングル</singlefield>
</data>
ページの先頭へ