主なGUIコンポーネントの利用 (2/6)
作成:2011-07-06 07:58
更新:2011-11-04 16:21
更新:2011-11-04 16:21
■ListBoxについて
複数の項目を選択するインターフェイスとしてラジオボタンと共に用いられるのが「セレクトメニュー」でしょう。HTMLでは<select>タグを使って作成される、あれですね。
あのインターフェイスは、GUI ビルダーでは「Lis tBox」というコンポーネントとして用意されています。これはGoogle Apps Scriptでは「ListBox」というオブジェクトになります。
実際にList Boxを使ってみると、GUI ビルダーではまだ項目の設定などの部分が出来上がっていないようです。用意されているプロパティの項目を見ても、そうしたものが見当たりません。まぁ、例によっていずれバージョンアップして対応されるのでしょうが……今すぐ利用するなら、スクリプトで作成するのが一番でしょう。そのためのメソッド類を整理しておきましょう。
○オブジェクトの作成
○名前の設定
○表示行数の設定
○項目の追加
○項目の削除
○全項目のクリア
リストの項目は、addItemでテキストを追加することでどんどん増やすことができます。また表示される項目数はsetVisibleItemCountで設定します。<select>タグと同様、これを「1」に設定すれば、ポップアップメニューのような形になります。注意したいのは、createListBox(true)でオブジェクトを作成すると、setVisibleItemCount(1)でポップアップメニューにはできない、という点でしょう。
下に、簡単な利用例のスクリプトを掲載しておきました。ごく簡単にリストを作成できることがわかるでしょう。また、選択された項目を取得したい場合は、addChangeHandlerでServerChangeHandlerを追加します。これで「e.parameter.名前」として引数から値をとり出します。
複数項目を選択可にした場合、パラメータから得られる値は、選択された項目名がカンマで繋げられた形になります。例えば、"one,two,three"というような形ですね。ここでは、とりあえずパラメータの値をLogger.logしていますので、項目を選択してログを調べてみてください。どのような形で値が得られるのかわかるでしょう。
あのインターフェイスは、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していますので、項目を選択してログを調べてみてください。どのような形で値が得られるのかわかるでしょう。
(by. SYODA-Tuyano.)
※プログラムリストが表示されない場合
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プログラミング入門」に戻る