Roughian Examples Site Map - GWT Examples - Tutorials

TabPanel


Version 1.0 onwards

A Panel With Tabs



Notes


The TabPanel is familiar to people who use computers and to those that don't as well. The GWT widget is a TabBar along the top - basically just a set of buttons - and a DeckPanel below. You click the tab (button) and the corresponding DeckPanel item below is displayed.

With different styling, you can make it look like the separator sections of a card-box, or tuirn the tabs into buttons and have the DeckPanel look like the screen of a TV

If you override the beforeTabSelected method, remember to return TRUE or the tab won't be shown. If you put something (like a label) in the deck, it will be set to 100% whatever you do. If you add a border, margins, etc, then it will exceed the size of the container. Always. To fix, just wrap it in a FlowPanel.


Code


String text1 = "Lorem ipsum dolor sit amet...";
String text2 = "Sed egestas, arcu nec accumsan...";
String text3 = "Proin tristique, elit at blandit...";

TabPanel panel = new TabPanel();
FlowPanel flowpanel;

flowpanel = new FlowPanel();
flowpanel.add(new Label(text1));
panel.add(flowpanel, "One");

flowpanel = new FlowPanel();
flowpanel.add(new Label(text2));
panel.add(flowpanel, "Two");

flowpanel = new FlowPanel();
flowpanel.add(new Label(text3));
panel.add(flowpanel, "Three");

panel.selectTab(0);

panel.setSize("500px", "250px");
panel.addStyleName("table-center");
RootPanel.get("demo").add(panel);