How to style a standard GWT component (TabBar) differently?

Question

I am using a TabBar and I want to style the component in different ways. So one time this style, another time that style. I thought this will work but it didn't:

TabBar t = new TabBar();
t.addTab( "1" );
t.addTab( "2" );
t.addStyleName( MyResources.INSTANCE.css().slickTab() );

And:

public interface MyResources extends ClientBundle
{
 public static final MyResources INSTANCE = GWT.create(MyResources.class);
 @Source("style.css") MyCssResource css();
}
public interface MyCssResource extends CssResource
{
 String slickTab();
}

In the CSS

.slickTab .gwt-TabBar .gwt-TabBarItem {
  background-color: #ff0000;
  font-weight: normal;
}

But the appearance don't change. What I am doing wrong?

Answer 1

The interface MyCssResource need to be inside MyResources.

Here's an exemple :

public interface Resources extends ClientBundle
{
    public static final Resources INSTANCE = 
        GWT.create( Resources.class );

    /***********************************************
     *                    Home
     ***********************************************/
    @Source( "./css/home.css" )
    public HomeCss getHomeCss();

    public interface HomeCss extends CssResource
    {
         String loginBtn();
    }

    /***********************************************
     *                Another Page
     ***********************************************/
    @Source( "./css/AnotherPage.css" )
    public AnotherPage getAnotherPageCss();

    public interface AnotherPage extends CssResource
    {
         String title();
    }
}

This is the way I use all kind of Resource and it work really well.
Whenever you need to use it many time in the same method or function, you can do this :

HomeCss homeStyle = Resource.INSTANCE.getHomeCss();
yourPanel.setStyleName( homeStyle.yourPanel() );

Don't hesitate to ask if there's anything you didn't understand.

Answer 2

You might be able to force this in CSS.

.slickTab .gwt-TabBar .gwt-TabBarItem {
    background-color: #ff0000 !important;
    font-weight: normal !important;
}

Also, since you're adding a style which is subject to the parent style. If this is the case, you might need to set 'setStylePrimaryName' instead of adding it and toggle between style changes with handlers.