css - 如何在 GWTP 中正确使用 CSS？

Question

很难在 Internet 上找到有关如何在 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());