GWT Vertical Tabs like iGoogle

I am using GWT and would like to develop 开发者_如何转开发a vertical tab panel like the one in iGoogle.

How can the same be achieved ?

I had the same problem and decided not to use third party library just for one small widget. Here is a lightweight solution I ended up using - it is based on tweaking styles.

verticaltabpanel.css:

@external gwt-TabLayoutPanel;
.gwt-TabLayoutPanel>div {
    position: static !important;
}
.gwt-TabLayoutPanel {
    margin-left: 30px;
}
@external gwt-TabLayoutPanelTabs;
.gwt-TabLayoutPanelTabs {
    top: 0 !important;
    width: 140px !important;
}
@external gwt-TabLayoutPanelTab;
.gwt-TabLayoutPanelTab {
    display: block !important;
    margin-top: 2px;
    padding: 8px 6px !important; 
}
@external gwt-TabLayoutPanelContentContainer;
.gwt-TabLayoutPanelContentContainer {
    left: 150px !important;
    top: 0 !important;
}

Add it to resources as usually:

public interface YouAppResources extends ClientBundle {

    @Source("verticaltabpanel.css")
    CssResource verticalTabPanelStyles();
}

Then inject it when your app starts:

resources.verticalTabPanelStyles().ensureInjected();

Define the tab panel in your templates like this:

<ui:style>
    .tabPanel {
        height: 400px;
        width: 800px;
    }
</ui:style>
<g:TabLayoutPanel addStyleNames="{style.tabPanel}" barUnit='PX' barHeight='0'>
</g:TabLayoutPanel>

Note that you have to set height and width and the style should be added not set.

The drawback of this approach is that all the tab panels in your application will be now vertical. If you need to have a horizontal one, you can use old TabPanel (note that it is deprecated). It is fine for my case as I have a number of vertical tab panels in my application and only one horizontal.

you can use ext-js's vertical tabs - see this demo http://iamtotti.com/playground/js/ext-3.1.1/examples/tabs/tabs.html

there is a gwt port of ext-js which you can use : http://code.google.com/p/gwt-ext/

Smart gwt also has a vertical tab implementation (its different to gwt-ext's) - http://www.smartclient.com/smartgwt/showcase and search for orientation on the left menu.

thx for your answer, megas.

One extension to make it possible to use some TabLayoutPanels with horizontal (original) and some with vertical (new) layout: one could add ids (i.e. #myVertTab) to the css selectors.

I think what you're looking for is the TabLayoutPanel (scroll down a bit). It works great and it's a vanilla GWT widget, no third party libraries required.