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).
On Thu, Dec 31, 2009 at 3:30 AM, Daniel <[email protected]> wrote:
> 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?
>
> --
>
> You received this message because you are subscribed to the Google Groups
> "Google Web Toolkit" group.
> To post to this group, send email to [email protected].
> To unsubscribe from this group, send email to
> [email protected]<google-web-toolkit%[email protected]>
> .
> 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 [email protected].
To unsubscribe from this group, send email to
[email protected].
For more options, visit this group at
http://groups.google.com/group/google-web-toolkit?hl=en.
