たくさんの表示項目があるとき、それぞれをジャンル分けして整理し表示することができれば、ずいぶんとすっきり使いやすくなります。こうした目的で用意されているコンテナの中で、もっとも広く使われているのは「タブパネル」でしょう。タブをクリックして表示を切り替える、あれですね。

タブパネルは、「TabPanel」というオブジェクトとして用意されています。このTabPanelは、コンポーネントを自身に組み込んでいくことで、それらをタブによって切り替え表示するインターフェイスを作成します。これも、実際のサンプルを見てもらいながら説明をしましょう。

下のリスト欄のサンプルコードは、２つのタブを持つTabPanelを作成し表示するものです。ここでは「One」「Two」というタブがあり、このタブをクリックして切り替えることで、中に組み込まれている２つの表示（Label）を切り替えることができます。では、処理の流れを見ていきましょう。

var tab = app.createTabPanel();
tab.setId("tab1");
tab.setWidth("200px");
app.add(tab);

まず、TabPanelオブジェクトを作成し、UiInstanceに組み込む部分です。オブジェクト生成は「createTabPanel」というメソッドを呼び出すだけです。そして横幅をsetWidthで調整しておきます。これを行わないと、組み込んだコンポーネントのサイズに自動調整されます。少し大きめのほうが見やすいですからね。ちなみに高さは組み込んだコンポーネントに応じて自動調整されるため、setHeightしても変わりません。

作成したら、後はコンポーネントを組み込むだけです。ここでは２つのタブ用に２つのコンポーネントを組み込んでいます。

var p1 = ……略……
tab.add(p1,"One");
var p2 = ……
tab.add(p2,"Two");

コンポーネントの組み込みは、addで行います。引数に、組み込むコンポーネントと、タブに表示するラベルのテキストを用意します。これで指定の名前のタブにコンポーネントが組み込まれます。

このように、TabPanelでは、組み込んだコンポーネントごとにタブが生成されますので、「１つのタブ＝１つのコンポーネント」という形になります。従って、まずはパネル類をTabPanelに組み込み、実際の表示内容はパネルの中に組み込んでいく、という形になるでしょう。ここでは、それぞれのタブにVerticalPanelを組み込み、表示の内容はその中にaddしています。

tab.selectTab(0);

最後にselectTabでタブを選択しておきます。タブとして組み込んだコンポーネントは、addした順番通りにインデックス番号が割り振られています。このselectTabで番号を指定することで、そのインデックス番号のタブが選択されます。

これでTabPanelの組み込みは終わりですが、サンプルではTabPanel用のイベント処理として、タブをクリックして切り替えた際のイベント処理の組み込み例も記述してあります。タブの切替は、「SelectionHandler」というイベントハンドラを使います。これには、まずServerSelectionHandlerオブジェクトというものを作成し、これをTabPanelにSelectionHandlerとして組み込んでやります。

var handler = app.createServerSelectionHandler("onSelectTab");
tab.addSelectionHandler(handler);

ハンドラオブジェクトの生成は、createServerSelectionHandlerメソッドを使います。引数には、呼び出す関数名を指定します。そして生成したオブジェクトを、TabPanelのaddSelectionHandlerで組み込みます。呼び出されるコールバック関数では、以下のようにして選択されたタブを調べています。

var n = e.parameter.tab1;

ここでは、tab.setId("tab1");というようにしてtab1というIDでTabPanelを組み込んでいますので、コールバック関数のparameterからtab1として値を取り出すことができます。この値は、イベントが発生した（つまりタブが選択された）ときのタブのインデックス番号になります。これを調べることで、どのタブが選択されたかを知ることができますので、得られた値を元に処理を作成していけばよいでしょう。

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);
	
	// tabpanel
	var tab = app.createTabPanel();
	tab.setId("tab1");
	tab.setWidth("200px");
	app.add(tab);
	
	// content
	var p1 = app.createVerticalPanel();
	var label1 = app.createLabel("First Tab");
	label1.setStyleAttribute("font-size", "14pt");
	p1.add(label1);
	tab.add(p1,"One");
	var p2 = app.createVerticalPanel();
	var label2 = app.createLabel("Second Tab");
	label2.setStyleAttribute("font-size", "14pt");
	p2.add(label2);
	tab.add(p2,"Two");
	tab.selectTab(0);
	var handler = app.createServerSelectionHandler("onSelectTab");
	tab.addSelectionHandler(handler);
	
	return app;
}

function onSelectTab(e){
	Logger.log(e);
	var n = e.parameter.tab1; // タブの番号
	var app = UiApp.getActiveApplication();
	return app;
}