Как по-разному стилизовать стандартный компонент GWT (TabBar)?

Question

Я использую TabBar и хочу по-разному стилизовать компонент. Итак, один раз этот стиль, другой раз этот стиль. Я думал, что это будет работать, но это не так:

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

И

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();
}

В CSS

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

Но внешность не меняется. Что я делаю не так?

Answer 1

Измени свой CSS. .slickTab .gwt-TabBar .gwt-TabBarItem будет соответствовать TabBarItem внутри TabBar внутри slickTab. Однако, поскольку TabBar - это slickTab, а не внутри , вам нужно сделать что-то вроде этого (note .gwt-TabBar.slickTab):

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

Answer 2

Вы можете использовать это в CSS.

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

Кроме того, поскольку вы добавляете стиль, который подчиняется родительскому стилю. Если это так, вам может потребоваться установить setStylePrimaryName вместо его добавления и переключаться между изменениями стиля с помощью обработчиков.

Answer 3

Линия:

t.addStyleName (MyResources.INSTANCE.css (). SlickTab ());

Изменяет атрибут элемента класса. И INSTANCE.css (). SlickTab () не делает то, что вы думаете. Эти методы без аннотаций возвращают java @ def в css. Чтобы сделать то, что вы хотите добавить в MyCssResource:

@ClassName("slickTab")
String slickTab();

Итак, когда GWT перебирает css вверх ногами, этот метод возвращает класс corect, ej "awEs". Эти ребята из GWT помешаны на том, чтобы сдавливать:)

И помните, Firebug & Chrome-инспектор ваши друзья.

Answer 4

.slickTab .gwt-TabBar .gwt-TabBarItem собирается сопоставить что-то с классом gwt-TabBarItem внутри чего-то с классом gwt-TabBar внутри чего-то с классом slickTab. Я думаю, вы просто хотите .slickTab .gwt-TabBarItem для селектора CSS.

Я настоятельно рекомендую использовать FireBug для проверки структуры HTML, генерируемой GWT, и того, как к ней применяются ваши CSS-селекторы.

Answer 5

Интерфейс MyCssResource должен быть внутри MyResources.

Вот пример:

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();
    }
}

Так я использую все виды ресурсов, и они работают очень хорошо.
Всякий раз, когда вам нужно использовать его много раз в одном и том же методе или функции, вы можете сделать это:

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

Не стесняйтесь спросить, есть ли что-то, что вы не поняли.