Tab Panel
In this example, I have created three tabs using the tabPanel in UiApp.
Reference Page:
http://code.google.com/googleapps/appsscript/class_tabpanel.html
http://code.google.com/googleapps/appsscript/class_label.html
Example demo:
Example Code:
function doGet() {
//Create an application
var app = UiApp.createApplication();
//Let us write some content which will be used later inside tabs
var content1 = 'This is the area for tab1 content';
var content2 = 'You are on tab 2 Now';
var content3 = 'This is third tab';
//Create Tabpanel
var tabPanel = app.createTabPanel();
//Create Vertical panel which will reside inside tabs
var verticalPanel1 = app.createVerticalPanel().setWidth('400').setHeight('200');
var verticalPanel2 = app.createVerticalPanel().setWidth('400').setHeight('200');
var verticalPanel3 = app.createVerticalPanel().setWidth('400').setHeight('200');
//Add the contents to vertical panel
verticalPanel1.add(app.createLabel(content1));
verticalPanel2.add(app.createLabel(content2));
verticalPanel3.add(app.createLabel(content3));
//Add all the vertical panels to the tabpanel
tabPanel.add(verticalPanel1, 'Tab1')
.add(verticalPanel2, 'Tab2')
.add(verticalPanel3, 'Tab3');
//Select your default tab , Index 0 mean first tab, index 2 = second tab and so on
tabPanel.selectTab(1);
//Add the tabPanel to the application
app.add(tabPanel);
return app;
}