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

PopupPanelは、何かの表示をポップアップして表示するのに用いるためのものです。これは、非常に単純な四角いパネルです。単に輪郭が表示されるだけのものです。この中に表示するコンポーネントなどを用意してやります。そして、必要に応じて画面に呼び出したり隠したりするわけですね。

「簡単なダイアログなら、BrowserオブジェクトのmsgBoxやinputBoxで十分」と思った人。では、実際にサービスでBrowserオブジェクトを利用してみましょう。エラーになり使えないはずです。

Browserオブジェクトは、「Google Appsに用意されているダイアログウインドウをGoogle Apps Script内から利用するためのオブジェクト」なのです。従って、利用はGoogle Appsのアプリケーション内に限られます。それ以外の場所では機能しないのです。従って、別のインターフェイスを考える必要があります。

PopupPanelの使い方は、実際の利用例を見ればすぐに分かるでしょう。下のリスト欄に簡単なサンプルコードを挙げておきます。ここではボタンを１つ用意しておき、クリックすると画面にPopupPanelを表示させています（単純なサンプルなので閉じる処理は用意してません）。

ここでは、まずオブジェクトを作成した後、各種のプロパティ類を設定しています。ざっと以下に処理を整理しておきましょう。

○オブジェクトを生成する

var pp = app.createPopupPanel();

○IDを設定する

app.setId("popup");

○位置のposition属性をabsoluteにする

app.setStyleAttribute("position", "absolute");

○表示するLabelを作って組み込む

app.add(app.createLabel("Hello"));

○縦横幅の調整

app.setWidth("200px");
app.setHeight("50px");

○表示位置の調整

app.setStyleAttribute("top", "100px");
app.setStyleAttribute("left", "100px");

○非表示にする

app.setVisible(false);

○パネルを組み込む

app.add(pp);

ポップアップして表示されるパネルを利用する場合、その表示がHTMLのタグとして順番に並んで組み込まれた状態だと困ってしまいます。サービスはWebで表示されるもので、最終的にはHTMLのコードとしてブラウザに送られます。つまり、GUIコンポーネントは、すべて最終的にはHTMLのタグになっているのですね。

ということは、出力されるタグの属性などをあらかじめ設定しておくことで、表示される状態を操作することができる、というわけです。それを行っているのが「setStyleAttribute」です。これは以下のように呼び出します。

《コンポーネント》.setStyleAttribute( 属性名 , 値 );

PopupPanelを、他のコンポーネントとは切り離して自由な位置に表示させるためには、position属性を"abslute"などに変更しておく必要があります。それを行っているのが、app.setStyleAttribute("position", "absolute");です。また表示される位置の調整も、setStyleAttributeでtopとleft属性を設定することで行っています。

ただし、なんでもすべてsetStyleAttributeでいいわけではありません。例えば、縦横の大きさ調整は、setStyleAttributeではなく、setWidth/setHeightという専用のメソッドを呼び出して行います。

こうしてすべての作業ができたら、setVisible(false)で非表示にしておきます。そしてボタンをクリックしたら、getElementByIdでPopupPanelのオブジェクトを取得し、setVisible(true)で画面に表示すればいい、というわけです。

(by. SYODA-Tuyano.)

※リストが表示されない場合

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

function doGet(e){
	Logger.log(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);
	
	// PopupPanel
	var pp = app.createPopupPanel();
	pp.setId("popup");
	pp.setStyleAttribute("position", "absolute");
	pp.add(app.createLabel("Hello"));
	pp.setWidth("200px");
	pp.setHeight("50px");
	pp.setStyleAttribute("top", "100px");
	pp.setStyleAttribute("left", "100px");
	pp.setVisible(false);
	app.add(pp);
	
	// Button
	var btn = app.createButton("OK");
	var handler = app.createServerClickHandler("onClick");
	btn.addClickHandler(handler);
	panel.add(btn);
		
	return app;
}

function onClick(e){
	var app = UiApp.getActiveApplication();
	var pp = app.getElementById("popup");
	pp.setVisible(true);
	return app;
}