ui:image, image within an anchor or a button

[Carlos Aguayo]

I'd like to have an image within an anchor or a button tag. I'm using
the UiBinder and I need the anchor or button to be a widget so I can
use their "HasClickHandlers" interface.

I wanted to use an image widget so I can use an ImageResource,
something like this:

<!DOCTYPE ui:UiBinder SYSTEM "http://dl.google.com/gwt/DTD/xhtml.ent">
<ui:UiBinder xmlns:ui='urn:ui:com.google.gwt.uibinder'
xmlns:g='urn:import:com.google.gwt.user.client.ui'>

<ui:with field='res' type='com.test.Test.Resources'/>

<g:HTMLPanel>
<g:Anchor><g:Image resource="{res.add}" /> Add</g:Anchor>
</g:HTMLPanel>

</ui:UiBinder>

But since neither the Anchor nor the Button can take widgets, I get
the "Found widget in an HTML context" error.

I've seen posts mentioning the "ui:image" tag but couldn't find
documentation on how to use it and I couldn't get it to work.

If I do:

<!DOCTYPE ui:UiBinder SYSTEM "http://dl.google.com/gwt/DTD/xhtml.ent">
<ui:UiBinder xmlns:ui='urn:ui:com.google.gwt.uibinder'
xmlns:g='urn:import:com.google.gwt.user.client.ui'>

<g:HTMLPanel>
<ui:image src="add.gif" />
</g:HTMLPanel>

</ui:UiBinder>

It's doing something since it won't compile if "add.gif" is not under
the right package. However when I see it in the browser, the ui:image
didn't get compiled into an image.

Do you know what am I missing here?

Thanks!

--
You received this message because you are subscribed to the Google Groups "Google Web Toolkit" group.
To post to this group, send email to google-we...@googlegroups.com.
To unsubscribe from this group, send email to google-web-tool...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/google-web-toolkit?hl=en.

[Ray]

I got the same situation.
Currently my solution is only has anchor in ***.ui.xml image part was
added using code.
eg:
Image myImage = new Image();
monitorOverImage = new Image();

monitorImage.setUrl(IFMResources.INSTANCE.vehicleMonitor().getURL());

monitorOverImage.setUrl(IFMResources.INSTANCE.vehicleMonitor_over().getURL());
Is there any better solution?

[Thomas Broyer]

On 23 avr, 18:38, Carlos Aguayo <carlos.agu...@gmail.com> wrote:
> I'd like to have an image within an anchor or a button tag. I'm using
> the UiBinder and I need the anchor or button to be a widget so I can
> use their "HasClickHandlers" interface.
>
> I wanted to use an image widget so I can use an ImageResource,
> something like this:
>
> <!DOCTYPE ui:UiBinder SYSTEM "http://dl.google.com/gwt/DTD/xhtml.ent">
> <ui:UiBinder xmlns:ui='urn:ui:com.google.gwt.uibinder'
>              xmlns:g='urn:import:com.google.gwt.user.client.ui'>
>
>   <ui:with field='res' type='com.test.Test.Resources'/>
>
>   <g:HTMLPanel>
>     <g:Anchor><g:Image resource="{res.add}" /> Add</g:Anchor>
>   </g:HTMLPanel>
>
> </ui:UiBinder>
>
> But since neither the Anchor nor the Button can take widgets, I get
> the "Found widget in an HTML context" error.

See also http://code.google.com/p/google-web-toolkit/issues/detail?id=3080

> I've seen posts mentioning the "ui:image" tag but couldn't find
> documentation on how to use it and I couldn't get it to work.

ui:image is just a way of defining an ImageResource within the
implicit UiBinder ClientBundle (the one where your ui:style will be
added). There's also ui:data to define a DataResource. The main goal
of ui:image and ui:data is that they can be referenced in your
ui:style rules (to define a @sprite's gwt-image, or @def'ine a
variable using a url() ).

> If I do:
>
> <!DOCTYPE ui:UiBinder SYSTEM "http://dl.google.com/gwt/DTD/xhtml.ent">
> <ui:UiBinder xmlns:ui='urn:ui:com.google.gwt.uibinder'
>              xmlns:g='urn:import:com.google.gwt.user.client.ui'>
>
>   <g:HTMLPanel>
>     <ui:image src="add.gif" />
>   </g:HTMLPanel>
>
> </ui:UiBinder>
>
> It's doing something since it won't compile if "add.gif" is not under
> the right package. However when I see it in the browser, the ui:image
> didn't get compiled into an image.
>
> Do you know what am I missing here?

How about using a @sprite in an ui:style and use it on the g:Anchor/
g:Button or a child element?