back
主なGUIコンポーネントの利用 (2/6)
■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);
}
| << 前へ | 次へ >> |