User Interface‎ > ‎

Tab Panel

In this example, I have created three tabs using the tabPanel in UiApp.

Reference Page:
 
 

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;
}

Comments