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

主なGUIコンポーネントの利用 (2/6)

作成:2011-07-06 07:58
更新:2011-11-04 16:21

■ListBoxについて

複数の項目を選択するインターフェイスとしてラジオボタンと共に用いられるのが「セレクトメニュー」でしょう。HTMLでは<select>タグを使って作成される、あれですね。

あのインターフェイスは、GUI ビルダーでは「Lis tBox」というコンポーネントとして用意されています。これはGoogle Apps Scriptでは「ListBox」というオブジェクトになります。

実際にList Boxを使ってみると、GUI ビルダーではまだ項目の設定などの部分が出来上がっていないようです。用意されているプロパティの項目を見ても、そうしたものが見当たりません。まぁ、例によっていずれバージョンアップして対応されるのでしょうが……今すぐ利用するなら、スクリプトで作成するのが一番でしょう。そのためのメソッド類を整理しておきましょう。

○オブジェクトの作成
変数 =《UiInstance》.createListBox( 真偽値 );
引数の真偽値は、複数項目選択可かどうかを示すものです。trueにすると<select>のmultipleが用意される、と考えるとよいでしょう。

○名前の設定
《ListBox》.setName( テキスト );

○表示行数の設定
《ListBox》.setVisibleItemCount( 整数 );

○項目の追加
《ListBox》.addItem( テキスト );

○項目の削除
《ListBox》.removeItem( インデックス番号 );

○全項目のクリア
《ListBox》.clear();

リストの項目は、addItemでテキストを追加することでどんどん増やすことができます。また表示される項目数はsetVisibleItemCountで設定します。<select>タグと同様、これを「1」に設定すれば、ポップアップメニューのような形になります。注意したいのは、createListBox(true)でオブジェクトを作成すると、setVisibleItemCount(1)でポップアップメニューにはできない、という点でしょう。

下に、簡単な利用例のスクリプトを掲載しておきました。ごく簡単にリストを作成できることがわかるでしょう。また、選択された項目を取得したい場合は、addChangeHandlerでServerChangeHandlerを追加します。これで「e.parameter.名前」として引数から値をとり出します。

複数項目を選択可にした場合、パラメータから得られる値は、選択された項目名がカンマで繋げられた形になります。例えば、"one,two,three"というような形ですね。ここでは、とりあえずパラメータの値をLogger.logしていますので、項目を選択してログを調べてみてください。どのような形で値が得られるのかわかるでしょう。

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

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);
	
	// list
	var list = app.createListBox(true);
	list.setName("list1");
	list.setVisibleItemCount(5);
	list.addItem("Windows");
	list.addItem("Mac OS X");
	list.addItem("Linux");
	list.addItem("Android");
	list.addItem("iOS");
	panel.add(list);
	var handler = app.createServerChangeHandler("OnSelectList");
	list.addChangeHandler(handler);
		
	return app;
}

function OnSelectList(e){
	Logger.log(e.parameter.list1);
}
※関連コンテンツ

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