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定义看到它的样式发生变化。（在这种情况下，从签到黑色转换为灰色）

以编程方式将UiBinder样式更改为另一种UiBinder样式

1 个答案: