gwt - 以编程方式将 UiBinder 样式更改为另一个 UiBinder 样式

Question

简单的例子。我在 UiBinder 中声明了 2 种样式:

    <ui:style>
    .success {
        font-size: 13px;
        margin: 15px;
        font-weight: bold;
        display: inline;
        padding: 3px 7px;
        background: #FFF1A8;
    }
    .error {
        font-size: 13px;
        margin: 15px;
        font-weight: bold;
        display: inline;
        padding: 3px 7px;
        background: #990000;
        color: #fff;
    }
</ui:style>

我也有一个标签，其中一个也适用。

    <g:Label ui:field="statusLabel" styleName='{style.success}' />

在 UiBinder 中，有没有一种方法可以以编程方式将样式切换为错误样式？能够在小部件中组织我的 CSS 真是太好了，而且我还没有找到另一种组织它的好方法。

如果我的要求是不可能的，我应该如何在 gwt 中组织我的 CSS，这样我就不会得到一个巨大的样式池，并且也很容易和可用？我想有一种聪明的方法可以为此使用 ClientBundle，但我还没有弄清楚。我还认为能够通过将所有内容保存在 UiBinder 中而不弄乱另一个文件来执行上述方式会更方便。无论哪种方式，请在这失控之前帮助我!

Answer 1

是的，您必须在文件后面的代码中执行此操作。可以在此处找到描述:
Programmatic access to inline Styles .

这是一个例子:

testBinder.ui.xml

<!DOCTYPE ui:UiBinder SYSTEM "http://dl.google.com/gwt/DTD/xhtml.ent">
<ui:UiBinder xmlns:ui="urn:ui:com.google.gwt.uibinder"
    xmlns:g="urn:import:com.google.gwt.user.client.ui">
    <ui:style type='XXXXXXXXXXX.client.testBinder.MyStyle'>
        .enabled {
            color: black;
        }

        .disabled {
            color: gray;
        }
    </ui:style>
    <g:HTMLPanel>
        <g:Button ui:field="button" text="ChangeButton" styleName="{style.enabled}" />

    </g:HTMLPanel>
</ui:UiBinder> 

testBinder.java

package XXXXXXXXXXX.client;

import com.google.gwt.core.client.GWT;
import com.google.gwt.resources.client.CssResource;
import com.google.gwt.uibinder.client.UiBinder;
import com.google.gwt.user.client.ui.Composite;
import com.google.gwt.user.client.ui.Widget;
import com.google.gwt.uibinder.client.UiField;
import com.google.gwt.user.client.ui.Button;
import com.google.gwt.uibinder.client.UiHandler;
import com.google.gwt.event.dom.client.ClickEvent;

public class testBinder extends Composite {

    private static testBinderUiBinder uiBinder = GWT
            .create(testBinderUiBinder.class);
    @UiField
    Button button;

    @UiField
    MyStyle style;

    interface MyStyle extends CssResource {
        String enabled();

        String disabled();
    }

    interface testBinderUiBinder extends UiBinder<Widget, testBinder> {
    }

    public testBinder() {
        initWidget(uiBinder.createAndBindUi(this));
    }

    boolean enabled = true;

    @UiHandler("button")
    void onButtonClick(ClickEvent event) {
        if(enabled){
            enabled = false;
            button.setStyleName(style.disabled());
        }
        else{
            enabled = true;
            button.setStyleName(style.enabled());
        }
    }
}

如果单击此按钮，您可以看到它的样式根据您的 UiBinder 文件中的 CSS 定义发生变化。 (在这种情况下，从黑色切换到灰色的签证诗句)