[GAS][Ui]リセットボタンを実装するには: 逆引きGoogle Apps Script

2012 年 4 月 14 日 土曜日

リセットボタンを実装

createResetButtonにより、入力された文字列をすべてクリアすることができる。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
function doGet() {
  var app = UiApp.createApplication();
 
  //フォーム追加
  var formPanel = app.createFormPanel();
  app.add(formPanel);
 
  //フォームレイアウト用パネル作成
  var hPanel = app.createHorizontalPanel();
  formPanel.add(hPanel);  
 
  //テキストボックス、ボタン作成
  var textBox = app.createTextBox();
  var submitButton = app.createSubmitButton('送信');
  var resetButton = app.createResetButton('リセット');
  hPanel.add(textBox)
    .add(submitButton)
    .add(resetButton);
 
  return app; 
 
}

行2: ユーザーインターフェースインスタンスを生成。

行5-6: リセットボタンを有効にするには、リセット対象のオブジェクトとリセットボタンを1つのフォームパネルに配置する必要がある。

行9-10: フォームパネルに配置できるオブジェクトは1つだけという制約がある。そのため、フォームパネルにはレイアウトパネル(Vertical PanelやHorizontal Panel)のみ配置し、このレイアウトパネルにテキストボックスやボタン等を配置することになる。

行13: createTextBox()によりテキストボックスを作成。

行14: createSubmitButton()によりSubmitボタンを作成。

行15: createResetButton()によりリセットボタン作成。

行16-18: レイアウトパネルにテキストボックス、リセットボタンを配置。

行20: Uiを画面に表示。

構文

createResetButton()

createResetButton(html)

createResetButton(html, clickHandler)

このようなHTMLに展開される

<button class="gwt-ResetButton" type="reset">リセット</button>

パラメータ

html
<button>~</button>に出力するhtml。例えば<strong>保存</strong>をパラメータとして指定すると、

<button class="gwt-Button" type="button"><strong>保存</strong></button>

が展開される。

clickHandler
クライアントハンドラまたはサーバハンドラを指定。ボタンクリック時のイベントを定義する場合は指定する。

注意点

HTMLの<input type=”reset”>とは動作が異なるので注意が必要。

HTMLで作成した通常のリセットボタンは、フォームの内容を初期値に戻すという動作をするが、createResetButton()で作成したリセットボタンは、フォームの内容を全てクリアする。入力前の状態に戻るわけではない。

公式ドキュメント

スポンサードリンク

関連記事

コメントをどうぞ

トラックバック

このエントリーのトラックバックURL:

http://www.bmoo.net/archives/2012/04/313874.html/trackback