Google Apps Script

Class TabPanel

A panel that represents a tabbed set of pages, each of which contains another widget. Its child widgets are shown as the user selects the various tabs associated with them.

Internally, UiApp widgets are built on top of the Google Web Toolkit, and it can sometimes be helpful to look at the GWT documentation directly. You can find the TabPanel documentation here.

Methods

MethodReturn typeBrief description
add(widget)TabPanelAdd a widget to the TabPanel.
add(widget, text)TabPanelAdds a widget to the stack with the given header text.
add(widget, text, asHtml)TabPanelAdds a widget to the stack with the given header text.
add(widget, tabWidget)TabPanelAdd a widget to this TabPanel with the given widget as its tab header.
addSelectionHandler(handler)TabPanelAdd a handler for selection events.
addStyleDependentName(styleName)TabPanelSets the dependent style name of this TabPanel.
addStyleName(styleName)TabPanelAdds a style name to this TabPanel.
getId()StringReturns the id that has been assigned to this object.
getTag()StringGets the text tag of this TabPanel.
getType()StringGets the type of this object.
selectTab(index)TabPanelSelect a tab by index.
setAnimationEnabled(animationEnabled)TabPanelSets whether changing tabs TabPanel is animated.
setHeight(height)TabPanelSets the height of this TabPanel.
setId(id)TabPanelSets the id of this TabPanel.
setPixelSize(width, height)TabPanelSets the size of this TabPanel in pixels.
setSize(width, height)TabPanelSets the size of this TabPanel.
setStyleAttribute(attribute, value)TabPanelSets one of this TabPanel's style attributes to a new value.
setStyleAttributes(attributes)TabPanelSets this TabPanel's style attributes.
setStyleName(styleName)TabPanelSets the style name of this TabPanel.
setStylePrimaryName(styleName)TabPanelSets the primary style name of this TabPanel.
setTag(tag)TabPanelSets the text tag of this TabPanel.
setTitle(title)TabPanelSets the hover title of this TabPanel.
setVisible(visible)TabPanelSets whether this TabPanel is visible.
setWidth(width)TabPanelSets the width of this TabPanel.

Detailed documentation

add(widget)

Add a widget to the TabPanel.

Parameters

NameTypeDescription
widgetWidgetthe widget to add.

Return

TabPanel — the TabPanel itself, useful for chaining.


add(widget, text)

Adds a widget to the stack with the given header text.

Parameters

NameTypeDescription
widgetWidgetthe widget to add.
textStringthe new header text.

Return

TabPanel — the TabPanel itself, useful for chaining.


add(widget, text, asHtml)

Adds a widget to the stack with the given header text.

Parameters

NameTypeDescription
widgetWidgetthe widget to add.
textStringthe new header text.
asHtmlBooleanwhether to treat the text as HTML.

Return

TabPanel — the TabPanel itself, useful for chaining.


add(widget, tabWidget)

Add a widget to this TabPanel with the given widget as its tab header.

Parameters

NameTypeDescription
widgetWidgetthe widget to add.
tabWidgetWidgetthe header widget.

Return

TabPanel — the TabPanel itself, useful for chaining.


addSelectionHandler(handler)

Add a handler for selection events.

Note that you can have multiple handlers for the same event on the same widget. They will be called in the order that they were added to the widget, although ServerHandlers may appear to happen simultaneously.

The handler passes back some information to the server about what happened. This information can be accessed as follows:

 
function doGet() {
   var app = UiApp.createApplication();
   var item1 = app.createTreeItem("item1");
   item1.addItem(app.createTreeItem("item2"));
   var tree = app.createTree();
   tree.addItem(item1);
   var handler = app.createServerHandler("handlerFunction");
   tree.addSelectionHandler(handler)
   app.add(tree);
   return app;
 }

 function handlerFunction(eventInfo) {
   var parameter = eventInfo.parameter;
   // the type of event, in this case "selection".
   var eventType = parameter.eventType;
   // the id of the widget that fired this event.
   var source = parameter.source;
 }
 
In addition, the values of certain widgets can be sent up with the event as well as "callback elements." See the documentation of ServerHandler for more information.

Parameters

NameTypeDescription
handlerHandlerthe handler to execute when the event occurs. This can be a ClientHandler or a ServerHandler.

Return

TabPanel — the TabPanel itself, useful for chaining.


addStyleDependentName(styleName)

Sets the dependent style name of this TabPanel.

This is useful for debugging but is otherwise of minimal use since there is no way to use custom stylesheets in UiApp.

Parameters

NameTypeDescription
styleNameStringthe new style name.

Return

TabPanel — the TabPanel itself, useful for chaining.


addStyleName(styleName)

Adds a style name to this TabPanel.

This is useful for debugging but is otherwise of minimal use since there is no way to use custom stylesheets in UiApp.

Parameters

NameTypeDescription
styleNameStringthe new style name.

Return

TabPanel — the TabPanel itself, useful for chaining.


getId()

Returns the id that has been assigned to this object.

This can be used in conjunction with app.getElementById() to retrieve a reference to this object.

Return

String — the id that has been assigned to this object


getTag()

Gets the text tag of this TabPanel.

Return

String — the text tag.


getType()

Gets the type of this object.

Return

String — the object type


selectTab(index)

Select a tab by index.

Parameters

NameTypeDescription
indexIntegerthe index of the tab to select.

Return

TabPanel — the TabPanel itself, useful for chaining.


setAnimationEnabled(animationEnabled)

Sets whether changing tabs TabPanel is animated.

Parameters

NameTypeDescription
animationEnabledBooleanwhether to animate changing tabs.

Return

TabPanel — the TabPanel itself, useful for chaining.


setHeight(height)

Sets the height of this TabPanel.

Parameters

NameTypeDescription
heightStringthe new height in any CSS unit such as "10px" or "50%".

Return

TabPanel — the TabPanel itself, useful for chaining.


setId(id)

Sets the id of this TabPanel.

Parameters

NameTypeDescription
idStringthe new id, which can be used to retrieve the TabPanel from app.getElementById(id).

Return

TabPanel — the TabPanel itself, useful for chaining.


setPixelSize(width, height)

Sets the size of this TabPanel in pixels.

Parameters

NameTypeDescription
widthIntegerthe new width in pixels.
heightIntegerthe new height in pixels.

Return

TabPanel — the TabPanel itself, useful for chaining.


setSize(width, height)

Sets the size of this TabPanel.

Parameters

NameTypeDescription
widthStringthe new width in any CSS unit such as "10px" or "50%".
heightStringthe new height in any CSS unit such as "10px" or "50%".

Return

TabPanel — the TabPanel itself, useful for chaining.


setStyleAttribute(attribute, value)

Sets one of this TabPanel's style attributes to a new value. Valid attributes are listed here; the values for each attribute are the same as those available in CSS style sheets.

 
// Change the widget's background to black and text color to green.
 widget.setStyleAttribute("background", "black")
     .setStyleAttribute("color", "green");
 

Parameters

NameTypeDescription
attributeStringthe CSS attribute, in camel-case ("fontSize", not "font-size"), as listed here
valueStringthe CSS value

Return

TabPanel — the TabPanel itself, useful for chaining.


setStyleAttributes(attributes)

Sets this TabPanel's style attributes. This is a convenience method that is equivalent to calling setStyleAttribute with every key/value pair in the attributes object. Valid attributes are listed here; the values for each attribute are the same as those available in CSS style sheets.

 
// Change the widget's background to black and text color to green.
 widget.setStyleAttributes({background: "black", color: "green"});
 

Parameters

NameTypeDescription
attributesObjectan object of key/value pairs for the CSS attributes and values to set; valid attributes are listed here

Return

TabPanel — the TabPanel itself, useful for chaining.


setStyleName(styleName)

Sets the style name of this TabPanel.

This is useful for debugging but is otherwise of minimal use since there is no way to use custom stylesheets in UiApp.

Parameters

NameTypeDescription
styleNameStringthe new style name.

Return

TabPanel — the TabPanel itself, useful for chaining.


setStylePrimaryName(styleName)

Sets the primary style name of this TabPanel.

This is useful for debugging but is otherwise of minimal use since there is no way to use custom stylesheets in UiApp.

Parameters

NameTypeDescription
styleNameStringthe new style name.

Return

TabPanel — the TabPanel itself, useful for chaining.


setTag(tag)

Sets the text tag of this TabPanel.

Parameters

NameTypeDescription
tagStringthe new text tag, which can be anything you wish to store with the widget.

Return

TabPanel — the TabPanel itself, useful for chaining.


setTitle(title)

Sets the hover title of this TabPanel.

Not all browsers will show this.

Parameters

NameTypeDescription
titleStringthe hover title.

Return

TabPanel — the TabPanel itself, useful for chaining.


setVisible(visible)

Sets whether this TabPanel is visible.

Parameters

NameTypeDescription
visibleBooleanwhether this TabPanel should be visible or not.

Return

TabPanel — the TabPanel itself, useful for chaining.


setWidth(width)

Sets the width of this TabPanel.

Parameters

NameTypeDescription
widthStringthe new width in any CSS unit such as "10px" or "50%".

Return

TabPanel — the TabPanel itself, useful for chaining.

Deprecated methods


Authentication required

You need to be signed in with Google+ to do that.

Signing you in...

Google Developers needs your permission to do that.