Simple UiBinder question about <ui:image resource="....

5,467 views
Skip to first unread message

Daniel

unread,
Dec 31, 2009, 3:30:35 AM12/31/09
to Google Web Toolkit
Here's a valid ui.xml file:

<?xml version="1.0" encoding="UTF-8"?>
<!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:style field="IekyStyle">
.anchorWrapper a {
display: block;
}

@sprite .left {
gwt-image: 'left';
}

@sprite .logo {
gwt-image: 'logo';
background-position: 0 -197px;
height: 197px;
}

div.logo:hover {
background-position: 0 0;
}

@sprite .slogans {
gwt-image: 'animatedSloganArea';
}

@sprite .menuTop {
gwt-image: 'menuTop';
}

@sprite .right {
gwt-image: 'right';
}

@sprite .home {
gwt-image: 'home';
height: 25px;
}

div.home:hover {
background-position: 0 -25px;
}

@sprite .services {
gwt-image: 'services';
height: 25px;
}

div.services:hover {
background-position: 0 -25px;
}

@sprite .about {
gwt-image: 'about';
height: 25px;
}

div.about:hover {
background-position: 0 -25px;
}

@sprite .contact {
gwt-image: 'contact';
height: 25px;
}

div.contact:hover {
background-position: 0 -25px;
}

@sprite .menuBottom {
gwt-image: 'menuBottom';
}

@sprite .floatingBar {
gwt-image: 'floatingBarArea';
}

@sprite .bottom {
gwt-image: 'bottom';
}
</ui:style>

<ui:image field="about" resource="about.png"></ui:image>
<ui:image field="animatedSloganArea"
resource="animatedSloganArea.png"></ui:image>
<ui:image field="bottom" resource="bottom.png"></ui:image>
<ui:image field="contact" resource="contact.png"></ui:image>
<ui:image field="floatingBarArea" resource="floatingBarArea.png"></
ui:image>
<ui:image field="home" resource="home.png"></ui:image>
<ui:image field="left" resource="left.png"></ui:image>
<ui:image field="logo" resource="logo.png"></ui:image>
<ui:image field="menuBottom" resource="menuBottom.png"></ui:image>
<ui:image field="menuTop" resource="menuTop.png"></ui:image>
<ui:image field="right" resource="right.png"></ui:image>
<ui:image field="services" resource="services.png"></ui:image>

<g:HTMLPanel>
<div class="{IekyStyle.anchorWrapper}">
<table border="0" cellspacing="0.0" cellpadding="0">
<tr>
<td rowspan="6"><div class="{IekyStyle.left}" /></td>
<td rowspan="6"><a href="#home"><div
class="{IekyStyle.logo}" /></a></td>
<td colspan="5"><div class="{IekyStyle.slogans}"></div></td>
</tr>
<tr>
<td colspan="4"><div class="{IekyStyle.menuTop}"></div></td>
<td rowspan="5"><div class="{IekyStyle.right}"></div></td>
</tr>
<tr>
<td><a href="#home"><div class="{IekyStyle.home}" /></a></
td>
<td><a href="#business_services"><div
class="{IekyStyle.services}" /></a></td>
<td><a href="#about"><div class="{IekyStyle.about}" /></a></
td>
<td><a href="#contact"><div class="{IekyStyle.contact}" /></
a></td>
</tr>
<tr>
<td colspan="4"><div class="{IekyStyle.menuBottom}"></div></
td>
</tr>
<tr>
<td colspan="4"><div class="{IekyStyle.floatingBar}"></div></
td>
</tr>
<tr>
<td colspan="4"><div class="{IekyStyle.bottom}"></div></td>
</tr>
</table>
</div>
</g:HTMLPanel>

</ui:UiBinder>

It's the lines that read <ui:image> that I'm somewhat bothered by. If
I rename the image to 'animatedSloganArea.png' to
'animated_slogan_area.png', and alter the resource tag the compiler
throws an error. If I move 'animated_slogan_area.png' to a different
directory, like 'resources/images/banner', and update the resource tag
to reflect that change, the compiler blows up there too.

This makes it seem like the resource tag is useless, but I want my
images in a separate directory, and I want them to have underscores,
not this silly java coding convention.

How do I do this?

Chris Ramsdale

unread,
Jan 4, 2010, 5:15:15 PM1/4/10
to google-we...@googlegroups.com
One option would be to use relative paths within the <ui:image> element. For example:

<ui:image field='logo' resource='../resources/my_logo.png'></ui:image>

Another option would be to use <ui:with>, get a hold of the ClientBundle, and reference an image within it. 

public interface Resources extends ClientBundle {
  @Source("com/google/gwt/sandbox/resources/my_logo.png")
  ImageResource logo();
}

<ui:UiBinder>
  ...
  <ui:with field='res' type='com.google.gwt.sandbox.client.Resources'/>
  <ui:image field='logo' resource='{res.logo}'></ui:image>
  ...
</ui:UiBinder>

Underscores within the filename are completely valid (the above examples compile and run w/o issue). 



--

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.



emerix

unread,
Jan 7, 2010, 5:24:07 AM1/7/10
to Google Web Toolkit
Hello,

I tried using relative paths for the resource property :


<ui:image field='logo' resource='../resources/my_logo.png'></ui:image>

but I got the error : No com.google.gwt.resources.client.ClientBundle
$Source annotation and no resources found with default extensions

if I use the src property, everything is ok :
<ui:image field='logo' src='../resources/my_logo.png'></ui:image>

hope someone find this useful :)


However what I really wanted is using your 2nd solution :


<ui:image field='logo' resource='{res.logo}'></ui:image>

but when I load the page I also get the error : No
com.google.gwt.resources.client.ClientBundle$Source annotation and no
resources found with default extensions

am I missing something ?

thanks a lot :)

++emerix

> > google-web-tool...@googlegroups.com<google-web-toolkit%2Bunsubs cr...@googlegroups.com>

Chris Ramsdale

unread,
Jan 12, 2010, 11:24:22 AM1/12/10
to google-we...@googlegroups.com
Do you have the following in your ui.xml file:

<ui:with field='res' type='com.google.gwt.sandbox.client.Resources'/>

...where 'com.google.gwt.sandbox.client.Resources' is replaced with your resources class.


To unsubscribe from this group, send email to google-web-tool...@googlegroups.com.

Nico

unread,
Jan 17, 2010, 12:27:56 PM1/17/10
to Google Web Toolkit
I checked in GWT source code and there is no resource tag for
<ui:image>

Available tags are :

* field
* src
* flipRtl
* repeatStyle

On 12 jan, 17:24, Chris Ramsdale <cramsd...@google.com> wrote:
> Do you have the following in your ui.xml file:
>
> <ui:with field='res' type='com.google.gwt.sandbox.client.Resources'/>
>
> ...where 'com.google.gwt.sandbox.client.Resources' is replaced with your
> resources class.
>

> > > > google-web-tool...@googlegroups.com<google-web-toolkit%2Bunsu...@googlegroups.com><google-web-toolkit%2Bunsubs


> > cr...@googlegroups.com>
> > > > .
> > > > For more options, visit this group at
> > > >http://groups.google.com/group/google-web-toolkit?hl=en.
>
> > --
> > 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<google-web-toolkit%2Bunsu...@googlegroups.com>

Nico

unread,
Jan 17, 2010, 12:05:47 PM1/17/10
to Google Web Toolkit
Thanks emerix for the src="" tips. It helped me a lot.

I have the same problem when I use resource="{res.myImage}" ...

I have declared the <ui:with field ..> targeting the right Resource
class but I always have an error that says : No


com.google.gwt.resources.client.ClientBundle$Source annotation and no
resources found with default extensions

However, I don't know where to find doc about <ui:image> tag. Where
did you find that there was a src or a resource attribute ? directly
in the source code ?
Thanks a lot.

Nicolas

On 12 jan, 17:24, Chris Ramsdale <cramsd...@google.com> wrote:

> Do you have the following in your ui.xml file:
>
> <ui:with field='res' type='com.google.gwt.sandbox.client.Resources'/>
>
> ...where 'com.google.gwt.sandbox.client.Resources' is replaced with your
> resources class.
>

> > > > google-web-tool...@googlegroups.com<google-web-toolkit%2Bunsu...@googlegroups.com><google-web-toolkit%2Bunsubs


> > cr...@googlegroups.com>
> > > > .
> > > > For more options, visit this group at
> > > >http://groups.google.com/group/google-web-toolkit?hl=en.
>
> > --
> > 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<google-web-toolkit%2Bunsu...@googlegroups.com>

emerix

unread,
Jan 18, 2010, 12:12:17 PM1/18/10
to Google Web Toolkit
Hi,

I'm also still looking for some documentation on this <ui:image> tag.
(and the other tags also : ui:data, ui:attribute, ...)

Do anyone know how to put absolute path in the src attribute ?
<ui:image field="myImage" src="com/mycompany/path/to/myImage.png"></
ui:image>
doesn't work :/

Using relative path works but I have to change it every time I copy
the code to another widget :/

++emerix

> > > > > google-web-tool...@googlegroups.com<google-web-toolkit%2Bunsubs cr...@googlegroups.com><google-web-toolkit%2Bunsubs


> > > cr...@googlegroups.com>
> > > > > .
> > > > > For more options, visit this group at
> > > > >http://groups.google.com/group/google-web-toolkit?hl=en.
>
> > > --
> > > 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<google-web-toolkit%2Bunsubs cr...@googlegroups.com>

cpm

unread,
Feb 8, 2010, 4:49:22 AM2/8/10
to Google Web Toolkit
I'm another one finding that the resource="{res.myImage}" just won't
work.

My findings are that I can have just <ui:image field="myImage" /> in
the file along with an @sprite .logo { gwt-image: "myImage"; } and as
long as I have an image file called myImage.png in the same package/
directory it'll work.
You don't seem to need a resource="" or src="" on the ui:image tag at
all - the field attribute is the name of the image it'll look for
unless you add a src attribute. This would explain why emerix was
getting an "No com.google.gwt.resources.client.ClientBundle $Source
annotation and no resources found with default extensions " error
with:

<ui:image field='logo' resource='../resources/my_logo.png'></ui:image>

It's just ignoring the resource attribute and looking for a logo.png
file instead.

The src attribute seems to work like the @Source annotation you would
put in a ResourceBundle, such as:

@Source("myLogo.png")
ImageResource logo();

I would expect this to be the same as:

<ui:image field="logo" src="myLogo.png" />


The same seems to apply then when you try to use <ui:image
field="logo" resource="{res.myLogo}" />
The resource attribute is ignored and its still looking for a logo.png
in the current directory and flagging an error that no Source
annotation has been given.
What you need to do to get the resource atrribute to work, I've no
idea, but it would be a neater solution if it did work.

but I got the error :

Reply all
Reply to author
Forward
Message has been deleted
0 new messages