Question

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

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

好的，这是我得到的：TestPresenter.java，TestView.java＆amp; TestView.ui.xml

-In 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和amp; TestView.ui.xml

-TestPresenter.java（有2个按钮 - myBut 1＆amp; 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哈希。这意味着在最终的编译版本中，而不是＆＃34; .myBut＆＃34;你实际上最终会得到像＃34; .XYZXYZ＆＃34;。

这样的东西

这纯粹是GWT uibinder行为，您可以阅读here

特别是对于GWTP，教科书解决方案是：

添加：

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......
    .....
    ...


}

将ui：style更改为：

<ui:style src='myStyle.css' type="fully.qualified.package.name.TestView.MyStyle"/>
在TestPresenter.MyView界面中添加：

MyStyle getStyle();
现在您可以通过以下方式访问TestPresenter中的myBut样式：

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

如何在GWTP中正确使用CSS？

1 个答案: