0

很难在互联网上找到如何在 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？

4

1 回答 1

2

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

这纯粹是 GWT uibinder 行为，您可以在此处阅读

专门针对 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());

于 2013-07-15T21:24:03.300 回答