为什么有这么多方法为GWT或GWTP中的Widgets设置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＆amp;使用<g: ScrollPanel />然后什么也没发生。

所以我必须创建public interface MyCssResource extends CssResource，然后将String gwt-ScrollPanel();添加到MyCssResource。但Java eclipse不允许在方法名称中使用连字符-，因此我必须更改为String gwtScrollPanel();。

最后，我必须将addStyleNames添加到<g: ScrollPanel />，前<g: ScrollPanel addStyleNames="{res.css.gwtScrollPanel}" />然后它才会有效。

这也意味着如果我想在.gwt-TabLayoutPanel中使用MyCssResource，那么我需要删除连字符-＆amp;这会导致我的代码不一致。

那么，有人可以向我解释这里发生了什么吗？我很困惑？

Answer 1

你唯一应该知道的是，当你在ui-binders中使用时，GWT会混淆类名。例如：

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

.gwtTabLayoutPanel将在最终注入的样式表中重命名为.AB。

但是大多数GWT小部件都使用未混淆的类名称进行样式化，因此要在ui-binders文件中使用它们，必须将其定义为外部以防止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的类，你必须手动完成。