如何在 GWTP 中正确使用 CSS？

Question

在互联网上很难找到关于如何在 GWTP 中正确使用 CSS 的完整分步指南。

我正在使用 eclipse 和 GWTP 构建我的应用程序，我想为我的小部件（按钮、文本框...）设置一些简单的 Css 样式。

好的，这是我得到的：TestPresenter.java、TestView.java 和 TestView.ui.xml

-在TestView.ui.xml中：

    <ui:UiBinder .....>
    <ui:style src='myStyle.css' />
    <g:HTMLPanel>
    <g:Button  text="My But 1" addStyleNames="{style.myBut}" ui:field="myBut1"/>
    <g:Button  text="My But 2" ui:field="myBut2"/>
    </g:HTMLPanel>
    </ui:UiBinder>

myStyle.css 位于包含 TestPresenter.java、TestView.java 和 TestView.ui.xml 的同一文件夹中

-TestPresenter.java（有 2 个按钮 - myBut 1 和 myBut 2）：我为 myBut2 添加了“myBut”

    getView().getMyBut2().addStyleName("myBut");

运行后，它显示了 2 个按钮，第一个 myBut1 获得了正确的 CSS，但 myBut2 仍然显示默认的 Css。我改成getView().getMyBut2().setStyleName("myBut");还是不行。

所以我想我可能在这里遗漏了一些课程，这就是为什么 eClipse 无法识别“myBut”CSS 以便它可以申请 myBut2。

那么，如何让 myBut2 在 eClipse 中显示正确的 Css？

Answer 1

原因是，将 CSS 样式表作为源添加到 uibinder 会导致 gwt 编译器为其生成 CssResource 类，因此会将 CSS 类名称混淆为 SHA1 哈希。 这意味着在最终编译的版本中，您实际上最终得到的不是“.myBut”，而是“.XYZXYZ”。

这纯粹是 GWT uibinder 行为，您可以阅读有关 here 的信息

专门针对GWTP，教科书的解决方案是：

1. 在TestView.java中添加：

   public TestView extends SomeGWTPViewClass implements TestPresenter.MyView
   {
       public interface MyStyle extends CssResource
       {
          String myBut();
       }
   
       @UiField MyStyle style;
   
   
       @Override
       MyStyle getStyle()
       {
           return style;
       } 
   
       //rest of code here......
       .....
       ...
   
   
   }
   

2. 在 TestView.ui.xml 中将 ui:style 更改为：

   <ui:style src='myStyle.css' type="fully.qualified.package.name.TestView.MyStyle"/>

3. 在TestPresenter.MyView界面添加：

   MyStyle getStyle();

4. 现在您可以通过以下方式访问 TestPresenter 中的 myBut 样式：

   getView().getMyBut2().addStyleName(getView().getStyle().myBut());