Question

在将UiRenderer与GWT 2.5一起使用时，如何更改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实例化此单元格时，我希望根据传递给signSpan函数的值更改要更改的render的类名。我的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来标识父级。但我不想点击生成的单元格。

有没有办法在渲染方法中更改样式？

Answer 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());
}

Answer 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匹配。您必须遵循此命名约定，否则渲染器将抛出错误。

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

2 个答案: