スクリプトによるGUIの生成 (5/5)

さて、ここまで来たところで、再び「GUIビルダー」に戻ってみましょう。

GUIビルダーでは、そのままボタンのイベントなどに関数を設定しても、他のコンポーネントの値をとり出すことができませんでした。そしてその原因は、どうやらサーバー側で動くイベントハンドラが設定されていないためらしい、ということもわかりました。例えばボタンクリックで何かをさせるなら、ServerClickHandlerを使って値を取り出したいコンポーネント（TextBoxなど）をCallbackElementとして組み込んでやれば良いのでした。

だから、GUIビルダーは使えない。……これが結論でした。

まてよ？　これはちょっと違うでしょう。だったら、GUIビルダーで作ったGUIのコンポーネントに、これらを組み込んでやればいいんじゃないですか？

ということで、やってみましょう。ここではGUIビルダーを使って、以下のようなコンポーネントを配置した「MyGui」を作成して利用してみます。

・Label――IDに「Label1」と設定したものを用意します。
・TextBox――IDと名前に「TextBox1」と設定しておきます。(名前の設定を忘れないように！）
・Button――IDは「Button1」としておきます。これは、On Mouse Clickのイベントは設定しません。そのままでOKです。

作成したGUIをスプレッドシートから呼び出し、使ってみましょう。下のリスト欄に簡単な利用のための関数を書いておきました。これをスクリプトエディタで書いて実行してみてください。スプレッドシートに、GUIエディターで作ったダイアログが表示されます。そして、テキストを書いてボタンを押せば、ちゃんとそのテキストがラベルに表示されます！

ここでは、GUIをロードしたら、まずTextBox1とButton1のDOMオブジェクトを変数に取得しておきます。

var txt = app.getElementById('TextBox1');
var btn = app.getElementById('Button1');

そして、ServerClickHandlerを作成します。

var clickhander = app.createServerClickHandler("onbtnclick");

続いて、ServerClickHandlerにCallbackElementとしてTextBox1を組み込みます。

clickhander.addCallbackElement(txt);

そして、Button1のクリックハンドラにServerClickHandlerを設定します。

btn.addClickHandler(clickhander);

後はGUIをUiAppに追加して表示するだけです。ボタンクリックの処理は、onbtnclickに用意しておきます。見ればわかるように、

var str = e.parameter.TextBox1;

このようにしてちゃんとTextBox1の値が取り出せます。これでようやくGUIビルダーが実用になりますね。

まあ、わざわざこんなことしないでGUIビルダーでサーバー側のハンドラも設定できるようにしてくれ、とおもいますが、Googleが対応してくれるまでは、とりあえずこのやり方で乗り切りましょう！

(by. SYODA-Tuyano.)

※リストが表示されない場合

AddBlockなどの広告ブロックツールがONになっているとリストなどが表示されない場合があります。これらのツールをOFFにしてみてください。

function showGui(){
  var sheet = SpreadsheetApp.getActiveSpreadsheet();
  var app = UiApp.createApplication();
  // GUIをロードし、ボタンクリックのイベントを設定する
  var gui = app.loadComponent("MyGui");
  var txt = app.getElementById('TextBox1');
  var btn = app.getElementById('Button1');
  var clickhander = app.createServerClickHandler("onbtnclick");
  clickhander.addCallbackElement(txt);
  btn.addClickHandler(clickhander);
  // GUIを追加して表示する
  app.add(gui);
  sheet.show(app);
}

function onbtnclick(e){
    Logger.log(e);
    var str = e.parameter.TextBox1;
    var app = UiApp.getActiveApplication();
    var l1 = app.getElementById("Label1");
    l1.setText("you typed: " + str);
    return app;
}