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

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

作成:2011-07-04 08:39
更新:2011-07-06 09:31

■フォーム送信の処理

続いて「フォーム送信」について説明しておきましょう。フォームを送信して処理させるようなサービスでは、Form Panelを用意する部分もスクリプトで記述しておかなければいけません。

フォームはForm PanelとしてGUI ビルダーに用意されていました。これは、「createFormPanel」というメソッドで作成することができます。これでFormPanelオブジェクトを作成し、この中にフォーム関連の部品を組み込んでいけば、簡単にフォームを作ることができます。

では、フォームをスクリプト内から利用することの利点はなんでしょうか。それは、送信後の処理などをダイナミックに行える、という点でしょう。既にGUIをスクリプトから生成し組み込む方法はわかっています。ならば、例えば送信後の表示を独自にコンポーネント類を用意して作成したりすることもできるはずですね。

簡単な利用例をあげておきましょう。下のリスト欄では、フォーム送信後、フォームの代りにテキストとボタンが追加表示されるようにしています。ここでは、doPostで送信後の処理を行う際、新たにLabelButtonを作成してPanelに組み込んでいます。

注意すべきは、「FormPanelとその中に組み込んだものは画面から消えるが、それ以外のものは残っている」ということでしょう。ですから、例えばここでは最初にVerticalPanelを用意し、この中にすべてを組み込んでいますが、このVerticalPanelもちゃんと残されている、ということになります。

doPostで新たに作成した部品は、このVerticalPanelに組み込むことになります。そのためには、VerticalPanelにはsetIdIDを指定しておく必要があります(でないと、getElementByIdで取得できないので)。

なお、doPostで、消えたフォームを復活させよう、と考える人はきっと多いと思いますが、これはうまくいかないようです。setVisibleでもダメだし、改めてパネルにaddしなおしたりしてもうまく表示されません。それよりは、リロードさせたほうがはるかに簡単のようですね。

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

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

●プログラム・リスト●

function doGet(e){
	var app = UiApp.createApplication().setTitle("Sample Page");
	var panel = app.createVerticalPanel();
	panel.setId("mainpanel");
	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 form = app.createFormPanel();
	form.setId("form");
	var inpanel = app.createVerticalPanel();
	form.add(inpanel);
	var tbox = app.createTextBox();
	tbox.setName("tbox1");
	inpanel.add(tbox);
	var btn = app.createSubmitButton("Submit");
	inpanel.add(btn);
	panel.add(form);
	return app;
}

function doPost(e){
	var app = UiApp.getActiveApplication();
	var str = e.parameter.tbox1;
	var label = app.getElementById("label1");
	label.setText('you typed: ' + str);
	// 表示修正
	var btn = app.createButton("Thank you!!!");
	var handler = app.createServerClickHandler("newbtnclick");
	btn.addClickHandler(handler);
	var panel = app.getElementById("mainpanel");
	panel.add(btn);
	return app;
}

function newbtnclick(e){
	Logger.log(e); // ダミーの処理
	return app;
}

※関連コンテンツ

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