displaying my asterisk next to label in UiBinder

Question

I asked a question a day ago in regards to and image of an asterisk that I want to place next to a label with text. The image however is displayed twice and I am still struggling to come to grips with this as I am still learning UiBinder and Gwt.

<!DOCTYPE ui:UiBinder SYSTEM "http://dl.google.com/gwt/DTD/xhtml.ent">

<ui:style type="com.equillore.mcmexternal.client.ui.IndicatorLabel.Style">
    @sprite .mySpriteClass {gwt-image: "imageAccessor"; other: property;}
    .required
     {
        gwt-image: 'requiredImage';
        width: 7px;
        height: 14px;
    }
    .labRequired
    {
        color:#303030;
        font-family: Tahoma, Geneva, sans-serif;
        font-size:10pt;
        font-style:normal;
        font-weight:lighter;
    }
</ui:style>
<g:SimplePanel width='90px' height='21px'>
<g:Grid>
    <g:row>
        <g:customCell>
            <g:Label ui:field="label" addStyleNames="{style.labRequired}"/>
        </g:customCell>
        <g:customCell>
            <g:Label addStyleNames="{style.required}"/>
        </g:customCell>
    </g:row>
</g:Grid>
</g:SimplePanel>

If I remove the following line

 <ui:image field="requiredImage" src="images/required_indicator.gif"/>

How can I make changes in my java file so that the image of the asterisk will be displayed correctly This is the java file.

public class IndicatorLabel extends Composite implements HasText {

public interface Binder extends UiBinder<Widget, IndicatorLabel> {
}

private static final Binder binder = GWT.create(Binder.class);

public interface Style extends CssResource {

    String required();
}

@UiField Style style;
@UiField Label label;


public IndicatorLabel() {

    initWidget(binder.createAndBindUi(this));


}

public IndicatorLabel(String text) {

    this();
    setText(text);
}

Kind regards

Daniel Langdon Daniel Langdon · Accepted Answer · 2012-12-06T21:03:22

If you just want to show a non-clickable image a better answer would be to use just CSS to style a Label:

@sprite .requiredField 
{
  gwt-image: 'required';
  background-repeat: no-repeat;
  height: 12px;
  width: 150px;
  background-position: right top;
  padding-right:10px;
}

But in any case, you should define the image differently on the ResourceBundle, like this:

@Source("save.png")
public ImageResource required();

You don't even need to use UIBinder for this, but if your objective is to learn it, I would recommend trying to follow this documentation more closely: https://developers.google.com/web-toolkit/doc/latest/DevGuideUiBinder

displaying my asterisk next to label in UiBinder

1 Answers