|
The You add new tabs to a tab sheet with the // Create an empty tab sheet.
TabSheet tabsheet = new TabSheet();
// Create a component to put in a tab and put
// some content in it.
VerticalLayout myTabRoot = new VerticalLayout();
myTabRoot.addComponent(new Label("Hello, I am a Tab!"));
// Add the component to the tab sheet as a new tab.
tabsheet.addTab(myTabRoot);
// Get the Tab holding the component and set its caption.
tabsheet.getTab(myTabRoot).setCaption("My Tab");
Each tab in a tab sheet is represented as a // Set an attribute using the returned reference
tabsheet.addTab(myTab).setCaption("My Tab");
You can also give the caption and the icon as parameters for the
TabSheet tabsheet = new TabSheet();
// Make the tabsheet shrink to fit the contents.
tabsheet.setSizeUndefined();
tabsheet.addTab(new Label("Contents of the first tab"),
"First Tab",
new ClassResource("images/Mercury_small.png", this));
tabsheet.addTab(new Label("Contents of the second tab"),
"Second Tab",
new ClassResource("images/Venus_small.png", this));
tabsheet.addTab(new Label("Contents of the third tab"),
"Third tab",
new ClassResource("images/Earth_small.png", this));
The
Clicking on a tab selects it. This fires a
The example below demonstrates handling import com.vaadin.ui.*;
import com.vaadin.ui.Button.ClickEvent;
import com.vaadin.ui.TabSheet.SelectedTabChangeEvent;
public class TabSheetExample extends CustomComponent implements
Button.ClickListener, TabSheet.SelectedTabChangeListener {
TabSheet tabsheet = new TabSheet();
Button tab1 = new Button("Push this button");
Label tab2 = new Label("Contents of Second Tab");
Label tab3 = new Label("Contents of Third Tab");
TabSheetExample() {
setCompositionRoot(tabsheet);
// Listen for changes in tab selection.
tabsheet.addListener(this);
// First tab contains a button, for which we
// listen button click events.
tab1.addListener(this);
// This will cause a selectedTabChange() call.
tabsheet.addTab(tab1, "First Tab", null);
// A tab that is initially invisible.
tabsheet.addTab(tab2, "Second Tab", null);
tabsheet.getTab(tab2).setVisible(false);
// A tab that is initially disabled.
tabsheet.addTab(tab3, "Third tab", null);
tabsheet.getTab(tab3).setEnabled(false);
}
public void buttonClick(ClickEvent event) {
// Enable the invisible and disabled tabs.
tabsheet.getTab(tab2).setVisible(true);
tabsheet.getTab(tab3).setEnabled(true);
// Change selection automatically to second tab.
tabsheet.setSelectedTab(tab2);
}
public void selectedTabChange(SelectedTabChangeEvent event) {
// Cast to a TabSheet. This isn't really necessary in
// this example, as we have only one TabSheet component,
// but would be useful if there were multiple TabSheets.
final TabSheet source = (TabSheet) event.getSource();
if (source == tabsheet) {
// If the first tab was selected.
if (source.getSelectedTab() == tab1) {
// The 2. and 3. tabs may not have been set yet.
if (tabsheet.getTab(tab2) != null
&& tabsheet.getTab(tab3) != null) {
tabsheet.getTab(tab2).setVisible(false);
tabsheet.getTab(tab3).setEnabled(false);
}
}
}
}
}
.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
The tabs area at the top can be styled with
The style
The content area where the tab contents are shown can be styled with
|
Table of Contents
|