【GAS】GUI関連

Google Apps Script

GUIビルダーなるものがあるので、
ぉ、VBと一緒か？と思ったが甘かった。。。
まだまだ発展途上であり、スクリプトから作成した方が良さそう。

GUIビルダー
スクリプトエディタ⇒[ファイル]⇒[ユーザーインターフェースを構築]
スクリプトでしか実現できない(GUIビルダーでは不可な)機能も存在する為、
GUIの簡易実装版と考えるべき。

// UiApp・・・GUIアプリケーション本体。
// UiInstanceを生成
var objApp = UiApp.createApplication();
// GUI読込
var gui = objApp.loadComponent("GUI名");
// UiInstanceに組込
objApp.add(gui);
// スプレッドシート上に表示
objSht.show(objApp);

// 現在使用しているUiInstanceを取得
var objApp = UiApp.getActiveApplication();
objApp.close();
return objApp;    // -- return しないと閉じられない

※GUIコンポーネントには値を取り出すメソッドが無い。
　　⇒サーバサイドスクリプトだから？
　　⇒どこか別の場所に保存して、使用するときに取り出す。
　　　　⇒値の保管場所として、共有されている為「シート」はNG。
　　　　⇒スクリプトのプロパティを利用するという方法もある。

スクリプトプロパティ
スクリプトエディタ⇒[ファイル]⇒[プロパティ]
　　情報・・・スクリプト名、説明、最終更新日などの情報が保管されている。
　　UserProperties・・・ユーザごとの情報を保管するのに利用される。
　　　　　　　　　　　　スクリプト内から生成することも可能。
　　ProjectProperties・・・スクリプトに情報を保管するためのもの。

// ユーザープロパティの利用
val = UserProperties.getProperty("キー");
UserProperties.setProperty("キー", "値");
// スクリプト・プロパティの利用
val = ScriptProperties.getProperty("キー");
ScriptProperties.setProperty("キー", "値");

UiInstance
結局このやり方じゃないと思ったような動きを実装できなかった。
フォーム使ってメール送信する位であれば不要だけど。

// UiInstanceでGUIコンポーネントのオブジェクトを取得し、値を設定
objapp.getElementById("キー").setText("値");

function onChangeTextBox1(e){    // -- テキストボックスが変更された場合
　　var txt = e.parameter[e.parameter.source];
　　　　// -- イベントが発生したコンポーネント名が「e.parameter.source」として渡される
　　　　// -- コンポーネントの値が「e.parameter[コンポーネント名]」として渡される
　　// -- ユーザプロパティ'input_text'に値を設定
　　UserProperties.setProperty('input_text',txt);
}

function onClickButton(e){
　　var app = UiApp.getActiveApplication();
　　// -- ユーザプロパティ'input_text'から値を取得
　　var txt = UserProperties.getProperty('input_text');
　　if (txt != ''){
　　　　// -- ラベルに値を設定
　　　　app.getElementById("Label1").setText(txt);
　　} else {
　　　　app.close();
　　}
　　return app;
}

パネル
Form Panel・・・フォームを設置する為の部品。
　　　　　　　　入力用コンポーネントを配置することでフォームとしてサーバ送信可能。
Flow Panel・・・部品を横に並べる。自動的に改行。
　　　　　　　　※ラベルやテキストボックスは横に配置不可？？？
Vertical Panel・・・部品を縦に並べる。
Absolute Panel・・・座標指定して配置。

グリッド
ラベル、テキストの横配置も可。
位置インデックスは0から。
↑のパネルでラベルとテキストを横並びにできなかったので、苦肉の策。
他に良いやり方がありそう。。。

// グリッドサイズ指定(例では 3x2)
var mygrid = myapp.createGrid(3, 2);
// setWidgetメソッドによりコンポーネント設定
mygrid.setWidget(0, 0, myapp.createLabel('Name:'));
mygrid.setWidget(0, 1, myapp.createTextBox());
mygrid.setWidget(1, 0, myapp.createLabel('Age:'));
mygrid.setWidget(1, 1, myapp.createTextBox());
mygrid.setWidget(2, 0, myapp.createLabel('City'));
mygrid.setWidget(2, 1, myapp.createTextBox());