Wie kann man ein Standard-GWT-Komponente (TabBar) anders gestalten? Bitte übersetzen Sie dies und behalten Sie die gleichen HTML-Tags bei (falls vorhanden).

Question

Ich verwende eine TabBar und möchte das Component auf verschiedene Weisen gestalten. Einmal mit diesem, ein anderes Mal mit jenem Stil. Ich dachte, dass dies funktionieren würde, aber das tat es nicht:

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

Und:

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 der CSS

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

Aber das Aussehen ändert sich nicht. Was mache ich falsch?

Answer 1

Sie könnten versuchen, dies in CSS zu erzwingen.

.slickTab .gwt-TabBar .gwt-TabBarItem {
    Hintergrundfarbe: #ff0000 !important;
    Schriftgewicht: normal !important;
}

Außerdem, da Sie einen Stil hinzufügen, der vom übergeordneten Stil abhängt. Wenn dies der Fall ist, müssen Sie möglicherweise 'setStylePrimaryName' statt es hinzuzufügen und zwischen Stiländerungen mit Handlern wechseln.

Answer 2

Ändern Sie Ihr CSS. .slickTab .gwt-TabBar .gwt-TabBarItem passt zu einem TabBarItem innerhalb einer TabBar innerhalb eines slickTab. Da die TabBar jedoch der slickTab ist und nicht darin enthalten ist, müssen Sie etwas wie folgt tun (Beachten Sie .gwt-TabBar.slickTab):

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

Answer 3

Die Schnittstelle MyCssResource muss innerhalb von MyResources sein.

Hier ist ein Beispiel:

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

So verwende ich alle Arten von Ressourcen und es funktioniert sehr gut.
Immer wenn Sie es mehrmals in derselben Methode oder Funktion verwenden müssen, können Sie dies tun:

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

Zögern Sie nicht zu fragen, wenn Sie etwas nicht verstanden haben.

Answer 4

.slickTab .gwt-TabBar .gwt-TabBarItem entspricht etwas mit der Klasse gwt-TabBarItem innerhalb von etwas mit der Klasse gwt-TabBar innerhalb von etwas mit der Klasse slickTab. Ich denke, du willst nur .slickTab .gwt-TabBarItem für den CSS-Selektor.

Ich empfehle dringend, FireBug zu verwenden, um die von GWT generierte HTML-Struktur zu inspizieren und wie deine CSS-Selektoren darauf angewendet werden.

Answer 5

Die Zeile:

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

ändert das Klassenelementattribut. Und INSTANCE.css().slickTab() tut nicht das, was du denkst. Diese Methoden ohne Annotationen bringen die @def's im css zurück nach Java. Um das zu erreichen, füge zu MyCssResource hinzu:

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

Also, wenn GWT das css durcheinander bringt, wird diese Methode die korrekte Klasse zurückgeben, z.B. "awEs". Diese GWT-Leute sind besessen davon, Dinge zusammenzupressen :)

Und denk daran, Firebug & Chrome-Inspector sind deine Freunde.