GWT Vertical Tabs like iGoogle

Question

I am using GWT and would like to develop a vertical tab panel like the one in iGoogle.

How can the same be achieved ?

you mean like this? http://advanced-gwt.sourceforge.net/demo/index.html — Chii, Sep 28 '10 at 10:51

score 9 · Answer 1 · answered Jul 11 '11 at 13:23

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.

This looks nicer, I like the CSS approach instead of including one mor e library or manually overriding class — shaman.sir, Jul 26 '11 at 13:47

score 1 · Accepted Answer · answered Sep 28 '10 at 13:21

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.

score 0 · Answer 3 · answered May 08 '16 at 02:08

0

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.

answered May 08 '16 at 02:08

user2618802

57
5

score -1 · Answer 4 · answered Sep 28 '10 at 15:10

-1

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.

answered Sep 28 '10 at 15:10

Arthur Maltson

5,760
4
30
33

Yes but it is a horizontal tab layout panel !! – Anand Sunderraman Sep 29 '10 at 06:06
Sorry about that, I misunderstood the question. It's very easy to build a horizontal tab panel with links and CSS. Using a full third party toolkit (not really GWT at that point) might be overkill. Not sure if you really needed to down vote me :( – Arthur Maltson Sep 29 '10 at 13:27

GWT Vertical Tabs like iGoogle

4 Answers4

Linked