以编程方式将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定义看到它的样式发生变化.(在这种情况下,从签到诗的黑色到灰色)