mirror of
https://github.com/vaadin/framework.git
synced 2024-08-05 08:17:31 +02:00
22a6a37aa4
* Remove class names from documentation headers
240 lines
7.6 KiB
Plaintext
240 lines
7.6 KiB
Plaintext
---
|
|
title: TabSheet
|
|
order: 9
|
|
layout: page
|
|
---
|
|
|
|
[[layout.tabsheet]]
|
|
= TabSheet
|
|
|
|
ifdef::web[]
|
|
[.sampler]
|
|
image:{live-demo-image}[alt="Live Demo", link="http://demo.vaadin.com/sampler/#ui/structure/tab-sheet"]
|
|
endif::web[]
|
|
|
|
The [classname]#TabSheet# is a multicomponent container that allows switching
|
|
between the components with "tabs". The tabs are organized as a tab bar at the
|
|
top of the tab sheet. Clicking on a tab opens its contained component in the
|
|
main display area of the layout. If there are more tabs than fit in the tab bar,
|
|
navigation buttons will appear.
|
|
|
|
[[figure.tabsheet.example1]]
|
|
.A Simple TabSheet Layout
|
|
image::img/tabsheet-example1.png[width=50%, scaledwidth=70%]
|
|
|
|
[[layout.tabsheet.adding]]
|
|
== Adding Tabs
|
|
|
|
You add new tabs to a tab sheet with the [methodname]#addTab()# method. The
|
|
simple version of the method takes as its parameter the root component of the
|
|
tab. You can use the root component to retrieve its corresponding
|
|
[classname]#Tab# object. Typically, you put a layout component as the root
|
|
component.
|
|
|
|
You can also give the caption and the icon as parameters for the
|
|
[methodname]#addTab()# method. The following example demonstrates the creation
|
|
of a simple tab sheet, where each tab shows a different [classname]#Label#
|
|
component. The tabs have an icon, which are (in this example) loaded as Java
|
|
class loader resources from the application.
|
|
|
|
|
|
[source, java]
|
|
----
|
|
TabSheet tabsheet = new TabSheet();
|
|
layout.addComponent(tabsheet);
|
|
|
|
// Create the first tab
|
|
VerticalLayout tab1 = new VerticalLayout();
|
|
tab1.addComponent(new Image(null,
|
|
new ThemeResource("img/planets/Mercury.jpg")));
|
|
tabsheet.addTab(tab1, "Mercury",
|
|
new ThemeResource("img/planets/Mercury_symbol.png"));
|
|
|
|
// This tab gets its caption from the component caption
|
|
VerticalLayout tab2 = new VerticalLayout();
|
|
tab2.addComponent(new Image(null,
|
|
new ThemeResource("img/planets/Venus.jpg")));
|
|
tab2.setCaption("Venus");
|
|
tabsheet.addTab(tab2).setIcon(
|
|
new ThemeResource("img/planets/Venus_symbol.png"));
|
|
...
|
|
----
|
|
|
|
|
|
[[layout.tabsheet.tab]]
|
|
== Tab Objects
|
|
|
|
Each tab in a tab sheet is represented as a [classname]#Tab# object, which
|
|
manages the tab caption, icon, and attributes such as hidden and visible. You
|
|
can set the caption with [methodname]#setCaption()# and the icon with
|
|
[methodname]#setIcon()#. If the component added with [methodname]#addTab()# has
|
|
a caption or icon, it is used as the default for the [classname]#Tab# object.
|
|
However, changing the attributes of the root component later does not affect the
|
|
tab, but you must make the setting through the [classname]#Tab# object. The
|
|
[methodname]#addTab()# returns the new [classname]#Tab# object, so you can
|
|
easily set an attribute using the reference.
|
|
|
|
|
|
[source, java]
|
|
----
|
|
// Set an attribute using the returned reference
|
|
tabsheet.addTab(myTab).setCaption("My Tab");
|
|
----
|
|
|
|
[[layout.tabsheet.tab.disabling]]
|
|
=== Disabling and Hiding Tabs
|
|
|
|
A tab can be disabled by setting [methodname]#setEnabled(false)# for the
|
|
[classname]#Tab# object, thereby disallowing selecting it.
|
|
|
|
A tab can be made invisible by setting [methodname]#setVisible(false)# for the
|
|
[classname]#Tab# object. The [methodname]#hideTabs()# method allows hiding the
|
|
tab bar entirely. This can be useful in tabbed document interfaces (TDI) when
|
|
there is only one tab.
|
|
|
|
|
|
[[layout.tabsheet.events]]
|
|
== Tab Change Events
|
|
|
|
Clicking on a tab selects it. This fires a
|
|
[classname]#TabSheet.SelectedTabChangeEvent#, which you can handle by
|
|
implementing the [classname]#TabSheet.SelectedTabChangeListener# interface. You
|
|
can access the tabsheet of the event with [methodname]#getTabSheet()#, and find
|
|
the new selected tab with [methodname]#getSelectedTab()#.
|
|
|
|
You can programmatically select a tab with [methodname]#setSelectedTab()#, which
|
|
also fires the [classname]#SelectedTabChangeEvent# (beware of recursive events).
|
|
Reselecting the currently selected tab does not fire the event.
|
|
|
|
Notice that when the first tab is added, it is selected and the change event is
|
|
fired, so if you want to catch that, you need to add your listener before adding
|
|
any tabs.
|
|
|
|
[[layout.tabsheet.events.dynamic]]
|
|
=== Creating Tab Content Dynamically
|
|
|
|
In the following example, we create the tabs as empty content layouts, and add
|
|
the tab content dynamically when a tab is selected:
|
|
|
|
|
|
[source, java]
|
|
----
|
|
TabSheet tabsheet = new TabSheet();
|
|
|
|
// Create tab content dynamically when tab is selected
|
|
tabsheet.addSelectedTabChangeListener(
|
|
new TabSheet.SelectedTabChangeListener() {
|
|
public void selectedTabChange(SelectedTabChangeEvent event) {
|
|
// Find the tabsheet
|
|
TabSheet tabsheet = event.getTabSheet();
|
|
|
|
// Find the tab (here we know it's a layout)
|
|
Layout tab = (Layout) tabsheet.getSelectedTab();
|
|
|
|
// Get the tab caption from the tab object
|
|
String caption = tabsheet.getTab(tab).getCaption();
|
|
|
|
// Fill the tab content
|
|
tab.removeAllComponents();
|
|
tab.addComponent(new Image(null,
|
|
new ThemeResource("img/planets/"+caption+".jpg")));
|
|
}
|
|
});
|
|
|
|
// Have some tabs
|
|
String[] tabs = {"Mercury", "Venus", "Earth", "Mars"};
|
|
for (String caption: tabs)
|
|
tabsheet.addTab(new VerticalLayout(), caption,
|
|
new ThemeResource("img/planets/"+caption+"_symbol.png"));
|
|
----
|
|
|
|
|
|
[[layout.tabsheet.closing]]
|
|
== Enabling and Handling Closing Tabs
|
|
|
|
You can enable a close button for individual tabs with the
|
|
[literal]#++closable++# property in the [classname]#TabSheet.Tab# objects.
|
|
|
|
|
|
[source, java]
|
|
----
|
|
// Enable closing the tab
|
|
tabsheet.getTab(tabComponent).setClosable(true);
|
|
----
|
|
|
|
[[figure.layout.tabsheet.closing]]
|
|
.TabSheet with Closable Tabs
|
|
image::img/tabsheet-tabclose.png[width=50%, scaledwidth=70%]
|
|
|
|
[[layout.tabsheet.closing.handling]]
|
|
=== Handling Tab Close Events
|
|
|
|
You can handle closing tabs by implementing a custom
|
|
[classname]#TabSheet.CloseHandler#. The default implementation simply calls
|
|
[methodname]#removeTab()# for the tab to be closed, but you can prevent the
|
|
close by not calling it. This allows, for example, opening a dialog window to
|
|
confirm the close.
|
|
|
|
|
|
[source, java]
|
|
----
|
|
tabsheet.setCloseHandler(new CloseHandler() {
|
|
@Override
|
|
public void onTabClose(TabSheet tabsheet,
|
|
Component tabContent) {
|
|
Tab tab = tabsheet.getTab(tabContent);
|
|
Notification.show("Closing " + tab.getCaption());
|
|
|
|
// We need to close it explicitly in the handler
|
|
tabsheet.removeTab(tab);
|
|
}
|
|
});
|
|
----
|
|
|
|
|
|
|
|
[[layout.tabsheet.css]]
|
|
== CSS Style Rules
|
|
|
|
|
|
[source, css]
|
|
----
|
|
.v-tabsheet {}
|
|
.v-tabsheet-tabs {}
|
|
.v-tabsheet-content {}
|
|
.v-tabsheet-deco {}
|
|
.v-tabsheet-tabcontainer {}
|
|
.v-tabsheet-tabsheetpanel {}
|
|
.v-tabsheet-hidetabs {}
|
|
|
|
.v-tabsheet-scroller {}
|
|
.v-tabsheet-scrollerPrev {}
|
|
.v-tabsheet-scrollerNext {}
|
|
.v-tabsheet-scrollerPrev-disabled{}
|
|
.v-tabsheet-scrollerNext-disabled{}
|
|
|
|
.v-tabsheet-tabitem {}
|
|
.v-tabsheet-tabitem-selected {}
|
|
.v-tabsheet-tabitemcell {}
|
|
.v-tabsheet-tabitemcell-first {}
|
|
|
|
.v-tabsheet-tabs td {}
|
|
.v-tabsheet-spacertd {}
|
|
----
|
|
|
|
The entire tabsheet has the [literal]#++v-tabsheet++# style. A tabsheet consists
|
|
of three main parts: the tabs on the top, the main content pane, and decorations
|
|
around the tabsheet.
|
|
|
|
The tabs area at the top can be styled with [literal]#++v-tabsheet-tabs++#,
|
|
[literal]#++v-tabsheet-tabcontainer++# and [literal]#++v-tabsheet-tabitem*++#.
|
|
|
|
The style [literal]#++v-tabsheet-spacertd++# is used for any empty space after
|
|
the tabs. If the tabsheet has too little space to show all tabs, scroller
|
|
buttons enable browsing the full tab list. These use the styles
|
|
[literal]#++v-tabsheet-scroller*++#.
|
|
|
|
The content area where the tab contents are shown can be styled with
|
|
[literal]#++v-tabsheet-content++#, and the surrounding decoration with
|
|
[literal]#++v-tabsheet-deco++#.
|