error in adding an image as a managed resource(Ui binder)

Question

I am trying to add an image as a managed resource in UiBinder Gwt but get an error along the line of 'Element my only contain one child element'

How can I alter my code to overcome the error.

this is my xml file.

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

 <inherits name="com.google.gwt.resources.Resources" />

<ui:style type = "com.equillore.mcmexternal.client.ui.IndicatorLabel.Style"> 


    @sprite 

    .required
     {

        gwt-image: 'requiredImage';
        font-weight:bold;
        width: 7px;
        height: 14px;
    }
    .labRequired
    {

        color:#2E2E2E;
        font-family: Tahoma, Geneva, sans-serif;
        font-size:8pt;
        font-style:normal;
        font-weight:bold;
    }
</ui:style>


<g:SimplePanel width='120px' 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>

and in my java file I add

public interface myResources extends ClientBundle{
    @Source ("images/required_indicator.gif")
    ImageResource requiredImage();

Answer 1

You cannot mix ui:style and ImageResources defined in an external ClientBundle. To use @sprite in a ui:style, you have to define your ImageResource using a ui:image element.

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