libro
www.tuyano.com
初心者のためのGoogle Apps Scriptプログラミング入門

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

作成:2011-07-04 08:43
更新:2011-11-04 16:18

■フォームを使わないGUIコンポーネントのイベント処理

とりあえず、コンポーネントのイベントを利用したデータのやり取りと、フォーム送信による処理、この2つができるようになれば、GUIの値の利用はなんとかなるでしょう。この基本がわかったところで、もう1つ、別の形での「GUIの値の利用」について紹介しておくことにします。――実は、これが「もっとも重要なGUI利用方法」になるのですが……。

これは、実際にソースコードを見てもらったほうが早いでしょう。下のリスト欄に簡単なサンプルを挙げておきました。先程までと同じように、LabelTextBoxButtonといったコンポーネントがあり、TextBoxに字を書いてボタンを押すとLabelにメッセージが表示されます。既に何度もやった、なんてことないサンプルです。

が、これは送信してもフォームが消えたりしません。コードを見ると、なるほどFormPanelは使っていませんね。ということはフォーム送信ではないわけです。が、それだけでなく、TextBoxChangeHandlerもありません。あるのは、ButtonClickHandlerだけ。ただボタンクリックの処理だけで、TextBoxの値をとり出しLabelに表示する、ということを行っているのです。これは一体……?

その秘密は、ButtonClickHandlerの作成部分にあります。この部分をよく見てみましょう。このようになっていることがわかりますね。
var clickhander = app.createServerClickHandler("onbtnclick");
clickhander.addCallbackElement(panel);
btn.addClickHandler(clickhander);
この中の「addCallbackElement」というのがポイントです。これは、コールバック関数(つまりServerClickHandlerで設定した、イベントにより呼び出される関数)を呼び出すとき、引数に指定したコンポーネントを追加する働きをします。追加するとどうなるか? それは、コールバック関数でのパラメータ処理部分を見れば分かります。
var str = e.parameter.tbox1;
onbtnclickでは、このようにパラメータ変数eparameterから「tbox1」としてTextBoxの値をとり出しています。つまり、addCallbackElementでコンポーネントを追加すると、コールバック関数のparameterにそのコンポーネントの値が追加されるようになるのです。

ここでは、VerticalPaneladdCallbackElementしています。こうすることで、パネルに組み込まれているコンポーネントをすべて追加することができます。ここではTextBoxただ1個しかありませんが、このやり方がわかれば、多数のコンポーネントをまとめて追加することができます。

このaddCallbackElementを利用する場合、注意点としては「TextBoxに必ずsetNameしておく」ということでしょう。これは、フォームの送信の場合と同じですね。この点さえしっかり押さえておけばaddCallbackElementの利用は割と簡単です。

また、フォームの送信では日本語がうまく送れないという問題がありましたが、このやり方だとそうした問題もありません。またChangeHandlerでプロパティに値を保管するなんて迂遠なやり方もしないで済みます。こうした点を考えるなら、このaddCallbackElementを使ったやり方こそが、Google Apps ScriptにおけるGUIイベント処理の基本、といってよさそうです。

addCallbackElementは、当然ですがGUI ビルダーでは設定できません。スクリプトを使ってコンポーネントを組み込むことで初めて利用できる機能です。つまり、「GUI ビルダーは、あくまで"おまけ"であって、本来はスクリプトでGUIを組むのが正しい作法なのだ」と考えるべきなのでしょう。

※プログラムリストが表示されない場合

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

●プログラム・リスト●

function doGet(e){
	var app = UiApp.createApplication().setTitle("Sample Page");
	var panel = app.createVerticalPanel();
	app.add(panel);
	var l1 = app.createLabel("This is Sample Page.");
	l1.setStyleAttribute("font-size", "18pt");
	l1.setStyleAttribute("background-color", "#CCCCFF");
	l1.setStyleAttribute("margin", "10px");
	panel.add(l1);
	var l2 = app.createLabel("label1");
	l2.setId("label1");
	l2.setText("簡単なテキスト操作を行います。");
	panel.add(l2);
	var tbox = app.createTextBox();
	tbox.setName("tbox1").setId("tbox1");
	panel.add(tbox);
	var btn = app.createButton("click");
	var clickhander = app.createServerClickHandler("onbtnclick");
	clickhander.addCallbackElement(panel);
	btn.addClickHandler(clickhander);
	panel.add(btn);
	return app;
}

function onbtnclick(e){
	Logger.log(e);
	var str = e.parameter.tbox1;
	var app = UiApp.getActiveApplication();
	var l1 = app.getElementById("label1");
	l1.setText("you typed: " + str);
	return app;
}
※関連コンテンツ

「初心者のためのGoogle Apps Scriptプログラミング入門」に戻る