Change span element style for GWT Cell using UiRenderer

Question

How do I change the style for a Span HTML element when using UiRenderer with GWT 2.5? I have setup a simple cell to be used in a CellTable. The ui.xml looks like this :

<!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>

Now when this cell is instantiated by the CellTable, I expect to change the class name of the signSpan to be changed based on the value passed into the render function. My java code looks something like this:

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

If I try to use the UiField directly it is set to Null. That makes sense because I am not calling the createandbindui function like I would for UiBinder. The renderer.getSignSpan looks promising but I dont know what to pass for parent. All the example I could find use a event to identify the parent. But I dont want to click the cell generated.

Is there a way of changing style in the render method?

Answer 1

Because the class of the element is not a constant, you'll want to pass it as an argument to the render method so the cell's render reads:

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

I just thought that I would provide an example solution for those that are still struggling with this. In the case where you want to set the style prior to rendering, like in the case of rendering a positive value as "green" and a negative value as "red", you would do the following:

This would be your cell class:

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

}

And this would be the accompanying UiBinder xml file

<!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> 

Also, note that the field="costStyle" matches the getter in the class "getCostStyle". You must follow this naming convention otherwise the renderer will throw an error.