使用 UiRenderer 更改 GWT Cell 的 span 元素样式答案

【问题标题】：Change span element style for GWT Cell using UiRenderer使用 UiRenderer 更改 GWT Cell 的 span 元素样式
【发布时间】：2013-05-04 05:44:13
【问题描述】：

当使用带有 GWT 2.5 的 UiRenderer 时，如何更改 Span HTML 元素的样式？我已经设置了一个要在 CellTable 中使用的简单单元格。 ui.xml 看起来像这样：

<!DOCTYPE ui:UiBinder SYSTEM "http://dl.google.com/gwt/DTD/xhtml.ent">
<ui:UiBinder xmlns:ui="urn:ui:com.google.gwt.uibinder">
<ui:with field='stkval' type='java.lang.String'/>
<ui:with field='stkchg' type='java.lang.String'/>
<ui:with field='res' type='com.mycompanyclient.client.Enres'/>

<div id="parent">
    <span><ui:text from='{stkval}'/></span>.
    [<span class="{res.newstyle.positive}" ui:field="signSpan">
        <ui:text from='{stkchg}'/>
    </span>]
</div>
</ui:UiBinder>

现在，当 CellTable 实例化此单元格时，我希望根据传递给 render 函数的值更改 signSpan 的类名。我的 java 代码看起来像这样：

public class IndCell extends AbstractCell<QuoteProxy>  {

@UiField
SpanElement signSpan;
@UiField(provided=true)
Enres res = Enres.INSTANCE;

interface MyUiRenderer extends UiRenderer {
    SpanElement getSignSpan(Element parent);
    void render(SafeHtmlBuilder sb, String stkval,String stkchg);
}
private static MyUiRenderer renderer = GWT.create(MyUiRenderer.class);

public IndCell() {
    res.newstyle().ensureInjected();
}


@Override
public void render(com.google.gwt.cell.client.Cell.Context context,
        QuoteProxy value, SafeHtmlBuilder sb) {
            if (value.getChangeSign().contentequals('d')) {
    renderer.getSignSpan(/* ?? */).removeClassName(res.newstyle().negative());
            renderer.getSignSpan(/* ?? */).addClassName(res.newstyle().positive());
            }
    renderer.render(sb, value.getAmount(),value.getChange());
}

如果我尝试直接使用 UiField，它会设置为 Null。这是有道理的，因为我没有像调用 UiBinder 那样调用 createandbindui 函数。 renderer.getSignSpan 看起来很有希望，但我不知道要传递给父母什么。我能找到的所有示例都使用event 来识别父级。但我不想点击生成的单元格。

有没有办法在 render 方法中改变样式？

【问题讨论】：

标签： gwt uibinder

【解决方案1】：

由于元素的class 不是常量，您需要将其作为参数传递给render 方法，因此单元格的render 显示为：

public void render(Cell.Context context, QuoteProxy value, SafeHtmlBuilder sb) {
  renderer.render(sb, value.getAmount(), value.getChange(),
      value.getChangeSign().contentequals('d') ? res.newstyle.positive() : res.newstyle.negative());
}

【讨论】：

没有意识到类字段可以得到一个change值。在 ui.xml 我添加了 <span class={chgclass}...> 并且它起作用了。看起来它不需要 ui:text 那里...感谢您的帮助。

【解决方案2】：

我只是想为那些仍在为此苦苦挣扎的人提供一个示例解决方案。如果您想在渲染之前设置样式，例如将正值渲染为“绿色”，将负值渲染为“红色”，您可以执行以下操作：

这将是您的单元类：

import com.google.gwt.cell.client.AbstractCell;
import com.google.gwt.core.client.GWT;
import com.google.gwt.safehtml.shared.SafeHtmlBuilder;
import com.google.gwt.uibinder.client.UiRenderer;

public class ExpenseInfoCell extends AbstractCell<YourClassProxy> {

    interface ExpenseInfoCellUiRenderer extends UiRenderer {
        void render(SafeHtmlBuilder sb, String cost, String newStyle);

        ValueStyle getCostStyle();
    }

    private static ExpenseInfoCellUiRenderer renderer = GWT
            .create(ExpenseInfoCellUiRenderer.class);

    @Override
    public void render(Context context, YourClassProxy value, SafeHtmlBuilder sb) {

        String coloredStyle = (value.getCost() < 0) ? renderer.getCostStyle()
                .red() : renderer.getCostStyle().green();

        renderer.render(sb, value.getCost()),
                coloredStyle);
    }

}

这将是随附的 UiBinder xml 文件

<!DOCTYPE ui:UiBinder SYSTEM "http://dl.google.com/gwt/DTD/xhtml.ent">
<ui:UiBinder xmlns:ui="urn:ui:com.google.gwt.uibinder">
    <ui:style field="costStyle" type="com.myproject.client.tables.MyValueStyle">
        .red {
            color: red;
        }

        .green {
            color: green;
        }
    </ui:style>

    <ui:with type="java.lang.String" field="cost" />
    <ui:with type="java.lang.String" field="newStyle" />
    <div>
        <span class='{newStyle}'>
            <ui:text from='{cost}' />
        </span>
    </div>
</ui:UiBinder>

另外，请注意 field="costStyle" 与“getCostStyle”类中的 getter 匹配。您必须遵循此命名约定，否则渲染器将抛出错误。

【讨论】：