為什么我為GWT或GWTP中的小部件設置CSS的方法這么多，我很困惑？ 有人可以澄清嗎？

Question

好的，要為Gwt或Gwtp中的小部件設置一個Css，我們可以執行以下操作：

-1. directly from gwt code. Ex: label1.getElement().getStyle().setBackground("blue");
-2. include "ui:style" in UiBinder xml file, but this css only visible to that UiBinder
-3. include "ui:width" in UiBinder xml file, it will visible to all UiBinder
 - and there r many way to set the Css directly to the widget in UiBinder.

讓我感到困惑的是，如果我使用過

<ui:with field='res' type="com.myproj.client.MyResource" /> 

＆如果myResource.css具有.gwt-TabLayoutPanel那么我不需要使用“ addStyleNames”，例如<g:TabLayputPanel /> ，它可以完美地識別CSS。

但是，如果我將.gwt-ScrollPanel添加到myResource.css並使用<g: ScrollPanel />則不會發生任何事情。

所以我必須創建public interface MyCssResource extends CssResource ，然后添加String gwt-ScrollPanel(); public interface MyCssResource extends CssResource 到MyCssResource 。 但是Java eclipse不允許使用連字符-在方法名稱中，因此我必須更改為String gwtScrollPanel(); 。

最后，我必須將addStyleNames添加到<g: ScrollPanel /> ，例如<g: ScrollPanel addStyleNames="{res.css.gwtScrollPanel}" />然后它將起作用。

這也意味着，如果我想在MyCssResource使用.gwt-TabLayoutPanel ，那么我需要刪除連字符- ＆這將導致我的代碼不一致。

因此，有人可以向我解釋這里發生了什么嗎？ 我很困惑？

Answer 1

您應該意識到的唯一想法是，當您在ui-binders中使用時，GWT會混淆類名。 例如：

 <ui:style>
   .gwtTabLayoutPanel {}
 </ui:style>
 <g:TabLayoutPanel addStyleNames="{style.gwtTabLayoutPanel}" />

在最終注入的樣式表中， .gwtTabLayoutPanel將重命名為.AB之類的.AB 。

但是大多數GWT小部件的樣式都使用未混淆的類名，因此要在ui-binders文件中使用它們，必須將其定義為external，以防止GWT編譯器混淆類名：

 <ui:style>
   @external .gwt-TabLayoutPanel;
   .gwt-TabLayoutPanel {}
 </ui:style>
 <g:TabLayoutPanel />

Answer 2

這是因為在創建TabLayoutPanel時，它具有一個名為.gwt-TabLayoutPanel的默認類。 因此，您無需手動將該類添加到TabLayoutPanel中。只需創建一個TabLayoutPanel，您就會看到“ .gwt-TabLayoutPanel”類已經存在。

但是ScrollPanel沒有附帶名為.gwt-ScrollPanel的默認類。 它只是一個div。 嘗試創建ScrollPanel並查看。 最初沒有添加任何類。請參見屏幕截圖

如果要添加一個名為.gwt-ScrollPanel的類，則必須手動進行。