以编程方式将 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

是的，您必须在代码隐藏文件中执行此操作。可以在此处找到说明：
以编程方式访问内联样式。

下面是一个示例：

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 定义而变化。 （在这种情况下，签证诗句从黑色切换到灰色）